今日は、（何年ぶりだろう？）久々の WordPress 勉強会でした。
いくつか抜けてますが、備忘録です。
「WordBench東京7月: モバイル勉強会」（2014.7.9） #wbtokyo
第一部「レスポンシブWebデザインの基礎とWordPressを使った最適化の手法」
by 小川裕之氏
SLIDE:
- ワンソースでマルチデバイスの画面サイズに適応
- 要素①：Fluid Grid（幅を%で指定）
- pxから相対値を一々計算するのが面倒。。→Fluid Grid System！
- カラムベース
- Gridに沿ってレイアウトすると実装しやすい
- 最近の主流は、box-sizingを指定することが多い
- 「box-sizing: border-box」と指定すると、widthの指定が簡単になるよ
- ガターの幅はその後で padding で指定すると楽
- 要素②：Fluid Image
- 画像を可変に
- max-width: 100%; height: auto;
- 要素③：Media Query
- メディアタイプ、メディア特性
- 上から適用される
- モバイルファーストは画面サイズが小さい方から記述していく。デスクトップファーストだとその逆
- 要素④：Viewport
- viewportを適用しないと意図通りに動かなかったりするので注意！
- フリーの Grid System がたくさんある
- CSSフレームワークを使うともっと楽。Bootstrap, Foundation等々
- Gridが入れ子にできるので、WordPressの投稿画面でも使える！
- リンクや画像に特定の class を指定してあげると、いろいろデザインが可能（リンクをボタンに、画像を丸縁に）
- Bootstrapであれば、対応した Plugin もある（ショートコードが提供される）
- Easy Bootstrap Shortcode
- CSSフレームワークのデメリット
- 学習コスト
- 余分なデザイン
- カスタマイズして一式をダウンロードできるサイトも
- LESS版、SASS版もある
- Bootstrap Live Customizer
- モバイルには大きな画像を出したくないケース
- JavaScriptでやるとすると、data-pictureライブラリ？
- Responsive Image は、・・まだほとんどのブラウザが未対応
- RESS
第二部「WordPressサイトをiPhoneアプリにしてみた〜構築事例の紹介〜」
by 佐々木きはる氏
[SLIDE] http://www.slideshare.net/kiharusasaki/wordbench-tokyo-7
- WordPressで「NAZOPLA」http://nazopla.jp をローンチした
- 意外とWordPressでいろいろ出来ちゃう
- 目立ったプロモーションせずに、13万PV
- モバイルのアクセスが半々
- レスポンジブに対応してない！！→スマホアプリ化へ
- アプリ化のメリット
- SEO以外からの新規ユーザの獲得
- プッシュ通知によるアクセス頻度の向上
- UXを高めて継続利用を促進
- デメリット
- 公開・更新のタイミングがコントロールできない。審査が必要なので、リジェクト→レビューを繰り返すと、1〜2ヶ月程度かかったりするのは日常茶飯事
- OSバージョンアップに対応したエンハンスが大変（保守性が悪い）
- ユーザによる評価（酷評）
- アプリ化するための検討
- しかしながら、例えば Monacaだと、push通知するために必要なDeviceTokenが取得できなかったりと制限がある
- 結局、WebViewベースアプリでやることに
- アプリ内にブラウザを埋め込んで表示させる（上下のボタン、いわゆるガワだけネイティブ）
- オンライン状態の検知やシェア系の機能、iAd（広告）等はネイティブで
- Webページでは Ajaxを使ってる
- アプリに向かないケース
- ウェブでいいじゃん的な、コンテンツが少ない、iOSっぽくないアプリは認められない可能性あり
- Webからネイティブを呼び出すことも可能（お問い合わせリンクから、スマホのメーラーを起動するとか）
- 「http」ではない特定のプロトコルを指定して処理する
- お世話になったもの
- Multi Device Swither
- どのデバイスからアクセスされたのかを判定
- Twitter Bootstrap
- compass（主に Sprite利用で）
- 考慮すべき点
- さくらインターネットの国外IPのアクセス制限でメニュー画面？が見れない！！！
- デフォルトで勝手に有効になっている（！！）ので注意
- Appleのレビューで「404だよ？」と指摘された
第三部 LT大会「私とモバイルとWordPress」
browser-sync の話
宮崎優太郎氏
- browser-sync
- Gulpと相性が良い
- Server with local server
- LiveReload & inject
- ghostMode
私とWordPressとモバイルのお付き合い
土田成宏氏
- PHP＋MySQL＋JavaScript＋Python（主にPlone用途）
- 事例
- http://www.cruisepalette.com
- マルチサイト機能を使って代理店ごとに表示
- 年配の人が多いので、まだまだPCからのアクセスが多い
仮想マシンが製作現場にくれる幸せ
@se_ino
- Mac で VMWare Fusion 使ってる
- 実体は「.vmdkファイル」
- 環境を丸ごと保存しておける
- 環境構築コストのカット、等
- もっと便利なのとして、Vagrant
- vagrantfileを配布すると、↑と同じようなことができる
- 「vagrant reload --provision」で差分も取り込める
