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
WebViewを使って面倒なことから逃げよう
Search
Yu Watanabe
August 31, 2018
Programming
1
2k
WebViewを使って面倒なことから逃げよう
WebViewで面倒なコンポーネントを対応しませんか?
リポジトリはこちら ->
https://github.com/watanabeyu/webview-example
Yu Watanabe
August 31, 2018
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
npm packageとリリースとモノレポ
watanabeyu
0
41
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
730
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1k
gandhの紹介です
watanabeyu
0
26
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
590
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.2k
react-native-unimodulesのススメ
watanabeyu
1
6.3k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1k
React Native Expoで行うアプリの簡単最速運用
watanabeyu
0
300
Other Decks in Programming
See All in Programming
Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react
harunatsujita
8
4.9k
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.3k
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
290
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
240
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
380
Go言語でターミナルフレンドリーなAIコマンド、afaを作った/fukuokago20_afa
monochromegane
2
140
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.9k
レガシーシステムにどう立ち向かうか 複雑さと理想と現実/vs-legacy
suzukihoge
14
1.9k
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
17
4.3k
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.1k
プロジェクト新規参入者のリードタイム短縮の観点から見る、品質の高いコードとアーキテクチャを保つメリット
d_endo
1
1.1k
Java ジェネリクス入門 2024
nagise
0
670
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Fireside Chat
paigeccino
33
3k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
390
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
GraphQLとの向き合い方2022年版
quramy
43
13k
Speed Design
sergeychernyshev
24
580
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Designing for Performance
lara
604
68k
Transcript
2018/08/31 ΘͨͳΏ͏ WEBVIEWΛͬͯ໘ͳ͜ͱ͔Βಀ͛Α͏
▸ ࣗݾհ ▸ WebViewͬͯ·͔͢ʁ ▸ WebViewΛԿʹ׆͔͔͢ʁ ▸ QRը૾ͷσίʔυ ▸ άϥϑΛදࣔ͠Α͏
▸ πΠʔτϖʔδΛදࣔ͠Α͏ ▸ ԻݯཧஂମͷαΠτ͔ΒཧίʔυΛऔಘ͠Α͏ ▸ WebViewͷΫοΩʔআํ๏ ▸ ·ͱΊ ֓ཁ
ࣗݾհ ΘͨͳΏ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։
▸ ࣄ༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu
▸ WebViewͬͯԿ͕Ͱ͖Δͷʁ ▸ URLͰࢦఆͨ͠ϖʔδ ▸ <p>hoge</p>Έ͍ͨͳܗͷจࣈྻ ▸ ϩʔΧϧͷHTMLϑΝΠϧ ▸ ͳΜͱͳ͍ͮ͘Β͍ҹ
▸ WebViewΛ͏࠷େͷར ▸ HTMLΛจࣈྻͰͤΔͷͰಈతʹHTMLΛ࡞ΕΔ ▸ JSΛͪ͜Β͔Βࠩ͠ࠐΜͰ࣮ߦͰ͖Δ(injectJavaScript) ▸ ಡΈࠐΜͩHTML͔ΒจࣈྻΛड͚औΕΔ(postMessage,onMessage) ▸ →Կ͔ʹ׆͔͢͜ͱ͕Ͱ͖ͳ͍ͩΖ͏͔ʁ WEBVIEWͬͯ·͔͢ʁ
▸ QRը૾Λσίʔυ͍͚ͨ͠Ͳreact-native linkͨ͘͠ͳ͍ ▸ άϥϑΛදࣔ͢Δͷʹsvgͱ͔ॾʑඞཁͳͷਏ͍ ▸ twitterͷπΠʔτΛද͍ࣔͨ͠Μ͚ͩͲίϯϙʔωϯτ࡞Δͷ͕ਏ͍ ▸ ԻݯཧஂମAPI͕༻ҙ͞Εͯͳ͍͚Ͳཧίʔυऔಘ͍ͨ͠ WEBVIEWΛԿʹ׆͔͔͢ʁ
ͪΐͬͱ໘ͳ࡞ۀΛWebViewʹಀ͕ͯ͠Έ·ͤΜ͔ʁ
WEBVIEWΛͬͯ໘ͳ͜ͱ͔Βಀ͛Α͏ QRը૾ͷσίʔυ
QRը૾ͷσίʔυ(1) ▸ Χϝϥϩʔϧ͔Βը૾Λબͯ͠σίʔυ͍ͨ͠ ▸ react-native-qrcode-scannerΛ͑Α͍ ▸ react-native linkΛ͠ͳ͍ͱ͍͚ͳ͍ ▸ Expoͩͱ͑ͳ͍
▸ WebαΠτͰQRը૾ΛσίʔυͰ͖ΔαΠτ͋Δ ▸ → WebViewͰ࣮Ͱ͖Δͣ ▸ → WebViewΛ௨ͯ͠σίʔυͰ͖ΔϥΠϒϥϦΛ࡞
QRը૾ͷσίʔυ(2) ▸ react-native-qrimage-decoderΛ࡞ ▸ react-native linkΛ͢Δඞཁͳ͠ ▸ ExpoͰ͑Δ ▸ AndroidExpoͷFileSystemʹґଘ
▸ ͍ۙ͏ͪʹExpo͡Όͳͯ͘ಈ͘Α͏ʹΞοϓσʔτ…
QRը૾ͷσίʔυ(3) ▸ src/includes/ios.htmlʹͯdataURLܗࣜͰ͞Εͨը૾Λσίʔυ ▸ HTMLͰ༻͍ͯ͠ΔϥΠϒϥϦLazarSoft/jsqrcode ▸ ߦͰॲཧ͢Δ͜ͱ͕Մೳ
QRը૾ͷσίʔυ(4) ▸ src/includes/_android.jsʹͯcanvasͰը૾ΛಡΈࠐΈdataURLԽ ▸ cozmo/jsQRͰσίʔυ ▸ Android൛ͷҙ ▸ WebViewͰҰʹॲཧ͖͠ΕΔྔͷݶք͕ܾ·ͬͯΔʁ ▸
ImagePickerͰಡΈࠐΜͩը૾uriΛͦͷ··ͯ͠ಡΈࠐΜͰ͘Εͳ͍ ▸ Ұอଘ͔ͯ͠ΒͦͷuriΛ͢ඞཁ͋Γ
QRը૾ͷσίʔυ(5) σϞ
WEBVIEWΛͬͯ໘ͳ͜ͱ͔Βಀ͛Α͏ άϥϑΛදࣔ͠Α͏
άϥϑΛදࣔ͠Α͏(1) ▸ react-native-chartreact-native-pathjs-chartsͳͲ ▸ react-native linkΛ͠ͳ͍ͱ͍͚ͳ͍ ▸ react-native-svgΛ͍Εͳ͍ͱ͍͚ͳ͍ ▸ Expoͩͱ͑ͳ͍
▸ WebαΠτͰChart.jsͱ͔D3.jsͰάϥϑදࣔՄೳ ▸ → WebViewͰ࣮Ͱ͖Δͣ ▸ → ࠓճChart.jsʹ࣮ͯ
άϥϑΛදࣔ͠Α͏(2) ▸ ϓϩδΣΫτʹgraph.htmlΛ࡞ ▸ WebViewͰݺͼग़ͯ͋͛͠Εྃ
άϥϑΛදࣔ͠Α͏(3)
άϥϑΛදࣔ͠Α͏(4) σϞ
WEBVIEWΛͬͯ໘ͳ͜ͱ͔Βಀ͛Α͏ πΠʔτϖʔδΛදࣔ͠Α͏
πΠʔτϖʔδΛදࣔ͠Α͏(1) ▸ πΠʔτϖʔδͷ࣮͔ͳΓ໘ ▸ ୯७ʹࢦఆͨ͠πΠʔτͷ༰Λදࣔ͢ΔϖʔδΛ࡞ Γ͍͚ͨͩͳͷʹຒΊࠐΊͳ͍ͷਏ͍ ▸ WebαΠτͷຒΊࠐΈΟδΣοτ͍͍ͨ ▸ →
WebViewͰ࣮
πΠʔτϖʔδΛදࣔ͠Α͏(2) ▸ ຒΊࠐΈπΠʔτΛදࣔ͢ΔίʔυΛsourceͱͯ͠ࢦఆ ▸ react-native-autoreheight-webviewΛೖΕͯߴ͞ΛՄมʹ
πΠʔτϖʔδΛදࣔ͠Α͏(3) σϞ
WEBVIEWΛͬͯ໘ͳ͜ͱ͔Βಀ͛Α͏ ԻݯཧஂମͷαΠτ͔ΒొίʔυΛऔಘ͠Α͏
ԻݯཧஂମͷαΠτ͔ΒཧίʔυΛऔಘ͠Α͏(1) ▸ ձࣾͰμϯεಈըͷΞϓϦΛ։ൃத(ϦϦʔε10݄಄༧ఆ) ▸ ԻݯཧஂମͱܖΛ͢Δͱ࠶ੜͳͲΛϦετԽͯ͠ఏग़͢Δඞཁ ͋Γ ▸ ΞϓϦཧը໘ͰԻݯΛొ͢ΔࡍʹཧίʔυΛೖྗ ▸ ਓྗͩͱ໘
▸ Α͘Α͘ݟΔͱϖʔδͷURL͕ཧίʔυʹͳͬͯΔ ▸ → WebViewͰURLΛ͍͚ͬͯऔಘͰ͖ͦ͏
ԻݯཧஂମͷαΠτ͔ΒཧίʔυΛऔಘ͠Α͏(2) ▸ چଶґવͷFrameαΠτͱ͍͏ҋਂ͞ ▸ electronͰͷ࣮ͳͷͰॾʑͷઆ໌লུ ▸ ಉ͡Α͏ʹURLࢹΛReact NativeͰߦ͏ͳΒ onNavigationStateChangeΛ͏͜ͱͰՄೳ
ԻݯཧஂମͷαΠτ͔ΒཧίʔυΛऔಘ͠Α͏(3) σϞ
·ͱΊ ▸ WebαΠτͰ࣮͞Ε͍ͯΔ͜ͱ͕Ͱ͖Δ ▸ άϥϑදࣔͱ͔໘ͳίϯϙʔωϯτHTMLͰ࡞ͬͯ͠·͏ͱָ ▸ πΠʔτϖʔδΈ͍ͨͳΉͷ͕໘ͳͷָ ▸ URLͷࢹΛͯ͠IDΛऔಘͰ͖Δ ▸
JavaScriptͷ࣮ߦίʔυΛࠩ͠ࠐΉ͜ͱ͕Ͱ͖Δ ▸ σϞͰදࣔͨ͠ΞϓϦͪ͜Β ▸ https://github.com/watanabeyu/webview-example
༨ஊ ಈըܥͷΞϓϦ࡞ͬͯ·͢ ڵຯ͋Δਓͥͻͱ͓͠͠·͠ΐ͏