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
2.1k
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
320
npm packageとリリースとモノレポ
watanabeyu
0
64
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
920
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1.1k
gandhの紹介です
watanabeyu
0
35
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
650
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.2k
react-native-unimodulesのススメ
watanabeyu
1
6.5k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1.1k
Other Decks in Programming
See All in Programming
Workers を定期実行する方法は一つじゃない
rokuosan
0
140
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
250
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
0
190
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
250
階層化自動テストで開発に機動力を
ickx
1
470
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
160
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
3
1.9k
実践!App Intents対応
yuukiw00w
0
120
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
16
9.4k
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
3
780
構文解析器入門
ydah
7
2k
リッチエディターを安全に開発・運用するために
unachang113
1
350
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Thoughts on Productivity
jonyablonski
69
4.8k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
How STYLIGHT went responsive
nonsquared
100
5.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
A Modern Web Designer's Workflow
chriscoyier
695
190k
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
༨ஊ ಈըܥͷΞϓϦ࡞ͬͯ·͢ ڵຯ͋Δਓͥͻͱ͓͠͠·͠ΐ͏