Sencha Touch をはじめよう 1 (Getting Started with Sencha Touch の邦訳 その１)
Sencha Touch をダウンロードするとGetting Started width Sencha Touchというオライリーの本のタイトルっぽいチュートリアルが付属しています。
当然英語なので勝手に翻訳してみます。
英語としては簡単な文章になっているので、原文でも読みやすいとおもいます。
Ext JSの知識がある人にとっては、内容があまりありません。ExtJSの知識無しでいきなりSencha Touchはじめる人のためのチュートリアルといった感じです。
Sencha Touch をはじめよう (Getting Started with Sencha Touch の邦訳)
これはSencha Touchのはじめ型を解説した文書です。
Sencha Touchを使ってタッチスクリーンを持つデバイスに特化したWebアプリを作る際の基本的なステップを紹介しています。この解説では、今回のSencha Touchのリリースに含まれるサンプルアプリGeoTweetsの詳細な製作ステップも紹介しています。
この解説はSencha Touchを使ってすばやく、タッチスクリーンに対応したデバイス向けのWebアプリを作りたい全てのWebデベロッパーに向けて書かれています。
以下の準備を先に済ませている前提で話を進めます
Sencha Touchのライブラリをダウンロード。
開発用のサーバーの準備
HTML + CSS + JSを使用したWebアプリの開発の知識がある。
それでははじめましょう。
この解説では以下のセクションがあります。
- Sencha Touch の紹介 ：Introduction to Sencha Touch
- Sencha Touch の使い方（基本編）：Using Sencha Touch: Main Steps
- Sencha Toutchの使い方（応用編：GeoTweetsの解説）：Using Sencha Touch: Detailed Steps for Creating the GeoTweets Application
- まとめ：Summary and Further Reading
※訳注：今回の翻訳はSencha Touchの使い方（基本編）までです。
Sencha Touch の紹介 ：Introduction to Sencha Touch
Sench Touch はタッチパネルデバイス向けWebアプリケーション開発用JavaScriptフレームワークです。Sencha Touchを使うことで、Webデベロッパーの既に持っているスキルを使いながらエレガントで一貫性のあるUIを使ったWebアプリケーションを最小限の努力で作成することができます。
Sencha Touch の使い方（基本編）：Using Sencha Touch: Main Steps
- 開発環境を作る
- HTMLファイルの作成
- アプリケーションのJSファイルを作成
- アプリのテスト
- リリースのための設定 Update the Application for Production
- アプリケーションを運用する Put the Application into Production
1.環境を作る
- Sench Touchライブラリのダウンロード
- Webアプリの開発環境の確認（エディタ、ブラウザなどのことだと思います。）
- 開発及び運用のためのサーバーの設定を確認
- 独自のCSSファイルを使う場合はファイル名を確認しておく（これは次のステップでHTMLファイルの中で必要になるためです。）
2.HTMLファイルを作る
お好きなエディタでこのアプリケーションのためのHTMLファイルを作ります。HTMLファイルの例は以下のようなものがあります。ここではmyapp.htmlとしています。
アプリケーションのHTMLには特定のリンクを設定する必要があります。
- Sencha TouchのデフォルトのCSSファイル ext-touch.css
- アプリケーションのカスタムのCSS(mycss.cssなど)
- 使用したバージョンのSencha Touch ライブラリ
ただしSenechaチームは以下の点をお勧めしています。
アプリケーションの開発、テスト時：ext-touch-debug.js（デバッグバージョン：このバージョンはライブラリのどこでエラーが起きているかを見つけやすくなっています。非圧縮バージョン 難読化されていない。)
運用時：ext-touch.js(運用バージョン：圧縮バージョン 運用時のtipsは「リリースのための設定」をご覧下さい) - アプリケーションのJavaScriptファイル（次のステップで作成します。myApp.jsなど）
※訳注：以下はオリジナルのドキュメントではアンカーリンクの先の部分です。
HTMLファイルの作成の詳細
Sencha Touchのアプリケーションの開発の最初のステップはHTMLファイルの作成です。
このHTMLファイルはSencha Touchライブラリ、Sencha TouchのデフォルトCSS、アプリケーションのためのCSS,JSとリンクしている必要があります。例えばGeoTweetsのHTMLファイル（index.html）は以下のようになります。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>GeoTweets</title > <!-- Ext Touch CSS -- > <link rel="stylesheet" href="../../resources/css/ext-touch.css" type="text/css"> <!-- Custom CSS -- > <link rel="stylesheet" href="css/guide.css" type="text/css"> <!-- Ext Touch JS -- > <script type="text/javascript" src="../../ext-touch-debug.js"> </script> <!-- Application JS -- > <script type="text/javascript" src="src/index.js"> </script> </head> <body> </body> </html>このHTMLでリンクしているファイルは以下のようになります。
- Sencha Touch のデフォルトCSS (ext-touch.css)
- アプリケーション独自のCSS(guide.css)
この解説ではguide.cssについては解説しません。CSSを見てもらえば一目瞭然です。またこの文書の対象をWebアプリを開発する際のCSSの利用法について基本的な知識がある人と考えているからです。
- Sencha Touch ライブラリ（開発,テスト中はデバッグバージョンのext-touch-debug.jsを使用する）
デバッグバージョンは非圧縮で、コメントが記述されています。これはエラーがどこで起きているかを分かりやすくしてくれます。運用の際は運用バージョンのext-touch.jsを使うべきです。
注意点：HTMLファイルの
タグの中身が空っぽです。これはSencha TouchではページのコンテンツをJavascriptで自動的に生成するためです。
3.アプリケーションのJavaScriptファイルを作成する
お好きなエディタでアプリケーションのJavaScriptファイルを作成します。アプリケーションのサンプルは以下になります。Creating the Application JavaScript File.
- アプリケーションを好きな名前で保存します。例えばmyapp.jsなど(.js拡張子です)。このファイルを一つ前のステップで作成したHTMLファイルからリンクします。
- 以下は本家のドキュメントではアンカーで飛ばされていた部分です。詳細は次回のSencha Touchをはじめよう：GeoTweets編。
4.アプリケーションをテストする
テストのため先にやっておくことは以下の通りです。
- 開発用サーバーにライブラリをアップロードします。
- アプリケーションのファイルをアップロードします(myapp.html.myapp.css,myapp.js)
- アップロードした場所にブラウザで移動します。localhostの8080ポートで開発している場合はhttp://localhost:8080/myapp.html にアクセスします。myapp.htmlは先ほど作ったアプリケーションのHTMLです。
5.運用のための変更
アプリケーションのテストが完了したなら、Sencha Touchライブラリを運用バージョンに変更します。
- HTMLファイルを開く
- 以下の箇所を探します。
<!-- Ext Touch JS -- > <script type="text/javascript" src="../../ext-touch-debug.js" > </script>
- ext-touch-debug.js を ext-touch.js に変更して、運用向けにします。このバージョンのライブラリは圧縮されて、コメントが除去されているため軽量です。
- HTMLをもう一度保存します。
6.アプリケーションを運用する
アプリケーションに運用のための変更が施されたなら、ソースコードともし必要であればそのほかのファイル（例えばアプリケーションのリファレンス）などをサーバーにアップロードするだけで完了です。
以上が Sencha Touch の紹介 ：Introduction to Sencha Touch から
Sencha Touch の使い方（基本編）：Using Sencha Touch: Main Steps までの翻訳になります。
応用編以降は時間があればまたの機会にやりたいと思います。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
