Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Cordovaの概要とハイブリッドアプリのメリット
Search
asakahara
February 07, 2017
Programming
1
1.1k
Cordovaの概要とハイブリッドアプリのメリット
フロントエンド勉強会 in 山陰 #01の発表内容です。
Cordovaやその他のフレームワーク、ハイブリッドアプリのメリット&デメリットについて触れています。
asakahara
February 07, 2017
Tweet
Share
More Decks by asakahara
See All by asakahara
Alamofireの コードリーディングから Swift 3.0の知見を学ぶ
asakahara
0
450
Other Decks in Programming
See All in Programming
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
200
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
110
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
470
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
890
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
47
31k
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
エンジニア向け採用ピッチ資料
inusan
0
160
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
140
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
450
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Rails Girls Zürich Keynote
gr2m
94
14k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Adopting Sorbet at Scale
ufuk
77
9.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Automating Front-end Workflow
addyosmani
1370
200k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Why Our Code Smells
bkeepers
PRO
337
57k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Transcript
$PSEPWBͷ֓ཁͱ ϋΠϒϦουΞϓϦͷϝϦοτ ϑϩϯτΤϯυษڧձJOࢁӄ גࣜձࣾιχοΫϜʔϒ ࡔݪ໌༟
ࡔݪ໌༟ 5XJUUFS*%!BTBLBIBSB ϒϩάIUUQTBLBIBSBIBUFOBCMPHKQ w લ৬ژͰJ04ΤϯδχΞ w ݄͔ΒιχοΫϜʔϒͷΤϯδχΞ w ౡ ݩ
ژౡࠜ
גࣜձࣾιχοΫϜʔϒ w ສਓҎ্͕༡ͿιʔγϟϧήʔϜͷاը։ ൃӡ༻ w )5.-ͰಈըΛ৴͢ΔHVJMF w 8FCαʔϏεʗεϚʔτϑΥϯΞϓϦ։ൃ w σβΠϯɾΠϥετ੍࡞
ιχοΫϜʔϒౡࠜࣄۀॴ w ݄͔Β։ઃ w দߐӺ͔ΒंͰఔͷࢁͷ্ʹ͋ΔΦ ϑΟε w ݱࡏΤϯδχΞ໊͕̐ಇ͍ͯΔ
None
None
None
ࠓ͢͜ͱ 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ͷٕज़Λத৺ʹ։ൃͰ͖Δ
ͷͰɺॳ৺ऀʹ͓͢͢Ί
࠷ޙʹ
ౡࠜʹڵຯ͕͋Δ ΤϯδχΞͷํΛืूͯ͠·͢
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