HOME > Learning Place >  No.2 Sencha Touchの利用

No.2 Sencha Touchの利用

1. Sencha Touch とは

Sencha TouchはHTML5,CSS3,JavaScriptを使用したモバイルアプリケーションプラットフォームです。 2010年11月にVersion 1.0がリリースされ、2013年12月時点での最新バージョンは2.3.1です。

Sencha Touchは、その名の通りスマートフォンやタブレット等のモバイルデバイスに特化したフレームワークです。対応するプラットフォームはiOS, Android, BlackBerry, Windows Phone と多岐にわたっています。 Sencha Touchを使うと、これら広範囲のモバイルデバイスで動作するアプリケーションを作成することができます。

2.3からiOS7, BlackBerry 10を、2.3.1ではTizenをサポートするようになりました。

詳しくは弊社ブログをご覧ください。

  • Sencha Touch 2.3公開:Touch Grid、Cordova Support、新しいテーマ http://www.xenophy.com/sencha-blog/8935
  • Sencha TouchフレームワークがTizenをサポート

2. 入手とインストール

Sencha Touchは、Senchaの公式サイトからダウンロードできます。

http://www.sencha.com/products/touch/download/

商用バージョンとGPLバージョンのダウンロードボタンがあります。いずれか必要とする方をダウンロードします。

Sencha Touchダウンロード

ライセンス

Sencha Touchのライセンスには2種類あります。商用ライセンスとGPLライセンスです。

商用ライセンスとGPLライセンスは両方とも無料です。ライセンスの違いは、ドローとチャートのパッケージがバンドルされているのはGPLライセンスのみです。商用ライセンスにはバンドルされません。 GPLライセンスは、ユーザーが自分でそのアプリケーションを変更できるように、完成したアプリケーションのソースコードをユーザーに提供しなければなりません。商用ライセンスには、その必要はありません。

商用ライセンスで、ドローとチャートの機能を使う場合は、Sencha Touch Bundle, Sencha Completeのいずれかを購入する必要があります。

インストール

ダウンロードされたファイルはZIP形式で圧縮されています。このファイルを解凍して、Webサーバーのドキュメントルート下に配置すれば完了です。

ローカルWebサーバーに解凍したディレクトリをtouchという名前で配置した場合、

1
http://localhost/touch

にアクセスするとセットアップガイドが表示されます。

Sencha Touchダウンロード

3. Sencha Cmd

Sencha Cmdは、Sencha TouchmやSencha Ext JSのアプリケーション開発全体で使えるクロスプラットフォームのコマンドラインツールです。Sencha Cmdは、Sencha Touchプロジェクトの生成からデプロイまで、開発中のあらゆる場面で利用できます。

ダウンロード

Sencha Cmdは、Senchaの公式サイトからダウンロードできます。2013年12月時点での最新バージョンは4.0.1です。

http://www.sencha.com/products/sencha-cmd/download

Sencha Touchダウンロード

対応OSはWindows, Mac, Linuxです。環境に合わせてダウンロードしてください。

インストール

ダウンロードしたファイルを解凍し、インストーラを起動します。

Sencha Touchダウンロード

画面の指示に従ってインストールします。

プロジェクトの生成

Sencha Cmdを使ってプロジェクトを生成してみましょう。Sencha Cmdを使うと簡単にプロジェクトのスケルトンを生成することができます。

プロジェクトのスケルトンは以下のコマンドで生成できます。

1
    sencha -sdk /path/to/sdk generate app MyApp /path/to/myapp
  • -sdk /path/to/sdk

    Sencha TouchのSDKがあるディレクトリのパス

  • MyApp

    アプリケーション名

  • /path/to/myapp

    生成したアプリケーションを保存するディレクトリ

上記のコマンドを実行すると、以下の構成でプロジェクトが生成されます。

Sencha Touchダウンロード

生成されたプロジェクトをブラウザで見ると

Sencha Touchダウンロード

のようにプロジェクトのスケルトンが表示されます。

デプロイ

製品として出荷するときに沢山のJavaScriptファイルを1つにマージし、コメントを取り去るなどのミニファイを施して出荷します。Sencha Cmdには生成したアプリケーションを1つのJavaScriptファイルにまとめる機能がついています。

1
% sencha app build

これだけで、アプリケーションのJavaScriptファイルを1つにマージ・ミニファイし app.js ファイル1つにします。また app.scss に変更が施されていたら、コンパイルして app.css も作成します。

まとめ

Sencha Toucha のインストールからSencha Cmdを使ったデプロイまでを紹介しました。

Sencha Cmdには、ほかにiOSやAndroidのネイティブアプリ生成やデバイス機能を使うことができたり、Webサーバーの機能を持ったりとSencha Touch, Sencha Ext JSの開発には欠かせない機能が満載です。

次回は、ユーティリティクラスについて紹介したいと思います。

Learning Placeトップに戻る

PAGETOP