Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WebデザイナーがPhoneGap/jQueryMobile で生み出す「AndroidアプリのUX」                       2012年3月24日               GMOインターネット株式会社         ...
今日のテーマ 1. PhoneGap と jQuery Mobile とは 2. 基本的な導入・開発方法 3. デモ 4. 開発導入して気付いたメリット・デメリット 5. スマホWebサービスの質を上げるTips                ...
自己紹介       稲守 貴久(takahisa-inamori@gmo.jp)         GMOインターネット株式会社         次世代システム研究室 所属       GMOでやってる(やってた)事         yaplo...
Gゲー byGMO    Androidに特化したゲームアプリマーケットを展開中  gmo-game.com       または  GooglePlayで「Gゲー」と検索                                  4
今日のテーマ 1. PhoneGap と jQuery Mobile とは 2. 基本的な導入・開発方法 3. デモ 4. 開発導入して気付いたメリット・デメリット 5. スマホWebサービスの質を上げるTips                ...
PhoneGap とはPhoneGapとは              6
PhoneGap とはPhoneGapとは              HTML5、CSS、JavascriptのみのWeb言語で              ネイティブアプリを作れる              ・2011年8月1日に正式版がリリー...
PhoneGap とは言語はHTML5、CSS3、JavaScript                           8
PhoneGap とはDreamweaverでアプリ開発できる  CS5.5にてスマートフォンのアプリ制作が可能に。   -HTML,CSS,javascriptをベースWebビュー感覚でアプリ制作が可能    クリックエフェクトはもちろんムー...
jQuery MobileとはjQuery Mobileとは                  10
jQuery MobileとはjQuery Mobileとは                  スマートホンに最適なモバイルフレームワーク                  ・2011年11月18日に正式版がリリースされた           ...
jQuery Mobileとはワンソースで複数のデバイスに対応できる  ワンソースで複数のデバイスに対応できる。    -メディアクエリなどもテンプレートに実装済。実際に画面をご覧ください。                           ...
今日のテーマ 1. PhoneGap と jQuery Mobile とは 2. 基本的な導入・開発方法 3. デモ 4. 開発導入して気付いたメリット・デメリット 5. スマホWebサービスの質を上げるTips                ...
基本的な導入・開発方法jQuery Mobileの導入方法 ソースをダウンロード 1. jQueryMobileのサイトからテンプレートソースをダウンロード 2. 要素の追加などテンプレートソースに修正を加える 3. 必要に応じてテーマローラー...
基本的な導入・開発方法PhoneGapの導入方法 様々な環境で開発ができる eclipse、xcodeといったエンジニア向け開発環境のほか、 多くのWebデザイナーが利用するDreamwaeverでも可能。 今回はeclipseとDreamwe...
基本的な導入・開発方法PhoneGapの導入方法 –eclipse- 1. eclipseとAndroidの開発環境を用意 2. PhoneGapをダウンロード 3. “phonegap.js”を” /assets/www”へコピー 4. “p...
基本的な導入・開発方法PhoneGapの導入方法 –Dreamweaver-      DreamweaverCS5.5を用意するだけ                                17
今日のテーマ 1. PhoneGap と jQuery Mobile とは 2. 基本的な導入・開発方法 3. デモ 4. 開発導入して気付いたメリット・デメリット 5. スマホWebサービスの質を上げるTips                ...
デモjQuery Mobile  jQuery MobileでワンソースでPC/スマホをカバーする  画面(Webサイト)を作ってみる                                     19
デモDreamweaverでPhoneGap Adobe DreamweaverでPhoneGapを利用する                                   20
デモDreamweaverでPhoneGap                       21
今日のテーマ 1. PhoneGap と jQuery Mobile とは 2. 基本的な導入・開発方法 3. デモ 4. 開発導入して気付いたメリット・デメリット 5. スマホWebサービスの質を上げるTips                ...
開発事例のご紹介           23
導入事例GMOとくとくショップ              24
導入事例GMOとくとくショップ        GMOのショッピングカートを利用している        ECサイトの商品を一覧検索できる        ・ ショップ数:14,958 / 商品数:8,752,580        ・ 2012年1月...
導入事例GMOとくとくショップ              26
気付いたメリット・デメリット開発工数 結論:1)開発工数を抑えられる    2)スモールスタート向け PhoneGap/jQueryMobileで開発開始 ・エンジニア2名で1ヶ月検証、1ヶ月開発。 ・デザイナー1名で2週間デザイン&コーディン...
気付いたメリット・デメリットPhoneGapで感じたデメリット バージョンアップが早いため、仕様変更に 迫られる可能性。 ・昨年末1.0で開発したが現在は1.5で使えないコ  ンポーネントがある ・現状、英語圏のリファレンス中心で日本語コミ  ...
気付いたメリット・デメリット開発ウラ話            開発している時に            こんなやりとりが                       29
気付いたメリット・デメリット開発ウラ話      実はリリースしたばかりの     jQueryMobileに苦労しました                           30
気付いたメリット・デメリットjQueryMobileに苦戦した話 昨年末の話           jQueryMobileで          開発がんばります!                           31
気付いたメリット・デメリットjQueryMobileに苦戦した話                 成果物                       32
気付いたメリット・デメリットjQueryMobileに苦戦した話                 成果物             デザイン崩れ続発で               jQuery Mobile             諦めました。。...
気付いたメリット・デメリットjQueryMobileに苦戦した話           申し訳ありません                      34
気付いたメリット・デメリットjQueryMobileに苦戦した理由          なぜこうなったのか                      35
気付いたメリット・デメリットjQueryMobileに苦戦した理由            理由を列挙        ※あくまで    ver1.0   の頃の話です                                   36
気付いたメリット・デメリットjQueryMobileに苦戦した理由 共有するhtmlタグにcssがガチガチ - リセット系cssとは別にh2などのタイトル、liなどのリスト系にもmargin0、    floatなどの指定が多く、独自のレイアウ...
気付いたメリット・デメリットしかし条件を選べば使い勝手が良い 様々な端末で表示崩れがない - iPhone、android、ガラケー問わず、表示が崩れない。 (特にAndroidは2.1系と2.2系でかなりブラウザ表示に差が出る) 画像点数が少...
今日のテーマ 1. PhoneGap と jQuery Mobile とは 2. 基本的な導入・開発方法 3. デモ 4. 開発導入して気付いたメリット・デメリット 5. スマホWebサービスの質を上げるTips                ...
質をあげるTipsローカルストレージ               Tips1            ローカルストレージ                        40
質をあげるTipsローカルストレージ  ・当社は検索処理の速度アップの為に導入  ・jsonObjectをString形式で保存(キャッシュ)して利用       通常検索         API                     Str...
質をあげるTipsローカルストレージ                   API使用時                               ローカルストレージ使用時    START            END            ...
質をあげるTipsタッチイベント              Tips2            タッチイベント                      43
質をあげるTipsタッチイベント  スマートフォンでは  クリックとタッチが異なる。    touchstart    touchmove    touchend     click                  44
質をあげるTipsタッチイベント  Androidの場合  クリックイベントは0.5秒経過しないと開始しない。  タッチは0.1秒以内で開始される。                                           <    ...
質をあげるTipsタッチイベント          Tips3     サーバー設定で表示速度向上                     46
質をあげるTipsApacheの設定でwebの表示速度向上  Apacheにmod_pagespeed を追加することで  AndroidでのWeb表示速度の向上が認められました。  mod_pagespeedとは  -google純正のWeb...
質をあげるTipsタッチイベント                 Tips4            devicePixelRatio                               48
質をあげるTipsdevicePixelRatio  Androidは様々な端末で整合性のとれた表示を目指すため  マルチスクリーンの概念を採用している。   -devicePixelRatio(画面密度)    端末によって、表示サイズの倍の...
質をあげるTipsdevicePixelRatio                   50
質をあげるTipsdevicePixelRatio  metaでdevicePixelRatio毎のcssを設定できる。  <meta name="viewport" content="width=device-width, user-    ...
まとめ      52
まとめまとめ 問題点は少なくない - 実際に端末で動作させると動かない(処理が遅い)エフェクトがある。   デザインまわりでの制約 今後のバージョンアップに期待できる - 問題点もあるが直近のバージョンアップでは問題点が解消されつつある。   ...
まとめまとめ UI仕様書は見ておきましょう - Android Design - iOS Human Interface Guidelines(日本語版はPDF)                                         ...
少しでも皆様のお役に立てれば                 55
最後にちょっと宣伝を。              56
GMOでは一緒にインターネットを楽しく便利にする仲間を募集中です。                   57
当社の事業領域          58
開発者向け採用ページもあります。良かったらご覧ください。                   59
ご清聴ありがとうございました。     Webデザイナーが     PhoneGap/jQueryMobile で生み出す     「AndroidアプリのUX」                                   60
Upcoming SlideShare
Loading in …5
×

