改善ニュース・最新動向feedRSSこの広告は、90日以上更新していないブログに表示しています。OSS本記事は「HTML5ハイブリッドアプリ開発を支えるOSS『Cordova』シリーズ」の2本目です。Cordovaスーパー勉強会」にて、アシアル株式会社の田中正裕氏が行なった講演のダイジェストをお届けします。Cordova派生の製品がいくつも登場、どのように差別化が進められてきたのか?元々は、PhoneGapという製品を中心に色んなエコシステムがあったのですが、Cordovaというオープンソースに変わったことで、そこから派生して色んなプロジェクトが各社によって作られています。Projectも、Cordovaから派生したディストリビューションです。Mobile」もCordovaがベースです。Appsで作ったアプリはCordovaで動かせるんですけど、そのままじゃ動きません。Apps用のAPIというのがありまして、例えば、GoogleにログインするためのAPIとか、WebSocketサーバになるような機能とか、そういう拡張をGoogleはCordovaプラグインとして作っています。Studioが、Cordovaに対応しました。Studioで、HTML5を使った、iOSアプリが作れるのです。あと、最近日本でも火がつきつつあるIonicフレームワーク、HTML5を使ってヌルヌルに動くネイティブアプリを作るためのこういうツールも、内部ではビルドエンジンとしてCordovaが使われています。UIみたいなツールもあるんですけれど、これもCordovaに準拠しています。これらのツール/フレームワークは、何が違って何が同じかと言われると、最終的に作られるアプリは全て同じで、何の違いもありません。各社独自のアドインを開発し入れているという点で、大きく異なります。Appsだと、先ほど説明したようなプラグインを作っていたりします。弊社のMonacaでも、ネイティブの機能を扱えるようなプラグインを提供しています。モバイルWebとハイブリッドアプリの違いは何か?HTML5を解釈するブラウザエンジンについて、モバイルブラウザとCordovaとでは微妙に異なります。モバイルブラウザでURLを打ち込んで表示するWebアプリは、iOSだと、Safariと、Safari以外に分かれます。Safariと、iOS上で動くChromeは、異なるブラウザエンジンで動いていたりします。Appleはモバイルで扱うブラウザエンジンに、特殊なフラグをつけているのです。iOSでは、Cordovaを含むサードパーティベンダの場合、内部的にはWebViewを使ってWebアプリを表示します。SafariはJITなどの機能によって、JavaScriptを高速化させるような仕組み(Nitro)が入っているのですが、iOSのWebViewはそれが無効化されています。Androidも、微妙にややこしいです。AndroidにもiOSのような標準ブラウザが入っているのですが、Android版のFirefoxやChromeでは、内部的でそれを使っていません。iOSと同じようにWebViewを使っているのかといえばそうでもなく、FirefoxはFirefoxの独自のエンジン、ChromeはChromeの独自のエンジンで動いていたりします。Cordovaは、FirefoxやChromeが使っていない、Android標準のWebViewを使っています。WebViewはAndroidのバージョンに依存していて、例えば、Androidの4.1、4.2、4.3と、バージョンごとに対応している機能に違いが表れます。対してChromeは、Androidのバージョンに関係なく、Chromeのバージョンに機能の違いがでます。した背景から、Cordovaの対応している機能は、Cordovaのバージョンに関係なく、動作させているOSのバージョン、WebViewの機能に依存します。Cordovaだから対応機能が少ないとか、そういうことはありません。Cordovaがモバイルブラウザと大きく違うところがあります。Policyのルールが異なることです。APIの拡張ができません。APIのプラグインを作ることで、ネイティブの機能を利用することができます。Policy、セキュリティについても、ブラウザの場合はブラウザのルール、HTTPヘッダで指定されたルールが適用されます。対してCordovaは、基本的に自由でどこにでもアクセスし放題です。制限を加えたい場合、config.xmlにて、どの外部URLを許可するかを、ホワイトリスト形式で設定できるようになっています。結論を言えば、APIレベルではモバイルWebとハイブリッドアプリは同じです。よって「Webアプリ≒ハイブリッドアプリ」ということになります。「ハイブリッドアプリは違う!」と言われているのか。それは「HTML5アプリとネイティブアプリの違い」ここに全てが始終します。これまで、ハイブリッドアプリが抱えてきた課題は何か?HTML5ハイブリッドアプリは、これまで説明してきました通り、ブラウザエンジンの上で動くことになります。一方で、ネイティブアプリにはそんなものはなく、OSが直接アプリを動かします。このため、アプリの作りから動作の仕組みまで、全く違っていたりします。HTML5アプリを、ネイティブアプリの感覚で作ると問題になります。ユーザインタフェース、これが一番よく言われます。HTML5でどうやってネイティブアプリのようなスムーズなUIを作るのか、これが一番私が受けることの多い質問です。そもそも、どうつくればいいのかわからない、これが一番多い悩みではないかと思います。やっていてジワジワと感じてくるのが、実行するパフォーマンスが違うという点です。ネイティブアプリの開発をした人なら、ビューなんかを10個ぐらい重ねてとか、トランジションでスクリーンを動かしてとか、アクティビティを作ってとか、ネイティブの要領で、頭のなかでやることがイメージできて実装ができるでしょう。これがHTML5なので、ビューもトランジションもアクティビティも無くて、そもそも世界が違うので、従来のパフォーマンス改善のノウハウが全く使えなかったりします。結果として、画面がもっさりとして、ストレスを感じるということになるのです。3つ目が、セキュリティです。ここについては、大分改善されています。Webアプリと同じなので、JavaScriptが読めてしまうという問題ですが、難読化の技術がでてきていますね。そもそも、ネイティブも別に意図的に難読化をしているというわけではないので、例えばAndroidのclassなんかも、逆コンパイルすれば解読できますよね。最後に、デバイスのAPIとか、ネイティブのAPIを呼びたいという点です。APIを作って、その中からネイティブのAPIを呼ぶということができます。パフォーマンスも、悪くありません。AndroidなどのネイティブのAPIを、全てJavaScriptのAPIに紐づけて作るということはしないので、これが悩みに繋がったりします。APIの呼び出し先でネイティブのコードとして作らなくてはいけないため、このあたりの作り方に、慣れが求められます。HTML5はネタが出尽くした。寛)2009年よりNTT系SIerにてエンタープライズOSSやWebの技術を推進。2015年よりピクシブ株式会社にWeb系エンジニアとしてジョイン。2016年からは、同社のマネージャー職として活動しています。html5jパフォーマンス部とか、日本Cordovaユーザー会を立ち上げたり。エキスパートだったり。2015年1月号「特集:HTML5」他、執筆。「2014年4月」はIEの歴史を動かした。-はてなブログをはじめよう!furoshiki0223さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。