Creating Your First Titanium Apps 改

このページの各コードは抜粋ではなく全リストを掲載しています。しかしコードに対する解説はまだしていません。

Creating Your First Titanium Apps 改

Titanium Studio のオフシャルサイト (Appcelerator.com) では、Hello プログラムが出来れば、次はサンプルアプリか creating Your First Titanium Apps に進んでくださいとなっています。
　しかし残念ながら 2014年1月15日現在では Creating Your First Titanium Apps は Titanium Studio の最新版である 3.2.0 には対応していません。そこで Creating Your First Titanium Apps で紹介されている FaveBook アプリを 3.2.0 に対応させることでこのコーナーを一旦終わりにしたいと思います。
　しかし、ごくわずかですが、いくつかのコード片と数行のコードが抜けているために動作いたしません。そこで Creating Your First Titanium Apps の抜けているコードを補完し、正常に動作させることでこのコーナーを一旦終わりにしたいと思います。なお Creating Your First Titanium Apps は、原文のままでも Titanium Studio 3.2.0 に対応しております。たんにコードが抜けているだけでした。
新しいプロジェクトの名前は MyBooks とします。全コードと全工程(全作業) をこのページに書き直しますので原文を参照する必要はありません。

MyBooks プロジェクトには Titanium Studio に用意されている SQL データモデルの使用や Alloy と呼ばれる MVC 対応の新しいアプリケーション構築方法、そして、まだ Alloy にテンプレートが用意されていない Mater - Detail ナビゲーションなどが含まれています。原文には Alloy 特有のキーワードの使い方や、変更されたオブジェクトに対しての説明などがなかったため判読に苦労しました。Titanium Studio に興味のある方にはお役に立てるのではないかと思います。

MyBooks プロジェクト

Titanium Studio を起動して File メニューから New > Mobile App Project へ進んでください。次に現れる New Mobile App Project パネルで Default Alloy Project を選択して　Next > ボタンをクリックします。次の画面では Project name を MyBooks とし、App Id をお持ちの URL を逆順にしたものに .mybooks を足すか jp.example.mybooks あるいは com.yourcompany.mybooks などをお使いください。あとはデフォルトのままでかまいません。Cloud-enable this application にはチェックが入っていないことに注意して Finish ボタンをクリックします。プロジェクトが指定のワークスペースに作成されます。なおプロジェクトとは、そのアプリケーションに必要なデータをまとまて入れておくフォルダだと思っていただいてかまいません。実際に Mobile App Project ではなく、たんなる Project を選んだ場合にはフォルダが作られるだけです。そしてそのフォルダの中にさらにたんなる Project を指定するとさらにフォルダが作られます。

便利な App Explorer タブを追加しましょう

プロジェクトが増えてくると Project Explorer タブにすべてのプロジェクトが表示されるのが見苦しくなってきます。そこで App Explorer タブを追加しましょう。Window メニューから Show View > Other... を選ぶと Show View パネルが表示されます。そして Studio フォルダから App Explorer を選んで OK ボタンをクリックしてください。

タブが増えてくるとすべてのタブを表示することができなくなります。次の図で A と表示されているのが App Explorer タブです。他のタブに切り替える時にはその右にある >> 2　という部分をクリックするとポップアップメニューが現れてタブのリストが表示されます。プロジェクトを切り替える時には図でポインターが指し示している MyBooks という部分をクリックするとポップアップメニューが現れてプロジェクトのリストが表示されます。なお App Explorer では FTP サーバーへファイルをアップロードしたり FTP サーバーからファイルをダウンロードすることはできません。FTP サーバーとファイルのアップロードとダウンロードを行うには Project Explorer タブに切り替える必要があります。

Default Alloy Project に含まれるもの

前項の参照画像に沿って説明いたします。

app: プロジェクトのルートフォルダになります。
assets: アイコンなどの画像データが保管されます。
controlles: MVC (Model-View-Controller、モデル・ビュー・コントローラ) のコントローラにあたるファイルが入ります。本来オブジェクト指向は後々の可読性の向上やプログラムの管理のしやすさのために登場したと言えます。しかしそれだけではまだまだ不十分で MVC という考え方も同時に採用されはじめました。これはオブジェクトをモデル(Model、データ部分)とビュー( View、ユーザとやり取りする GUI 部分)とコントローラ(Controller、何かを実行したり計算する部分)に分けて管理するという考え方です。この考え方は実際にかなり有効です。この controllers フォルダにはコントローラオブジェクトのみが JavaScript ファイルとして保管されます。
models: モデル(Model、プログラムのデータ部分)が JavaScript ファイルとして保管されます。
styles: Titanium Studio は JavaScript でアプリケーションを作りますが、すべてのソースコードが JavaScript で書かれているわけではありません。ビュー(View、見た目) の部分は　XML ファイルと TSS と呼ばれる実質は CSS ファイルによって構成されています。この style フォルダにはビューを構成するファイルの TSS (CSS) のみが保管されます。
views: ビュー(View、見た目)を構成するもう一つの柱です。Titanium Studio では styles よりもこちらのほうが役割が大きいと言えるでしょう。ここに保管されるファイルは XML で書かれますが、XML を HTML と捉え TSS を CSS と捉えると HTML で大まかなレイアウトを決めて、CSS で細かな装飾するという関係が Titanium Studio のビューでも成り立っています。Apple の Xcode などとは違い、見た目をピクセル単位でレイアウトするのは苦手ですが、大まかにレイアウトするのには便利です。そしてまたモバイルアプリケーションに細かなレイアウトが必要かどうかを考えると、Titanium Studio のレイアウト方式はなかなか良いと言えるでしょう。特に Web サイト構築に関わってきた人にはなじみやすいのではないでしょうか。
alloy.js: 説明を読むとアプリケーション全体を通してのグローバルなものを設定するファイルと書かれています。しかし実際にどう使うのかは私自身にとっても今後の課題です。Xcode の AppDelegate のような働きをしてくれると良いなと思っています。

