特別編 WordBench大阪 in 京セラドーム大阪 (JAWS Festa)


JAWSユーザーグループ主催のJAWS FestaにWordBench大阪特別編!が登場。
全体で850名を超える参加者登録、WordBenchも200名に迫る勢いでしたねー。
今回は京セラドーム「野球場になにしにいくの!?」と家族に突っ込まれながら、どこでするんだろうねぇとか思いながら来てみました。

京セラドーム

京セラドーム

ちょうどドーム上側にあるカプセル型の所にに細長ーい空間があり、そこでするんですね!
ってか普通に野球してるみたいだし、帰り大丈夫かな……

登っていきます

登っていきます

入り口

入り口

空調の風が強くて、少し寒い感じ。
というか風邪で頭痛と寒気がするんですよね、しかし是非でておかないと!という思いで参加しました。ちょうど30日月曜からアメリカいくため懇親会は参加しなかったのは不幸中の幸いでしたねぇ。

※結局午前中のセッション終わって力尽きました。
どうやって帰れたのかあんまり覚えてませんが、とりあえず家に帰って休憩。
この執筆をなんとかまとめたのでした(こういうのはその日にやらないと頭に入らないので)

始まり〜

始まり〜
WordBenchのセッション会場でもあります。

さすが野球場

さすが野球場

以下、発言内容を自分なりに意訳した(脳内コンバートした)内容です。
筆者のツッコミは「※」の部分。

関連情報

レスポンシブ + フラットデザインでWordPressのテーマを作ってみよう(額賀氏)

WordBenchの説明(関西では大阪、神戸、京都、奈良があるよ)

※プレゼン資料: http://www.slideshare.net/nukaga/word-press-26637949

レシポンシブWebデザインとは?

どのようなデバイス、それに合わせて表示を自動調整表示できる仕組み
実現のポイントはCSSにある

考え方が大事! PC版、モバイル版とわけて考えるんじゃないよ!
PC、モバイルを振り分けるという概念じゃないよ!
これが分かっていないと苦労する。。特にクライアントに分かってもらわないと
苦労が。。。

考え方1)モバイルファースト

ルーク・ウロブルスキーさんが提唱したコンセプト

もっとも小さい画面から作った上で、拡張していく方法。
これによって何を見せたいのかがはっきりする(小さい画面に入れることの出来る情報は限られているため)

  • 設計/ワイヤーフレーム → デザイン → モックアップ → 実装

デザイナー・マークアップエンジニアが参加することが大事

スマートフォン用のカンプデザイン
タブレット用のカンプデザイン
PC用のカンプデザイン

画面解像度が大量に出てきているので、対応しきれなくなっている。

メインイメージを確認、ワイヤーフレームで確認、インブラウザで作ってキャプチャー

考え方1)コンテンツファースト

第2階層が曲者(ナビゲーションをどうするか)
折りたたむ形式だと、モバイルはそういうことができないためメニューが多くなってしまう
対策:jQueryプラグインを使っちゃうのもいいかも

フラットデザインって?

iOS7出ましたね!
使い勝手が「ん?」っと思いましたか?
フラットデザインが使われてますが、これはシンプルで平面的なデザインなのです。

アクセシビリティの問題

JISX8341-3、W3C (WCAG) 2.0で規定されている基準があるけど、なかなか対応するのは
難しい。
半角英語なら18pt、日本語は22pt以上
iOS7の日本語フォントは文字が大きくされていてちょっと野暮ったくなっているんじゃない
かなぁ。
今のフラットデザインは「色」に特徴がある。
特に日本語の場合、白のコントラストが足りない。

三本線がメニューだよってのはいうのは、アクセシビリティ的にどうよ〜。

でもまぁ慣れてきたらいけるか。

フラットデザインは「流行」?

Material Honesty on the Web

※後で資料をアップするからメモ必要ないってことだが、いやいや違うんです
メモすることで脳内記憶に残すんですよね。後から見た資料と違って記憶にすごく
残るんですよね(でなかったら行く必要がなくなる)。

CSSはモバイルのCSSから書いていくほうがいいよ。
PCから書くと、モバイル用に設定を消していくことになり結構多くなるため。

<meta name=”viewpoint” content=”width=device-width”>

CSS3以降の機能のため、IE8以下は対応していない。

それに対応するためにRespond.js, css3-mediaqueries.jsが出ている。
IE8以下のときに、ie8.cssを読みこませる手法もある。
ただしそのような付け焼き刃なものでいいのか?

WordPressの場合は、ユーザーが画像を更新していくため設定が必要。
Retina対応をするためにはIE8はheightが大変

style.cssが最初に必要。
最初にWordPressテーマだよっという約束事を書く必要がある。

ブロックごとに別のPHPファイルに分かれている。

Bootstrapを基調にしながらフラットデザインへの特化
Flat UIというフレームワークを使ってみた。
LESSとかSassとか使ってますか〜?
SassはCSSそのままでOKなので入りやすい。

子テーマ+フレームワーク

Twenty Thirteen + Flat UI

Twenty Thirteenをベースに、子テーマとしてFlat UIを適応

ダウンロードしたFlat UIのフォルダをそのまま子テーマのディレクトリにいれてしまう。
子テーマstyle.css記述
/*

Template:twentythirteen
*/
このテンプレート名は「フォルダ名」であることに注意

ナビゲーションメニューの位置をタイトル画像の上へ移動
header.phpをコピーして子テーマにもってきて、場所移動

パスの注意
<script src=”
<?php echo get_stylesheet_directory_uri(); ?>
” />
親テーマから呼び出す場合は、get_template_directory_uri()

