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

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

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

Check these out next

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

Recomendados

Mais conteúdo relacionado

Apresentações para você(20)

Destaque(19)

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

Mais de Kazuaki Hidaka(6)

Último(20)