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
330
npm packageとリリースとモノレポ
watanabeyu
0
64
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
940
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1.1k
gandhの紹介です
watanabeyu
0
35
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
660
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.3k
react-native-unimodulesのススメ
watanabeyu
1
6.5k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1.1k
Other Decks in Programming
See All in Programming
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
3.9k
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
7
1.5k
AIで開発生産性を上げる個人とチームの取り組み
taniigo
0
130
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
500
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
140
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
130
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
900
CSC509 Lecture 02
javiergs
PRO
0
400
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
2.9k
2025年版 サーバーレス Web アプリケーションの作り方
hayatow
23
25k
iOSDC.pdf
chronos2500
2
650
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
770
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
How STYLIGHT went responsive
nonsquared
100
5.8k
Unsuck your backbone
ammeep
671
58k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
For a Future-Friendly Web
brad_frost
180
9.9k
Balancing Empowerment & Direction
lara
4
670
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
༨ஊ ಈըܥͷΞϓϦ࡞ͬͯ·͢ ڵຯ͋Δਓͥͻͱ͓͠͠·͠ΐ͏