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