1. Webデザイナーが
PhoneGap/jQueryMobile で生み出す
「AndroidアプリのUX」
2012年3月24日
ＧＭＯインターネット株式会社
稲守 貴久
1

2. 今日のテーマ
1. PhoneGap と jQuery Mobile とは
2. 基本的な導入・開発方法
3. デモ
4. 開発導入して気付いたメリット・デメリット
5. スマホWebサービスの質を上げるTips
2

3. 自己紹介
稲守 貴久（takahisa-inamori@gmo.jp）
GMOインターネット株式会社
次世代システム研究室 所属
GMOでやってる(やってた)事
yaplog!
GMOクリック証券
Gゲー、ソーシャルアプリ、その他色々←いまここ
個人的な事
Twitter @inamoly
Facebook facebook.com/inamoly
3

4. Gゲー byGMO
Androidに特化したゲームアプリマーケットを展開中
gmo-game.com
または
GooglePlayで「Gゲー」と検索
4

5. 今日のテーマ
1. PhoneGap と jQuery Mobile とは
2. 基本的な導入・開発方法
3. デモ
4. 開発導入して気付いたメリット・デメリット
5. スマホWebサービスの質を上げるTips
5

6. PhoneGap とは
PhoneGapとは
6

7. PhoneGap とは
PhoneGapとは
HTML5、CSS、JavascriptのみのWeb言語で
ネイティブアプリを作れる
・2011年8月1日に正式版がリリース
Ver1.5が今月6日にリリースされた
・多くのスマートフォンOSに対応
・2011年10月にadobeが買収、
Dreamweaver CS5.5でPhoneGapが使える
・PhoneGap:Buildという名称で、Web上で
アプリ変換するサービスがある
7

8. PhoneGap とは
言語はHTML5、CSS3、JavaScript
8

9. PhoneGap とは
Dreamweaverでアプリ開発できる
CS5.5にてスマートフォンのアプリ制作が可能に。
-HTML,CSS,javascriptをベースWebビュー感覚でアプリ制作が可能
クリックエフェクトはもちろんムービーなども挿入できる。
-jQuery Mobileも標準で利用可能。
オーサリング画面。スマホWeb制作と同じ感覚で作れる
9

10. jQuery Mobileとは
jQuery Mobileとは
10

11. jQuery Mobileとは
jQuery Mobileとは
スマートホンに最適なモバイルフレームワーク
・2011年11月18日に正式版がリリースされた
注目の技術
・スライドなどのエフェクトが複数用意されて
いる
・ThemeRollerで簡単にデザインが作れる
http://jquerymobile.com/themeroller/
11

12. jQuery Mobileとは
ワンソースで複数のデバイスに対応できる
ワンソースで複数のデバイスに対応できる。
-メディアクエリなどもテンプレートに実装済。実際に画面をご覧ください。
12

13. 今日のテーマ
1. PhoneGap と jQuery Mobile とは
2. 基本的な導入・開発方法
3. デモ
4. 開発導入して気付いたメリット・デメリット
5. スマホWebサービスの質を上げるTips
13

14. 基本的な導入・開発方法
jQuery Mobileの導入方法
ソースをダウンロード
1. jQueryMobileのサイトからテンプレートソースをダウンロード
2. 要素の追加などテンプレートソースに修正を加える
3. 必要に応じてテーマローラーでカスタムテーマを作成
http://jquerymobile.com/themeroller/
http://jquerymobile.com/
14

15. 基本的な導入・開発方法
PhoneGapの導入方法
様々な環境で開発ができる
eclipse、xcodeといったエンジニア向け開発環境のほか、
多くのWebデザイナーが利用するDreamwaeverでも可能。
今回はeclipseとDreamweaverについてご紹介
15

16. 基本的な導入・開発方法
PhoneGapの導入方法 –eclipse-
1. eclipseとAndroidの開発環境を用意
2. PhoneGapをダウンロード
3. “phonegap.js”を” /assets/www”へコピー
4. “phonegap.jar”を” /libs”へコピー
5. “Activity”の”extends Activity”を”extends DroidGap”へ変更
6. “AndroidManifest.xml”にパーミッション等の記述を追記
16

17. 基本的な導入・開発方法
PhoneGapの導入方法 –Dreamweaver-
DreamweaverCS5.5を用意するだけ
17

18. 今日のテーマ
1. PhoneGap と jQuery Mobile とは
2. 基本的な導入・開発方法
3. デモ
4. 開発導入して気付いたメリット・デメリット
5. スマホWebサービスの質を上げるTips
18

