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
670
Other Decks in Technology
See All in Technology
エンジニア向け会社紹介資料
caddi_eng
14
220k
CTOから見た事業開発とプロダクト開発 / My Perspective on Business and Product Development as CTO
keisuke69
4
960
AOAI Dev Day - Opening Session
yoshidashingo
2
440
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
簡単に始めるSnowflakeの機械学習
nayuts
1
190
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
Featured
See All Featured
Designing with Data
zakiwarfel
96
5k
What's in a price? How to price your products and services
michaelherold
239
11k
Docker and Python
trallard
37
2.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Optimizing for Happiness
mojombo
373
69k
Designing for Performance
lara
604
67k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
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