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
Bolt 🤝 Expo
watanabeyu
0
1
npm packageとリリースとモノレポ
watanabeyu
0
49
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
810
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1.1k
gandhの紹介です
watanabeyu
0
28
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
610
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.2k
react-native-unimodulesのススメ
watanabeyu
1
6.4k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1k
Other Decks in Programming
See All in Programming
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
Honoをフロントエンドで使う 3つのやり方
yusukebe
5
2.2k
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
テストをしないQAエンジニアは何をしているか?
nealle
0
130
DROBEの生成AI活用事例 with AWS
ippey
0
130
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
sappoRo.R #12 初心者セッション
kosugitti
0
230
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.3k
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Unsuck your backbone
ammeep
669
57k
Making Projects Easy
brettharned
116
6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Being A Developer After 40
akosma
89
590k
GitHub's CSS Performance
jonrohan
1030
460k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
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
༨ஊ ಈըܥͷΞϓϦ࡞ͬͯ·͢ ڵຯ͋Δਓͥͻͱ͓͠͠·͠ΐ͏