WebViewを使って面倒なことから逃げよう

WebViewで面倒なコンポーネントを対応しませんか？
リポジトリはこちら -> https://github.com/watanabeyu/webview-example

Transcript

1. 2018/08/31 Θͨͳ΂Ώ͏ WEBVIEWΛ࢖ͬͯ໘౗ͳ͜ͱ͔Βಀ͛Α͏
2. ▸ ࣗݾ঺հ ▸ WebView࢖ͬͯ·͔͢ʁ ▸ WebViewΛԿʹ׆͔͔͢ʁ ▸ QRը૾ͷσίʔυ ▸ άϥϑΛදࣔ͠Α͏ ▸ πΠʔτϖʔδΛදࣔ͠Α͏ ▸ ๭Իݯ؅ཧஂମͷαΠτ͔Β؅ཧίʔυΛऔಘ͠Α͏ ▸ WebViewͷΫοΩʔ࡟আํ๏ ▸ ·ͱΊ ֓ཁ
3. ࣗݾ঺հ Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։ ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu
4. ▸ WebViewͬͯԿ͕Ͱ͖Δͷʁ ▸ URLͰࢦఆͨ͠ϖʔδ ▸ <p>hoge</p>Έ͍ͨͳܗͷจࣈྻ ▸ ϩʔΧϧͷHTMLϑΝΠϧ ▸ ͳΜͱͳ͘࢖͍ͮΒ͍ҹ৅ ▸ WebViewΛ࢖͏࠷େͷར఺ ▸ HTMLΛจࣈྻͰ౉ͤΔͷͰಈతʹHTMLΛ࡞ΕΔ ▸ JSΛͪ͜Β͔Βࠩ͠ࠐΜͰ࣮ߦͰ͖Δ(injectJavaScript) ▸ ಡΈࠐΜͩHTML͔ΒจࣈྻΛड͚औΕΔ(postMessage,onMessage) ▸ →Կ͔ʹ׆͔͢͜ͱ͕Ͱ͖ͳ͍ͩΖ͏͔ʁ WEBVIEW࢖ͬͯ·͔͢ʁ
5. ▸ QRը૾Λσίʔυ͍͚ͨ͠Ͳreact-native linkͨ͘͠ͳ͍ ▸ άϥϑΛදࣔ͢Δͷʹsvgͱ͔ॾʑඞཁͳͷ͸ਏ͍ ▸ twitterͷπΠʔτΛද͍ࣔͨ͠Μ͚ͩͲίϯϙʔωϯτ࡞Δͷ͕ਏ͍ ▸ ๭Իݯ؅ཧஂମ͸API͕༻ҙ͞Εͯͳ͍͚Ͳ؅ཧίʔυऔಘ͍ͨ͠ WEBVIEWΛԿʹ׆͔͔͢ʁ ͪΐͬͱ໘౗ͳ࡞ۀΛWebViewʹಀ͕ͯ͠Έ·ͤΜ͔ʁ
6. WEBVIEWΛ࢖ͬͯ໘౗ͳ͜ͱ͔Βಀ͛Α͏ QRը૾ͷσίʔυ
7. QRը૾ͷσίʔυ(1) ▸ Χϝϥϩʔϧ͔Βը૾Λબ୒ͯ͠σίʔυ͍ͨ͠ ▸ react-native-qrcode-scannerΛ࢖͑͹Α͍ ▸ react-native linkΛ͠ͳ͍ͱ͍͚ͳ͍ ▸ Expoͩͱ࢖͑ͳ͍ ▸ WebαΠτͰQRը૾ΛσίʔυͰ͖ΔαΠτ΋͋Δ ▸ → WebViewͰ΋࣮૷Ͱ͖Δ͸ͣ ▸ → WebViewΛ௨ͯ͠σίʔυͰ͖ΔϥΠϒϥϦΛ࡞੒
8. QRը૾ͷσίʔυ(2) ▸ react-native-qrimage-decoderΛ࡞੒ ▸ react-native linkΛ͢Δඞཁͳ͠ ▸ ExpoͰ΋࢖͑Δ ▸ Android͸ExpoͷFileSystemʹґଘ ▸ ͍ۙ͏ͪʹExpo͡Όͳͯ͘΋ಈ͘Α͏ʹΞοϓσʔτ…
9. QRը૾ͷσίʔυ(3) ▸ src/includes/ios.htmlʹͯdataURLܗࣜͰ౉͞Εͨը૾Λσίʔυ ▸ HTML಺Ͱ࢖༻͍ͯ͠ΔϥΠϒϥϦ͸LazarSoft/jsqrcode ▸ ਺ߦͰॲཧ͢Δ͜ͱ͕Մೳ
10. QRը૾ͷσίʔυ(4) ▸ src/includes/_android.jsʹͯcanvasͰը૾ΛಡΈࠐΈdataURLԽ ▸ cozmo/jsQRͰσίʔυ ▸ Android൛ͷ஫ҙ఺ ▸ WebViewͰҰ౓ʹॲཧ͖͠ΕΔྔͷݶք͕ܾ·ͬͯΔʁ ▸ ImagePickerͰಡΈࠐΜͩը૾uriΛͦͷ··౉ͯ͠΋ಡΈࠐΜͰ͘Εͳ͍ ▸ Ұ౓อଘ͔ͯ͠ΒͦͷuriΛ౉͢ඞཁ͋Γ
11. QRը૾ͷσίʔυ(5) σϞ
12. WEBVIEWΛ࢖ͬͯ໘౗ͳ͜ͱ͔Βಀ͛Α͏ άϥϑΛදࣔ͠Α͏
13. άϥϑΛදࣔ͠Α͏(1) ▸ react-native-chart΍react-native-pathjs-chartsͳͲ ▸ react-native linkΛ͠ͳ͍ͱ͍͚ͳ͍ ▸ react-native-svgΛ͍Εͳ͍ͱ͍͚ͳ͍ ▸ Expoͩͱ࢖͑ͳ͍ ▸ WebαΠτͰ͸Chart.jsͱ͔D3.jsͰάϥϑදࣔՄೳ ▸ → WebViewͰ΋࣮૷Ͱ͖Δ͸ͣ ▸ → ࠓճ͸Chart.jsʹ࣮ͯ૷
14. άϥϑΛදࣔ͠Α͏(2) ▸ ϓϩδΣΫτ಺ʹgraph.htmlΛ࡞੒ ▸ WebView಺Ͱݺͼग़ͯ͋͛͠Ε͹׬ྃ
15. άϥϑΛදࣔ͠Α͏(3)
16. άϥϑΛදࣔ͠Α͏(4) σϞ
17. WEBVIEWΛ࢖ͬͯ໘౗ͳ͜ͱ͔Βಀ͛Α͏ πΠʔτϖʔδΛදࣔ͠Α͏
18. πΠʔτϖʔδΛදࣔ͠Α͏(1) ▸ πΠʔτϖʔδͷ࣮૷͸͔ͳΓ໘౗ ▸ ୯७ʹࢦఆͨ͠πΠʔτͷ಺༰Λදࣔ͢ΔϖʔδΛ࡞ Γ͍͚ͨͩͳͷʹຒΊࠐΊͳ͍ͷ͸ਏ͍ ▸ WebαΠτͷຒΊࠐΈ΢ΟδΣοτ࢖͍͍ͨ ▸ → WebViewͰ࣮૷
19. πΠʔτϖʔδΛදࣔ͠Α͏(2) ▸ ຒΊࠐΈπΠʔτΛදࣔ͢ΔίʔυΛsourceͱͯ͠ࢦఆ ▸ react-native-autoreheight-webviewΛೖΕͯߴ͞ΛՄมʹ
20. πΠʔτϖʔδΛදࣔ͠Α͏(3) σϞ
21. WEBVIEWΛ࢖ͬͯ໘౗ͳ͜ͱ͔Βಀ͛Α͏ ๭Իݯ؅ཧஂମͷαΠτ͔Βొ࿥ίʔυΛऔಘ͠Α͏
22. ๭Իݯ؅ཧஂମͷαΠτ͔Β؅ཧίʔυΛऔಘ͠Α͏(1) ▸ ձࣾͰμϯεಈըͷΞϓϦΛ։ൃத(ϦϦʔε10݄಄༧ఆ) ▸ ๭Իݯ؅ཧஂମͱܖ໿Λ͢Δͱ࠶ੜ਺ͳͲΛϦετԽͯ͠ఏग़͢Δඞཁ ͋Γ ▸ ΞϓϦ؅ཧը໘ͰԻݯΛొ࿥͢Δࡍʹ؅ཧίʔυΛೖྗ ▸ ਓྗͩͱ໘౗ ▸ Α͘Α͘ݟΔͱϖʔδͷURL͕؅ཧίʔυʹͳͬͯΔ ▸ → WebViewͰURLΛ௥͍͚ͬͯ͹औಘͰ͖ͦ͏
23. ๭Իݯ؅ཧஂମͷαΠτ͔Β؅ཧίʔυΛऔಘ͠Α͏(2) ▸ چଶґવͷFrameαΠτͱ͍͏ҋਂ͞ ▸ electronͰͷ࣮૷ͳͷͰॾʑͷઆ໌͸লུ ▸ ಉ͡Α͏ʹURL؂ࢹΛReact NativeͰߦ͏ͳΒ͹ onNavigationStateChangeΛ࢖͏͜ͱͰՄೳ
24. ๭Իݯ؅ཧஂମͷαΠτ͔Β؅ཧίʔυΛऔಘ͠Α͏(3) σϞ
25. ·ͱΊ ▸ WebαΠτͰ࣮૷͞Ε͍ͯΔ͜ͱ͕Ͱ͖Δ ▸ άϥϑදࣔͱ͔໘౗ͳίϯϙʔωϯτ͸HTMLͰ࡞ͬͯ͠·͏ͱָ ▸ πΠʔτϖʔδΈ͍ͨͳ૊Ήͷ͕໘౗ͳ΋ͷ΋ָ ▸ URLͷ؂ࢹΛͯ͠IDΛऔಘͰ͖Δ ▸ JavaScriptͷ࣮ߦίʔυΛࠩ͠ࠐΉ͜ͱ͕Ͱ͖Δ ▸ σϞͰදࣔͨ͠ΞϓϦ͸ͪ͜Β ▸ https://github.com/watanabeyu/webview-example
26. ༨ஊ ಈըܥͷΞϓϦ࡞ͬͯ·͢ ڵຯ͋Δਓ͸ͥͻͱ΋͓࿩͠͠·͠ΐ͏