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

1. ネイティブとHTML5を
スマートに連携させる設計と
実装のノウハウについて
第39回 HTML5とか勉強会+
日本Androidの会 2013年5月定例会
2013/05/28

2. 自己紹介
• Kazuaki Hidaka
• クックパッド株式会社(2013/02∼)
Androidとか担当
• @kaa facebook
• Android以前はFlashやっていました。

3. クックパッドについて
月間利用者数:2,000万人以上
(PC1,388万人、モバイル1,702万人)

4. アジェンダ
• ハイブリッドアプリのタイプ
• ハイブリッドアプリの設計
• Cookpadはなぜハイブリッドアプリか
• Android,iPhoneに対応するために。

5. 話さないこと
• webアプリかNativeアプリかみたいな話
• ゲーム環境としてのHTML5,Unity
• ソーシャルゲームの話
• コードの話

6. アプリの環境の流れ
• 端末のスペック向上。
WebViewでも一定のレベルで動かせるようになった。
• HTML5の仕様固まってきた。
搭載されるブラウザも共通化されてきた。
• iOSのUI面での審査緩くなってきた。
アプリ独自UIもやりやすくなった。
• やっとAndroidのOS分布も変わってきた。

7. ハイブリッドアプリのタイプ

8. ハイブリッドアプリとは
• HTML5を生かしたアプリ。
• 公式マーケットで配布できる。
• 複数プラットフォーム対応しやすい
メリット。
• ハイブリッド＝技術を組み合わせる

9. ハイブリッドアプリのタイプ1
• アプリはWebViewを包むだけのもの。
• コンテンツ(HTML)はサーバーに置く。
• WEBアプリをそのまま移植できる
WebViewをラッピング 1

10. ハイブリッドアプリのタイプ2
• 1と違いHTMLはアプリに埋め込む。
• サーバーとはAPI通信を行ない連携。
• ローカルでもある程度動かせる。
アプリの実装のかわりにHTML5を使う。
WebViewをラッピング 2

11. ハイブリッドアプリのタイプ3
• 基本的にはNativeアプリ。
• WebViewを利用することでメリットの
ある画面はWebViewを使う。
一部の画面でWebViewを利用する

12. ハイブリッドアプリの設計

13. とりあえずHTMLで、ではなく
どちらでやったほうが価値が
ある画面なのかどうか
大事な方針

14. 価値とは？
• 出来上がるものの品質
どの程度差が現れるのか
• 実装コスト
HTML5にすることでどれだけ楽になるのか
• 運用コスト
データの更新頻度・手間はどのくらいか

15. WebViewが適さないもの
• リスト・ギャラリー画面
Nativeのリストが持つviewの再利用・
画像キャッシュ・開放などのメリットが
大きい。

16. WebViewが適しているもの
• 詳細画面などのコンテンツ。
• HTMLのレイアウト能力の高さはNativeよりも
メリットが大きい。
文字の回り込み、枠付け、リンクの挿入など。
• 特に更新されていくコンテンツの運用では当初の
想定外の見せ方は起きる。
• 運用開始後に自由度の高いコンテンツ

17. 実装例 1
WebViewの進む・戻る遷移とNativeの
画面の遷移の管理の問題が起きやすい
↓
WebViewでのリンク遷移はさせない方針
or
遷移はWebViewで行ない、
Native部分はダイアログ展開

18. 実装例 2
• 要素の長押しの処理・フリックの処理は
javascriptで行ない、Native側に通知。
• call:,mail:などのリンクは定番なので
対応しておく
• Cookieでログイン状態を連動させる

19. 忘れがちな違い
• HTMLでの遷移は画面遷移ごとにサーバーから
取得する。
• Nativeなら、その次の画面までまとめて取得、
次の画面の途中まで先に取得などできる。
• 通信のタイミングの設計がしやすいので
待ち時間を削れる。
• 遷移図ではわかりにくいが体験に差。

20. クックパッドアプリ(Android)が
ハイブリッドの理由

21. サービスの性質
• 基本的にコンテンツはサーバー上にある。
• PC、タブレットと常に同期しているものも多
いのでローカルで管理するものが少ない。
• 更新が多い。リアルタイム性もある
• 特定の機能を提供するというよりは、
総合アプリという立ち位置。

22. Nativeで行なっていること
• アプリ間連携用のアカウント情報管理
• レシピをのせる機能全般
• 各種ダイアログ・API通信
• 検索時の候補・音声検索・ウィジェット

23. 運用上の理由
• 細かく仮説・検証が行われている
→chanko http://bit.ly/cookpad2012
• A/Bテスト、一部ユーザー向けテストを
するための環境が整っている
• スマホサイトとAndroidでコンテンツを
共通化

24. まとめ
• ハイブリッドアプリの幅は広い
• WebViewのメリット・デメリットを
もっと把握しよう。
• 運用は大切。
• 仲間も大切。 http://bit.ly/cookpadjob