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

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

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

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

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

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

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

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

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

$PSEPWBͱ͸ʁ w ϋΠϒϦουΞϓϦ͕։ൃͰ͖Δ 8FC7JFXΛ࢖༻ w )5.-$44+BWB4DSJQUͰ։ൃ w ωΠςΟϒϒϦοδͷఏڙ 1MVHJO΋ଟ͍
w J04ɺ"OESPJEɺ8JOEPXT1IPOFͳͲ༷ʑͳϓϥο τϑΥʔϜʹରԠ w ೥͔Β࢝·Γɺݱࡏ΋׆ൃʹ։ൃ͕ߦͳΘΕ͍ͯΔ

$PSEPWBͷϝϦοτ w )5.-$44+BWB4DSJQU͚ͩͰ͋Δఔ౓։ൃ Ͱ͖Δ w 8FC7JFXͷ࣮૷ͳͲϓϥοτϑΥʔϜຖͷࠩҟ Λٵऩ w ϓϥάΠϯΛ࢖͏͜ͱͰωΠςΟϒ΁ͷϒϦοδ ͕༰қʹͰ͖Δ
w ΫϩεϓϥοτϑΥʔϜ

$PSEPWBͷσϝϦοτ w ୺຤ͷੑೳΛϑϧʹར༻͠ʹ͍͘ 8FC7JFXͰ ࣮ߦ͞ΕΔͨΊ w ݱঢ়ͷ)5.-Ͱ࣮ݱ͢Δʹ͸೉͍͠ػೳ͕͋ Δ %ήʔϜͳͲ
w ωΠςΟϒΞϓϦΑ͏ͳඪ४ͷ6*ίϯϙʔωϯ τ͕ͳ͍ͷͰɺଞͷϥΠϒϥϦͰิ͏ඞཁ͋Γ

$PSEPWBͷಋೖ w ࣄલʹ"OESPJE4UVEJPɺ9DPEFΛΠϯετʔ ϧ͓ͯ͘͠ w $PSEPWBͷಋೖ͸ԼهίϚϯυͷΈͰ׬ྃ sudo npm install -g
cordova

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

ϓϩδΣΫτͷ࣮ߦ cordova emulate android cordova emulate ios cordova run android
cordova run ios cordova serve

σΟϨΫτϦߏ੒ ├── 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

جຊͷϓϥάΠϯ w ୺຤ͷϞʔγϣϯݕ஌ϓϥάΠϯ w όοςϦʔ৘ใͷऔಘϓϥάΠϯ w Χϝϥૢ࡞ϓϥάΠϯ w ୺຤ͷΦϦΤϯςʔγϣϯݕ஌ϓϥά Πϯ
w ωοτϫʔΫ৘ใͷऔಘϓϥάΠϯ w ୺຤৘ใͷऔಘϓϥάΠϯ w μΠΞϩάͷ੍ޚϓϥάΠϯ w ϑΝΠϧૢ࡞ϓϥάΠϯ w ϑΝΠϧసૹϓϥάΠϯ w Ґஔ৘ใͷऔಘϓϥάΠϯ w දهͷࠃࡍԽରԠϓϥάΠϯ w ϝσΟΞૢ࡞ϓϥάΠϯ w ϝσΟΞΩϟϓνϟʔϓϥάΠϯ w εςʔλεόʔͷ੍ޚϓϥάΠϯ w όΠϒϨʔγϣϯͷ੍ޚϓϥάΠ ϯ

ΧελϜϓϥάΠϯ "OESPJE <feature name="TestPlugin"> <param name="android-package" value="com.sonicmoov.hello.TestPlugin" /> </feature> SFTYNMDPOpHYNMΛฤू

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; } }

ϓϥάΠϯͷݺͼग़͠ onDeviceReady: function() { cordova.exec(function() { console.log('ϓϥάΠϯݺͼग़͠ʹ੒ޭ͠·ͨ͠'); }, function() {
console.log('ϓϥάΠϯݺͼग़͠ʹࣦഊ͠·ͨ͠'); }, 'TestPlugin', 'actionName', [‘Test Cordova plugin']); }

$PSEPWBΛ࢖Θͳ͍ ωΠςΟϒͱͷϒϦοδ w BEE+BWBTDSJQU*OUFSGBDFํࣜ "OESPJE w ωΠςΟϒ͔Β௚઀+BWB4DSJQUΛ࣮ߦ͢Δ w ΧελϜ63-ํࣜ
w ϩʔΧϧ)551αʔόΛ্ཱͪ͛Δ

ωΠςΟϒ͔Β+4Λ࣮ߦ͢Δ J04ͷ৔߹ [webView evaluateJavaScript:@"createBook()"] completionHandler:^(id response, NSError *error) { if
(response) { NSLog(@"bookId: %@", response); } }];

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

ΧελϜ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); }

