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
42
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
750
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
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.1k
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
430
EventSourcingの理想と現実
wenas
6
2.3k
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
1.9k
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
470
色々なIaCツールを実際に触って比較してみる
iriikeita
0
330
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
210
初めてDefinitelyTypedにPRを出した話
syumai
0
410
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
900
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
100
Remix on Hono on Cloudflare Workers
yusukebe
1
290
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Music & Morning Musume
bryan
46
6.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Building an army of robots
kneath
302
43k
Practical Orchestrator
shlominoach
186
10k
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
༨ஊ ಈըܥͷΞϓϦ࡞ͬͯ·͢ ڵຯ͋Δਓͥͻͱ͓͠͠·͠ΐ͏