1. SmartPhone
JS
#gunmaweb

2. http://gunma-web.org/gunma-map/
※ SEO
w

3. HTTP
Server Apache
DB MySQL
Frame Work Sinatra( Ruby )
Javascript Jquery Mobile

4. Jquery Mobile
1. Jquery Mobile
2.
3. method
4.
5.
※
4

5. jQuery
(Smart Phone)
5

6. 1.
2.
3. (HTML)
6

7. http://www.youtube.com/
watch?v=GWbdIB3iYBo
7

8. http://www.youtube.com/
watch?v=GaqTNE7Z4Ag
8

9. <div id="home" data-role="page" data-theme="d">
<div data-role="header">
<h1>TiTle</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#A">Go to A</a></li>
</ul>
</div>
</div>
<div id=”A” data-role="page" data-theme="d">
A
</div>
9

10. http://www.youtube.com/
watch?v=0pOnjgmSda0
10

11. $.mobile.pageLoading(); #loading
$.mobile.changePage("#confirm_map_contents",
"slide"); #
$.mobile.pageLoading(true); #loading
※ajax
11

12. 2 ajax
Forum method
listview(); button(); .....etc....
CSS
... α ...
12

13. α β
Dreamweaver
13

14. JqTouch
1. jqtouch
2.
3. method
4.
※
14

15. jQuery
(Smart Phone)
( )
15

16. 1.
2. (!? )
3. (HTML)
4.
16

17. http://www.youtube.com/
watch?v=VwZsTv-z3Ng
17

18. http://www.youtube.com/
watch?v=AFXizPeuBZk
18

19. 19

20. <div id="home">
<div class=”toolbar”>
<h1>TiTle</h1>
</div>
<ul>
<li><a href="#A">Go to A</a></li>
</ul>
</div>
<div id=”A”>
A
</div>
20

21. http://www.youtube.com/
watch?v=58k_GdRoatk
21

22. ;
var jQT = $.jQTouch();
jQT.goTo(“# ID ”,”slide”); #
※ajax
22

23. #home
....orz
β
23

24. sencha touch
( sencha touch )
※sencha touch ( 2011/05
)
※ 2010/11
24