HTML5で作る
        作
   iPhone
アプリケ ション
アプリケーション
                     Ver.2




ふるかわだいすけ/mogya.com
ふるかわだいすけ/mogya

フリーランスWEBエンジニア
・いいめも
 いいめも
・メイドめ る
・メイドめーる
・モバイラーズ
   イラ
     オアシス http://mogya.com/
         自己紹介
この会場から近くて
仕事のできそうな場所リスト

    http://oasis.mogya.com/




                      便利!
今日のテーマ
できること
なぜHTML5?       できないこと




作ってみたよ!        まとめ

      今日のテーマ
12/19 関西アンカンファレンス


Ver.2です
できること
なぜHTML5?       できないこと




作ってみたよ!        まとめ

      今日のテーマ
iPhoneアプリはみんな興味がある
HTML5は面白い
二つあわせれば大人気!
そんなヨコシマな
理由ではない!


二つあわせれば大人気!
Mac買うと高いよね
・・・などという
セコイ理由でもないっ!


  Mac買うと高いよね
HTML5は面白い
シェア

                         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に対応したブラウザは?
CSS3・HTML5のブラウザ対応状況一覧|CREAMU



HTML5に対応したブラウザは?
•みんな同じブラウザ
      にも わりと 対応
•HTML5にも(わりと)対応
 先進的ユ ザ の割合が高い
•先進的ユーザーの割合が高い



 iPhoneはHTML5の実験に最適
できること
なぜHTML5?       できないこと




作ってみたよ!        まとめ

      今日のテーマ
どうやって作るの?
どうや  作る



    疑問
http://oasis.mogya.com/iphone/

要するにWEBです
HTMLなので、FireFoxでも動きます
ホーム画面に登録可能
ホーム画面に登録可能
ホーム画面に登録可能
起動画面も出せます
起動画面も出せます
タスクバーを消すとアプリっぽい
Safariのタスクバーを消す
GPSだって使えちゃう
JavaScriptで呼び出せます
•CSS3
 (Transform/Transitions/Animations)
•Web Storage
           g
•Offline Web Applications



            そのほか
•カメラ
 加速度
•加速度センサ
•AppleStoreに登録
•有料課金



    HTML5じゃできないこと
できる      無理

  わかりやすく言うと
できること
なぜHTML5?       できないこと




作ってみたよ!        まとめ

      今日のテーマ
え?
え?
まだ動いていない部分もあるけ
ど、勘弁してください。
ど 勘弁してください




    ごめんなさい
つくってみた
iPhone3GDevWiki



Transitionとかは・・・
jQTouch
jQTouch
jQTouch
jQTouch
iPhone風チェックボックス
jQTouch
AJAX画面遷移
Postされた側は、
       div~/divだけを書く

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

AJAX画面遷移
ここまでは簡単




     jQTouch
他の位置の入力を
     POSTさせる




問題
まとめて
      チェックON/OFF
      チ ックON/OFF

     おりたたみ



     テラめんどくさいw


問題
できること
なぜHTML5?       できないこと




作ってみたよ!        まとめ

      今日のテーマ
・たいていのアプリはOK
  ○UI
  ○GPS
  ×カメラ
・jQTouchをつかうと楽
・HTML
・JavaScriptプログラミング

       まとめ
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/



                参考サイト

Html5で作るiPhoneアプリケーション2010