技術評論社様より、 anatoo さん の『HTML5 ハイブリッドアプリ開発[実践]入門』をお送りいただきました。どうもありがとうございます。
anatoo さんがハイブリッドアプリに関して経験されてきたであろうあらゆることがぎっしり詰まっている一冊でした。せっかくいただいたものですし、みなさんにも是非オススメさせていただきたく書評なぞを書いてみようと思います。
なお、本書の対象読者は以下とされています。
- iOS、Androidで動作するハイブリッドアプリを初めて開発する人
- より良いハイブリッドアプリを開発するための種々のノウハウを知りたい人
- ハイブリッドアプリに関する知識を網羅したい、さらにハイブリッドアプリの裏側の仕組みを理解したい人
本書は、読者がHTML・CSS・JavaScriptに関する基本的な知識や、これらを使ったWebページを作成するスキルを持っていることを前提として書かれています。(後略)
—同書 p. iii より引用
これに照らして私の立場を明らかにすると、
- Web 開発経験は長く、周辺技術も含めてひととおりの技術や知識は有している
- ハイブリッドアプリはおろかネイティブのスマートフォンアプリをちゃんと開発したことはない、が、近いうちに開発に関与するかも
- スマートフォンアプリ開発に関する広範な知識を習得する必要に駆られている
ということで割としっかり対象読者っていう感じでした。ただしスマートフォンアプリの開発経験は (いまのところ) なく、知識としても軽く開発環境で遊んでみたくらいの大ざっぱなものしかありませんので、実務経験をベースにした読み方ができていないということはご承知おきください。
本書は「Part1 基礎編」と「Part2 実践編」の二部構成となっています (各章の目次については著者の anatoo さんがブログに掲載されているのでそちらもご覧ください)。
Part1の1〜4章では、HTML5ハイブリッドアプリを開発するための基礎知識を解説します。ハイブリッドアプリとは何かを紹介した後、その基盤を支える技術を説明し、実際にiOSとAndroidの開発環境を整えます。 (略) 第1部 [1] は、ハイブリッドアプリ開発の入門が主な内容です。
Part2の5〜12章では、ハイブリッドアプリを開発する際に必要となる実践的な内容を記述しています。モバイル特有の事情への配慮や、HTML5・CSS・JavaScriptの細かなテクニックやプラットフォームごとの扱いや特性などを紹介しています。(後略)
—同書 p. iv より引用
Part1 も基本となる知識をわかりやすく解説しつつ、私たちをハイブリッドアプリ開発の世界に誘うような感じでよいのですが、本書の魅力は Part2 にこそたっぷり詰まっています。
たとえば、第 5 章の冒頭より引きますが、
アプリ中で「ボタンやテキストをタップしたら何かアクションを起こす」という処理を開発者はよく書きます。このときWeb開発者が一番犯しがちな過ちは、パソコンのブラウザの場合と同様に a タグや click イベントを使おうとすることです。
(略)
a タグの遷移や click イベントの発火は、タッチイベントの処理が開始されてから300ミリ秒の遅延を経て初めて実行されます。(略)この遅延を避けるためにHTML5ハイブリッドアプリでは、 a タグや click イベントを極力使わないようにします。
—同書 p. 133, 「第 5 章 より良いアプリを開発するためのテクニック」内、「5.1. a タグや click イベントは使わない」より引用
〈Web開発者が一番犯しがちな過ちは〉——ぐさーって刺さった感じですね！ 本書を読まなければ何も知らないまま普通に a 要素によってリンクを組み立てて、「この反応速度がハイブリッドアプリの限界だよねー。 HTML5 でアプリを作ろうなんて夢のまた夢、非現実的もいいところさ」などと知ったかぶって多方面からボコ殴りにされていたところでした。こういう、我々 Web 開発者がつまずきがちなポイントなどは念入りに解説されています。
他に第 5 章で印象的だったのは「5.8. iOS版よりもAndroid版を先に開発する」です。これはいかにも現場の知恵という感じで面白いですね。それから再描画時のパフォーマンス劣化を抑える工夫として、 DOM 操作をなるべく一度にまとめたり(「5.11. DOM ツリーに加える変更を減らす」)、 CSS のレイアウト関連プロパティの操作の代わりに CSS Transform を用いる (「5.12. レイアウトの再計算のコストを抑える」) など、思わず膝を叩きたくなるようなテクニックが懇切丁寧に紹介されています。アニメーションの描画周りのトピックでは描画に GPU を用いるためのテクニック (「5.15.7. CSS アニメーションをより滑らかに描画する」) なども紹介されています。
iOS シミュレータや Android エミュレータで検証するにあたってそれぞれの欠点や、 Android の特定のバージョンに存在するいくつかのバグ (!) の回避方法 [2] 、そして何より第 11 章の「JavaScript とネイティブとのブリッジ」では JavaScript とネイティブ間でのやりとりに関しておこなわれている壮絶な工夫などについても幅広く触れられています。解説はただ単に幅広いだけでなく、微に入り細にわたっています。関連する標準規格へのリファレンスを示すことはもちろん、小手先のテクニックにとらわれることなくできるかぎり原理的な解説をしようという配慮が見られます [3] 。
非常に至れり尽くせりで、百戦錬磨の anatoo 先輩が自分の隣について、これまでの知識や経験を伝授してくれているような、そんな感じを受けました。さながらバーチャル anatoo 先輩です。
独学でこういったことを勉強するにあたっては、使用予定のない機能であったり、あまり関心がないトピックに関してはスキップしてしまいがちかもしれません。私自身、「6.7. モバイル BaaS」についてはあまり興味がなかったのですが、ひととおり読んでみて考えが変わりました (特に最後に紹介されていた Helios はかなり面白そうですね！)。ハイブリッドアプリを開発するにあたってどんな技術や工夫が用いられているのかをひととおり知ってみる意味でも、 anatoo さんの丁寧なご指導を存分に味わう意味でも、まずはすべて通読してみることをオススメします。
——と、ここまでベタ褒めな感じですが、惜しいなと感じたところもありますので簡単に触れていきます。
第 5 章の目次なんかはちょっとした Tips 集のような様相ですし、開発中常に手元に置いておいて、困った時に都度読み返すといった使い方もできそうではありますが、そういったリファレンス的な使い方をするには諸々物足りないところがあります。第 5 章を中心に Tips 的な項目が散逸しているため、後から探すには苦労しそうですし、それから、「第 6 章 ストレージ」や「第 11 章 JavaScript とネイティブのブリッジ」などにて、複数のアプローチの性質や制限、利用シーンなどを丁寧に紹介されていてすごくよいのですが、それぞれのアプローチの比較表などがないため、このあたりも読み返して検討するには大変だろうなと感じました。別冊でもいいからまとめがほしいｗ
また、「第 8 章 デバッグ」ではその冒頭で〈HTML5とネイティブの両方のデバッグの手法を知っておく必要があります〉とあるにもかかわらず、紹介されるのは WebView に対するデバッグ手法のみで、ネイティブ部分に関してはまったく言及されません [4] 。「知っておく必要がある」のに！ これはいったいどうしたことでしょう。いままで優しかった anatoo 先輩が急に冷たくなってしまったような、そんな心持ちです。
他には、セキュリティに関連するトピックに少々気になる点があります。私にとって多少心得がある分野なのでちょっとツッコミが細かいかもしれませんがごめんなさい。
たとえば WebSQL の紹介にあたっては、プレースホルダを利用して SQL 文を組み立てる (「6.6.13 プレースホルダ」) 方法がちゃんと説明されています [5] 。ただ、その理由として SQL インジェクションの危険があるからという旨が説明されているものの、 SQL インジェクションとは具体的にどういった危険があるものなのかについてまったく説明がなく、「わかっている人向け」の解説であると感じました。
XSS については「10.3. HTML5 ハイブリッドアプリでの XSS の危険性」にて言及がありますが、冒頭で〈Webアプリとは違うHTMl5ハイブリッドアプリでのXSSの危険性について解説します〉と述べられているとおり、 Web アプリの文脈と共通した XSS の危険性には触れられず、ネイティブブリッジを悪用した端末のネイティブ機能へのアクセスや、端末内ファイルの窃用といった被害がありうることが説明され、サンドボックス外ファイルへのアクセスを制限する方法が紹介されています [6] 。が…… XSS への対策方法については言及がありません。本書で説明されているのは、あくまで、 XSS があった場合の影響を軽減する方法に留まっています [7] 。
ほかにも、パッケージ内のリソースファイルの抜き取りに関する危険について触れつつも対策方法については述べられていない点 [8] 、ネイティブとのブリッジ用に HTTP サーバを用いる場合のトークンについてセキュリティ上求められる要件 [9] や具体的なコードの例示が不足していることなど、セキュリティ周りについては物足りなさがあります [10] [11] 。
少なくともセキュリティに配慮したハイブリッドアプリを開発するには、本書のみでは不充分で、 (Web セキュリティを中心とした) 一般的な情報セキュリティの知識と、スマートフォンアプリに関するセキュリティ関連の知識について習得している必要があると感じました。私の場合は後者についてまったく不案内なので、また別に勉強していかねばなりません [12] 。
しかし、そうはいっても、先述したようなサンドボックス機構の説明であるとか、ネイティブブリッジにおける addJavaScriptInterface の危険性に触れ [13] 、代替手段として「カスタム URL スキーム方式」「JsAlert 方式」「ローカル HTTP サーバ方式」を詳細に説明しているところは本当に素晴らしく、広範なトピックを扱う必要のあるハイブリッドアプリ開発の入門書として、本書が劣っているとは思いません。
Web 技術者にとってのハイブリッドアプリ開発の入り口としてまずオススメできる本
いくつかケチをつけてしまいましたが、私のようにコテコテの Web 技術者で、これまでたまたまスマートフォンアプリとは関わらずに済んでいたような人間にとっては、本書はまさにうってつけでした。
手持ちの Web 関連のスキルではカバーできないような、ネイティブとの連携部分についてのデバッグ手法や、スマートフォンアプリとしてのセキュリティについては別途学ばなければなりませんが、いざ開発するとなれば他にも学ばなければならないものは山ほどあるはず [14] なので、より細かく深いトピックについては、どのみち本書とは別で学んでいく必要がありそうです。ただ、学んでいくにあたって前提となるような知識は必要になってくるはずなので、そういう基礎体力を身につける意味でも本書は入り口として最適です。
本書はコンパクトながらかなり広範囲の内容をカバーしているものですから、もう既にハイブリッドアプリの開発に足を踏み入れている方にとっても、基本的には、「あー、わかるわかるー」と共感しつつも、新たな発見があるのではないでしょうか。
ただ、同種の (本書と違って特定のフレームワークに依存したような) ハイブリッドアプリ開発の解説本 [15] と比べると、本書には「○○アプリを作りながら説明していきます」「例題として××を作っていきましょう」というような内容がまったくなく、図などもかなり少なめです。非常に硬派ですが、ある程度の技術的なバックグラウンドがないと anatoo さんの語り口をもってしても取っつきにくいかもしれません。もっとも、「サンプルとして△△してみよう」式のダラダラした感じの解説にウンザリ気味の私にとっては、このくらいが手早く多くの知識を吸収できて、ちょうどいい按配に感じました。
ということで、私たち Web 技術者が、ハイブリッドアプリ開発に参入するにあたって、まずは本書で入門してから、というのが基本になるかもしれません。いやはや、よい本をありがとうございました。
……ちゃんとした書評ってはじめて書くけど、こんな感じでいいものなのでしょうかね [16] 。あっ、えっと、メリークリスマス！
| [1] | 原文ママ。「Part1」の誤り？ |
| [2] | 特に「5.17 Android 4.03 の WebView と asset に関するバグに対処する」で紹介されているバグは、なんというか……ひどいですね。ハイブリッドアプリ開発に携わっているみなさんの苦労が忍ばれます |
| [3] | 本書では Cordova や特定のライブラリの機能を解説しているような部分がありますが、その際も、どのようにして機能が実現されているかについての大まかな説明があるため、特定のフレームワークやライブラリに依存した、ともすれば陳腐化してしまうような知識ではなく、長く現場で戦えるような知識を習得させようという狙いがあるのでしょう。Part1 の基礎編にて「第 4 章 Cordova を用いたアプリ開発の流れ」という章があるとおり、入門としては Cordova を利用することを薦めてはいますが、ほとんどのテクニックはフレームワークに依存しない共通のものですし、「第 12 章 WebView を使って HTML5 ハイブリッドアプリを開発する」を読めば自力で WebView を埋め込んだハイブリッドアプリを作ることも可能です。 |
| [4] | それは本書のスコープ外だろう、と思われる向きもあるかもしれませんが、しかし、本書が優れている理由のひとつとして、 WebView やフレームワークで要件を満たしきれない場合を考慮し、ネイティブとの連携やフレームワークの拡張をおこなうようなアプローチもきちんと説明されている点があります。これは「5.20 HTML5 とネイティブの切り分け」や「第 11 章 JavaScript とネイティブとのブリッジ」のように専用の章と節で解説されている以外にも、ネイティブとの連携に関しては随所でそのニーズが考慮されていますし、だからこその〈HTML5とネイティブの両方のデバッグの手法を知っておく必要があります〉なのではないでしょうか。 WebView の各デバッグ手法もそれほど詳細に解説されているわけでもないですから、同じように数行程度でも触れていただけたらよかったのになあと思っております。 |
| [5] | ちなみに、 (特に問題であるとは思いませんが) エスケープについての解説はありません。 |
| [6] | 適当に立ち読みした限りでは、まったくこの点に触れていない書籍も結構あるようでした。 |
| [7] | ハイブリッドアプリはその性質上アプリ内の大半のコントロールが HTML5 で記述されているわけですから、本書で紹介されている軽減策をすべて実施したとしても、その DOM 構造すべてが攻撃者の自由になってしまうというのは依然として危険であり、確実に対策をおこなうべき問題です。しかもハイブリッドアプリはその性質上 DOM based XSS となりうる機会が通常の Web アプリに比べて多いことでしょう。 DOM based XSS は極めて厄介な脆弱性であり、 XSS 脆弱性に対する知識を有していたからといって簡単に防ぎきれるようなものではありません。ましてやハイブリッドアプリのように JavaScript による DOM 操作の機会が多くなればなるほど、対策漏れの可能性も増えていくはずです。本書で紹介されたフレームワークやライブラリのなかにも、この種の XSS への対策を容易にするような機能は存在することと思いますし、 XSS それ自体の対策についても是非ページを割いていただきたかったです。 |
| [8] | もちろん、アプリに埋め込む種類の秘密情報の扱いというのが悩ましい問題であることは理解しています。ネイティブコードに逃がしたからといって、情報の種類によっては心許ないでしょう。難読化も焼け石に水かもしれません。そもそも平文でメモリに乗り続けるかもしれません。しかし、相対的に安全な方法の紹介くらいはあるとよかったのかなあと思います（まあいろいろ見ているとアプリ内にそういう情報を格納するべき局面を減らすというのがいまのところ正しそうですが）。 |
| [9] | 少なくとも他のアプリケーションから予測不可能な値である必要があるはずです (と、口で言うのは簡単ですが、それではどう生成すればいいのか、というと本書だけの知識ではどうにもなりません)。 HTTP 経由とはいえローカルでの攻撃となるわけですから、ブルートフォース攻撃に対する耐性もそれなりに有している必要があるでしょう。 |
| [10] | 本書で触れられてはいなけれども知りたかった内容としては、セキュアなデータの格納があります。 WebView から keychain を利用したり、 (妥当な) 暗号化を施したりするのは一般的ではない感じでしょうか？ |
| [11] | あと、 SSL については一切触れられていません。 API 等の機能要件として必要なら別に普通に使えよっていうことなのかもしれませんが…… |
| [12] | 本書の前後に Apple や Google 自身が公開しているセキュリティ周りのガイドラインや、 Secure mobile development best practices 、 『Androidアプリのセキュア設計・セキュアコーディングガイド』 、『Hacking and Securing iOS Applications』、『Android Security 安全なアプリケーションを作成するために』あたりを眺めてはいますが、付け焼き刃感が否めません。 |
| [13] | タイムリーなことに JVN#53768697: Android OS において任意の Java のメソッドが実行される脆弱性 が最近公表されましたね。 |
| [14] | UX とか？ |
| [15] | ただし 30 分程度の立ち読みによる調査結果です。あしからずご了承ください。 |
| [16] | これでもガッツリ推敲しましたが、まだなんか書評っぽくないなあ。書評を書く修行も必要だ。 |