残りのファイルについては説明を省略させていただきます。

データモデルの作成

では、まだ何もファイルが保管されていない models フォルダにデータファイルを作成します。前項で説明したフォルダ類のある場所で右クリックしてください。そして表示されるコンテキストメニューから New > Alloy Models を選びます。どこで右クリックすれば良いのか分からない場合は app フォルダか models フォルダを右クリックしてください。そしてNew Model パネルが表示されましたら Model name を books book にし、Adapter で sql を選びます。次に下にある + (プラス) ボタンをクリックしてSchema に項目を2つ追加します。一つは Name を title にして Type を text にします。そしてもう一つは author と text にしてください。最後にパネル右下の OK ボタンをクリックします。

原文ではモデルオブジェクトの名前は books という複数形になっています。そしてそのデータモデルの集合(Collection)を MyBooks と名付けています。また Appcelerator のリファレンスでも book というモデルが好んで使われいます。そしてその book のコレクションを library (文字通り図書館という意味だと思います) と名付けている場合が多いみたいでした。
　しかし私はモデルオブジェクトが book という名前なら、そのコレクションは books という複数形で表すコーディングに慣れています。そこでこのコーナーでは本を表すモデルオブジェクトの識別子を book とし、その集まり (コレクション) を books とすることにしました。

index.js

MyBooks プロジェクトの app > controllers > index.js を開いてください。そしてデフォルトで作成されている doClick( ) 関数を削除し、index.js を次のように書き換えてください。


var books = Alloy.Collections.book;
var book = Alloy.createModel('book', {
    title: 'ライ麦畑でつかまえて',
    author: 'J. D. サリンジャー'
});
books.add(book);
book.save();

$.index.open();

index.xml

次に app > viess > index.xml を開いてください。そてデフォルトで作成されている Label エレメント (ラベル要素)を削除し、index.xml を次のように書き換えてください。赤字の部分が Appcelerator の原文で記載が漏れていた箇所です。


<Alloy>
    <Collection src="book" />
    <Window class="container">
        <TableView dataCollection="book">
        <TableViewRow title="{title}"
                author="{author}>
            </TableViewRow>
        </TableView>
    </Window>
</Alloy>

ここまでの結果を見てみましょう。ビルドすると次の図ようになります。iOS 7 では本のタイトルが少しズレていますが、後ほど修正します。また iOS ではデータの入っていない行も空の行として表示されますが、Android ではデータの入った行のみが表示されます。

詳細ビューの作成

まだ書名をタップしても何も起こりません。書名をタップすると書籍の詳細が現れるようにしましょう。MyBooks は学習用アプリなので詳細といっても書名と著者名だけです。

Project Explorer で作業をしている方はプロジェクトフォルダを右クリックしてください。 App Explorer で作業している方は app フォルダを右クリックしてください。そして New > Alloy Controller を選びます。次に現れる New Controller パネルで Controller name を bookview にしてパネル右下の OK ボタンをクリックしてください。

controllers フォルダに bookview.js が作成され、styles フォルダに bookview.tss が作成され、views フォルダに bookview.xml が作成されます。

bookview.xml

views フォルダの bookview.xml を次のように書き換えてください。


<Alloy>
    <Window class="container">
        <View layout="vertical">
            <Label id="titleLabel" />
            <Label id="authorLabel" />
        </View>
    </Window>
</Alloy>

index.xml

views フォルダの index.xml を次のように書き換えてください。黄色の部分を書き加えるだけです。


<Alloy>
    <Collection src="book" />
    <Window class="container">
        <TableView dataCollection="book">
            <TableViewRow title="{title}"
                    author="{author}"
                    onClick="showBook">
            </TableViewRow>
        </TableView>
    </Window>
</Alloy>

bookview.tss

styles フォルダの bookview.tss を次のように書き換えます。


".container" : {
    backgroundColor: 'white'
}
"#titleLabel": {
    font: {
        fontSize: '30'
    },
    left: '10'
}
"#authorLabel": {
    font: {
    fontSize: '20'
    },
    left: '10'
}
"Label[platform=ios]": {
    color: 'blue'
}

index.tss

styles フォルダの index.tss を次のように書き換えてください。


".container": {
    backgroundColor:"white"
}
"Label[platform=android]": {
    font: {
         fontSize: '24'
    },
    height: '40'
}

bookview.js

controllers フォルダの bookview.js を次のように書き換えてください。赤字の部分が原文で抜けていた部分です。


var args = arguments[0] || {};
$.titleLabel.text = args['title'];
$.authorLabel.text = args['author'];

index.js

controllers フォルダの bookview.js を次のように書き換えてください。黄色の箇所が追加するコードです。


var books = Alloy.Collections.book;
var book = Alloy.createModel('book', {
    title: 'ライ麦畑でつかまえて',
    author: 'J. D. サリンジャー'
});
books.add(book);
book.save();

function showBook (e) {
    args = {
        title: e.source.title,
        author: e.source.author
    };
    Alloy.createController('bookview',args)
                        .getView().open();
}

$.index.open();

MyBooks プロジェクトをビルドしてください。シミュレータなどが起動しましたら書名をクリック (実機の場合はタップ)してください。次のような詳細ビューに切り替わります。

Android の場合は Aondroid OS に「戻る」ボタンをタップすると元の画面に戻れます。しかし iOS の場合は詳細ビューに切り替わった後、元の画面に戻ることができません。次節では iOS のためにナビゲーションウィンドウ (NavigationWindow) を追加します。

Creating Your First Titanium Apps 改