Cordovaの概要とハイブリッドアプリのメリット

685d83e2ac4c228d9d87126f7d18e024?s=47 asakahara
February 07, 2017

 Cordovaの概要とハイブリッドアプリのメリット

フロントエンド勉強会 in 山陰 #01の発表内容です。
Cordovaやその他のフレームワーク、ハイブリッドアプリのメリット&デメリットについて触れています。

685d83e2ac4c228d9d87126f7d18e024?s=128

asakahara

February 07, 2017
Tweet

Transcript

  1. $PSEPWBͷ֓ཁͱ ϋΠϒϦουΞϓϦͷϝϦοτ ϑϩϯτΤϯυษڧձJOࢁӄ גࣜձࣾιχοΫϜʔϒ ࡔݪ໌༟

  2. ࡔݪ໌༟ 5XJUUFS*%!BTBLBIBSB ϒϩάIUUQTBLBIBSBIBUFOBCMPHKQ w લ৬͸ژ౎ͰJ04ΤϯδχΞ w ೥݄͔ΒιχοΫϜʔϒͷΤϯδχΞ w ޿ౡ ஍ݩ

    ژ౎ౡࠜ
  3. גࣜձࣾιχοΫϜʔϒ w ສਓҎ্͕༡ͿιʔγϟϧήʔϜͷاը։ ൃӡ༻ w )5.-ͰಈըΛ഑৴͢ΔHVJMF w 8FCαʔϏεʗεϚʔτϑΥϯΞϓϦ։ൃ w σβΠϯɾΠϥετ੍࡞

  4. ιχοΫϜʔϒౡࠜࣄۀॴ w ೥݄͔Β։ઃ w দߐӺ͔ΒंͰ෼ఔ౓ͷࢁͷ্ʹ͋ΔΦ ϑΟε w ݱࡏ͸ΤϯδχΞ໊͕̐ಇ͍ͯΔ

  5. None
  6. None
  7. None
  8. ࠓ೔࿩͢͜ͱ w $PSEPWBͱͦͷଞͷϑϨʔϜϫʔΫʹ͍ͭͯ w $PSEPWBͷ࢖͍ํΛܰ͘঺հ w ϋΠϒϦουΞϓϦΛ࡞Δࡍʹߟྀ͢Δ͜ͱ

  9. ϋΠϒϦουΞϓϦͱ͸ʁ w ωΠςΟϒΞϓϦͱ8FCΞϓϦΛֻ͚߹Θͤͨ΋ͷ w 8FCΞϓϦͰ͸࢖༻Ͱ͖ͳ͍୺຤ͷػೳΛ࢖͑Δ w ΞϓϦͱͯ͠4UPSFʹެ։Ͱ͖Δ

  10. +4ΛϥϯλΠϜͰಈ͔͠ωΠςΟϒ ίʔυΛϒϦοδ͢ΔλΠϓ w 3FBDU/BUJWF w /BUJWF4DSJQU w 5JUBOJVN4%,

  11. 8FC7JFXΛ࢖͏λΠϓ w $PSEPWB 1IPOF(BQ  w *POJD w .POBDB 7JTVBM4UVEJP΋$PSEPWBΛαϙʔτ

  12. $PSEPWBͱ͸ʁ w ϋΠϒϦουΞϓϦ͕։ൃͰ͖Δ 8FC7JFXΛ࢖༻  w )5.-$44+BWB4DSJQUͰ։ൃ w ωΠςΟϒϒϦοδͷఏڙ 1MVHJO΋ଟ͍

     w J04ɺ"OESPJEɺ8JOEPXT1IPOFͳͲ༷ʑͳϓϥο τϑΥʔϜʹରԠ w ೥͔Β࢝·Γɺݱࡏ΋׆ൃʹ։ൃ͕ߦͳΘΕ͍ͯΔ
  13. $PSEPWBͷϝϦοτ w )5.-$44+BWB4DSJQU͚ͩͰ͋Δఔ౓։ൃ Ͱ͖Δ w 8FC7JFXͷ࣮૷ͳͲϓϥοτϑΥʔϜຖͷࠩҟ Λٵऩ w ϓϥάΠϯΛ࢖͏͜ͱͰωΠςΟϒ΁ͷϒϦοδ ͕༰қʹͰ͖Δ

    w ΫϩεϓϥοτϑΥʔϜ
  14. $PSEPWBͷσϝϦοτ w ୺຤ͷੑೳΛϑϧʹར༻͠ʹ͍͘ 8FC7JFXͰ ࣮ߦ͞ΕΔͨΊ  w ݱঢ়ͷ)5.-Ͱ࣮ݱ͢Δʹ͸೉͍͠ػೳ͕͋ Δ %ήʔϜͳͲ

     w ωΠςΟϒΞϓϦΑ͏ͳඪ४ͷ6*ίϯϙʔωϯ τ͕ͳ͍ͷͰɺଞͷϥΠϒϥϦͰิ͏ඞཁ͋Γ
  15. $PSEPWBͷಋೖ w ࣄલʹ"OESPJE4UVEJPɺ9DPEFΛΠϯετʔ ϧ͓ͯ͘͠ w $PSEPWBͷಋೖ͸ԼهίϚϯυͷΈͰ׬ྃ sudo npm install -g

    cordova
  16. ϓϩδΣΫτͷ࡞੒ cordova create hello com.sonicmoov.hello cordova platform add android cordova

    platform add ios cordova platform list cordova build android cordova build ios
  17. ϓϩδΣΫτͷ࣮ߦ cordova emulate android cordova emulate ios cordova run android

    cordova run ios cordova serve
  18. σΟϨΫτϦߏ੒ ├── config.xml ├── hooks │ └── README.md ├── platforms

    │ ├── android │ ├── ios │ └── platforms.json ├── plugins │ ├── android.json │ ├── cordova-plugin-whitelist │ ├── fetch.json │ └── ios.json └── www ├── css ├── img ├── index.html └── js
  19. جຊͷϓϥάΠϯ w ୺຤ͷϞʔγϣϯݕ஌ϓϥάΠϯ w όοςϦʔ৘ใͷऔಘϓϥάΠϯ w Χϝϥૢ࡞ϓϥάΠϯ w ୺຤ͷΦϦΤϯςʔγϣϯݕ஌ϓϥά Πϯ

    w ωοτϫʔΫ৘ใͷऔಘϓϥάΠϯ w ୺຤৘ใͷऔಘϓϥάΠϯ w μΠΞϩάͷ੍ޚϓϥάΠϯ w ϑΝΠϧૢ࡞ϓϥάΠϯ w ϑΝΠϧసૹϓϥάΠϯ w Ґஔ৘ใͷऔಘϓϥάΠϯ w දهͷࠃࡍԽରԠϓϥάΠϯ w ϝσΟΞૢ࡞ϓϥάΠϯ w ϝσΟΞΩϟϓνϟʔϓϥάΠϯ w εςʔλεόʔͷ੍ޚϓϥάΠϯ w όΠϒϨʔγϣϯͷ੍ޚϓϥάΠ ϯ
  20. ΧελϜϓϥάΠϯ "OESPJE <feature name="TestPlugin"> <param name="android-package" value="com.sonicmoov.hello.TestPlugin" /> </feature> SFTYNMDPOpHYNMΛฤू

  21. 5FTU1MVHJOΫϥεͷ࣮૷ public class TestPlugin extends CordovaPlugin { @Override public boolean

    execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { callbackContext.success(); android.widget.Toast.makeText( this.cordova.getActivity(), args.getString(0), 2000).show(); return true; } }
  22. ϓϥάΠϯͷݺͼग़͠ onDeviceReady: function() { cordova.exec(function() { console.log('ϓϥάΠϯݺͼग़͠ʹ੒ޭ͠·ͨ͠'); }, function() {

    console.log('ϓϥάΠϯݺͼग़͠ʹࣦഊ͠·ͨ͠'); }, 'TestPlugin', 'actionName', [‘Test Cordova plugin']); }
  23. $PSEPWBΛ࢖Θͳ͍ ωΠςΟϒͱͷϒϦοδ w BEE+BWBTDSJQU*OUFSGBDFํࣜ "OESPJE  w ωΠςΟϒ͔Β௚઀+BWB4DSJQUΛ࣮ߦ͢Δ w ΧελϜ63-ํࣜ

    w ϩʔΧϧ)551αʔόΛ্ཱͪ͛Δ
  24. ωΠςΟϒ͔Β+4Λ࣮ߦ͢Δ J04ͷ৔߹ [webView evaluateJavaScript:@"createBook()"] completionHandler:^(id response, NSError *error) { if

    (response) { NSLog(@"bookId: %@", response); } }];
  25. ωΠςΟϒ͔Β+4Λ࣮ߦ͢Δ "OESPJEͷ৔߹ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { view.evaluateJavascript( “javascript:createBook()", null);

    } else { view.loadUrl("javascript:createBook()"); }
  26. ΧελϜ63-ํࣜ J04ͷ৔߹ - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^) (WKNavigationActionPolicy))decisionHandler

    { NSURL *url = navigationAction.request.URL; if ([url.scheme isEqualToString:@"sample"]) { // ωΠςΟϒͷॲཧ decisionHandler( WKNavigationActionPolicyCancel); return; } decisionHandler(WKNavigationActionPolicyAllow); }
  27. ΧελϜ63-ํࣜ "OESPJEͷ৔߹ webView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view,

    String url) { Uri uri = Uri.parse(url); if (uri.getScheme().equals("sampleapp")) { // ωΠςΟϒͷॲཧΛݺͼग़͢ return true; } return false; }
  28. ϋΠϒϦουΞϓϦΛ ։ൃ͢Δࡍͷ஫ҙ఺ w Bλά΍DMJDLΠϕϯτΛͦͷ··࢖Θͳ͍ w λοϓ࣌ͷϋΠϥΠτΛফ͢ w ௕ԡ͠Ͱදࣔ͞ΕΔϙοϓΞοϓϝχϡʔΛফ͢

  29. ϋΠϒϦουΞϓϦΛ ։ൃ͢Δࡍͷ஫ҙ఺ ଓ͖ w Ϣʔβʔ͕จࣈΛબ୒Ͱ͖ͳ͍Α͏ʹ͢Δ w ίϯςϯπͷҰ෦ʹଦੑεΫϩʔϧΛೖΕΔ w %0.πϦʔʹՃ͑ΔมߋΛݮΒ͢ ࠶ඳࣸͷί

    ετ
  30. ͳͥBλά΍DMJDLΠϕϯτΛ ͦͷ··࢖Θͳ͍ํ͕Α͍ͷ͔ʁ w λονΠϕϯτͷॲཧ͔ΒൃՐ·ͰʹϛϦඵͷ஗ Ԇ͕ൃੜ w ϒϥ΢β͕μϒϧΫϦοΫ͔൑ผ͢ΔͨΊͷ଴ػ࣌ؒ w ରԠࡦͷҰͭͱͯ͠'BTU$MJDLΛ࢖͏͜ͱͰҙࣝ͢Δ ͜ͱͳ͘ΠϕϯτͷൃՐΛૣΊΒΕΔ

  31. ·ͱΊ w ΞϓϦͷཁ݅ʹΑͬͯ͸ϋΠϒϦουΞϓϦͷํ͕ ޻਺ͷ࡟ݮ΍ɺΫϩεϓϥοτϑΥʔϜͰͷఏڙ΋ ͠΍͍͢ w $PSEPWBΛཪͰ࢖͍ͬͯΔ։ൃ؀ڥ΋͍͔ͭ͋͘ ΔͷͰɺ6*ͷίϯϙʔωϯτ΋ؚΊͨޮ཰త΋Մೳ w ৘ใ΋ൺֱతଟ͘8FCͷٕज़Λத৺ʹ։ൃͰ͖Δ

    ͷͰɺॳ৺ऀʹ΋͓͢͢Ί
  32. ࠷ޙʹ

  33. ౡࠜʹڵຯ͕͋Δ ΤϯδχΞͷํΛืूͯ͠·͢

  34. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