ΧελϜ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; }

ϋΠϒϦουΞϓϦΛ ։ൃ͢Δࡍͷ஫ҙ఺ w Bλά΍DMJDLΠϕϯτΛͦͷ··࢖Θͳ͍ w λοϓ࣌ͷϋΠϥΠτΛফ͢ w ௕ԡ͠Ͱදࣔ͞ΕΔϙοϓΞοϓϝχϡʔΛফ͢

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

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

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

࠷ޙʹ

ౡࠜʹڵຯ͕͋Δ ΤϯδχΞͷํΛืूͯ͠·͢

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

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

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

asakahara

More Decks by asakahara

Other Decks in Programming

Featured

Transcript

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

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

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

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

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

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

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

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

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

$PSEPWBͷϝϦοτ w )5.-$44+BWB4DSJQU͚ͩͰ͋Δఔ౓։ൃ Ͱ͖Δ w 8FC7JFXͷ࣮૷ͳͲϓϥοτϑΥʔϜຖͷࠩҟ Λٵऩ w ϓϥάΠϯΛ࢖͏͜ͱͰωΠςΟϒ΁ͷϒϦοδ ͕༰қʹͰ͖Δ

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

$PSEPWBͷಋೖ w ࣄલʹ"OESPJE4UVEJPɺ9DPEFΛΠϯετʔ ϧ͓ͯ͘͠ w $PSEPWBͷಋೖ͸ԼهίϚϯυͷΈͰ׬ྃ sudo npm install -g

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

ϓϩδΣΫτͷ࣮ߦ cordova emulate android cordova emulate ios cordova run android

σΟϨΫτϦߏ੒ ├── config.xml ├── hooks │ └── README.md ├── platforms

جຊͷϓϥάΠϯ w ୺຤ͷϞʔγϣϯݕ஌ϓϥάΠϯ w όοςϦʔ৘ใͷऔಘϓϥάΠϯ w Χϝϥૢ࡞ϓϥάΠϯ w ୺຤ͷΦϦΤϯςʔγϣϯݕ஌ϓϥά Πϯ

ΧελϜϓϥάΠϯ "OESPJE <feature name="TestPlugin"> <param name="android-package" value="com.sonicmoov.hello.TestPlugin" /> </feature> SFTYNMDPOpHYNMΛฤू

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

ϓϥάΠϯͷݺͼग़͠ onDeviceReady: function() { cordova.exec(function() { console.log('ϓϥάΠϯݺͼग़͠ʹ੒ޭ͠·ͨ͠'); }, function() {

$PSEPWBΛ࢖Θͳ͍ ωΠςΟϒͱͷϒϦοδ w BEE+BWBTDSJQU*OUFSGBDFํࣜ "OESPJE w ωΠςΟϒ͔Β௚઀+BWB4DSJQUΛ࣮ߦ͢Δ w ΧελϜ63-ํࣜ

ωΠςΟϒ͔Β+4Λ࣮ߦ͢Δ J04ͷ৔߹ [webView evaluateJavaScript:@"createBook()"] completionHandler:^(id response, NSError *error) { if

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

ΧελϜ63-ํࣜ J04ͷ৔߹ - (void)webView:(WKWebView )webView decidePolicyForNavigationAction:(WKNavigationAction )navigationAction decisionHandler:(void (^) (WKNavigationActionPolicy))decisionHandler

ΧελϜ63-ํࣜ "OESPJEͷ৔߹ webView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view,

ϋΠϒϦουΞϓϦΛ ։ൃ͢Δࡍͷ஫ҙ఺ w Bλά΍DMJDLΠϕϯτΛͦͷ··࢖Θͳ͍ w λοϓ࣌ͷϋΠϥΠτΛফ͢ w ௕ԡ͠Ͱදࣔ͞ΕΔϙοϓΞοϓϝχϡʔΛফ͢

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

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

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

࠷ޙʹ

ౡࠜʹڵຯ͕͋Δ ΤϯδχΞͷํΛืूͯ͠·͢

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