Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
XWalkViewを利用したクロスプラットフォームアプリの開発
Search
こもじゅん
April 23, 2016
Technology
0
910
XWalkViewを利用したクロスプラットフォームアプリの開発
最近のWebView事情についてと,XWalkViewをAndroidアプリに埋め込む方法を紹介します.
こもじゅん
April 23, 2016
Tweet
Share
More Decks by こもじゅん
See All by こもじゅん
長年運用されている Web サービスと 通信をするクライアントを Go で作ってみた話
commojun
0
790
Other Decks in Technology
See All in Technology
TypeScript開発にモジュラーモノリスを持ち込む
sansantech
PRO
3
870
生成AIによるテスト設計支援プロセスの構築とプロセス内のボトルネック解消の取り組み / 20241220 Suguru Ishii
shift_evolve
0
180
Amazon Q Developerで.NET Frameworkプロジェクトをモダナイズしてみた
kenichirokimura
1
140
効率的な技術組織が作れる!書籍『チームトポロジー』要点まとめ
iwamot
2
190
OPENLOGI Company Profile
hr01
0
57k
AWSの生成AIサービス Amazon Bedrock入門!(2025年1月版)
minorun365
PRO
7
370
Visual StudioとかIDE関連小ネタ話
kosmosebi
1
290
ハイテク休憩
sat
PRO
2
190
AIエージェントに脈アリかどうかを分析させてみた
sonoda_mj
2
130
知っててうれしい HTTP Cookie を使ったセッション管理について
greendrop
1
110
PHP ユーザのための OpenTelemetry 入門 / phpcon2024-opentelemetry
shin1x1
3
1.6k
Denoで作るチーム開発生産性向上のためのCLIツール
sansantech
PRO
0
140
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Six Lessons from altMBA
skipperchong
27
3.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Being A Developer After 40
akosma
89
590k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
230
52k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
A designer walks into a library…
pauljervisheath
205
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
230
Into the Great Unknown - MozCon
thekraken
34
1.6k
Faster Mobile Websites
deanohume
305
30k
Transcript
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