Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Yu Watanabe

August 31, 2018
Tweet

More Decks by Yu Watanabe

Other Decks in Programming

Transcript

  1. ▸ ࣗݾ঺հ ▸ WebView࢖ͬͯ·͔͢ʁ ▸ WebViewΛԿʹ׆͔͔͢ʁ ▸ QRը૾ͷσίʔυ ▸ άϥϑΛදࣔ͠Α͏

    ▸ πΠʔτϖʔδΛදࣔ͠Α͏ ▸ ๭Իݯ؅ཧஂମͷαΠτ͔Β؅ཧίʔυΛऔಘ͠Α͏ ▸ WebViewͷΫοΩʔ࡟আํ๏ ▸ ·ͱΊ ֓ཁ
  2. ࣗݾ঺հ Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։

    ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu
  3. ▸ WebViewͬͯԿ͕Ͱ͖Δͷʁ ▸ URLͰࢦఆͨ͠ϖʔδ ▸ <p>hoge</p>Έ͍ͨͳܗͷจࣈྻ ▸ ϩʔΧϧͷHTMLϑΝΠϧ ▸ ͳΜͱͳ͘࢖͍ͮΒ͍ҹ৅

    ▸ WebViewΛ࢖͏࠷େͷར఺ ▸ HTMLΛจࣈྻͰ౉ͤΔͷͰಈతʹHTMLΛ࡞ΕΔ ▸ JSΛͪ͜Β͔Βࠩ͠ࠐΜͰ࣮ߦͰ͖Δ(injectJavaScript) ▸ ಡΈࠐΜͩHTML͔ΒจࣈྻΛड͚औΕΔ(postMessage,onMessage) ▸ →Կ͔ʹ׆͔͢͜ͱ͕Ͱ͖ͳ͍ͩΖ͏͔ʁ WEBVIEW࢖ͬͯ·͔͢ʁ
  4. QRը૾ͷσίʔυ(1) ▸ Χϝϥϩʔϧ͔Βը૾Λબ୒ͯ͠σίʔυ͍ͨ͠ ▸ react-native-qrcode-scannerΛ࢖͑͹Α͍ ▸ react-native linkΛ͠ͳ͍ͱ͍͚ͳ͍ ▸ Expoͩͱ࢖͑ͳ͍

    ▸ WebαΠτͰQRը૾ΛσίʔυͰ͖ΔαΠτ΋͋Δ ▸ → WebViewͰ΋࣮૷Ͱ͖Δ͸ͣ ▸ → WebViewΛ௨ͯ͠σίʔυͰ͖ΔϥΠϒϥϦΛ࡞੒
  5. άϥϑΛදࣔ͠Α͏(1) ▸ react-native-chart΍react-native-pathjs-chartsͳͲ ▸ react-native linkΛ͠ͳ͍ͱ͍͚ͳ͍ ▸ react-native-svgΛ͍Εͳ͍ͱ͍͚ͳ͍ ▸ Expoͩͱ࢖͑ͳ͍

    ▸ WebαΠτͰ͸Chart.jsͱ͔D3.jsͰάϥϑදࣔՄೳ ▸ → WebViewͰ΋࣮૷Ͱ͖Δ͸ͣ ▸ → ࠓճ͸Chart.jsʹ࣮ͯ૷