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 こもじゅん
甲子園ポケットの思い出を残そう
commojun
0
23
7年間運用したソーシャルゲームをAmazon EC2構成からAmazon ECS構成へと乗り換えた話
commojun
0
44
長年運用されている Web サービスと 通信をするクライアントを Go で作ってみた話
commojun
0
890
Other Decks in Technology
See All in Technology
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
250
20250623 Findy Lunch LT Brown
3150
0
850
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
140
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
340
解析の定理証明実践@Lean 4
dec9ue
0
170
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
300
VISITS_AIIoTビジネス共創ラボ登壇資料.pdf
iotcomjpadmin
0
160
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.5k
UIテスト自動化サポート- Testbed for XCUIAutomation practice
notoroid
0
130
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
tiltmax3
0
310
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
10k
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
220
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
Producing Creativity
orderedlist
PRO
346
40k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Documentation Writing (for coders)
carmenintech
71
4.9k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Making Projects Easy
brettharned
116
6.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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