BootstrapのナビをWordPressのwp_nav_menuに対応させるのは結構面倒
こうかいたら動くよ〜っていうのを言ってくれる(github)人がいたので
その通りにしたらいけた!

Twenty Tirteenの機能として1つのページに複数の背景色を選べる!

便利ツール

Semantic UI

FONTPLUS(モリサワ等も入っている)
http://webfont.fontplus.jp

テーマは基本は公式テーマがよい。
有料のものは機能も多いけれども、公式の方がしっかりメンテナンスされるため。

プラグイン
Easing Slider “Lite”
画像を選んでおいてタイトル画像を切替えたりできる

Jetpack by WordPress.com
アクセス解析がついている
ギャラリー機能が使える(画像が◯っぽく)

質疑応答は夕方のアンファンレンスで!

Vagrant + 網元AMIで簡単に開発環境を作ってみよう(森川氏)

資料:http://www.apple.com/retail/valleyfair/

Vagrant入門ガイドとかよい書籍があるよ〜

溢れかえるVirtualHostやHostsファイル
XAMPPやMAMPをインストール、動かない、、、Skypeのせいだ(Port 80番)
WindowsとMacで開発 — 拡張しないとダメだよ(俺の環境しか動かない)

Vagrant(べいぐらんと)は、それらの問題を解決するもの

最高の開発フローを提供するもの。
仮想環境構築ツールである。

ターミナルを使って簡単に構築できるよ。

真っ黒画面が嫌い?うんそうかもしれないけど、簡単だよ!

Vagrantを目指すところは、仮想環境を構築するまでを準備すること
vagrantコマンドに集約できる
作って壊してもとに戻すのが簡単
クローンが簡単
仮想マシンの設定やインストール自動化ができる

「Don’t Repeat Yourself」(重複をしない)

Vagrantの構成

  1. Vagrant(様々なツールを活用して簡単に仮想化する橋渡し的なツール)
  2. 仮想化ソフトウェア [Provider]
    Virtualbox, VMWare, AWS等
  3. プロビジョニングツール [Provisioning]
    Chef, Puppet等(インストール、設定自動化ツール)

用語説明

  • Boxファイル:仮想マシン起動に必要となるイメージファイル
  • Vagrantfile:仮想マシンの構成を記述するファイル

Vagrantを使う準備

  1. 仮想化ソフトウェアのインストール
  2. Vagrantのインストール
  3. プロビジョニングツールのインストール(今回は説明しない)

Vagrantの確認

$ vagrant -v

Boxファイルの準備

$ vagrant box add NAME URL
NAME: Boxファイルの名前(任意の名前)
URL: Boxファイルが配置されているURL
ファイルの場所

参考サイト: http://www.vagrantbox.es/ (URLが一覧表示されていて、ここを参照)

Boxファイルが作成されたか確認

$ vagrant box list

削除

$ vagrant box remove NAME

Vagrantfileの生成と設定
$ vagrant init NAME
NAME:Boxファイルの名前

確認

$ ls フォルダ名
Vagrantfile

※このあたりは正確に説明しないと分からない人はわからんでしょうねぇ。

(Rubyで書かれている)

※ $ open -a textedit Vagrantfile
だったらテキストエディットで開くけどねぇ。
だけど文字化けする可能性があるから、CotEditorとか入れとくといいかも。その場合には、
$ open -a coteditor Vagrantfile
でCotEditorでVagrantfileを開くことができる

config.vm.boot_mode = :gui
はブート画面がGUIに

仮想マシンの起動

$ vagrant up

ID/PASS: vagrant

SSH経由で仮想マシンにログイン

$ vagrant ssh

これで仮想マシンにログインできる

動いている仮想マシンの状態

$ vagrant status

仮想マシンの停止

$ vagrant halt

仮想マシンを削除する

$ vagrant destroy

その他

Vagrantのプラグインsahara(スナップショップ)
仮想マシンをエクスポートして、そこからBoxファイル作成(クローン)

AWSの網元AMIを使ってVagrantで高速WordPressを作る

  1. AWS: Amazon Web Service
  2. EC2: Elastic Computing Cloud (仮想サーバを扱えるサービス)
  3. AMI: Amazon Machine Image(いろんな設定が詰まったEC2のパッケージが入っている)
  4. 網元AMI: め組が提供している超高速WordPressが入ったAMI

AWSの登録

  1. AWSへの登録(クレジットカード必須)
  2. AWSのセキュリティグループの設定
  3. 他人がアクセスできないようにすること!
  4. AWSのキーペアの作成

Vagrant with AWSの導入

  1. vagrant-awsプラグインのインストール
  2. Boxファイルの作成
  3. Vagrantfileに設定を記述

vagrant-awsプラグインのインストール

$ vagrant plugin install vagrant-aws

Boxファイルの作成

VagrantにはBoxファイルが必要だが、AWSにはBoxファイルが必要ない。
dummyのBoxファイルが必要
$ vagrant box add dummy 用意されているヤツを使う

Vagrantfileに設定を記述

$ vagrant init dummy

config.vm.box = “dummy”

追加
config.vm.provider :was do |aws, override|
aws.access_key_id = ”;
was.secret_access_key = ”;
aws.keypair_name = ”;
aws.instance_type =’t1.micro’
aws.region = ‘al-northeast-1’;
aws.ami = ‘AMI-IDを入れる’;
was.security_groups = ”;

aws.tags = {
}
override.ssh.private_key_path = ”;
override.ssh.username = ‘root’;

end

起動(プラグイン入れたのでオプションが追加されている)

$ vagrant up –provider=aws

$ vagrant sshでサーバーにログインできる

2013年9月28日 木谷

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中