Sencha Touch はじめました

Sencha Touch ってなんぞ？
- 巷で流行っているタッチ端末(iPhone, Android など)で利用できる Web アプリのフレームワーク。
- HTML と JavaScript だけでいろいろと出来るので、開発環境構築や実装がお手軽な予感。

まずはお約束の「はろーわーるど」を作ってみることにする
- まずは下記公式サイトから Sencha Touch をダウンロード
  - http://www.extjs.co.jp/products/touch/
  - ライセンスが2種類(商用,オープンソース)あるので良く読んでから適切な方を落としましょう

- 適当な場所に解凍する
  - この記事中では /sencha-path/ に解凍したという設定にします

- 表示用の html(helloWorld.html) を作成
  - html では Sencha Touch の css＆ライブラリ及びはろーわーるどアプリ用の js 読み込みをしているだけ

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>はろーわーるど</title>
<!-- 1. Sencha Touch CSSの読み込み-->
<link rel="stylesheet" href="/sencha-path/resources/css/sencha-touch.css" type="text/css">
<!-- 2. Sencha Touch ライブラリの読み込み(テスト用なので、-debug.js)-->
<script type="text/javascript" src="/sencha-path/sencha-touch-debug.js"></script>
<!-- 3. Sencha Touch アプリケーションの読み込み-->
<script type="text/javascript" src="helloWorld.js"></script>
</head>
<body>
</body>
</html>

- 続いてアプリ用の Javascript ファイル(helloWorld.js)を作成

Ext.setup({
    onReady: function() {
        new Ext.Panel({
            fullscreen: true,
            html: 'はろーわーるど'
        });
    }
});

- ファイルを作ったらブラウザで動かしてみる
  - helloWorld.html をブラウザで見るとこんな画面が出るハズ。ブラウザは Safari か Chrome を使わないと見た目が崩れたりします。

- これだけだと html で書いた方が楽なので、次はカルーセルを実現してみる予定です。
  - カルーセル： iPhone 等のホーム画面で左右にスワイプすると画面が変わるアレ