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
720
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
anatoo
0
3.6k
Mastodonとその脱中央集権の仕組み
anatoo
11
21k
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
anatoo
8
11k
PHPに型推論を実装する ~入門編~ / Type inference on PHP
anatoo
6
9.8k
Cordova開発者が知っておきたいレンダリングエンジンの話 / HTML5 Conference 2015 in Kagoshima
anatoo
4
1.7k
PHPで学ぶVM型正規表現エンジンの仕組み
anatoo
8
7k
チームで作る!イケてるデザイン
anatoo
16
14k
最新SPA開発を学ぼう! ウェブエンジニアのための AngularJS入門
anatoo
20
20k
Other Decks in Programming
See All in Programming
CSC509 Lecture 09
javiergs
PRO
0
140
みんなでプロポーザルを書いてみた
yuriko1211
0
260
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
880
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
480
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
2
1.1k
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
よくできたテンプレート言語として TypeScript + JSX を利用する試み / Using TypeScript + JSX outside of Web Frontend #TSKaigiKansai
izumin5210
6
1.7k
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
1.6k
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370
CSC509 Lecture 11
javiergs
PRO
0
180
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Unsuck your backbone
ammeep
668
57k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Teambox: Starting and Learning
jrom
133
8.8k
Fireside Chat
paigeccino
34
3k
For a Future-Friendly Web
brad_frost
175
9.4k
Designing the Hi-DPI Web
ddemaree
280
34k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