2010-01-23 webteko#11

1. HTML5で作る
作
iPhone
アプリケ ション
アプリケーション
Ver.2
ふるかわだいすけ/mogya.com

2. ふるかわだいすけ/mogya
フリーランスWEBエンジニア
・いいめも
いいめも
・メイドめ る
・メイドめーる
・モバイラーズ
イラ
オアシス http://mogya.com/
自己紹介

3. この会場から近くて
仕事のできそうな場所リスト
http://oasis.mogya.com/
便利！

4. 今日のテーマ

5. できること
なぜHTML5？ できないこと
作ってみたよ！ まとめ
今日のテーマ

6. 12/19 関西アンカンファレンス
Ver.2です

7. できること
なぜHTML5？ できないこと
作ってみたよ！ まとめ
今日のテーマ

8. iPhoneアプリはみんな興味がある

9. HTML5は面白い

10. 二つあわせれば大人気！

11. そんなヨコシマな
理由ではない！
二つあわせれば大人気！

12. Mac買うと高いよね

13. ・・・などという
セコイ理由でもないっ！
Mac買うと高いよね

14. HTML5は面白い

15. シェア
IE6,7
IE6 7
Firefox 3.0
IE8
Firefox 3.5
Chrome 3 0
3.0
Safari 4.0
Opera 10 x
10.x
出典：12月のブラウザシェア-ChromeがSafari抜く、Firefox3.5は3位
マイコミジャーナル
HTML5に対応したブラウザは？

16. CSS3・HTML5のブラウザ対応状況一覧|CREAMU
HTML5に対応したブラウザは？

17. •みんな同じブラウザ
にも わりと 対応
•HTML5にも(わりと)対応
先進的ユ ザ の割合が高い
•先進的ユーザーの割合が高い
iPhoneはHTML5の実験に最適

18. できること
なぜHTML5？ できないこと
作ってみたよ！ まとめ
今日のテーマ

19. どうやって作るの？
どうや 作る
疑問

20. http://oasis.mogya.com/iphone/
要するにWEBです

21. HTMLなので、FireFoxでも動きます

22. ホーム画面に登録可能

23. ホーム画面に登録可能

24. ホーム画面に登録可能

25. 起動画面も出せます

26. 起動画面も出せます

27. タスクバーを消すとアプリっぽい

28. Safariのタスクバーを消す

29. GPSだって使えちゃう

30. JavaScriptで呼び出せます

31. •CSS3
(Transform/Transitions/Animations)
•Web Storage
g
•Offline Web Applications
そのほか

32. •カメラ
加速度
•加速度センサ
•AppleStoreに登録
•有料課金
HTML5じゃできないこと

33. できる 無理
わかりやすく言うと

34. できること
なぜHTML5？ できないこと
作ってみたよ！ まとめ
今日のテーマ

35. え？

36. え？

37. まだ動いていない部分もあるけ
ど、勘弁してください。
ど 勘弁してください
ごめんなさい

38. つくってみた

39. iPhone3GDevWiki
Transitionとかは・・・

40. jQTouch

41. jQTouch

42. jQTouch

43. jQTouch

44. iPhone風チェックボックス

45. jQTouch

46. AJAX画面遷移

47. Postされた側は、
div～/divだけを書く
AJAX画面遷移

48. jQTouchが勝手に
ロードしてくれる
AJAX画面遷移

49. ここまでは簡単
jQTouch

50. 他の位置の入力を
POSTさせる
問題

51. まとめて
チェックON/OFF
チ ックON/OFF
おりたたみ
テラめんどくさいｗ
問題

52. できること
なぜHTML5？ できないこと
作ってみたよ！ まとめ
今日のテーマ

53. ・たいていのアプリはOK
○UI
○GPS
×カメラ
・jQTouchをつかうと楽
・HTML
・JavaScriptプログラミング
まとめ

54. iPhone関連
iPhone3GDevWiki http://wiki.sohaya.com/index.php
jQTouch
jQ
jQTouch- jQuery plugin for mobile web development
jQ yp g p
http://www.jqtouch.com/
【ハウツー】jQuery on iPhone-jQTouchを使ったWebアプリ
開発|マイコミジャーナル
開発| イ ジ ナ
http://journal.mycom.co.jp/articles/2009/09/08/jqtouch/index.html
そのほか
モバイラーズオアシス-電源が使えるところ検索サイト
http://oasis.mogya.com/
モバイラーズオアシス for iPhone(開発中)
http://oasis.mogya.com/iphone2/
参考サイト