ABC2012Spring - PhoneGap+jQueryMobile

「WebデザイナーがPhoneGap/jQueryMobileで生み出す『AndroidアプリのUX』」

GMO：稲森

■メニュー

・PhoneGapとjqeury mobileとは

・基本的な導入・開発

・デモ

■自己紹介

・yaplog,GMOクリック証券,gゲー,ソーシャルアプリその他色々

・@inamoly

・今はgゲー

ex. ソニック、KOF

・google playでgゲーと検索

■PhoneGap

・Web言語でネイティブ相当

・2011/8/1に正式版がリリース

・cs5.5でphonegapが使える

・PhoneGap:Build

->Web上でビルドできる

・CS5.5でデザイナが作れる

■jQuery Mobile

・2011/11/18 に正式版

・ワンソースで複数のデバイス

・メディアクエリ

->デバイスの画面サイズを絶えず見て、CSSを切り替えている

■導入／開発

・JQM

テーマローラーでカスタムテーマを設定

->WYSYWYG

・PhoneGap

->様々なIDEで使える

->google play用のパッチを当てる

■jqmデモ

・1.1.0がおすすめ

・究極的にはロゴとテキストを置き換えればそれで完成

・DTPのパイを奪えるかも

・PCで見ると動くけど、モバイル端末では動かないという場合も。。。

■jqm＋pgデモ

・汎用性：eclipse、スモールスタート：Dw

・ビルド３０秒くらい、デバッグも時間がかかる。。。

■メリット

・GMOとくとくショップの作成

->開発工数を抑えられる

->エンジニア２名で１ヶ月検証、１ヶ月開発

->実質：２週間

->デザイナ１名で２週間デザイン＆コーディング２週間修正

->バックエンドはほぼ作り込み無し

■デメリット

・バージョンアップが早い

・日本語のコミュニティがほとんどない、リファレンスは英語

■苦戦

・２週間jqm、デザイン崩れで一度断念

->ver.1.0のとき

->共有htmlタグにcssがガチガチに切られている

->リセット系css

・思い切ってcssを外す

->スライドのエフェクトが効かない

・ひとつづつcssを見直していけば？

->クラス数が500と膨大で無理

■条件を選べば使い勝手が良い

・画像点数が少ないのにリッチなUI、読込速度も早い

->3G回線でもはやい

・遷移エフェクトはアプリと遜色ないUIで強み

■スマホWebサービスの質を上げるTips

・ローカルストレージ

->jsonObjectをString形式で保存(キャッシュ)して利用

->API：2278.2ms / ストレージ：81ms

->圧倒的に速い

・タッチイベント

->Androidイベント(0,5s)、タッチ(0.1s)で発火

->速い

・Apacheの設定でWebの表示速度向上

->mod_pagespeed

・devicePixelRation

->画面がぼやける問題

->画像サイズを複数用意

->metaタグでdevicePixelRationごとのcss設定

■まとめ

・簡単にできる

->お客さんに手軽に見せれる

・UI仕様書はみといた方が良い

->android design

->ios human interface guidline