またもや、凄く今更なイベント参加メモをアップ。
でも内容的にはまだまだ全然参考になる。
去年 (2013年) の5月に行われた 第39回 HTML5 とか勉強会 #html5j + 日本 Android の会 #jag201305 合同勉強会 で、クックパッドの方 (@kaa さん) がハイブリッドアプリ (OS ネイティブと HTML5 を組み合わせたスマホアプリ) について講演されていて、面白かったのでメモしてたんですけど、その時のメモが発掘されたので、今更ながらのアップです。。
とりあえず、今の世の中には大まかに下記の3種類のスマホアプリがある、というのを頭に入れてから読み進めると良いです。
| ネイティブアプリ | iOS/Android など OS ネイティブの開発環境で制作されたアプリ |
|---|---|
| WEBアプリ | HTML5 など WEB ベースで制作され主にブラウザ上で動くアプリ |
| ハイブリッドアプリ | OS ネイティブに HTML5 など WEB を組み合わせたアプリ |
以下、メモです。
講演者について
日高一明さん (クックパッド株式会社) @kaa
4ヶ月ほど前に入社した。
前職は広告まわりの Flash をやっていた。
クックパッドでは Android アプリの UI を担当している。
世の中的なアプリ環境の流れ
ゲーム以外のアプリで、ハイブリッドアプリ、と言えばクックパッド。
まだ世の中的にハイブリッドアプリの事例は多くない。
世の中の流れ的にも、ハイブリッドアプリにとって良い環境が整ってきた。
- 端末のスペック向上。
- WebView でも一定のレベルで動かせるようになった。
- HTML5 の仕様が固まってきた。
- iOS の UI 面での審査が緩くなってきた。
- アプリ独自 UI もやりやすくなった。
- やっと Android の OS 分布も変わってきた。
- 対応が面倒な 2.2 とか 2.3 が減ってきた。
ハイブリッドアプリとは
- HTML5 を活かしたアプリ。
- 公式マーケットで配布できる。
- 複数プラットフォーム対応しやすいメリット。
- ハイブリッド = "技術を組み合わせる" ということ。
- ネイティブと HTML5 のいいとこ取り、と思えば良い。
ハイブリッドアプリにも色々ある
(1) WebView をラッピング
- 一番、原始的なやりかた。
- アプリは WebView を包むだけ。
- コンテンツ (HTML) はサーバーに置く。
- WEB アプリをそのまま移植できる。
(2) WebView をラッピング2
- (1) と違い HTML をアプリに埋め込む。
- サーバーとは API 通信を行い連携。
- ローカルでもある程度動かせる、アプリ実装の代わりに HTML5 を使う。
(3) 一部の画面で WebView を利用する
- 基本的にはネイティブアプリ。
- WebView を利用することでメリットのある画面は WebView を使う。
- ex. 日経ビジネス
クックパッドのアプリは (1) と (3) の間くらい。
今日話すのは (3) について。
ハイブリットアプリの設計
とりあえず HTML で、ではなく、どちらでやったほうが価値があるかどうかを考える。
- 出来上がるものの品質
- どの程度差が現れるのか
- 実装コスト
- HTML5 にすることでどれだけ楽になるのか
- 運用コスト
- データの更新頻度・手間はどのくらいか
- HTML は汎用性があるので、将来 UI やコンテンツが変わりそうなところは HTML とかで使い分ける
HTMLでの実装が向いていない箇所
リスト・ギャラリー画面
- Native のリストが持つ View を再利用したほうが良い。
- 画像キャッシュ・解放などはネイティブの方がメリットが大きい。
HTMLでの実装が向いている箇所
起動時の画面
- 表示するコンテンツ以外に負荷情報を取得したい画面。
- アプリのバージョンに応じて○○を出すとか。
- 起動時は出来るだけデータ量を減らしたい。
詳細画面などのコンテンツ
- HTML のレイアウト能力の高さは Native よりもメリットが大きい。
- 文字の回り込み、枠付け、リンクの挿入など。
- 特に更新されていくコンテンツの運用では当初の想定外の見せ方になることも多いので HTML で組んでいると柔軟な変更が可能。
実装例
その1
WebView の進む・戻る遷移と Native の画面の遷移の管理の問題が起きやすい。
↓
WebView でのリンク遷移はさせない方針。
遷移は WebView で行い、Native 部分はダイアログ展開。
ただし、WebView 自体が戻る履歴を持っちゃうと大変。
その2
要素の長押しの処理・フリックの処理は JavaScript で行い、Native 側に通知。
call:, mail: などのリンクは定番なので対応しておく。
Cookie でログイン状態を連動させる。
忘れがちな違い
- HTML での遷移は画面遷移ごとにサーバーから取得する。
- Native なら、その次の画面までまとめて取得。
- 通信のタイミング設計がしやすいので待ち時間を削れる。
クックパッドのアプリがハイブリッドアプリである理由
- メインコンテンツがサーバー上にある。
- PC、タブレットと常に同期しているものも多いのでローカルで管理するものが少ない。
- 更新が多い。リアルタイム性も重要。
- 特定の機能を提供するというよりは、総合アプリという立ち位置。
- 運用上の理由
- 細かく仮説・検証が行われているため。 (ex. chanko や A/Bテスト等)
- iOS と Android で一部共用している部分があるため。
WebView を TextView と同じくらいの感覚で考えて、メリットデメリット考えて、アプリをどういう作りにするべきかを考えると良い。
ローカル（ネイティブ）で持たせている情報
- アカウント情報
- レシピをのせる機能全般
- 各種ダイアログ・API 通信
- 検索時の候補・音声検索・ウィジェット
以上
ためになったイベントって、何が面白かったのかこまめにブログにアップしておかないと、後から自分で思い出したいときに困るー。
イベント参加したら即時でアップする癖つけないとな。
と思いつつ、今年もマイペースで更新します。
