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
900
XWalkViewを利用したクロスプラットフォームアプリの開発
最近のWebView事情についてと,XWalkViewをAndroidアプリに埋め込む方法を紹介します.
こもじゅん
April 23, 2016
Tweet
Share
More Decks by こもじゅん
See All by こもじゅん
長年運用されている Web サービスと 通信をするクライアントを Go で作ってみた話
commojun
0
700
Other Decks in Technology
See All in Technology
Namespace, Now and Then
tagomoris
0
170
実践的なバグバウンティ入門
scgajge12
4
2.1k
タイミーのBraze活用 ~PUSH通知を活用したレコメンド~
ozeshun
2
120
AWSを始めた頃に陥りがちなポイントをまとめてみた
oshanqq
1
1.7k
エンジニア向け会社紹介資料
caddi_eng
15
250k
20分で分かるIAM全機能 (拡大版) / 20240903-jawsug-yokohama-iam
opelab
3
120
Our Journey from in-House CD System to Open Source
ffjlabo
0
100
Dojo 20240830 COBOL to Java on Z
ichikawayasuhisa
0
240
エンジニア採用ノウハウ0から継続的な採用に至るまで / Try recruiting engineers
ohageeq
0
130
LLMに日本語テキストを学習させる意義
ksaito
13
3.4k
Bidirectional Quadratic Voting Leveraging Issue-Based Matching
kentaro
2
170
開発者体験を意識した開発チームの生産性向上の取り組み
ham0215
3
650
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
34
1.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
22
580
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
Facilitating Awesome Meetings
lara
49
5.9k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
22
1.7k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Building Flexible Design Systems
yeseniaperezcruz
324
37k
Build The Right Thing And Hit Your Dates
maggiecrowley
29
2.2k
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