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
790
requestIdleCallback()による協調的バックグラウンド処理の実現 / requestIdleCallback()
anatoo
0
3.8k
Mastodonとその脱中央集権の仕組み
anatoo
11
21k
大量の要素を高速に表示するためのバーチャルレンダリング入門 / Virtual Rendering Introduction
anatoo
8
11k
PHPに型推論を実装する ~入門編~ / Type inference on PHP
anatoo
6
9.9k
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
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
230
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
480
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
350
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
300
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
360
Is Xcode slowly dying out in 2025?
uetyo
1
190
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
C++20 射影変換
faithandbrave
0
530
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
740
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
100
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
240
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Designing for Performance
lara
609
69k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
GraphQLとの向き合い方2022年版
quramy
47
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