プラットフォームを超えたハイブリッドアプリ開発とは?

プラットフォームを超えたハイブリッドアプリ開発とは?

本のまとめ

▼読んだ本は?
[iOS/Android対応] HTML5 ハイブリッドアプリ開発[実践]入門 Software Design plus by 久保田 光則さん,アシアル株式会社さん
http://amzn.asia/102UODd
▼HTML5ハイブリッドアプリとは?
■Webkitというレンダリングエンジンを用いることにより、HTML5/CSS/Java Script等のWEB技術を用いてモバイルアプリを作成する手法
■ワンソースでマルチプラットフォームに対してモバイルアプリを公開できる
■モバイルアプリ開発のコストや期間を低下できる

▼そもそもAndroidとiOSプラットフォームの違いは?
■「Android=Java」「iOS=Objective-C」とプログラミング言語が違う
■自身のOS機能を最大限に活かすために利用するAPIの利用方法・呼び出し方法が違う
■「Android=Eclipse/Android Studio」「iOS=Xcode」と統合開発環境(IDE)が違う
■「Android=端末のスペックやOS挙動含めて正確にエミュレーション」「iOS=端末と類似する形で動く別のアプリでシミュレーション」とテスト手法・精度が違う

▼そもそもモバイル上で利用できるアプリの種類とは?
【1】ネイティブアプリ
【2】WEBアプリ
【3】ハイブリッドアプリ

▼WEBアプリのメリット/デメリットは?
■メリット
└HTML/JavaScript/CSSのテキストファイルをブラウザが認識し実行してくれる
└サーバー内のファイルを最新に保っておけば、常にユーザーは最新のデータを閲覧することができる
└W3C等により標準化されており、多くのプラットフォームで類似する挙動を実行することができる
└Webには様々なライブラリやノウハウがすでに存在しており、それらを利用できる

■デメリット
└ブラウザが処理するため、端末が持っているファイルストレージ・カメラ機能等は利用できない
└OS本体ではなくブラウザがレンダリングエンジンを元に処理するため、パフォーマンスが落ちる場合がある

▼ネイティブアプリのメリット/デメリットは?
■メリット
└加速度センサ・ファイルストレージ・プッシュ通知・カメラ機能など端末が本来持つ機能を利用できる
└OS用のネイティブコードで記述されるため、高いパフォーマンスを発揮する場合が多い
└その端末のブラウザを開かなくても、直接アプリを開き利用することができる

■デメリット
└特定のプラットフォームでしか利用できず、複数のプラットフォームに展開する場合開発コストが高くなる

▼ハイブリッドアプリのメリット/デメリットは?
■メリット
└WEBアプリと同様にHTML/JavaScript/CSSのテキストファイルで構築できる
└WEBアプリでは利用できない加速度センサ・ファイルストレージ・カメラ機能など端末が本来持つ機能を利用できる
└ネイティブアプリと同様各プラットフォームのアプリストアからダウンロードして利用できる

■デメリット
└まずレンダリングエンジンであるWebViewを読み込み、その上でWebViewにHTML5を読み込ませるため実行速度が遅くなる傾向がある
└ファイルストレージ・カメラ機能等のネイティブ機能を利用する場合、各種フレームワークをブリッジとして挟みjavaScriptを通すため、実行速度が遅くなる傾向がある
└HTML5 Canvasを利用して描画処理を行うこと等も可能だが、3Dゲームなど高速なグラフィック処理を必要とするアプリには向かない

▼ハイブリッドアプリの基本的な仕組みとは?
■ブラウザと類似するレンダリングエンジンをサードパーティ製のアプリから利用できるWebViewと呼ばれるコンポーネントを通して利用することで、HTML/JavaScript/CSS等のテキストファイルを読み込み作動する
■アプリ起動と同時に画面内にWebViewが埋め込まれ、アプリ内部のHTML/JavaScript/CSSを読み込む
■iOS・Android共にWebView内部で利用されているレンダリングエンジンは、Apple社が開発したオープンソースのレンダリングエンジンを利用
■WEBのブラウザと類似する形で動くが、ブラウザが持つアドレスバー・戻る・進むボタンを保持しないなど、完全に同一ではない
■WebView利用に加え、ハイブリッドアプリ用の「フレームワーク」が存在しており、ネイティブブリッジを利用すると、ネイティブアプリと同様にファイルストレージ・カメラ機能等がJavaScriptを通じて利用できる

▼ハイブリッドアプリのフレームワークが提供する中身は?
■例えばWebView機能を利用する場合、iOSとAndroidではソースコードが異なるが、その差異をフレームワーク側が吸収し、HTML/CSS/javaScriptを記載すれば両プラットフォームで利用可能
■ネイティブブリッジと呼ばれる機能をフレームワークが保持しているため、加速度センサ・ファイルストレージ・プッシュ通知・カメラ機能・コンパス・位置情報・デバイス情報取得などの機能をjavaScriptで呼び出すことが可能
■上記javaScriptで呼び出せるネイティブ機能は「プラグイン」と呼ばれ多数提供されており、また標準のプラグインでは存在しない場合、開発者は自身で追加のプラグインをJavaやObjective-Cで開発可能

