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.

ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて

39,112 views

Published on

第39回 HTML5とか勉強会+日本Androidの会 2013年5月定例会

Published in: Technology

ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて

  1. 1. ネイティブとHTML5をスマートに連携させる設計と実装のノウハウについて第39回 HTML5とか勉強会+日本Androidの会 2013年5月定例会2013/05/28
  2. 2. 自己紹介• Kazuaki Hidaka• クックパッド株式会社(2013/02∼)Androidとか担当• @kaa facebook• Android以前はFlashやっていました。
  3. 3. クックパッドについて月間利用者数:2,000万人以上(PC1,388万人、モバイル1,702万人)
  4. 4. アジェンダ• ハイブリッドアプリのタイプ• ハイブリッドアプリの設計• Cookpadはなぜハイブリッドアプリか• Android,iPhoneに対応するために。
  5. 5. 話さないこと• webアプリかNativeアプリかみたいな話• ゲーム環境としてのHTML5,Unity• ソーシャルゲームの話• コードの話
  6. 6. アプリの環境の流れ• 端末のスペック向上。WebViewでも一定のレベルで動かせるようになった。• HTML5の仕様固まってきた。搭載されるブラウザも共通化されてきた。• iOSのUI面での審査緩くなってきた。アプリ独自UIもやりやすくなった。• やっとAndroidのOS分布も変わってきた。
  7. 7. ハイブリッドアプリのタイプ
  8. 8. ハイブリッドアプリとは• HTML5を生かしたアプリ。• 公式マーケットで配布できる。• 複数プラットフォーム対応しやすいメリット。• ハイブリッド=技術を組み合わせる
  9. 9. ハイブリッドアプリのタイプ1• アプリはWebViewを包むだけのもの。• コンテンツ(HTML)はサーバーに置く。• WEBアプリをそのまま移植できるWebViewをラッピング 1
  10. 10. ハイブリッドアプリのタイプ2• 1と違いHTMLはアプリに埋め込む。• サーバーとはAPI通信を行ない連携。• ローカルでもある程度動かせる。アプリの実装のかわりにHTML5を使う。WebViewをラッピング 2
  11. 11. ハイブリッドアプリのタイプ3• 基本的にはNativeアプリ。• WebViewを利用することでメリットのある画面はWebViewを使う。一部の画面でWebViewを利用する
  12. 12. ハイブリッドアプリの設計
  13. 13. とりあえずHTMLで、ではなくどちらでやったほうが価値がある画面なのかどうか大事な方針
  14. 14. 価値とは?• 出来上がるものの品質どの程度差が現れるのか• 実装コストHTML5にすることでどれだけ楽になるのか• 運用コストデータの更新頻度・手間はどのくらいか
  15. 15. WebViewが適さないもの• リスト・ギャラリー画面Nativeのリストが持つviewの再利用・画像キャッシュ・開放などのメリットが大きい。
  16. 16. WebViewが適しているもの• 詳細画面などのコンテンツ。• HTMLのレイアウト能力の高さはNativeよりもメリットが大きい。文字の回り込み、枠付け、リンクの挿入など。• 特に更新されていくコンテンツの運用では当初の想定外の見せ方は起きる。• 運用開始後に自由度の高いコンテンツ
  17. 17. 実装例 1WebViewの進む・戻る遷移とNativeの画面の遷移の管理の問題が起きやすい↓WebViewでのリンク遷移はさせない方針or遷移はWebViewで行ない、Native部分はダイアログ展開
  18. 18. 実装例 2• 要素の長押しの処理・フリックの処理はjavascriptで行ない、Native側に通知。• call:,mail:などのリンクは定番なので対応しておく• Cookieでログイン状態を連動させる
  19. 19. 忘れがちな違い• HTMLでの遷移は画面遷移ごとにサーバーから取得する。• Nativeなら、その次の画面までまとめて取得、次の画面の途中まで先に取得などできる。• 通信のタイミングの設計がしやすいので待ち時間を削れる。• 遷移図ではわかりにくいが体験に差。
  20. 20. クックパッドアプリ(Android)がハイブリッドの理由
  21. 21. サービスの性質• 基本的にコンテンツはサーバー上にある。• PC、タブレットと常に同期しているものも多いのでローカルで管理するものが少ない。• 更新が多い。リアルタイム性もある• 特定の機能を提供するというよりは、総合アプリという立ち位置。
  22. 22. Nativeで行なっていること• アプリ間連携用のアカウント情報管理• レシピをのせる機能全般• 各種ダイアログ・API通信• 検索時の候補・音声検索・ウィジェット
  23. 23. 運用上の理由• 細かく仮説・検証が行われている→chanko http://bit.ly/cookpad2012• A/Bテスト、一部ユーザー向けテストをするための環境が整っている• スマホサイトとAndroidでコンテンツを共通化
  24. 24. まとめ• ハイブリッドアプリの幅は広い• WebViewのメリット・デメリットをもっと把握しよう。• 運用は大切。• 仲間も大切。 http://bit.ly/cookpadjob

×