[an error occurred while processing this directive] [an error occurred while processing this directive]

はじめての Sencha Touch

ここでは、チュートリアル等を始める前に知っておくと良いことを 簡単にまとめてみます。

Sencha Touchってなに?

これからの主流は HTML5 って言いますが、JavaScript + HTML ってすっきりしたコードが書きにくいですよね。 白い紙に「何書いてもいいですよ。」って感じでしょうか。 ライブラリを使うにしても、ダブルクリックでインストール、ではなくて、 自分で include とか色々書かないといけません。
それに対して、ちゃんと方眼紙を敷いて、必要なことをカードみたいな形で書いていくのが Sencha Touch です。 直接紙に書くのに比べて面倒な感じもしますが、必要なことをまとめてくれるので 表示速度も早くなります。 しかも、カードを並べるみたいな処理が JavaScript で処理されるので、 ちょっと変更した際のコンパイル(デプロイ)がいらないのもとてもよいです。

Sencha Touch と Sencha Cmd

Sencha Touch は JavaScript のライブラリです。 だから、基本的には html に組み込んで (inclde して) 使います。 サーバーは Apache みたいな Web サーバーがあれば十分です。 Web ページの中身は *.js に書きます。 これでメモ帳でも Emacs でも好きなエディタを使って書けば良いです。 Sencha Touch はここからダウンロードできます。 でも、実際エディタだけでページを作ろうとすると、テンプレートをコピーしたり、 色々な部分をアプリのパスに書き換えたり、少し面倒な定形処理をしないといけません。 これまで html を書いてる人なら当たり前のようにしていたことなのですが、 Sencha では、このような定形処理を楽にしてくれるツール一式が提供されています。 これが Sencha Cmd です。 Sencha Cmd にはスクリプトのコピーやアプリごとのパス書き換えのほかにも、 単体で Web サーバーになる機能も入っています。 Windows でさっと開発するときはとても助けになりそうです。
(あと、ひょっとしたら Ajax の受け側みたいなアプリケーションサーバーを楽に実装するための仕組みも入っているかもしれません)

インストールまずはページを作ってみる

まずは以下のファイルを落としてきます。 Linux 上では、以下のようにインストールします。 
$ unzip sencha-touch-2.3.1a-commercial.zip
touch-2.3.1 というディレクトリができます。 ここをとりあえず Web サーバーのホームにします。
この touch-2.3.1 を Apache で公開すれば、とりあえず Sencha Touch が使えていることになります。 /examples/ などを見てみると、動いていることが分かります。

上記サンプルをコピペして自分のアプリを作ることも出来るのですが、 一応 SenchaCmd も入れておきます。 
$ unzip SenchaCmd-4.0.2.67-linux-x64.run.zip
$ ./SenchaCmd-4.0.2.67-linux-x64.run
好きな場所にインストールすると、sencha コマンドにパスが通る
そこで、先ほどの touch-2.3.1 ディレクトリに移動して、 
$ sencha web start
を実行すると、web サーバーが起動します。
http://サーバー名:1841/ にアクセスすると、以下の様な画面が見えると思います。

まずはページを作ってみる

touch-2.3.1 ディレクトリに移動して、以下のコマンドを実行します。 
$ sencha generate app Funini funini
これで、Sencha のインストール先 (touch-2.3.1) の下に funini アプリができました。 Chrome などのブラウザで、http://サーバー名:1841/funini にアクセスすると、以下の様な画面が見えると思います。

ここで、この画面に表示されているものは funini/app/view/Main.js で定義されています。 表示されているものを変えたければ、直接 index.html を書き換えるのではなく、上記 Main.js を書き換えます。
もともとあるサンプルは、下にナビゲージョンバーがあったり、動画があったりいろいろ高機能なので、 まずは簡単なものに書き換えてみます。 
Ext.define('Funini.view.Main', {
    extend: 'Ext.form.Panel',
    xtype: 'main',
    requires: [
        'Ext.form.FieldSet',
    ],
    id: 'mylist',
    config: {
        items: [
            {
                xtype: 'fieldset',
                id: 'fs1',
                title: 'Keroyon',
                instructions: 'kerokero',
            },
        ],
    },
});
そうすると、表示はこんな風に変わります。

画面を作るときには、この Main.js を書き換えたり、コピーして別の画面を作ったりする作業がメインになります。
http://インストール先/examples/kitchensink にあるサンプルを開いて、 欲しいサンプルがあったら、右上の "Source" をクリックして、 使える部分をコピーして使いましょう。
[an error occurred while processing this directive]