▼具体的なハイブリッドアプリフレームワークの種類にはどんなものがある?
■Apache Cordova:ハイブリッドアプリ開発において最も有名なフレームワーク。多様なモバイルプラットフォームに対応し、かつjavaScriptで呼び出せるネイティブ機能も豊富
■Triaina:mixi社が作成。javaScriptで呼び出せるネイティブコード数は少ないが、一方でネイティブが提供するUI等を利用した開発が可能
■PhoneGap Build:クラウド型WEBサービスとなっており、ローカルにてHTML5で記述したものをサーバー側で自動的にビルドして返してくれる。DreamweaverなどAdobe社の製品と連携した利用も可能
■Trigger.io:クラウド型WEBサービスとなっており、かつjavaScriptでネイティブが提供するUI等も呼び出して利用可能
■Monaca:クラウド型WEBサービスとなっており、かつソースコードの記載に関してもWEB上で動作するIDEで直接修正しビルドすることが可能。ローカル上に開発環境を構築する必要がなくなる

▼ハイブリッドアプリフレームワークの一つ「Cordova」の利用方法は?
【1】Node.js製のCordovaコマンドラインツールが用意されており、ダウンロードして利用開始
【2】コマンドを利用して、開発するためのプロジェクト、また開発ファイルを格納するフォルダ等を作成
【3】生成されたwwwディレクトリ配下に、プラットフォーム共通となるHTMLファイル等を格納
【4】ネイティブ機能にアクセスするためのプラグインを利用したい場合、プラグインを利用するためのcordova.jsを利用。cordova.jsは例えばネイティブアプリが提供するカメラ機能等に対して、複数のプラットフォームにアクセスするための共通インターフェースを提供
※cordova.jsは通常のjavaScriptと異なり、端末のネイティブ機能等にアクセスできるため、セキュリティ観点から特定のドメインのHTMLしか読み込まないようにドメインホワイトリストを指定するなどが別途必要
【5】生成されたmergesディレクトリ配下に、特定のプラットフォームのみに使いたい画像やjavaScriptを格納
※特定のプラットフォームしか提供していない機能がある場合や、ネイティブが直接提供するUIを利用したい場合などに利用
【6】生成されたplatformsディレクトリ配下に、各プラットフォーム固有で利用するアプリアイコン、またアプリ起動時に利用するスプラッシュスクリーン等を格納
【7】エミュレータを利用してプロジェクトを実行し、アプリをビルドして開発通りに動作するかを確認
【8】エミュレータのみではなく実機で最終確認

▼Cordovaプラグインがデフォルトで提供するネイティブ機能とは?
■加速度センサ機能
■カメラ・録音機能
■コンパス機能
■ネットワーク接続機能
■端末内のコンタクトリスト機能
■デバイス情報(端末の位置情報など)機能
■イベント機能
■ファイルストレージ機能
など

▼予め用意されたもの以外に、Cordovaプラグインを独自実装するときの流れは?
【1】config.xmlにプラグインに関する情報を追加
【2】Java/Objective-C等プラットフォーム毎の言語でプラグインのソースコードを記述
【3】javaScriptからプラグインを呼び出す

▼ハイブリッドアプリ開発時のポイントとは?
■ボタンやテキストを手でタップした際の動作の最適化
└<a><click>タグを利用するとダブルクリックかどうかを判別するため、タッチイベントの処理が開始されてから300ミリ秒の遅延を経て動作するため、モバイルでは<a><click>の利用は動作が遅く感じられることが多い
└javaScriptライブラリであるTappable、Fastclick等を利用しモバイルでのタップ動作をスムーズにることが必要

■リンククリック時のハイライト表示の削除
└リンクをタップした際に、ブラウザの認識でハイライトを表示してしまうとWEBサイトのように見えてしまう
└「-webkit-tap-highlight-color」 スタイルプロパティに透明色を指定しハイライトを解除

■慣性スクロールでスクロール挙動をなめらかに
└「-webkit-overflow-scrolling」スタイルプロパティを利用することにより慣性スクロールを用い、スマホで指を利用する際の閲覧した際の挙動をスムーズに

■Android向けアプリから先に開発を行う
└同じWebViewを用いていても、iOS端末ではAndroid端末よりスクロール・各種インタラクションにおいてなめらかに動作するため、先に動作が遅くなるAndroidからテスト・開発すると良い

■ストレージ内へのデータ保存方法が異なる
└WEBアプリケーションの場合、ユーザーが利用するデータはサーバー側のデータベースに保存され、サーバー側のセッションとクライアントブラウザ側のcookie内に保存されたトークンを元に照会を行い、保存したデータを取り出す
└一方モバイルアプリでは、例えばカメラで撮影したデータは端末内のストレージに保存し、必要に応じて端末から直接取り出されるなど、ネイティブ機能を利用した開発方法となる