19. デモ
jQuery Mobile
jQuery MobileでワンソースでPC/スマホをカバーする
画面（Webサイト）を作ってみる
19

20. デモ
DreamweaverでPhoneGap
Adobe DreamweaverでPhoneGapを利用する
20

21. デモ
DreamweaverでPhoneGap
21

22. 今日のテーマ
1. PhoneGap と jQuery Mobile とは
2. 基本的な導入・開発方法
3. デモ
4. 開発導入して気付いたメリット・デメリット
5. スマホWebサービスの質を上げるTips
22

23. 開発事例のご紹介
23

24. 導入事例
GMOとくとくショップ
24

25. 導入事例
GMOとくとくショップ
GMOのショッピングカートを利用している
ECサイトの商品を一覧検索できる
・ ショップ数:14,958 / 商品数:8,752,580
・ 2012年1月にリリース
・ APIから商品情報のJSONを取得し、HTMLを描
画する。
25

26. 導入事例
GMOとくとくショップ
26

27. 気付いたメリット・デメリット
開発工数
結論：１）開発工数を抑えられる
２）スモールスタート向け
PhoneGap/jQueryMobileで開発開始
・エンジニア2名で1ヶ月検証、1ヶ月開発。
・デザイナー1名で2週間デザイン＆コーディング
2週間修正。
27

28. 気付いたメリット・デメリット
PhoneGapで感じたデメリット
バージョンアップが早いため、仕様変更に
迫られる可能性。
・昨年末1.0で開発したが現在は1.5で使えないコ
ンポーネントがある
・現状、英語圏のリファレンス中心で日本語コミ
ュニティが不在。
28

29. 気付いたメリット・デメリット
開発ウラ話
開発している時に
こんなやりとりが
29

30. 気付いたメリット・デメリット
開発ウラ話
実はリリースしたばかりの
jQueryMobileに苦労しました
30

31. 気付いたメリット・デメリット
jQueryMobileに苦戦した話
昨年末の話
jQueryMobileで
開発がんばります！
31

32. 気付いたメリット・デメリット
jQueryMobileに苦戦した話
成果物
32

33. 気付いたメリット・デメリット
jQueryMobileに苦戦した話
成果物
デザイン崩れ続発で
jQuery Mobile
諦めました。。。
33

34. 気付いたメリット・デメリット
jQueryMobileに苦戦した話
申し訳ありません
34

35. 気付いたメリット・デメリット
jQueryMobileに苦戦した理由
なぜこうなったのか
35

36. 気付いたメリット・デメリット
jQueryMobileに苦戦した理由
理由を列挙
※あくまで ver1.0 の頃の話です
36

37. 気付いたメリット・デメリット
jQueryMobileに苦戦した理由
共有するhtmlタグにcssがガチガチ
- リセット系cssとは別にh2などのタイトル、liなどのリスト系にもmargin0、
floatなどの指定が多く、独自のレイアウトを組み合わせようとするとぶつ
かることが多い
思い切って組み込まれてたcssを外すと
- スライドなどのエフェクトが全く効かなくなり、ひどい場合はエラー表示な
どが出たりも。。。
ひとつずつ細かくCSSを見直してていけば
- 現状、組み込まれてるcss （小さい方）だけで500強のクラス指定あり。
37

38. 気付いたメリット・デメリット
しかし条件を選べば使い勝手が良い
様々な端末で表示崩れがない
- iPhone、android、ガラケー問わず、表示が崩れない。
（特にAndroidは2.1系と2.2系でかなりブラウザ表示に差が出る）
画像点数が少ないのにリッチなUI、読み込み速度も早い
- HTMLとCSSのみでリッチな表示を実現しており、旧来のimgを利用しない
構成が可能。3G回線に向いてる
遷移エフェクトはアプリと遜色ないUIで強み
- ブラウザ上でアプリのようなエフェクトが簡単に出来る（一部のAndroidで
は効かないエフェクトありました（フェード・フリップ）
38

39. 今日のテーマ
1. PhoneGap と jQuery Mobile とは
2. 基本的な導入・開発方法
3. デモ
4. 開発導入して気付いたメリット・デメリット
5. スマホWebサービスの質を上げるTips
39

40. 質をあげるTips
ローカルストレージ
Tips1
ローカルストレージ
40

41. 質をあげるTips
ローカルストレージ
・当社は検索処理の速度アップの為に導入
・jsonObjectをString形式で保存(キャッシュ)して利用
通常検索 API
String 端末
json String json String
ローカル
ストレージ String 端末
使用 String String json String
・保存時刻を別に登録し、取得情報の有効期限を管理
41

