HTML5 + PhoneGap +

Android

2013/5 V1
Native App Web App Hybrid App

SDK !"#$
%&
'()
*+!,-./
01234
5Web App 6
Nai!e App 7
89:;<
=>!?@AB
IT C "a!a# $b%e&'(
D)N*T E
HTML5+(SS3
+
"a!aS&rip
F<G7H
)*+IJ K L L
=>HMN6O
I
PQ R' '
6ST
UV<
PQ W R'
XYZ [ PK K
\]^_ ' '
Native App `Web App 6Hybrid App abcd
%eC9f

HTML5 gHTML5 + %+,er-."a!a/&rip0

+ %+,er- Mobi1e

PhoneGap ghijk. lmno0

HTML5 6PhoneGap ./0122eb3i

p-

Pq./
SDK.Android `i$S `Windo2/0 r7
H
PhoneGap

st Apa&he (ordo!a

u].5ra6e0

./vwu]!H'(xyz HTML#
"a!aS&rip 6 (SS !6 Nai!e {|
}~ PhoneGap

(z'(App

>PhoneGap Android

hp7//do&/)phone8ap)&o6/en/2)0)0/8,ide9
8ein8'/ared9android9inde:)6d)h61
g
hp7//do&/)phone8ap)&o6/en/2);)0/8,ide98ein8'
/ared9inde:)6d)h61<Gein8=20Sared=20G,ide/
PhoneGap

Do2n1oad he 1ae/ &op-

o5PhoneGapand e:ra& i/
&onen/) We 2i11 be 2or3in8 2ih he
Android dire&or-)

hp7//phone8ap)&o6/do2n1oad/
PhoneGap 5or Android

1 Eclipse Android

2 PhoneGap (
2.7 )

PhoneGap
lib!android !"cordova"2.7.0.#ar #
cordova"2.7.0.#s
$%&'(
Web3i
"a!a/&ri
p
iner5a
&e
Web3i

HTML
5
>ro2/
er
GP
S
Wi?
i
(o6pa
//
(a6e
ra
@
)*+,-./0
Nai!e (ode
12
>
T
+
Web App
A

$ 3Android "assets !
%%% !45,H&'( ( 67
89)

) : cordova.#ar( ;< cordova"

2.7.0.#ar = > ? ) @ A B *libs
C cordova.#s( ;< cordova"2.7.0.#s) @
AB*assets*%%% C

+ DEF9

:,lass e-tends GActivity EH DroidGap

:setContentView(R.layout.main); EH
super.loadUrl(file:android!assetwwwinde".
#tml$);

7 JKLMNBassets*%%%
"OP+ QR?Sinde-.ht.l
BCD$(TDP* HTMLE
Bh61E
BheadE
Bi1eEHe11o Fn/ideB/i1eE
B/&rip -peGHe:/%a!a/&ripH &har/eGH,5'AI
/r&GHcordova.#sHEB//&ripE
B/headE
Bbod-E
Bh1EPhoneGap ]B/h1E
B/bod-E
B/h61E

V<%+,er- 6%+,er-
Mobi1e

%+,er- 6%+,er- %e%/ a//e/J222

a8 a//e/J222Jinde:)h61
B6ea &har/eGH,5'AH /E
B6ea na6eGH!ie2porH &onenGH2idhGde!i&e'2idh# iniia1'
/&a1eG1H/E
B/&rip /r&GH%K,er-'1)L)1)6in)%/HEB//&ripE
B1in3 re1GH/-1e/heeH hre5GH%K,er-)6obi1e'1)3)0)6in)&//HE
B/&rip /r&GH%K,er-)6obi1e'1)3)0)6in)%/HEB//&ripE
inde:)h61
BCD$(TDP* h61E
Bh61E
BheadE
B6ea &har/eGH,5'AH /E
B6ea na6eGH!ie2porH &onenGH2idhGde!i&e'2idh# iniia1'/&a1eG1H/E
B/&rip /r&GH%K,er-'1)L)1)6in)%/HEB//&ripE
B1in3 re1GH/-1e/heeH hre5GH%K,er-)6obi1e'1)3)0)6in)&//HE
B/&rip /r&GH%K,er-)6obi1e'1)3)0)6in)%/HEB//&ripE
B/&rip -peGHe:/%a!a/&ripH &har/eGH,5'AI /r&GHcordova.#sHEB//&ripE
B/headE
Bbod-E
Bdi! daa'ro1eGHpa8eHE
Bdi! daa'ro1eGHheaderHE
Bh1EPhoneGap B/h1E
B/di!E
Bdi! daa'ro1eGH&onenHE
B,1 daa'ro1eGH1i/!ie2H daa'in/eGHr,eHE
B1iEBa hre5GH<HE1B/aEB/1iE
B1iEBa hre5GH<HE2B/aEB/1iE
B1iEBa hre5GH<HE3B/aEB/1iE
B/,1E
B/di!E
Bdi! daa'ro1eGH5ooerHE
Bh1E2013/5/20B/h1E
B/di!E
B/di!E
B/bod-E
B/h61E
re/,1

BTCUVWNHTML #jQuery
XYZBPhoneGap

VW[)PhoneGap \]
cordova.jar #cordova.js ^_

1 `res/xml !Cab`c
config.xml VWGPhoneGap
"d!

DE"ndroidManifes#.xml
vw&ordo!a &1a//
vw&ordo!a
DE"ndroidManifes#.xml

no
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANS" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECOR_A!IO" />
<uses-permission android:name="android.permission.RECOR_VIEO"/>
<uses-permission android:name="android.permission.MOIF"_A!IO_SETTIN#S" />
<uses-permission android:name="android.permission.REA_CONTACTS" />
<uses-permission android:name="android.permission.$RITE_CONTACTS" />
<uses-permission android:name="android.permission.$RITE_EXTERNAL_STORA#E" />
<uses-permission android:name="android.permission.ACCESS_NET$OR%_STATE" />
<uses-permission android:name="android.permission.#ET_ACCO!NTS" />
<uses-permission android:name="android.permission.BROACAST_STIC%"" />
PhoneGap ]

N#s

/script type01te-t*#avascript1 src01cordova.#s12/*script2

NPhoneGap

doc3.ent.addEvent(istener(1deviceready14on5evice6eady
47alse)8

Nef[)*g

73nction on5evice6eady()

/0hi

Navi9ator. /0. *g

zw. %/ 0
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<ttle>Ph!"e#a$</ttle>
<scr$t t%$e="te&t/'a(ascr$t" src="c!rd!(a)'s"></scr$t>
<scr$t t%$e="te&t/'a(ascr$t">
*+"ct!" !"De(ce,ead%-. /
d!c+me"t)0etEleme"t1%2d-"hh".)""erHTML = " )-33"4
5
*+"ct!" "t-./
d!c+me"t)addE(e"tLste"er-"de(ceread%"6 !"De(ce,ead%6 *alse.4
5
7"d!7)!"l!ad = "t4
</scr$t>
</head>
<8!d%>
<h9 d="hh">-6 !</h9>
</8!d%>
</html>
m%+,er- 6PhoneGap <

B/&ripE
M.do&,6en0)read-.5,n&ionN
do&,6en)add*!enLi/ener.Hde!i&eread-H# onDe!i&eOead-#
5a1/e0P
5,n&ion onDe!i&eOead-.0 N
do&,6en)8e*1e6en>-Fd.HhihiH0)innerHTML G H )-
QQHP
R
R0P
B//&ripE
Bdi! daa'ro1eGH&onenHE
Bdi! idGHhihiHE -# CB/di!E
B,1 daa'ro1eGH1i/!ie2H daa'in/eGHr,eHE
B1iEBa hre5GH<HE1B/aEB/1iE
B1iEBa hre5GH<HE2B/aEB/1iE
B1iEBa hre5GH<HE3B/aEB/1iE
B/,1E
B/di!E
I4 )
z%+,er-
B/&ripE
M.do&,6en0)read-.5,n&ionN
do&,6en)add*!enLi/ener.Hde!i&eread-H# onDe!i&eOead-#
5a1/e0P
5,n&ion onDe!i&eOead-.0 N
do&,6en)8e*1e6en>-Fd.HhihiH0)innerHTML G H )-
QQHP
R
R0P
B//&ripE
be5ore
B/&ripE
M.do&,6en0)bind.H6obi1einiH# 5,n&ion.0 N
M)/,ppor)&or/ G r,eP
M)6obi1e)a11o2(ro//Do6ainPa8e/ G r,eP
R0P
do&,6en)add*!enLi/ener.Hde!i&eread-H# onDe!i&eOead-#
5a1/e0P
5,n&ion onDe!i&eOead-.0 N
do&,6en)8e*1e6en>-Fd.HhihiH0)innerHTML G H )-
QQHP
R
B//&ripE
a5er
V<
=>(a6era

Fnde:)h61 \a3ephoo)h61
<div data-role="content">
<div id="hihi"> -, !</div>

<ul data-role="listview" data-inset="true">
<li><a href="takephoto.html" data-
aja="false">camera</a></li>
<li><a href="!"> "</a></li>
<li><a href="!"> #</a></li>
</ul>
</div>
a3ephoo)h61
<$od%>
<div data-role="pa&e">
<div data-role="header">
<h'>(hone)ap %</h'>
</div>
<div data-role="content">
<a data-role="$utton" data-theme="$"
id="take*photo"> </a>
<im&
st%le="displa%:none+width:',-p+hei&ht:',-p+"
id="small.ma&e" src="" />
</div>
<div data-role="footer">
<h'>"-'#///"-</h'>
</div>
</div>
</$od%>

%
<script lan&ua&e="javascript">
01document2.read%1function123
var picture4ource+ // 3U
var destination5%pe+ // :
// E (hone)ap
document.add6vent7istener1"deviceread%",on8evice9ead%,false2+
// (hone)ap
function on8evice9ead%12 3
picture4ource=navi&ator.camera.(icture4ource5%pe+
destination5%pe=navi&ator.camera.8estination5%pe+
:
// =>T\%T
01;!take*photo;2.click1function123
navi&ator.camera.&et(icture1on(hoto8ata4uccess, on<ail,
3 =ualit%: /-, destination5%pe: >amera.8estination5%pe.<.76*?9. :2+
:2+
// -aqvwfunction
function on(hoto8ata4uccess1i6a8eSOF2 3
//
M.T</6a11F6a8eT0)ar.H/r&H#i6a8eSOF0P
M.T</6a11F6a8eT0)/ho2.0P
:
// # function
function on<ail1messa&e2 3
alert1;<ailed $ecause: ; @ messa&e2+
:
:2+
</script>
no
hp7//do&/)phone8ap)&o6/en/2)U)
0/&ordo!a9&a6era9&a6era)6d)h
61<(a6era