ABC2012Spring 20120324

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

ABC2012Spring 20120324

  1. 1. WebデザイナーがPhoneGap/jQueryMobile で生み出す「AndroidアプリのUX」 2012年3月24日 GMOインターネット株式会社 稲守 貴久 1
  2. 2. 今日のテーマ 1. PhoneGap と jQuery Mobile とは 2. 基本的な導入・開発方法 3. デモ 4. 開発導入して気付いたメリット・デメリット 5. スマホWebサービスの質を上げるTips 2
  3. 3. 自己紹介 稲守 貴久(takahisa-inamori@gmo.jp) GMOインターネット株式会社 次世代システム研究室 所属 GMOでやってる(やってた)事 yaplog! GMOクリック証券 Gゲー、ソーシャルアプリ、その他色々←いまここ 個人的な事 Twitter @inamoly Facebook facebook.com/inamoly 3
  4. 4. Gゲー byGMO Androidに特化したゲームアプリマーケットを展開中 gmo-game.com または GooglePlayで「Gゲー」と検索 4
  5. 5. 今日のテーマ 1. PhoneGap と jQuery Mobile とは 2. 基本的な導入・開発方法 3. デモ 4. 開発導入して気付いたメリット・デメリット 5. スマホWebサービスの質を上げるTips 5
  6. 6. PhoneGap とはPhoneGapとは 6
  7. 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. 8. PhoneGap とは言語はHTML5、CSS3、JavaScript 8
  9. 9. PhoneGap とはDreamweaverでアプリ開発できる CS5.5にてスマートフォンのアプリ制作が可能に。 -HTML,CSS,javascriptをベースWebビュー感覚でアプリ制作が可能 クリックエフェクトはもちろんムービーなども挿入できる。 -jQuery Mobileも標準で利用可能。 オーサリング画面。スマホWeb制作と同じ感覚で作れる 9
  10. 10. jQuery MobileとはjQuery Mobileとは 10
  11. 11. jQuery MobileとはjQuery Mobileとは スマートホンに最適なモバイルフレームワーク ・2011年11月18日に正式版がリリースされた 注目の技術 ・スライドなどのエフェクトが複数用意されて いる ・ThemeRollerで簡単にデザインが作れる http://jquerymobile.com/themeroller/ 11
  12. 12. jQuery Mobileとはワンソースで複数のデバイスに対応できる ワンソースで複数のデバイスに対応できる。 -メディアクエリなどもテンプレートに実装済。実際に画面をご覧ください。 12
  13. 13. 今日のテーマ 1. PhoneGap と jQuery Mobile とは 2. 基本的な導入・開発方法 3. デモ 4. 開発導入して気付いたメリット・デメリット 5. スマホWebサービスの質を上げるTips 13
  14. 14. 基本的な導入・開発方法jQuery Mobileの導入方法 ソースをダウンロード 1. jQueryMobileのサイトからテンプレートソースをダウンロード 2. 要素の追加などテンプレートソースに修正を加える 3. 必要に応じてテーマローラーでカスタムテーマを作成 http://jquerymobile.com/themeroller/ http://jquerymobile.com/ 14
  15. 15. 基本的な導入・開発方法PhoneGapの導入方法 様々な環境で開発ができる eclipse、xcodeといったエンジニア向け開発環境のほか、 多くのWebデザイナーが利用するDreamwaeverでも可能。 今回はeclipseとDreamweaverについてご紹介 15
  16. 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. 17. 基本的な導入・開発方法PhoneGapの導入方法 –Dreamweaver- DreamweaverCS5.5を用意するだけ 17
  18. 18. 今日のテーマ 1. PhoneGap と jQuery Mobile とは 2. 基本的な導入・開発方法 3. デモ 4. 開発導入して気付いたメリット・デメリット 5. スマホWebサービスの質を上げるTips 18
  19. 19. デモjQuery Mobile jQuery MobileでワンソースでPC/スマホをカバーする 画面(Webサイト)を作ってみる 19
  20. 20. デモDreamweaverでPhoneGap Adobe DreamweaverでPhoneGapを利用する 20
  21. 21. デモDreamweaverでPhoneGap 21
  22. 22. 今日のテーマ 1. PhoneGap と jQuery Mobile とは 2. 基本的な導入・開発方法 3. デモ 4. 開発導入して気付いたメリット・デメリット 5. スマホWebサービスの質を上げるTips 22
  23. 23. 開発事例のご紹介 23
  24. 24. 導入事例GMOとくとくショップ 24
  25. 25. 導入事例GMOとくとくショップ GMOのショッピングカートを利用している ECサイトの商品を一覧検索できる ・ ショップ数:14,958 / 商品数:8,752,580 ・ 2012年1月にリリース ・ APIから商品情報のJSONを取得し、HTMLを描 画する。 25
  26. 26. 導入事例GMOとくとくショップ 26
  27. 27. 気付いたメリット・デメリット開発工数 結論:1)開発工数を抑えられる 2)スモールスタート向け PhoneGap/jQueryMobileで開発開始 ・エンジニア2名で1ヶ月検証、1ヶ月開発。 ・デザイナー1名で2週間デザイン&コーディング 2週間修正。 27
  28. 28. 気付いたメリット・デメリットPhoneGapで感じたデメリット バージョンアップが早いため、仕様変更に 迫られる可能性。 ・昨年末1.0で開発したが現在は1.5で使えないコ ンポーネントがある ・現状、英語圏のリファレンス中心で日本語コミ ュニティが不在。 28
  29. 29. 気付いたメリット・デメリット開発ウラ話 開発している時に こんなやりとりが 29
  30. 30. 気付いたメリット・デメリット開発ウラ話 実はリリースしたばかりの jQueryMobileに苦労しました 30
  31. 31. 気付いたメリット・デメリットjQueryMobileに苦戦した話 昨年末の話 jQueryMobileで 開発がんばります! 31
  32. 32. 気付いたメリット・デメリットjQueryMobileに苦戦した話 成果物 32
  33. 33. 気付いたメリット・デメリットjQueryMobileに苦戦した話 成果物 デザイン崩れ続発で jQuery Mobile 諦めました。。。 33
  34. 34. 気付いたメリット・デメリットjQueryMobileに苦戦した話 申し訳ありません 34
  35. 35. 気付いたメリット・デメリットjQueryMobileに苦戦した理由 なぜこうなったのか 35
  36. 36. 気付いたメリット・デメリットjQueryMobileに苦戦した理由 理由を列挙 ※あくまで ver1.0 の頃の話です 36
  37. 37. 気付いたメリット・デメリットjQueryMobileに苦戦した理由 共有するhtmlタグにcssがガチガチ - リセット系cssとは別にh2などのタイトル、liなどのリスト系にもmargin0、 floatなどの指定が多く、独自のレイアウトを組み合わせようとするとぶつ かることが多い 思い切って組み込まれてたcssを外すと - スライドなどのエフェクトが全く効かなくなり、ひどい場合はエラー表示な どが出たりも。。。 ひとつずつ細かくCSSを見直してていけば - 現状、組み込まれてるcss (小さい方)だけで500強のクラス指定あり。 37
  38. 38. 気付いたメリット・デメリットしかし条件を選べば使い勝手が良い 様々な端末で表示崩れがない - iPhone、android、ガラケー問わず、表示が崩れない。 (特にAndroidは2.1系と2.2系でかなりブラウザ表示に差が出る) 画像点数が少ないのにリッチなUI、読み込み速度も早い - HTMLとCSSのみでリッチな表示を実現しており、旧来のimgを利用しない 構成が可能。3G回線に向いてる 遷移エフェクトはアプリと遜色ないUIで強み - ブラウザ上でアプリのようなエフェクトが簡単に出来る(一部のAndroidで は効かないエフェクトありました(フェード・フリップ) 38
  39. 39. 今日のテーマ 1. PhoneGap と jQuery Mobile とは 2. 基本的な導入・開発方法 3. デモ 4. 開発導入して気付いたメリット・デメリット 5. スマホWebサービスの質を上げるTips 39
  40. 40. 質をあげるTipsローカルストレージ Tips1 ローカルストレージ 40
  41. 41. 質をあげるTipsローカルストレージ ・当社は検索処理の速度アップの為に導入 ・jsonObjectをString形式で保存(キャッシュ)して利用 通常検索 API String 端末 json String json String ローカル ストレージ String 端末 使用 String String json String ・保存時刻を別に登録し、取得情報の有効期限を管理 41
  42. 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. 43. 質をあげるTipsタッチイベント Tips2 タッチイベント 43
  44. 44. 質をあげるTipsタッチイベント スマートフォンでは クリックとタッチが異なる。 touchstart touchmove touchend click 44
  45. 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. 46. 質をあげるTipsタッチイベント Tips3 サーバー設定で表示速度向上 46
  47. 47. 質をあげるTipsApacheの設定で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. 48. 質をあげるTipsタッチイベント Tips4 devicePixelRatio 48
  49. 49. 質をあげるTipsdevicePixelRatio 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. 50. 質をあげるTipsdevicePixelRatio 50
  51. 51. 質をあげるTipsdevicePixelRatio 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. まとめ 52
  53. 53. まとめまとめ 問題点は少なくない - 実際に端末で動作させると動かない(処理が遅い)エフェクトがある。 デザインまわりでの制約 今後のバージョンアップに期待できる - 問題点もあるが直近のバージョンアップでは問題点が解消されつつある。 デザイナーが開発できる環境ってあまり無かった。 jQueryMobile1.1.0 意外といい感じ。 スモールスタートやモックを作るのにとても向いてる - 実際に動く画面を作ることはプロダクト制作でとても大事。 完成度向上にも寄与するので、おすすめかと。 53
  54. 54. まとめまとめ UI仕様書は見ておきましょう - Android Design - iOS Human Interface Guidelines(日本語版はPDF) 54
  55. 55. 少しでも皆様のお役に立てれば 55
  56. 56. 最後にちょっと宣伝を。 56
  57. 57. GMOでは一緒にインターネットを楽しく便利にする仲間を募集中です。 57
  58. 58. 当社の事業領域 58
  59. 59. 開発者向け採用ページもあります。良かったらご覧ください。 59
  60. 60. ご清聴ありがとうございました。 Webデザイナーが PhoneGap/jQueryMobile で生み出す 「AndroidアプリのUX」 60

×