42. 質をあげるTips
ローカルストレージ
API使用時 ローカルストレージ使用時
START END 処理時間 START END 処理時間
1.32454E+12 1.32454E+12 1671 1.32454E+12 1.32454E+12 87
1.32454E+12 1.32454E+12 1624 1.32454E+12 1.32454E+12 91
1.32454E+12 1.32454E+12 3410 1.32454E+12 1.32454E+12 61
1.32454E+12 1.32454E+12 1571 1.32454E+12 1.32454E+12 92
1.32454E+12 1.32454E+12 3115 1.32454E+12 1.32454E+12 74
2278.
平均(ms)
2
平均(ms)
81
42

43. 質をあげるTips
タッチイベント
Tips2
タッチイベント
43

44. 質をあげるTips
タッチイベント
スマートフォンでは
クリックとタッチが異なる。
touchstart
touchmove
touchend
click
44

45. 質をあげるTips
タッチイベント
Androidの場合
クリックイベントは0.5秒経過しないと開始しない。
タッチは0.1秒以内で開始される。
＜
12-27 13:29:15.283: I/Web Console(5877): touchstart
12-27 13:29:15.366: I/Web Console(5877): touchend
12-27 13:29:15.815: I/Web Console(5877): click
・
0.5秒の差 ・
・
45

46. 質をあげるTips
タッチイベント
Tips3
サーバー設定で表示速度向上
46

47. 質をあげるTips
Apacheの設定でwebの表示速度向上
Apacheにmod_pagespeed を追加することで
AndroidでのWeb表示速度の向上が認められました。
mod_pagespeedとは
-google純正のWeb最適化モジュール
-各画像ファイルなどを最適化し、転送速度を向上してくれる。
-オープンソース
URL
http://code.google.com/intl/ja/speed/page-speed/docs/module.html
47

48. 質をあげるTips
タッチイベント
Tips4
devicePixelRatio
48

49. 質をあげるTips
devicePixelRatio
Androidは様々な端末で整合性のとれた表示を目指すため
マルチスクリーンの概念を採用している。
-devicePixelRatio（画面密度）
端末によって、表示サイズの倍の大きさの画像が必要。
Device devicePixelRatio
IS03 2.0
Xperia 1.5
Galaxy S 1.5
DELL Streak 1.0
iPhone4 2.0
100px×50pxをキレイに表示したい場合は200px×100pxの画像を用意する
必要がある。(※もちろん width×height は 100×50 で記述)
49

50. 質をあげるTips
devicePixelRatio
50

51. 質をあげるTips
devicePixelRatio
metaでdevicePixelRatio毎のcssを設定できる。
<meta name="viewport" content="width=device-width, user-
scalable=no, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="/GameJacketBar/css/reset_sp.css" />
<link rel="stylesheet" href="/GameJacketBar/css/style10.css"
media="only screen and (-webkit-min-device-pixel-ratio : 1.0), only
screen and (min-device-pixel-ratio : 1.0)">
<link rel="stylesheet" href="/GameJacketBar/css/style15.css"
media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only
screen and (min-device-pixel-ratio : 1.5)">
<link rel="stylesheet" href="/GameJacketBar/css/style20.css"
media="only screen and (-webkit-min-device-pixel-ratio : 2.0), only
screen and (min-device-pixel-ratio : 2.0)">
51

52. まとめ
52

53. まとめ
まとめ
問題点は少なくない
- 実際に端末で動作させると動かない（処理が遅い）エフェクトがある。
デザインまわりでの制約
今後のバージョンアップに期待できる
- 問題点もあるが直近のバージョンアップでは問題点が解消されつつある。
デザイナーが開発できる環境ってあまり無かった。
jQueryMobile1.1.0 意外といい感じ。
スモールスタートやモックを作るのにとても向いてる
- 実際に動く画面を作ることはプロダクト制作でとても大事。
完成度向上にも寄与するので、おすすめかと。
53

54. まとめ
まとめ
UI仕様書は見ておきましょう
- Android Design
- iOS Human Interface Guidelines（日本語版はPDF）
54

55. 少しでも皆様のお役に立てれば
55

56. 最後にちょっと宣伝を。
56

57. GMOでは一緒にインターネットを
楽しく便利にする仲間を募集中です。
57

58. 当社の事業領域
58

59. 開発者向け採用ページもあります。
良かったらご覧ください。
59

60. ご清聴ありがとうございました。
Webデザイナーが
PhoneGap/jQueryMobile で生み出す
「AndroidアプリのUX」
60