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

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. ༨ஊ ಈըܥͷΞϓϦ࡞ͬͯ·͢ ڵຯ͋Δਓ͸ͥͻͱ΋͓࿩͠͠·͠ΐ͏