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
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
410
Other Decks in Programming
See All in Programming
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
210
Goのエラースタックトレースの歴史と今後
sonatard
9
1.5k
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
210
Snowflakeで眠ったデータを起こそう!
estie
0
120
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
340
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
650
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
350
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5.3k
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
250
Featured
See All Featured
For a Future-Friendly Web
brad_frost
172
9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
Happy Clients
brianwarren
92
6.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
Practical Orchestrator
shlominoach
182
9.7k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
YesSQL, Process and Tooling at Scale
rocio
164
13k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
Designing Experiences People Love
moore
136
23k
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ͷٕज़Λத৺ʹ։ൃͰ͖Δ
ͷͰɺॳ৺ऀʹ͓͢͢Ί
࠷ޙʹ
ౡࠜʹڵຯ͕͋Δ ΤϯδχΞͷํΛืूͯ͠·͢
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