■スマホの縦向き・横向き時の対応を意識する
└スマホでは横向き(ランドスケープ)、縦向き(ポートレイト)の2方向の向きが存在し、各向きの際の対応方法を予め決めておく必要あり
└CSSメディアクエリ内部にランドスケープ・ポートレイトをそれぞれ指定し、それぞれに合わせてCSSを出し分けることが可能

■モバイルの仮想モニター枠となるviewportを意識する
└PCではモニターの実際のpixel数に対して、そのままのpixel数でWEBサイトが表示されるが、モバイルでそのままPCサイトを表示すると、モバイルデバイスの実際のpixel数に対して大きくなりすぎてしまい、PCサイトがはみ出してしまうため、viewportと呼ばれる仮想のモニター枠が別途用意されている
└例えばviewportを400px等に指定しておくと、最大900pxあるPCサイトに関しても400pxを基準として全体が縮小表示される形となる

■メモリ容量が少ないことを意識する
└スマホデバイスではPCに比べるとそもそものメモリ容量が少ないことに加え、ハイブリッドアプリではWebView内でjavaScriptを利用しネイティブコードを処理するなど、通常よりも利用するメモリ容量が増加する傾向にある
└iOSアプリ開発時にはXcodeにて用意されている「Instruments」を利用、AndroidアプリではUSBケーブルに接続し特定のコマンドを実行するとメモリ使用状況の調査・テストが可能

■クロスサイトスクリプティング(XSS)のセキュリティ対策に注意する
└外部から取得した値を引数等に含んで特定のスクリプトを実行する際に、その値に悪意のある内容が含まれていてセキュリティホールとなってしまうクロスサイトスクリプティング(XSS)
└ハイブリッドアプリでは、javaScriptを通じてネイティブ機能を実行できてしまうため、端末内のファイルを抜き出すなど被害が拡大する可能性が高く、厳重なセキュリティ管理が必要

▼ハイブリッドアプリで利用できる端末内ストレージの種類は?
■LocalStorage
└キーとバリューの一対からなるデータを保存できる単純なストレージ。データは自動的に永続化され、アプリ終了後も残る。ただ5MBまでと少量のデータしか保存できないため、アプリケーションの設定項目の保存等に利用されることが多い

■SessionStorage
└LocalStorageと同様だが、永続的には保存されず、アプリ終了と同時にデータは消去される

■ファイルストレージ
└端末内部のファイルシステムを利用し、ファイルやデータを保存する

■WebSQLデータベース
└リレーションナルデータベース形式にて複雑な形でデータを保存できるストレージ。レコードを保有し、レコード同士に関係を持たせることができる

▼開発後のアプリストアへのモバイルアプリ公開時の流れは?
■Google play storeへのモバイルアプリ公開
【1】25ドルを支払いGoogle playデベロッパーとして登録(初回のみ必要)
【2】有料アプリの場合のみGoogle checkoutで課金用の決済手段を登録(売上の7割を開発者が取得可能)
【3】ウイルスやマルウェアなど必要最低限のチェックが行われる
【4】提出から数時間でストアに公開

■App storeへのモバイルアプリ公開
【1】99ドルを支払いiOS Developer Programに登録(毎年支払い必要)
【2】「非公式APIを利用していないか?」「Appleが提供するiOSヒューマンインターフェースガイドラインに従っているか?」の2観点を中心とし、厳格な審査が行われる
【3】1~2週間経過後にストアに公開

思ったこと

Webブラウザを理容したWebアプリ、端末OSの機能にアクセスし端末毎に開発するiOSアプリやAndroidアプリなど、開発するプラットフォーム自体が複数に広がりつつあります。その中でWebViewやCordova等の予め用意されたフレームワークを利用することで、プラットフォーム間の差異を吸収し、開発を進める「ハイブリッドアプリ」についてまとめられています。

確かに、メディアがこれだけ広がりを見せている中においては共通する「HTML/CSS/javaScript」の3つを中心として開発できるハイブリッドアプリの開発手法は、複数のプラットフォームに対して一気に展開し、ユーザーとのタッチポイントを生み出せるという点で優れている手法だなと痛感しました。

とはいえ、差異を吸収するとはいえ端末毎に戻るボタンの存在などそもそものUIが異なったり、開発後はその分多くの検証端末を通じて開発を行わなければいけないなど、一筋縄では行かないだろうなというのは間違いないとは思います。

けれど、WEB業界に身を置く自分としては「HTML/CSS/javaScript」という最も慣れ親しんだ言語を通じて、複数の異なるプラットフォームにカメラ機能やファイル保存などモバイルの機能を利用しつつ開発・公開できるフレームワークの便利さは最高ですね。なによりエンジニアでもない自分には色々覚えるのも辛いし「HTML/CSS/javaScript」の3言語の習得に集中したい!という意味で未来がありますね。

ありがとうございました!

関連する記事