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で作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜
Search
久保田光則
November 05, 2014
Programming
27
18k
Cordovaで作るHTML5ハイブリッドアプリ 〜開発ベストプラクティスを学ぶ〜
第一回Apache Cordova勉強会(
https://atnd.org/events/57562
)での発表資料
久保田光則
November 05, 2014
Tweet
Share
More Decks by 久保田光則
See All by 久保田光則
サーバサイドだけでReact使う / React as Template Engine
anatoo
1
810
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
anatoo
0
3.9k
Mastodonとその脱中央集権の仕組み
anatoo
11
21k
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
anatoo
8
11k
PHPに型推論を実装する ~入門編~ / Type inference on PHP
anatoo
6
10k
Cordova開発者が知っておきたいレンダリングエンジンの話 / HTML5 Conference 2015 in Kagoshima
anatoo
4
1.8k
PHPで学ぶVM型正規表現エンジンの仕組み
anatoo
8
7.2k
チームで作る!イケてるデザイン
anatoo
16
14k
最新SPA開発を学ぼう! ウェブエンジニアのための AngularJS入門
anatoo
20
20k
Other Decks in Programming
See All in Programming
CSC305 Lecture 09
javiergs
PRO
0
310
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
130
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
530
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
Devvox Belgium - Agentic AI Patterns
kdubois
1
140
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
280
CSC305 Lecture 10
javiergs
PRO
0
230
What's new in Spring Modulith?
olivergierke
1
170
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
One Enishi After Another
snoozer05
PRO
0
150
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
420
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Rails Girls Zürich Keynote
gr2m
95
14k
Code Review Best Practice
trishagee
72
19k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
Practical Orchestrator
shlominoach
190
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
The Invisible Side of Design
smashingmag
302
51k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
How STYLIGHT went responsive
nonsquared
100
5.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Transcript
$PSEPWBͰ࡞Δ)5.- ϋΠϒϦουΞϓϦ ୈҰճ"QBDIF$PSEPWBษڧձ ։ൃϕετϓϥΫςΟεΛֶͿ
ࣗݾհ ‣ ٱอాޫଇBLB!BOBUPP ‣ ΞγΞϧגࣜձࣾॴଐ ‣ 6*69σβΠφʔ݉ ιϑτΣΞΤϯδχΞ
ධൃചத
͢͜ͱ
IUUQDPSEPWBBQBDIFPSH
)5.-Λϥοϓͯ͠ΞϓϦ ‣ )5.-Λهड़͢Δ͜ͱͰ ֤ϓϥοτϑΥʔϜ͚ͷΞϓϦʹͯ͘͠ΕΔ ̇
࣮ࡍͷ։ൃ ཁ݅ఆٛ 6*ઃܭɾσβΠϯ ։ൃɾνϡʔχϯά σόοάɾςετ ϦϦʔε ‣ ϕετϓϥΫςΟεϊϋղઆ͠·͢
ཁ݅ఆٛ
IUUQFXPSETKQX&"&###&"&"&#&"IUNM ʮγεςϜιϑτΣΞͷ։ൃʹ͓͍ͯɺ ࣮͖͢ػೳຬ͖ͨ͢ੑೳ ͳͲΛ໌֬ʹ͍ͯ͘͠࡞ۀͷ͜ͱʯ
$PSEPWBΞϓϦͰେࣄͳॴ ‣ 04όʔδϣϯͲ͜·ͰରԠ͢Δ ‣ "OESPJEͰͷಈ࡞อূͷݶఆ ‣ $PSEPWBϓϥάΠϯͷ࣮ඞཁ͔൱͔
ରԠ͢Δ04ͷόʔδϣϯΛܾΊΔ ‣ γΣΞͱར༻Ͱ͖ΔػೳΛѲͯ͠ݕ౼͢Δ
J04ͷ֤όʔδϣϯͷγΣΞ ‣ J04 J04ରԠ IUUQTEFWFMPQFSBQQMFDPNTVQQPSUBQQTUPSF J04ҎԼ J04 J04
݄࣌
"OESPJEͷ֤όʔδϣϯͷγΣΞ ‣ Λαϙʔτ͢Δ͔Ͳ͏͔ ‣ ܥܥαϙʔτ͢Δɻܥࣺͯͯྑ͠ IUUQTEFWFMPQFSBOESPJEDPNBCPVUEBTICPBSET ݄࣌ Y
Y
όʔδϣϯʹΑͬͯར༻Ͱ͖Δػೳ ‣ ཁ݅Λ౿·͑ͭͭରԠόʔδϣϯΛܾΊΔ IUUQDBOJVTFDPN J04 "OESPJE 8FC4PDLFU 8FC8PSLFST
*OEFYFE%# 47( 8FC(- 8,8FC7JFX USBOTMBUFEܥ USBOTGPSN ΑΓൈਮ
༏ઌ͢Δ"OESPJEͷΛݶఆ͢Δ ‣ όʔδϣϯ͕ಉ͡ͰʹΑͬͯ ಈ࡞͕ҧ͏"OESPJEͰຯʹॏཁͳ͜ͱ ‣ γΣΞ͕େ͖͍Λ༏ઌ͢ΔʹબͿ
$PSEPWBϓϥάΠϯͷ։ൃඞཁ͔ ‣ طଘͷ$PSEPWBϓϥάΠϯΛ୳͢ IUUQQMVHJOTDPSEPWBJP ‣ ࣗલͰ։ൃ͕ඞཁ͔ ݕূ͢Δ
6*ઃܭɾσβΠϯ
6*ઃܭɾσβΠϯ ‣ ϫΠϠϑϨʔϜϏδϡΞϧσβΠϯΛ࡞ ɾɾɾ ɾɾɾ ɾɾɾ #BDL
$PSEPWBΞϓϦͰେࣄͳ͜ͱ ‣ )5.-Ͱ࣮ݱՄೳͳ6*͔ ‣ ࣮ݱՄೳͰͱͷΓ߹͍औΕΔ͔ ‣ "OESPJEͱJ04ͷ6*ͷҧ͍ ‣
ڊେͳϦετϏϡʔͷѻ͍
"OESPJEͱJ04ͷ6*ͷҧ͍Λߟྀ͢Δ ‣ λϒόʔͷ্ԼɺόοΫϘλϯͷ༗ແɺπʔϧόʔͷϨΠΞτ ‣ $PSEPWBʹݶΒͳ͍ɻϓϥοτϑΥʔϜͷ6*نΛ९क͢Δ
ڊେͳϦετΛͲ͏͢Δ͔ ‣ )5.-ʹڊେͳͷ%0.ཁૉΛѻ͏ํ๏͕༻ҙ͞Ε͍ͯͳ͍ ‣ εΫϩʔϧҐஔΛݕͯ͠ϩʔυɾΞϯϩʔυΛ࣮͢Δ͜ͱՄೳ ‣ ඦઍͷཁૉͷϦετආ͚Δͷ͕ແɻϖʔδૹΓͳͲͰ༻ ӅΕͨΒ Ξϯϩʔυ දࣔͦ͠͏ͳΒ
ϩʔυ
։ൃ
‣ ͲͷΑ͏ͳΞʔΩςΫνϟΛऔΔ ‣ 6*ߏஙΛͲ͏ߦ͏ ‣ ޮతͳ։ൃαΠΫϧ
ΞʔΩςΫνϟ
ΞʔΩςΫνϟ41"Ͱ ‣ ͍ΘΏΔ4JOHMFQBHF"QQMJDBUJPOܗࣜͰ։ൃ ‣ 41"ͷͨΊͷϑϨʔϜϫʔΫɾϊϋΛͦͷ··͑Δ SPA
ར༻Ͱ͖ΔϑϨʔϜϫʔΫ ‣ ϋΠϒϦουΞϓϦ༻ͷ+4ϑϨʔϜϫʔΫΛར༻ ‣ 41"։ൃ͕Ͱ͖ΔϑϨʔϜϫʔΫͰେৎ
0OTFO6* ‣ "OHVMBS+4ϕʔεͷ$PSEPWB༻+4ϑϨʔϜϫʔΫ ‣ ΧελϜཁૉͰ6*Λهड़ IUUQPOTFOJP
ΧελϜཁૉΛ͔ͭͬͯ6*Λهड़ ‣ λάΛॻ͚ͩ͘ͰεϚϗ༻6*͕࡞ΕΔ
‣ ๛ͳαϯϓϧίʔυ ‣ IUUQDPNQPOFOUTPOTFOJPQBUUFSOT
ίʔσΟϯάαΠΫϧ
ίʔσΟϯάαΠΫϧΛ࠷దԽ͢Δ ‣ ܁Γฦ͠ͷ͕։ൃͷΛنఆ͢Δ ‣ DPSEPWBSVO͕ඇৗʹ͕͔͔࣌ؒΔɾɾɾɾʂ ‣ J04Ͱ"OESPJEͰ ίʔσΟϯά DPSEPWBSVO ͰίϯύΠϧసૹ
Ͱ֬ೝ
ղܾํ๏ ‣ ϒϥβͰಈ͔͢ ‣ .POBDB-PDBMLJU͏
ϒϥβͰಈ͘Α͏ʹ͢Δ ‣ DPSEPWBQMBUGPSNBEECSPXTFS͢Δ ‣ $PSEPWB͔ΒՃ͞Εͨ։ൃ༻ͷϞʔυ ‣ ϓϥάΠϯΤϛϡϨʔγϣϯ ‣ ίϯύΠϧసૹ͠ͳͯ͘ྑ͍ ‣
-JWFSFMPBE#SPXTFS4ZODࠐΉͱඇৗʹૉૣ͘ ։ൃͰ͖Δ ‣ ऑଟ͘ͷϓϥάΠϯ͕ಈ͔ͳ͍ɾະରԠ
.POBDB-PDBMLJUΛ͏ ‣ ϩʔΧϧͰίʔσΟϯάͯ͠อଘͨ͠ΒͦΕ͕ଈσόΠεͰߋ৽ ‣ ΞϓϦΛίϯύΠϧແ͠Ͱߋ৽͢Δ͔Βߴʂ ‣ ۙϦϦʔεʂ ίʔσΟϯά ߋ৽ࣗಈݕ ϑΝΠϧసૹ
Ͱ֬ೝ
νϡʔχϯά
Կ͕ϘτϧωοΫ͔ ‣ +4ͷॲཧ ‣ $44ͷϚονϯάॲཧ ‣ %0.ͷϦϑϩʔ ‣ (16ͷసૹ ‣
ඳըॲཧ ΣϒΠϯεϖΫλͰ·ͣ֬ೝ
۩ମతͳνϡʔχϯάͦͷଞϊϋ IUUQTTQFBLFSEFDLDPNBOBUPPIUNMEFJPTBQVSJBOESPJEBQVSJXP[VPSPVIUNMIBJCVSJUVEPBQVSJLBJ GBSVNFO
‣ ཱͪಡΈ͠·͠ΐ͏
σόοά
4BGBSJ $ISPNFͷΠϯεϖΫλ ‣ J04ɺ"OESPJE͔ΒͦΕͧΕར༻Մೳ ‣ ͑ͳ͍࣌8FJOSFͬͨΓ͢Δ
(BQ%FCVH ‣ ؆୯ʹΠϯεϖΫλΛىಈͰ͖ͯศར ‣ J04"OESPJE͜ΕҰͭͰେৎɻ IUUQTXXXHFOVJUFDDPNQSPEVDUTHBQEFCVH
%0.ϦʔΫ
%0.ϦʔΫͱ ‣ ։์͞ΕΔ͖%0.ཁૉ͕+4͔Βࢀর͞Εͨ·· ʹͳͬͯ։์͞Εͳ͍ϝϞϦϦʔΫͱಉछͷ +4͔Βͷࢀর HTMLParagraphElement
%0.ϦʔΫ͢Δͱ %FUBDIFE%0.5SFFϦʔΫ͢Δ ‣ υΩϡϝϯτʹؚ·Εͳ͍%FUBDIFE%0.πϦʔࣗମ͕ϦʔΫ͢Δ ‣ %0.ཁૉࢠཁૉཁૉͷࢀরΛ͍࣋ͬͯΔͨΊ ‣ %0.πϦʔ͕࣋ͭϦιʔε ը૾ͳͲ ։์͞Εͳ͍
+4͔Βͷࢀর ϦʔΫͨ͠%FUBDIFE%0.5SFF
%0.ϦʔΫΛ͙ʹ ‣ %0.ཁૉͷࢀরɺඞཁͳ͘ͳͬͨΒΔ ‣ ΠϕϯτϦεφ͖ͪΜͱSFNPWF͢Δ // ΠϕϯτϦεφΛremove͢Δ this._element.removeEventListener(‘click’, fn); //
ࢀরΛΔ this._element = null; +BWB4DSJQU
ςετͰ͏πʔϧ
3FNPUF5FTULJU ‣ ಛఆͷΛϦϞʔτ͔Β࣮ߦͰ͖Δ ‣ ςετ࣌ʹɺΛखݩʹ༻ҙͰ͖ͳ͍߹ʹར༻ IUUQBQQLJUCPYDPNUFTULJU
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