Sencha Touch 2.xでアプリを作る前に知っておくべきこと色々。

ひょんなことから、iPhoneだけじゃなくてAndroidにも対応したアプリを作ることになり、ならHTMLベースのアプリを作っちゃおうという事になりました。そこで手を出したのがSencha Touchです。今回はとりあえず簡単に、Sencha Touchとはなんぞやというところからインストールまでを見ていきます。

Sencha Touchとは

特徴

Sencha Touchとは、要はJavascriptのライブラリで、iPhoneなどのアプリの挙動やデザインをモバイルのブラウザ上で実現してしまおうというものです。Javascriptを駆使して、タッチ、ドラッグ、スワイプなどタッチ系モバイルアプリの操作に必要な機能を実現させたウェブページといえます。操作性だけでなく、タブバー、スライドエフェクト、フリップエフェクト、Carousel、リスト表示やトグルなどモバイルアプリの特徴的なデザインもデフォルトで準備されており、簡単に実装できます。また、デフォルトアイコンの数もかなり豊富です。webkit系のブラウザ（SafariやChromeなど）で動作します。

基本的な概念としてまず知っておくべくなのは、「アプリ内のページ遷移」がイコール「HTMLの遷移」ではありません。読み込むHTMLは基本的にはindex.htmlのみで、ページはJavascriptで動的に生成されます。なので、初めのindex.htmlのbody要素は空っぽです。ブラウザで表示させた段階で、Javascriptがbodyの中身を作ります。そして、アプリ内で、ページの切り替わりイベントなどが起こると、再度JavascriptがHTMLのbodyの中身を書き換えて、別ページを表示します。

Senchaがデモとして提供しているアプリに「Kitchen Sink」というのがあるので、それをひと通り使って遊んでみれば、何ができるのかイメージが湧くと思います。

デザインのカスタマイズ

Kitchen Sinkを見てみて、まず思うのが「なんだこのデザインは…」です。

が、心配は無用です。基本的にはHTML5、Javascript、CSS3で作られているので、かなりフレキシブルにカスタマイズできます。想像し得るデザイン、機能は、頑張れば大概可能かと思います。また、SASSというCSSを生成するスクリプトを用いて簡単に独自テーマを作ることもできるみたいです。難しくないようなので、僕も近いうちにSASS、勉強しようと思います。

アプリとしてできること、できないこと

あくまでSencha Touchで作るアプリも基本的にはウェブページなので、モバイル上でもSafariなどのブラウザで使用します。ただそのページをブックマークし、ホーム画面に置いておけば、ネイティブアプリのように直接起動させることができます。また、最近はPhoneGapといったSenchaのコードをネイティブアプリのコードに変換してくれるパッケージャーがあるので、それを使えばネイティブアプリ化することもできます。

使用に関してですが、 結局はウェブページなので、ネイティブアプリ化させない限り基本的にはネット環境下でなければ起動しません。しかし、HTMLとしてのページ遷移はないので、一旦、Javascriptなどが全て読み込めればネット環境下でなくても動作します。（サーバーと通信する必要がある機能をつけている場合（例：「ロードボタンをを押したら過去のツイートを読み込む」とか）はやはりネット環境下にいなければなりません。）

また、カメラなどモバイルデバイスの機能に依存するものは、PhoneGapなどを使わなければ実装できません。

Sencha Touch 2.xのインストール

インストールの準備

Sencha Touchの特徴がわかった所で、次はインストールする方法を簡単に見ていきます。

まずはSencha Touch SDKとSencha CmdをSenchaのサイトからダウンロードしてきます。SDKはメールアドレスを登録するだけで、フリーでダウンロードできます。Sencha CmdはコマンドプロンプトでSenchaアプリを操作するプログラムをインストールするパッケージです。アプリの初期設定やビルド、製品化の際に役立ちます。

また、ローカルでアプリを作る場合はスクリプトを動かすのでローカルにもサーバを立てておかなければなりません。WindowsならWAMP、MacならMAMPあたりのソフトを使って、サクッとサーバーを立てて置いてください。

インストール

先ほどダウンロードしたSDKを解凍します。解凍したら、フォルダ名を好きな名前（touch-2.1.1など）に変更して、サーバーがアクセスするディレクトリに保存します。MAMPなどでローカルにサーバーを作った場合は、「/Applications/MAMP/htdocs/」とかなんで、「/Applications/MAMP/htdocs/sencha/touch-2.1.1」や「/Applications/MAMP/htdocs/touch-2.1.1」のように配置します。Windowsの場合のパスは知りません。

ここ時点でブラウザからこのディレクトリ（大抵「http://localhost:8888/touch-2.1.1/」など）にアクセスすれば、Senchaのexampleなどが見れるはずです。

次にSencha Cmdの実行です。ターミナルを使いカレントディレクトリを、先ほどSenchaライブラリを設置したディレクトリにします。そしてsenchaを実行します。

$ cd ~/サーバーがアクセスするディレクトリ/sencha/touch-2.1.1/
$ sencha

ダーッと以下の様な感じで出力されれば成功です。

$ sencha

Sencha Cmd v3.0.0.288

Options
  * --debug, -d - Sets log level to higher verbosity
  * --plain, -p - enables plain logging output (no highlighting)
  * --quiet, -q - Sets log level to warnings and errors only
  * --sdk-path, -s - sets the path to the target framework

.
.
.
.

「-bash: sencha: command not found」などのエラーが出る場合は、コマンドのパスがおそらく通っていません。Macの場合は以下のようにパスを通せます。

コマンドラインで

vim ~/.bash_profile

と打つとエディタがターミナル上で開き、環境変数の設定ができます。

export PATH=/Users/ユーザ名/bin/Sencha/Cmd/3.0.2.288:$PATH

を追加し、パスを設定してやります。エディタを保存し、ターミナルを再起動してやります。ウィンドウズの環境変数設定はコントロールパネルからできた気がしますが、詳しくは調べてください。

とりあえずこれでインストールは完了です。次回はコマンドラインを使ってアプリを作ってみます。