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

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

Transcript

1. $PSEPWBͷ֓ཁͱ
   ϋΠϒϦουΞϓϦͷϝϦοτ ϑϩϯτΤϯυษڧձ
   JO
   ࢁӄ
   
   גࣜձࣾιχοΫϜʔϒ
   
   ࡔݪ
   ໌༟
2. ࡔݪ
   ໌༟
   5XJUUFS
   *%
   !BTBLBIBSB
   
   ϒϩά
   IUUQTBLBIBSBIBUFOBCMPHKQ
   w લ৬͸ژ౎ͰJ04ΤϯδχΞ
   
   w ೥݄͔ΒιχοΫϜʔϒͷΤϯδχΞ
   w ޿ౡ
   ஍ݩ
   
   ژ౎
   
   ౡࠜ
3. גࣜձࣾιχοΫϜʔϒ w ສਓҎ্͕༡ͿιʔγϟϧήʔϜͷاը։ ൃӡ༻
   w )5.-ͰಈըΛ഑৴͢ΔHVJMF
   
   w 8FCαʔϏεʗεϚʔτϑΥϯΞϓϦ։ൃ
   w σβΠϯɾΠϥετ੍࡞
   
4. ιχοΫϜʔϒౡࠜࣄۀॴ w ೥݄͔Β։ઃ
   
   w দߐӺ͔ΒंͰ෼ఔ౓ͷࢁͷ্ʹ͋ΔΦ ϑΟε
   
   w ݱࡏ͸ΤϯδχΞ໊͕̐ಇ͍ͯΔ
8. ࠓ೔࿩͢͜ͱ w $PSEPWBͱͦͷଞͷϑϨʔϜϫʔΫʹ͍ͭͯ
   w $PSEPWBͷ࢖͍ํΛܰ͘঺հ
   w ϋΠϒϦουΞϓϦΛ࡞Δࡍʹߟྀ͢Δ͜ͱ
9. ϋΠϒϦουΞϓϦͱ͸ʁ w ωΠςΟϒΞϓϦͱ8FCΞϓϦΛֻ͚߹Θͤͨ΋ͷ
   w 8FCΞϓϦͰ͸࢖༻Ͱ͖ͳ͍୺຤ͷػೳΛ࢖͑Δ
   w ΞϓϦͱͯ͠4UPSFʹެ։Ͱ͖Δ
10. +4ΛϥϯλΠϜͰಈ͔͠ωΠςΟϒ ίʔυΛϒϦοδ͢ΔλΠϓ w 3FBDU
    /BUJWF
    w /BUJWF4DSJQU
    w 5JUBOJVN
    4%,
11. 8FC7JFXΛ࢖͏λΠϓ w $PSEPWB 1IPOF(BQ
    w *POJD
    w .POBDB 7JTVBM
    4UVEJP΋$PSEPWBΛαϙʔτ
12. $PSEPWBͱ͸ʁ w ϋΠϒϦουΞϓϦ͕։ൃͰ͖Δ 8FC7JFXΛ࢖༻
    w )5.-$44+BWB4DSJQUͰ։ൃ
    w ωΠςΟϒϒϦοδͷఏڙ 1MVHJO΋ଟ͍
    w J04ɺ"OESPJEɺ8JOEPXT
    1IPOFͳͲ༷ʑͳϓϥο τϑΥʔϜʹରԠ
    w ೥͔Β࢝·Γɺݱࡏ΋׆ൃʹ։ൃ͕ߦͳΘΕ͍ͯΔ
13. $PSEPWBͷϝϦοτ w )5.-$44+BWB4DSJQU͚ͩͰ͋Δఔ౓։ൃ Ͱ͖Δ
    w 8FC7JFXͷ࣮૷ͳͲϓϥοτϑΥʔϜຖͷࠩҟ Λٵऩ
    w ϓϥάΠϯΛ࢖͏͜ͱͰωΠςΟϒ΁ͷϒϦοδ ͕༰қʹͰ͖Δ
    w ΫϩεϓϥοτϑΥʔϜ
14. $PSEPWBͷσϝϦοτ w ୺຤ͷੑೳΛϑϧʹར༻͠ʹ͍͘
    8FC7JFXͰ ࣮ߦ͞ΕΔͨΊ
    w ݱঢ়ͷ)5.-Ͱ࣮ݱ͢Δʹ͸೉͍͠ػೳ͕͋ Δ %ήʔϜͳͲ
    w ωΠςΟϒΞϓϦΑ͏ͳඪ४ͷ6*ίϯϙʔωϯ τ͕ͳ͍ͷͰɺଞͷϥΠϒϥϦͰิ͏ඞཁ͋Γ
15. $PSEPWBͷಋೖ w ࣄલʹ"OESPJE
    4UVEJPɺ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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