XWalkViewを利用した クロスプラットフォームアプリの開発 commojun

軽く自己紹介 大澤 純 • 大阪大学大学院情報科学研究科 D3 • 千葉出身 • トランペット吹き • ネコ好き • 就活ほぼ終わりました．

研究の話 • こんてきすとモンスターを開発してます．

こんてきすとモンスターとは • アプリの利用履歴と，ユーザの身の回りの状況 に関する情報を収集するための育成ゲーム こいつを育てるために… • どこにいる？ • 誰と一緒にいる？ • どんな気分？ 実世界の状況を教える． ＋アプリの起動履歴を裏で収集 時刻 App 場所 人数 誰 … 12：00 学校 3 友人 … 12：10 学校 3 友人 … 13：30 自宅 0 － … 13：50 自宅 0 － … 16：00 町中 1 家族 …

どうやって作った？ • WebViewを利用したクロスプラットフォーム （ハイブリッド）アプリです． こんモンUI Android iOS アプリログ 収集 WebView WebView こんモンサーバ DB WebViewとは… • アプリでHTMLコンテンツを表示するための仕組み 「WebView」とは、アプリ開発の際に利用できる機能のひとつで、アプリ内で Webページを表示できます。多くのアプリケーションで利用されています。 （http://k-tai.impress.co.jp/docs/column/keyword/20150127_685512.html）

なぜそんなことを • 世の中には便利なフレームワークがいろいろ あるのに こいつのせい – アプリの利用履歴収集プロセスはネイティブ じゃないと書けない（たぶん）． こんモンUI Android iOS アプリログ 収集 WebView WebView こんモンサーバ DB

ここで問題点がいろいろ • 標準WebViewが抱える問題点 – AndroidやiPhoneのHTML, CSS, JSのバグまとめ position:fixed が使えなかったり， canvasがおかしかったり… – WebViewがまともになったのはごく最近のこと！ • Android4.4～ Chromiumベースになる • Android5.0～ OSから切り離される • 特に問題なのは… WebViewのバージョンがOSの バージョンと結びついていること…！

まともなWebViewって… 2016年現在の各OSのシェア • iOSはまだしも，Androidはバージョン4.3以下のものは完全に見捨てられ ている… • まともなWebViewが普及するのにはもう少し 時間がかかりそう． Juggly.cn：世界中で使われているAndroidのバージョン別シェア Iphone-mania.jp：iOS9、バージョン別シェアで75%に到達

そこで本題 • 賢いWebViewを使いましょう． （今回はAndroid対象） • Crosswalk webviewとは… – Chromiumベースで作成されたWebView – 最新のChromeと同等の機能を持つWebViewをアプリに組み込むことが可能 – 様々なフレームワークのコア技術に使われている…!!

今日の内容 • CrossWalkViewを利用したAndroidアプリの 作成方法を教えます． – AndroidアプリでHTMLを表示するまで – ネイティブ側からWeb側へデータを送る． – Web側からネイティブ側へデータを送る． クロスプラットフォームアプリを作りたいが，何らかの理由で ネイティブコードも使いたい． • ネイティブじゃないとできない． • 過去に作ったコードの資産がある． ※そうでない場合は，素直に流行りのフレームワークを使う方が幸せ になれます． 対象となるケース

HTMLを表示するまで 案外簡単（になりました） • 今回はこちらを参考に… 「XWalkでChromiumのWebViewを使おう！」 （http://qiita.com/niusounds/items/ecd51016cda91c5c3a5e） – AndroidStudioを使います． – 次スライドからは，AndroidStudioで 新規プロジェクトを作成した後からの話に なります． – 「XWalkTest」というプロジェクトを作った として話を進めます．

HTML表示まで：build.gradleいじる • プロジェクトのbuild.gradleをいじる． • アプリのbuild.gradleをいじる． 仕組みはよくわからないが，これらを追記することでビルド時に XWalkViewのコンポーネントをダウンロードして追加してくれ るらしい．

HTML表示まで：パーミッションとレイアウト • パーミッションの追加 • レイアウトファイルにXWalkViewを追加

HTML表示まで：URL読み込み • URLを読み込む

HTML表示まで：アプリ内HTMLファイル アプリ内にHTMLファイルを置きたい場合は？ • Assetsフォルダの作成 • HTMLファイルを置く • ファイルの読み込み これで，XWalkViewをはめ込んだアプリが作れます！

データのやりとり ここまで出来たとき，次に持つであろう疑問 • ネイティブ側とWeb側でデータのやりとり をするにはどうすればいいの？ – ネイティブ側で取得したセンサデータなどを WebView内で表示したい… – WebView内でのフォーム入力内容を ネイティブ側のデータベースに登録したい…

ネイティブ側からWeb側へ • ネイティブ側からJavaScriptを実行するだけ！

Web側からネイティブ側へ • JavaScriptInterfaceを準備して，Web側から 操作を許可するオブジェクトを渡してあげる．

実機で動かしてみた • 次の3つを確認してください． – アプリ内でHTMLが表示できていること – ネイティブ側からWeb側にデータが送れていること – Web側からネイティブ側にデータが送れていること

まとめ • XWalkViewを使ってAndroidアプリを作成する 方法を紹介しました． – 最近のWebView事情 – AndroidアプリでHTMLを表示するまで – ネイティブ側からWeb側へデータを送る． – Web側からネイティブ側へデータを送る． 万人受けする方法ではありませんが，フレームワークの流行り廃りに影響されにくい 愚直な方法だと思います． • 今回のテストアプリはGithubに公開してます． – https://github.com/junpooooow/XWalkTest