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
19
7年間運用したソーシャルゲームをAmazon EC2構成からAmazon ECS構成へと乗り換えた話
commojun
0
32
長年運用されている Web サービスと 通信をするクライアントを Go で作ってみた話
commojun
0
850
Other Decks in Technology
See All in Technology
SnowflakeとDatabricks両方でRAGを構築してみた
kameitomohiro
1
420
Terraform Cloudで始めるおひとりさまOrganizationsのすゝめ
handy
2
180
PicoRabbit: a Tiny Presentation Device Powered by Ruby
harukasan
PRO
2
240
品質文化を支える小さいクロスファンクショナルなチーム / Cross-functional teams fostering quality culture
toma_sm
0
120
Porting PicoRuby to Another Microcontroller: ESP32
yuuu
4
440
ここはMCPの夜明けまえ
nwiizo
28
9.8k
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
The Tale of Leo: Brave Lion and Curious Little Bug
canalun
1
120
Mastraに入門してみた ~AWS CDKを添えて~
tsukuboshi
0
270
30代からでも遅くない! 内製開発の世界に飛び込み、最前線で戦うLLMアプリ開発エンジニアになろう
minorun365
PRO
11
3k
3月のAWSアップデートを5分間でざっくりと!
kubomasataka
0
120
Automatically generating types by running tests
sinsoku
2
3.3k
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Thoughts on Productivity
jonyablonski
69
4.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Raft: Consensus for Rubyists
vanstee
137
6.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Building Adaptive Systems
keathley
41
2.5k
Writing Fast Ruby
sferik
628
61k
Code Review Best Practice
trishagee
67
18k
Automating Front-end Workflow
addyosmani
1369
200k
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