akiyoko blog

akiyoko の IT技術系ブログです

「WordBench東京7月: モバイル勉強会」に参加してきました

今日は、(何年ぶりだろう?)久々の 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フレームワークのデメリット
    • 学習コスト
    • 余分なデザイン
  • カスタマイズして一式をダウンロードできるサイトも
  • モバイルには大きな画像を出したくないケース
    • JavaScriptでやるとすると、data-pictureライブラリ?
    • Responsive Image は、・・まだほとんどのブラウザが未対応
  • RESS
    • レスポンシブとサーバサイドの組み合わせ
    • WordPressとも相性が良い!
    • 例えば、WordPerss 関数 wp_is_mobile() を使うとか(ただしタブレットも含まれてしまう)
    • 細かく対応したければ、独自のPHPで UserAgent を判定しましょう。。

第二部「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」ではない特定のプロトコルを指定して処理する
  • お世話になったもの
  • 考慮すべき点
    • オフライン時の考慮(審査で突っ込まれる可能性大)
    • Ajax, APIでのエラーハンドリング
    • ローダー(全部読み込めないときのぐるぐる)を表示してあげる
    • ログイン状態の保持(→ネイティブ側でWebのCookieを保持している)WordPress固有の問題??
    • キャッシュが強くて消えない問題(キャッシュを残さないようにする)
  • さくらインターネットの国外IPのアクセス制限でメニュー画面?が見れない!!!
    • デフォルトで勝手に有効になっている(!!)ので注意
    • Appleのレビューで「404だよ?」と指摘された

第三部 LT大会「私とモバイルとWordPress

browser-sync の話

宮崎優太郎氏

  • browser-sync
    • Gulpと相性が良い
  • Server with local server
  • LiveReload & inject
  • ghostMode

私とWordPressとモバイルのお付き合い

土田成宏氏

はじめてWebサービスを作ってみました

山本龍二郎氏

  • WP-WORK

http://wp-work.biz

  • 今日オープン!

WordPressと地図

ねこみみ隊長

  • こんなの

http://nekomimi-taicho.com/archives/junpai/

仮想マシンが製作現場にくれる幸せ

@se_ino

  • MacVMWare Fusion 使ってる
  • 実体は「.vmdkファイル」
    • 環境を丸ごと保存しておける
    • 環境構築コストのカット、等
  • もっと便利なのとして、Vagrant
    • vagrantfileを配布すると、↑と同じようなことができる
  • vagrant reload --provision」で差分も取り込める

IEのテストツールのまとめ

小林由憲氏

[SLIDE] http://www.slideshare.net/YoshinoriKoba/ie-test-toolsummary

  • Expression Web SuperPreview
    • フリーで無期限。そこそこ使える
    • オーバーレイレイアウトで重ね合わせることができる
    • 数年前から更新されてない。JavaScriptが対応できていないところも。IE9以降。。
  • IE Tester
    • 動作が不安定。4月で開発停止中。。
  • IE開発者ツール
    • エミュレートしながらデバッグ
    • 新しいのでフォーラム活発
  • modern.ie
    • 仮想環境を提供(4GBくらいある)
    • 非常に簡単
    • 90日間使用できるが、過ぎても再ダウンロードすれば使える