Tweet
Tweet

Slide 1

Slide 1 text

2018/08/31 Θͨͳ΂Ώ͏ WEBVIEWΛ࢖ͬͯ໘౗ͳ͜ͱ͔Βಀ͛Α͏

Slide 2

Slide 2 text

▸ ࣗݾ঺հ ▸ WebView࢖ͬͯ·͔͢ʁ ▸ WebViewΛԿʹ׆͔͔͢ʁ ▸ QRը૾ͷσίʔυ ▸ άϥϑΛදࣔ͠Α͏ ▸ πΠʔτϖʔδΛදࣔ͠Α͏ ▸ ๭Իݯ؅ཧஂମͷαΠτ͔Β؅ཧίʔυΛऔಘ͠Α͏ ▸ WebViewͷΫοΩʔ࡟আํ๏ ▸ ·ͱΊ ֓ཁ

Slide 3

Slide 3 text

ࣗݾ঺հ Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։ ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu

Slide 4

Slide 4 text

▸ WebViewͬͯԿ͕Ͱ͖Δͷʁ ▸ URLͰࢦఆͨ͠ϖʔδ ▸

hoge

Έ͍ͨͳܗͷจࣈྻ ▸ ϩʔΧϧͷHTMLϑΝΠϧ ▸ ͳΜͱͳ͘࢖͍ͮΒ͍ҹ৅ ▸ WebViewΛ࢖͏࠷େͷར఺ ▸ HTMLΛจࣈྻͰ౉ͤΔͷͰಈతʹHTMLΛ࡞ΕΔ ▸ JSΛͪ͜Β͔Βࠩ͠ࠐΜͰ࣮ߦͰ͖Δ(injectJavaScript) ▸ ಡΈࠐΜͩHTML͔ΒจࣈྻΛड͚औΕΔ(postMessage,onMessage) ▸ →Կ͔ʹ׆͔͢͜ͱ͕Ͱ͖ͳ͍ͩΖ͏͔ʁ WEBVIEW࢖ͬͯ·͔͢ʁ

Slide 5

Slide 5 text

▸ QRը૾Λσίʔυ͍͚ͨ͠Ͳreact-native linkͨ͘͠ͳ͍ ▸ άϥϑΛදࣔ͢Δͷʹsvgͱ͔ॾʑඞཁͳͷ͸ਏ͍ ▸ twitterͷπΠʔτΛද͍ࣔͨ͠Μ͚ͩͲίϯϙʔωϯτ࡞Δͷ͕ਏ͍ ▸ ๭Իݯ؅ཧஂମ͸API͕༻ҙ͞Εͯͳ͍͚Ͳ؅ཧίʔυऔಘ͍ͨ͠ WEBVIEWΛԿʹ׆͔͔͢ʁ ͪΐͬͱ໘౗ͳ࡞ۀΛWebViewʹಀ͕ͯ͠Έ·ͤΜ͔ʁ

Slide 6

Slide 6 text

WEBVIEWΛ࢖ͬͯ໘౗ͳ͜ͱ͔Βಀ͛Α͏ QRը૾ͷσίʔυ

Slide 7

Slide 7 text

QRը૾ͷσίʔυ(1) ▸ Χϝϥϩʔϧ͔Βը૾Λબ୒ͯ͠σίʔυ͍ͨ͠ ▸ react-native-qrcode-scannerΛ࢖͑͹Α͍ ▸ react-native linkΛ͠ͳ͍ͱ͍͚ͳ͍ ▸ Expoͩͱ࢖͑ͳ͍ ▸ WebαΠτͰQRը૾ΛσίʔυͰ͖ΔαΠτ΋͋Δ ▸ → WebViewͰ΋࣮૷Ͱ͖Δ͸ͣ ▸ → WebViewΛ௨ͯ͠σίʔυͰ͖ΔϥΠϒϥϦΛ࡞੒

Slide 8

Slide 8 text

QRը૾ͷσίʔυ(2) ▸ react-native-qrimage-decoderΛ࡞੒ ▸ react-native linkΛ͢Δඞཁͳ͠ ▸ ExpoͰ΋࢖͑Δ ▸ Android͸ExpoͷFileSystemʹґଘ ▸ ͍ۙ͏ͪʹExpo͡Όͳͯ͘΋ಈ͘Α͏ʹΞοϓσʔτ…

Slide 9

Slide 9 text

QRը૾ͷσίʔυ(3) ▸ src/includes/ios.htmlʹͯdataURLܗࣜͰ౉͞Εͨը૾Λσίʔυ ▸ HTML಺Ͱ࢖༻͍ͯ͠ΔϥΠϒϥϦ͸LazarSoft/jsqrcode ▸ ਺ߦͰॲཧ͢Δ͜ͱ͕Մೳ

Slide 10

Slide 10 text

QRը૾ͷσίʔυ(4) ▸ src/includes/_android.jsʹͯcanvasͰը૾ΛಡΈࠐΈdataURLԽ ▸ cozmo/jsQRͰσίʔυ ▸ Android൛ͷ஫ҙ఺ ▸ WebViewͰҰ౓ʹॲཧ͖͠ΕΔྔͷݶք͕ܾ·ͬͯΔʁ ▸ ImagePickerͰಡΈࠐΜͩը૾uriΛͦͷ··౉ͯ͠΋ಡΈࠐΜͰ͘Εͳ͍ ▸ Ұ౓อଘ͔ͯ͠ΒͦͷuriΛ౉͢ඞཁ͋Γ

Slide 11

Slide 11 text

QRը૾ͷσίʔυ(5) σϞ

Slide 12

Slide 12 text

