Sencha Touchの2.1バージョンアップでの書籍の記述からの変更点

sencha

Sencha Touch本、出る直前にSencha Touchがバージョンアップして記述どおりでは動かなくなってしまいました。
あとで公式サイトでも掲載される予定ですが、文章の作成に時間がかかりそうなので、先にこちらでおおまかに書いておきます。

アーカイブ内容の変更

Sencha Touch 2.0では、Commercial版とGPL版で内容に違いはありませんでしたが、2.1では、GPL版にはSencha Chartが付属しています。Commercial版には付属ぜず単体でも配布されていないので、GPLライセンス以外でSencha Chartが使いたい場合はSencha Completeなどを購入する必要があります。

Sencha SDK ToolからSencha Cmdへの変更

Sencha Touch2.1では、書籍に記述したSencha SDK Toolが動かなくなっています。
そのため、Sencha Cmdを使う必要があります。

Sencha Cmdのインストール

Sencha Cmdは次のサイトからダウンロードできます。
http://www.sencha.com/products/sencha-cmd/download


インストール自体は書籍の説明とほぼ同じです。
ただ、JavaのビルドツールであるAntを使った実装になっているので、実行にはJavaのインストールが必要です。
あと、パッケージ作成ではCompassも必要になります。


SDKがないフォルダでsenchaコマンドを実行しても、エラーは出なくなっています。

アプリケーションの生成

SDK Toolでは、次のようなコマンドを実行していました。

> sencha generate app -n アプリ名 -p パス


Sencha Cmdではスイッチが必要なくなって、次のようなコマンドになります。

> sencha generate app アプリ名 パス


あと、SDK ToolのときはSDKフォルダで実行する必要があったのですが、Sencha CmdではSDKの位置を指定できるようになっています。

> sencha -sdk path/to/senchasdk アプリ名 パス

モデル・コントローラ・プロファイルの生成

それぞれ、スイッチが必要なくなっています。
モデルの生成は次のようになります。

> sencha generate model モデル名 フィールド

フィールドは、カンマ区切りで指定しますが、スペースが入ってはいけません。

> sencha generate model Book id:int,name:string,author:string


コントローラの生成は次のようになります。

> sencha generate controller コントローラ名


プロファイルの生成は次のようになります。

> sencha generate profile プロファイル名

パッケージング

コマンド自体は変更ありませんが、必要な環境が変わっています。
Compassが必要なので、6章の手順でインストールして、Rubyにパスを通すか「Start Command Prompt with Ruby」でコマンドプロンプトを起動してコマンドを実行する必要があります。
また、パッケージが作成されるパスが、いままでは「build/package」や「build/production」などでしたが、buildの下にアプリケーション名のフォルダが作成されて、「build/アプリケーション名/package」「build/アプリケーション名/production」というフォルダに生成されるようになっています。

ネイティブアプリ化

ネイティブアプリの生成もコマンド自体は変更がありません。
ただ、AndroidのAPIレベルがデフォルトでは8になっているので、書籍に記述した「Android2.1(API 7)」ではなく「Android 2.2(API 8)」をインストールしておく必要があります。
packager.jsonは基本的に記述どおりの変更が必要ですが、なぜかsdkPathの指定が２つあるので、片方にAndroid SDKのパスを指定して、片方はコメントアウトしておく必要があります。
「iconName:」の修正は不要になりました。


また、パッケージングの出力先が変更になっているので、「sencha app package conf.json」で生成する場合はinputPathもそれに応じた変更が必要です。

"inputPath":"build/First/package"

outputPathのほうもあわせておいたほうがわかりやすいと思います。

"outputPath":"build/First/android"


「sencha build native」の場合は変わらず「build/native/アプリケーション名.apk」にファイルが生成されます。

ふつうの誤植

ふつうの記述ミスもありました・・・


P.176 カンマの位置が違います

routes: {
    '': 'showTop'
    'top': 'showTop'
    'next': 'showNext',
}

となっているところ、次が正しいです。

routes: {
    '': 'showTop',
    'top': 'showTop',
    'next': 'showNext'
}


P.192
「先ほど作成したDevice.jsファイルとの違いは、表示するメッセージだけ」という記述がありますが、実際には定義しているクラス名のネームスペース部分も違います。

Ext.define('Dev.controller.phone.Device', {


P.197 カンマの位置が違います

config: {
    mainViewClass: 'Dev.view.Main',
}

となっているところ、次が正しいです。

config: {
    mainViewClass: 'Dev.view.Main'
},

Sencha Touchではじめるモバイルアプリ開発―無料で使える「HTML5」&「JavaScript」開発フレームワーク (I・O BOOKS)

Sencha Touchではじめるモバイルアプリ開発―無料で使える「HTML5」&「JavaScript」開発フレームワーク (I・O BOOKS)