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

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

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

254ef4587f3c010fc0c52517ff5514c2?s=128

Yu Watanabe

August 31, 2018
Tweet

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