WEBVIEWΛ࢖ͬͯ໘౗ͳ͜ͱ͔Βಀ͛Α͏ άϥϑΛදࣔ͠Α͏

Slide 13

Slide 13 text

άϥϑΛදࣔ͠Α͏(1) ▸ react-native-chart΍react-native-pathjs-chartsͳͲ ▸ react-native linkΛ͠ͳ͍ͱ͍͚ͳ͍ ▸ react-native-svgΛ͍Εͳ͍ͱ͍͚ͳ͍ ▸ Expoͩͱ࢖͑ͳ͍ ▸ WebαΠτͰ͸Chart.jsͱ͔D3.jsͰάϥϑදࣔՄೳ ▸ → WebViewͰ΋࣮૷Ͱ͖Δ͸ͣ ▸ → ࠓճ͸Chart.jsʹ࣮ͯ૷

Slide 14

Slide 14 text

άϥϑΛදࣔ͠Α͏(2) ▸ ϓϩδΣΫτ಺ʹgraph.htmlΛ࡞੒ ▸ WebView಺Ͱݺͼग़ͯ͋͛͠Ε͹׬ྃ

Slide 15

Slide 15 text

άϥϑΛදࣔ͠Α͏(3)

Slide 16

Slide 16 text

άϥϑΛදࣔ͠Α͏(4) σϞ

Slide 17

Slide 17 text

WEBVIEWΛ࢖ͬͯ໘౗ͳ͜ͱ͔Βಀ͛Α͏ πΠʔτϖʔδΛදࣔ͠Α͏

Slide 18

Slide 18 text

πΠʔτϖʔδΛදࣔ͠Α͏(1) ▸ πΠʔτϖʔδͷ࣮૷͸͔ͳΓ໘౗ ▸ ୯७ʹࢦఆͨ͠πΠʔτͷ಺༰Λදࣔ͢ΔϖʔδΛ࡞ Γ͍͚ͨͩͳͷʹຒΊࠐΊͳ͍ͷ͸ਏ͍ ▸ WebαΠτͷຒΊࠐΈ΢ΟδΣοτ࢖͍͍ͨ ▸ → WebViewͰ࣮૷

Slide 19

Slide 19 text

πΠʔτϖʔδΛදࣔ͠Α͏(2) ▸ ຒΊࠐΈπΠʔτΛදࣔ͢ΔίʔυΛsourceͱͯ͠ࢦఆ ▸ react-native-autoreheight-webviewΛೖΕͯߴ͞ΛՄมʹ

Slide 20

Slide 20 text

πΠʔτϖʔδΛදࣔ͠Α͏(3) σϞ

Slide 21

Slide 21 text

WEBVIEWΛ࢖ͬͯ໘౗ͳ͜ͱ͔Βಀ͛Α͏ ๭Իݯ؅ཧஂମͷαΠτ͔Βొ࿥ίʔυΛऔಘ͠Α͏

Slide 22

Slide 22 text

๭Իݯ؅ཧஂମͷαΠτ͔Β؅ཧίʔυΛऔಘ͠Α͏(1) ▸ ձࣾͰμϯεಈըͷΞϓϦΛ։ൃத(ϦϦʔε10݄಄༧ఆ) ▸ ๭Իݯ؅ཧஂମͱܖ໿Λ͢Δͱ࠶ੜ਺ͳͲΛϦετԽͯ͠ఏग़͢Δඞཁ ͋Γ ▸ ΞϓϦ؅ཧը໘ͰԻݯΛొ࿥͢Δࡍʹ؅ཧίʔυΛೖྗ ▸ ਓྗͩͱ໘౗ ▸ Α͘Α͘ݟΔͱϖʔδͷURL͕؅ཧίʔυʹͳͬͯΔ ▸ → WebViewͰURLΛ௥͍͚ͬͯ͹औಘͰ͖ͦ͏

Slide 23

Slide 23 text

๭Իݯ؅ཧஂମͷαΠτ͔Β؅ཧίʔυΛऔಘ͠Α͏(2) ▸ چଶґવͷFrameαΠτͱ͍͏ҋਂ͞ ▸ electronͰͷ࣮૷ͳͷͰॾʑͷઆ໌͸লུ ▸ ಉ͡Α͏ʹURL؂ࢹΛReact NativeͰߦ͏ͳΒ͹ onNavigationStateChangeΛ࢖͏͜ͱͰՄೳ

Slide 24

Slide 24 text

๭Իݯ؅ཧஂମͷαΠτ͔Β؅ཧίʔυΛऔಘ͠Α͏(3) σϞ

Slide 25

Slide 25 text

·ͱΊ ▸ WebαΠτͰ࣮૷͞Ε͍ͯΔ͜ͱ͕Ͱ͖Δ ▸ άϥϑදࣔͱ͔໘౗ͳίϯϙʔωϯτ͸HTMLͰ࡞ͬͯ͠·͏ͱָ ▸ πΠʔτϖʔδΈ͍ͨͳ૊Ήͷ͕໘౗ͳ΋ͷ΋ָ ▸ URLͷ؂ࢹΛͯ͠IDΛऔಘͰ͖Δ ▸ JavaScriptͷ࣮ߦίʔυΛࠩ͠ࠐΉ͜ͱ͕Ͱ͖Δ ▸ σϞͰදࣔͨ͠ΞϓϦ͸ͪ͜Β ▸ https://github.com/watanabeyu/webview-example

Slide 26

Slide 26 text

༨ஊ ಈըܥͷΞϓϦ࡞ͬͯ·͢ ڵຯ͋Δਓ͸ͥͻͱ΋͓࿩͠͠·͠ΐ͏