Contents 事前準備 Architect プロジェクトの開始 Architect の起動プロジェクトの命名プロジェクトの保存 Save Path（保存先のパス） App Name（アプリ名） Project Name（プロジェクト名）保存完了ビルドツールメニューの有効化保存に関するトラブルシューティング Sencha Cmd ウェブサーバーの開始 Architect でウェブサーバーの URL プレフィックスをポイント UI を定義するビューのビルドメインのナビゲーションビューリストビュー詳細ビュー Contact（連絡先）タブ Map（マップ）タブデータを定義するモデルとストアのビルドモデルストアコントローラスタイルシートの追加作品の確認機能しない場合その他のステップ

モバイル端末向けのアプリの構築

本ガイドでは、モバイル端末向けのサンプルアプリを Sencha Touch フレームワークと Sencha Architect 開発ツールを使用してビルドする方法を紹介します。

このチュートリアルでは、Yelp API のデータを使用して現在地付近のバーを探すことができる City Bars というアプリをビルドします。

ここでは、Sencha Touch フレームワークを使用した実用的なモバイルアプリケーションと、Architect を使用したモバイル端末向けのアプリのビルド方法に関する基本的な知識を提供します。

このプロジェクトのアーカイブと付属する CSS ファイルは Architect でリリースした GitHub サンプルにあります:

完成したプロジェクトの .xda ファイル
付属するCSS ファイル

注意

本ガイドのチュートリアルでは、Sencha の開発ツールを学ぶのに役立つ雛形アプリケーションを提供します。このアプリの開発をさらに進めたくなった場合、その成果を Architect フォーラムに投稿して共有してください。
このチュートリアルのウェブサーバー部分をインストールして作成するアプリケーションで使用するには、使用するコンピュータに対する管理者権限が必要です。

事前準備

Architect や Java のインストール、ウェブサーバーの設定、プロジェクトディレクトリの作成、Architect の起動については、インストールと設定ガイドを参照してください。

Yelp API のキーを取得します。無料の Yelp API キーを Yelp Developer Program で登録します。アカウントを作成し、公開ウェブサイトの URL を提供し、目的とする Yelp API の使用方法を説明し、Yelp の Terms of Use（利用規約）に同意します。テスト用のウェブサイト URL は最上位レベルのドメイン名（example.com など）で良いでしょう。Yelp API キーは Yelp のデータをアプリケーションにロードする際に必要です。本ガイドで後述するコントローラセクションでは、アプリケーションへの Yelp データの追加方法を説明します。

Architect プロジェクトの開始

プロジェクトの開始手順は次のとおりです。

Architect の起動
プロジェクトの命名
プロジェクトの保存
Sencha Cmd ウェブサーバーの開始
Architect で使用するウェブサーバーの URL を設定して、アプリケーションのプレビューやテストを可能にする。

Architect の起動

Architect の起動方法は次のとおりです。

使用するコンピュータで Architect を起動し、必要に応じて登録するかまたはトライアル版として使用します。また、Architect のバージョンアップを通知される場合もあります。
既存のプロジェクトをクリックするか、[Create New（新規作成）] をクリックして新しいプロジェクトを作成します。
フレームワークを選択します。ウィンドウの最上部にある Sencha Touch 2.4 をクリックします。
プロジェクトのフォーマットを選択します。空のプロジェクトをクリックして [Create（作成）] をクリックします。

本ガイドで使われる機能について簡単に理解しておきます。

機能	説明	ビュー
ツールバー	プロジェクト操作を行います。プロジェクトの新規作成、既存プロジェクトを開く、保存、プレビュー、ビルドを行うボタンがあります。	.
ツールボックス	キャンバスまたは [Project Inspector（プロジェクトインスペクタ）] にドラッグできるコンポーネントを一覧表示。コンポーネントを迅速に検索するには、[Filter（フィルタ）] 検索ボックスにプロパティの名前を入力します。
キャンバス	プロジェクトの現在のデザインまたはコードを表示します。
プロジェクトインスペクタ	プロジェクトのクラスの一覧を表示します。このエリアの名前は他の Architect のガイドでは「インスペクタ」と省略される場合があります。
コンフィグ	プロパティの値を設定します。プロパティを迅速に検索するには、[Filter（フィルタ）] 検索ボックスにプロパティの名前を入力します。

プロジェクトの命名

Architect プロジェクト作成の最初のステップは、Application ノードでアプリケーションに名前を付けることです。

アプリケーションに名前を付ける手順は次のとおりです。

[Project Inspector（プロジェクトインスペクタ）] で [Application （アプリケーション）] をクリックします。
[Config（コンフィグ）] タブをクリックします。
Ext.app.Application の下の name（名前）を CityBars に変更します。

name:CityBars

アプリケーション名にはキャメルケースを使用するのが一般的です。

プロジェクトの保存

ツールバーで [Save（保存）] をクリックしてプロジェクトを保存します。

Architect からプロジェクトの保存先のパス、アプリケーション名、プロジェクト名を指定するように求められます。

Save Path（保存先のパス）

Sencha Cmd ウェブサーバー以外のウェブサーバーを使用する場合、サーバーで公開できる場所にプロジェクトを保存する必要があります。Save Path（保存先のパス）の場所がウェブサーバーのディレクトリをポイントしていない場合、[Browse（参照）] をクリックして、ディレクトリを以前作成したディレクトリに変更します。Sencha Cmd ウェブサーバーを使用する場合、どのディレクトリにプロジェクトを保存してもかまいません。

App Name（アプリ名）

プロジェクトの名前空間に表示されるアプリケーションの名前です。App Name（アプリ名）はプロジェクトの保存先のパスには含まれません。名前空間がアプリケーションに及ぼす影響に関する詳細については、クラスの働きを参照してください。

Project Name（プロジェクト名）

プロジェクトを保存するプロジェクトディレクトリの名前を指定します。Project Name（プロジェクト名）の値は Save Path（保存先のパス）の値に連結されます。Architect ではこのディレクトリにプロジェクトのファイルすべてを格納しますので、意味のある名前を付けてください。

命名規則は、前述のステップで割り当てたアプリケーション名を小文字にしたものです。従って、この場合は citybars という名前にします。ディレクトリにはどのような名前でも付けられますが、この規則に従うことにより、何をどこに保存したのかを思い出しやすくなります。

保存完了

保存先のパス、アプリケーション名、プロジェクト名を指定したら、[Save（保存）] をクリックします。

ビルドツールメニューの有効化

Architect により、ライセンスの選択とビルドツールの有効化を求められます。プロジェクトを商用として開発し、ビルドツールを有効化するには、Enable（有効化）をクリックします。商用アプリは無料と有料のいずれにもできます。ビルドツールはプロジェクトの保存、プレビュー、ビルドを支援します。

保存に関するトラブルシューティング

アプリケーションを保存できない場合、次のことを確認してください。

プロジェクト用のサブディレクトリを作成してあるかどうか、その名前が指定したものに一致しているかどうか。名前は大文字と小文字が区別されます。
指定したディレクトリの読み取りおよび書き込み権限があるかどうか。

コードはいつでも Architect で表示できます。キャンバスの右端の上にあるデザインビューとコードビューの切り替え機能を使用して、グラフィカルなデザイン表示とコード表示とを切り替えます。

Sencha Cmd ウェブサーバーの開始

Sencha Cmd をインストールしたら、コマンドラインで次のコマンドを入力し、プロジェクト保存時に選択したフォルダを指定して、Sencha Cmd ウェブサーバーを開始します。

sencha fs web start -map <directory_name>

Sencha Cmd ウェブサーバーは http://localhost:1841/directory_name で動作します。directory_name は Sencha Cmd ウェブサーバーの開始時に指定したディレクトリです。

このウェブサーバーは、CTRL+C を押してプロセスを終了させるまで、コマンドラインウィンドウで排他的に動作します。

もう 1 つコマンドラインウィンドウを開いて sencha fs web stop と入力しても、ウェブサーバーを停止できます。

Architect でウェブサーバーの URL プレフィックスをポイント

プロジェクトはいつでもプレビューできます。プレビューの設定は、現時点でもできますし、アプリにもっといろいろ追加してからでもできます。

プロジェクトをプレビューするためには、プロジェクトの保存場所の URL を Architect に設定する必要があります。

URL プレフィックスを設定するには、ツールバーで [Settings（設定）] をクリックします。

[Settings（設定）] ウィンドウで次のように指定します。

URL prefix フィールドを編集して、作成したディレクトリを指すようにします。このフィールドには http://localhost/myprojects/sampleproject1（myprojects は選択したフォルダの名前にします）といった URL が指定されていることが必要です。

設定は注意深く行ってください。さもなければ、プロジェクトを正しく保存できず、ブラウザでプレビューできません。Sencha Cmd ウェブサーバーを使用する場合は、http://localhost:1841/directory_name URL を使用してください。その他のウェブサーバーでは、「localhost」に続くポート番号が異なるか、あるいはポート番号がない場合があります。

プロジェクトを正しく保存し、プレビューするために、新しいプロジェクトごとに URL プレフィックスを編集する必要があります。

UI を定義するビューのビルド

City Bars アプリケーションに視覚的なユーザーインターフェイスを構築します。

ツールボックスで「Views（ビュー）」をクリックして、使用可能なビューをすべて表示します。

このセクションでは、次を作成します。

ナビゲーションビュー
リストビュー
コンタクトタブとマップタブがある詳細ビュー

メインのナビゲーションビュー

ナビゲーションビューの設定方法は次のとおりです。

ツールボックスの [Views（ビュー）] カテゴリで [Navigation View（ナビゲーションビュー）] を選択します。
[Navigation View（ナビゲーションビュー）] をキャンバスにドラッグします。
[Project Inspector（プロジェクトインスペクタ）] > [Config（コンフィグ）] で次のように設定します。

userAlias:mainnav

userClassName:MainNav
ツールバーの保存アイコンをクリックして作業内容を保存します。

プロジェクトは頻繁に保存してください。

リストビュー

リストビューの設定方法は次のとおりです。

ツールボックスで [Containers（コンテナ）] セクションまでスクロールし、[Containers（コンテナ）] を [Project Inspector（プロジェクトインスペクタ）] の [Views（ビュー）] アイテムにドラッグします。コンテナをキャンバスではなく [Project Inspector（プロジェクトインスペクタ）] にドラッグすると、コンテナがビューにおいて最上位レベルのコンポーネントになります。
コンテナのコンフィグに次の値を設定します。

userAlias:listcontainer
userClassName:ListContainer
layout:fit
ツールボックスで [Views（ビュー）] カテゴリまでスクロールし、[List（リスト）] ビューを [Project Inspector（プロジェクトインスペクタ）] の ListContainer にドラッグします。
リストのコンフィグに次の値を設定します。

id:dataList
[Project Inspector（プロジェクトインスペクタ）] で itemTpl アイテムをダブルクリックします。（「tpl」はテンプレートの略です。）
次の HTML コードをコピーし、キャンバスのコードビューで既存のテキストと <div> タグを上書きするように貼り付けます。
```
 <img class=“photo” src=“{photo_url}” width=“40” height=“40”/>{name}<br/> <img src=“{rating_img_url_small}”/>&nbsp;<small>{address1}</small> 
```
tpl の設定とテンプレートに関する詳細については、Ext.Template ページを参照してください。
[Project Inspector（プロジェクトインスペクタ）] で ListContainer を MainNav ビューにドラッグします。
これにより、コンテナのリンクされたインスタンスが MainNav ビューに作成されます。
[Copy Component（コンポーネントのコピー）] ダイアログボックスで [Link（リンク）] オプションを選択します。
[Project Inspector（プロジェクトインスペクタ）] では MainNav のコンテナが次のように表示されます。
MainNav の listcontainer コンテナのリンクされたインスタンスを選択して、コンフィグに値を設定します。

title:City Bars

詳細ビュー

詳細の設定方法は次のとおりです。

ツールボックスの Filter フィールドに Tab と入力して、タブパネルコンテナを探します。
タブパネルを [Project Inspector（プロジェクトインスペクタ）] の [Views（ビュー）] アイテムにドラッグします。これにより、タブパネルが最上位レベルのコンポーネントとなります。
次のコンフィグに値を設定します。

userAlias:detailpanel
userClassName:DetailPanel
[Config（コンフィグ）] パネルで Tab Bar のコンフィグプロパティを探し、追加ボタン（+）をクリックして、タブパネル（DetailPanel）にタブバーを追加します。
[Project Inspector（プロジェクトインスペクタ）] でこのタブバーを右クリックし、[Move Up（上に移動）] を 3 回選択して、3 つのタブの上へ移動します。
タブバーのコンフィグに次の値を設定します。

pack: center
docked: top
ui: light

Contact（連絡先）タブ

連絡先を設定する方法は次のとおりです。

[Project Inspector（プロジェクトインスペクタ）] で Tab 1 を選択します。注意:これはコンテナ（Ext.Container）です。
次のコンフィグに値を設定します。

id:contact
title:Contact
[Project Inspector（プロジェクトインスペクタ）] で Tab 2 と Tab 3 を contact コンテナにドラッグして contact の子にします。これはコンテナを削除して再度追加するところを、単に使い回しているだけです。DetailPanel の [Project Inspector（プロジェクトインスペクタ）] は次のようになります。
[Project Inspector（プロジェクトインスペクタ）] で MyContainer1 を選択して次の値をコンフィグに設定します。

id: info
layout: hbox
padding: 10
tpl:- tpl コンフィグアイテムの右にあるプラス（+）記号をクリックしてテンプレートを追加します。[Project Inspector（プロジェクトインスペクタ）] で tpl アイテムをダブルクリックして次のコードを追加します。
```
 <img class=“photo” src=“{photo_url}” width=“100” height=“100”/>; <h2>{name}</h2><div class=“info”>{address1}<br/> <img src=“{rating_img_url_small}”/></div> 
```
コンポーネントを info の子として追加します。ツールボックスでコンポーネントを探し、[Project Inspector（プロジェクトインスペクタ）] の info アイテムにドラッグします。注意:このコンポーネントは MyComponent として [Project Inspector（プロジェクトインスペクタ）] に追加されます。
次のコンフィグに値を設定します。

id: photo
height: 100
width: 100
width:100
tpl:- tpl コンフィグアイテムの右にあるプラス（+）記号をクリックしてテンプレートを追加します。[Project Inspector（プロジェクトインスペクタ）] で tpl アイテムをダブルクリックして次のコードを追加します。
```
<img class=“photo” src=“{photo_url}” width=“100” height=“100”/>
```
info の子として 2 つの目のコンポーネントを追加し、コンフィグに次の設定をします。

id:data
padding:10
tpl:- tpl コンフィグアイテムの右にあるプラス（+）記号をクリックしてテンプレートを追加します。[Project Inspector（プロジェクトインスペクタ）] で tpl アイテムをダブルクリックして次のコードを追加します。
```
<h2>{name}</h2><div class=“info”>{address1}<br/> <img src=“{rating_img_url_small}”/></div>
```
contact コンテナの MyContainer2 を選択して次の値をコンフィグに設定します。

layout:hbox
pack:center
MyContainer2 にボタンを追加し、このボタンのコンフィグに次の値を設定します。

text:Call
width:100
MyContainer2 にスペーサーを追加し、このスペーサーのコンフィグに次の値を設定します。

width:57
MyContainer2 に別のボタンを追加し、このボタンのコンフィグに次の値を設定します。

text:More
width:100

このチュートリアルではボタンを設定しますが、これに対する機能の設定は行いません。ボタンに機能を追加しても構いません。その場合、成果をぜひ Architect フォーラムで公開してください。

Map（マップ）タブ

Map（マップ）タブを設定する方法は次のとおりです。

マップを DetailPanel に contact の兄弟として追加し、コンフィグに値を設定をします。

id:detailMap
title:Map
height:これは設定しないでおいてください
プロジェクトを保存します。

データを定義するモデルとストアのビルド

アプリケーションのビューを定義したら、ビューで表示するデータを提供します。コントローラでは、Yelp データベースからデータを取得してストアを作成します。このストアは、関連情報を保持する JSONP ファイルになります。モデルでは、このデータがアプリケーションでどのように表現されるかを定義します。

モデル

まず、アプリケーションで使用されるデータオブジェクトを表現するモデルを追加します。データのスキーマ定義の一種だと思ってください。

モデルの追加と設定を行う方法は次のとおりです。

[Project Inspector（プロジェクトインスペクタ）] のプラス (+) 記号をクリックし、Model（モデル）をクリックします。
モデルが MyModel として表示されます。
MyModel のコンフィグに次の値を設定します。

userClassName:Business

注意:フィールドは、1 つずつ追加せずにカンマで区切ったリストとして渡すことで、複数を一度に作成できます。詳細は、ストアとモデルを参照してください。
fields コンフィグアイテムのプラス (+) 記号をクリックし、フィールドをモデルに追加します。ここで名前をコピーして、フィールドの編集ボックスに貼り付けられます:
```
id, name, latitude, longitude, address1, address2, address3, phone, city, state_code, zip, mobile_url, rating_img_url_small, photo_url
```
それぞれのフィールドを次に示します。
1. id
2. name
3. latitude
4. longitude
5. address1
6. address2
7. address3
8. phone
9. city
10. state_code
11. zip
12. mobile_url
13. rating_img_url_small
14. photo_url

注意:この場合、モデルには使用しないフィールドが複数含まれています。この未使用のフィールドは、後でアプリケーションを拡張したときに利用できます。

このようにシンプルなアプリケーションでは、ストアのデータに直接アクセスせずにモデルを使用することを面倒に感じるかもしれませんが、実際のアプリケーションではモデルにより次がサポートされ、アプリケーションにおけるデータ管理に強力な支援を提供します。

<ul>
    <li><b>Associations:</b> BelongsTo or HasMany</li>
    <li><b>ID Generators:</b> Sequential or UUID</li>
    <li><b>Proxies:</b> AJAX, Direct, REST, and so forth</li>
    <li><b>Validations:</b> Exclusion/Inclusion, Format, Length, etc</li>
</ul

ストア

ストアは UI コンポーネントのクライアント側データキャッシュとして使用されるファイルです。ここでは JSONP を使用しています。これは JSON ストアに類似していますが、アプリケーションが実行されているドメイン以外からも JSON データを取得できます。

詳細については、Touch API ドキュメントで Ext.data.JsonP を参照してください。

また、配列ストア、XML ストア、ツリーストアも作成できます。

ストアの設定方法は次のとおりです。

[Project Inspector（プロジェクトインスペクタ）] のプラス (+) 記号をクリックし、Store > JsonP Store をクリックします。
[Project Inspector（プロジェクトインスペクタ）] に JsonP ストアが MyJsonPStore として表示されます。
MyJsonPStore コンフィグに値を次のように設定します。

userClassName:BusinessStore
storeId:BusinessStore
model:Business

注意:ストアの model:Business の値は、ストアと Models > Business > userClassName 値を関連付けます。model 値を設定するまでは、JsonP ストアでは赤い警告インジケーターを表示します。
ストア model とモデルの userClassName の値は同一でなければならず、大文字と小文字が区別されます。最もよく起こるミスは、これらの値に異なる名前を指定することです。
[Project Inspector（プロジェクトインスペクタ）] で MyJsonReader を選択し、rootProperty コンフィグに businesses をセットします。

注意 JsonP ストアは Touch のExt.data.reader.Json とExt.data.proxy.JsonP を使用して自動設定されます。

コントローラ

アプリの実際の機能はコントローラによって実装されます。この場合、Yelp データベースでバーとその所在地のリストをクエリして、情報を前述のストアセクションで定義した JSONP ストアに保存します。

重要このセクションの手順を完了するには、事前に Yelp API キーを登録しておくことが必要です。詳細については、本ガイドの事前準備セクションのステップ 4 を参照してください。

コントローラの追加方法は次のとおりです。

[Project Inspector（プロジェクトインスペクタ）] のプラス (+) 記号をクリックし、Controller（コントローラ）をクリックします。[Project Inspector（プロジェクトインスペクタ）] に新しいコントローラが MyController という名前で表示されます。
コンフィグの値を変更して、MyController を Business にします。

userClassName:Business
キャンバスで [Code（コード）] をクリックします。
[Project Inspector（プロジェクトインスペクタ）] の launch コンフィグのプラス (+) 記号をクリックします。
launch の選択アイコンをクリックしてテキストを追加します。

launch のコードビューで次のコードを挿入して、ユーザーの現在地の取得、Yelp からの店の取得、バーの一覧の表示を行います。

    var me = this;
    Ext.Viewport.setMasked({ message: 'Loading...' });
    // Get the user's location
    me.getLocation(function (location) {
        // Use Yelp to get the business names
        me.getBusinesses(location, function (store) {
            // Bind data to the list and display it
            me.getDataList().setStore(store);
            Ext.Viewport.setMasked(false);
        });
    });

コントローラの参照を 4 つ追加します。
1. [Project Inspector（プロジェクトインスペクタ）] で Business（ビジネス） をクリックします。
2. [Config（コンフィグ）] で References（参照） を探します。
3. References（参照）のプラス (+) 記号をクリックして、最初のコントローラ参照を追加します。
4. 名前を dataList と入力し、[Next（次へ）] をクリックしてセレクタに #dataList と入力し、[Finish（終了）] をクリックします。
次のように、同じ方法で他の３つのコントローラの参照を追加します。
1. 次の参照に listCard という名前を付け、セレクタに #listCard を設定します。
2. 3 つ目の参照に mainNav という名前を付け、セレクタに mainnav を設定します。
3. 4 つ目の参照に detailCard という名前を付け、セレクタに detailpanel を設定します。
  
  注意：最初の 2 つの参照では、クエリにＩＤ（#listCard）を使用し、残りの 2 つではエイリアス（mainnav）を使用します。
[Project Inspector（プロジェクトインスペクタ）] で Business（ビジネス）コントローラを選択し、関数を追加します。

[Config（コンフィグ）] で Functions（関数） を探し、（+）アイコンをクリックします。
コンフィグに次のように値を設定します。
関数:getLocation
パラメータ:callback

[Project Inspector（プロジェクトインスペクタ）] で getLocation 関数をダブルクリックし、コードエディタに次のコードを挿入します。

    if (navigator && navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            callback(position);
        }, function(error) {
            // Handle the error
        });
    }

別の関数を追加し、コンフィグに値を設定します。設定するコンフィグ値に戻るには、Business（ビジネス）をダブルクリックします。

関数:getBusinesses
Parameters:location, callback

[Project Inspector（プロジェクトインスペクタ）] で getBusinesses 関数をダブルクリックし、コードエディタに次のコードを挿入します。このコードにより、Yelp からアプリにデータを取得します。このコードの yelpKey = '' 文に Yelp API キーを挿入します。

    // Note: Obtain a Yelp API key by registering (for free) 
    // with Yelp at http://www.yelp.com/developers
    // (in this app, we use the Review Search API v1.0)
	var store = Ext.data.StoreManager.lookup('BusinessStore'),
	    yelpKey = '', // Enter your Yelp API key here
	    url = 'http://api.yelp.com/business_review_search' +
    	'?ywsid=' + yelpKey +
    	'&term=Bars' +
    	'&lat=' + location.coords.latitude +
    	'&long=' + location.coords.longitude;
	store.getProxy().setUrl(url);
	store.load(function() {
		callback(store);
	});

注意 Yelp API キーがない場合、Yelp で無料登録してください。

ユーザーがメインリストのアイテムをタップしたら DetailPanel を表示するアクションをコントローラに追加します。

[Project Inspector（プロジェクトインスペクタ）] で Business（ビジネス） コントローラをクリックします。
[Config（コンフィグ）] で Actions（アクション）の（+）記号をクリックし、Controller Action（コントローラアクション）をクリックします。
Controller Action（コントローラアクション）のコンフィグのドロップダウンリストで次のように選択します。

Target type:Ext.dataview.List
Event by name:itemtap
[Config（コンフィグ）] で itemTap アクションの右にある矢印をクリックするか、[Project Inspector（プロジェクトインスペクタ）] で itemtap onListItemTap アクションをダブルクリックし、次の値をコンフィグに設定します。

controlQuery:#dataList
fn:onListItemTap

[Project Inspector（プロジェクトインスペクタ）] で itemtap onListItemTap アクションをダブルクリックしてコードエディタを開き、次のコードを追加します。

    var map,
        info,
        details;
    if (record) {
        details = Ext.create('CityBars.view.DetailPanel', {
            title: 'Details'
        });
        // stash info for later use by the map card
        map = details.child('#detailMap');
        map._record = record;
        // set the info
        info = details.child('#contact').child('#info');
        info.child('#photo').setData(record.data);
        info.child('#data').setData(record.data);
        this.getMainNav().push(details);
    }

別のコントローラアクションを Business（ビジネス） コントローラに追加して、ユーザーが Map タブをタッチしたら正確な場所がマップの中央に表示されるようにします。

[Config（コンフィグ）] で Actions（アクション）の（+）アイコンをクリックし、Controller Action（コントローラアクション）をクリックします。
[Config（コンフィグ）] のドロップダウンメニューで次の値を選択します。

Target type:Ext.Map
Event by name:activate
activate アクションの矢印をクリックするか、[Project Inspector（プロジェクトインスペクタ）] で activate アクションをダブルクリックして、コンフィグに値を次のように設定します。

controlQuery:detailpanel > map
fn:onMapActivate

[Project Inspector（プロジェクトインスペクタ）] で activate onMapActivate アクションをダブルクリックしてコードエディタを開き、次のコードを追加します。

    var map = newActiveItem,
       record = map._record,
       lat = record.get('latitude'),
       lng = record.get('longitude'),
       centerMap = Ext.Function.createDelayed(function() {
           map.setMapOptions({
               zoom: 18
           });
           map.setMapCenter({
               latitude: lat,
               longitude: lng
           });
       }, 250),
       geocoder, loc;
    if (lat && lng) {
       centerMap();
    } else {
       geocoder = this._geocoder || (this._geocoder = new google.maps.Geocoder());
       geocoder.geocode(
           {address: [
               record.get('address1'),
               record.get('address2'),
               record.get('address3'),
               record.get('city'),
               record.get('state_code'),
               record.get('zip')
           ].join(', ')},
           function(results, status) {
               if (status == google.maps.GeocoderStatus.OK) {
                   loc = results[0].geometry.location;
                   lat = loc.lat();
                   lng = loc.lng();
                   record.set('latitude', lat);
                   record.set('longitude', lng);
                   centerMap();
               } else {
                   Ext.Msg.alert("Could not find location: " + status);
               }
           }
       );
    }

理解すべき重要なコンセプトは、メソッドを呼び出すためにビューからコントローラが呼び出されることはないということです。代わりに、ビューでイベントを生成し、コントローラがそのイベントに応答します。ビューをビルドしたら、[Config（コンフィグ）] パネルで設定するコントローラアクションを使用して、ビューをコントローラに関連付けます。

詳細については、コントローラを参照してください。

スタイルシートの追加

魅力的なテーマを使用し、アプリケーションの外観を改善するには、スタイルシートの追加が必要です。

スタイルシートを追加する方法は次のとおりです。

[Project Inspector（プロジェクトインスペクタ）] で追加ボタン（+）をクリックし、[Resource（リソース）] > [CSS Resource（CSS リソース）] を選択します。Resources ノードに新しい CSSリソースが表示されます。
これを選択して url コンフィグに citybars.css を設定します。
citybars.css をダウンロードします。
アプリを保存するためにプロジェクト作成の初期に設定した citybars フォルダにこの citybars.css ファイルを保存します。オプションとして、このフォルダ内に styles ディレクトリを作成し、url コンフィグに styles/styles.css と設定することができます。

作品の確認

インスペクタでApplicationを表示し、配下に次のものが存在することを確認してください。

モデル:Business
ストア:BusinessStore
ビュー:MainNav、ListContainer、DetailPanel

プロジェクトを保存します。

まだ行っていない場合、Architect で使用するウェブサーバーの URL をポイントし、プロジェクトの app.html ファイルを開きます。

ここでどうなるかは下記の通りです。

ホストされている場所にプロジェクトを配置し、そこでこれを表示することもできます。次に、アプリケーションを見るためにブラウザを使用して、そこで操作することができます。Chromeで正常に動作するか、モバイルデバイス上でWebkitブラウザを介して表示する必要があります。

機能しない場合

アプリが機能しない場合は、次のことを確認します。

Chrome または Safari を使用していること。あるいは、モバイルデバイス上で実行している場合には、Chrome、Safari、Windows Explorer 10 以降を使用していること。
自分用の Yelp API キーを所有しており、これをアプリケーションのコントローラにコーディングしてあること。
定義したビューの userAlias および userClassName の設定や、これらを呼び出すコードにタイプミスがないこと。
アイテム ID が正しく設定されていること。
Architect では JavaScript で犯しがちな多くのタイプミス（セミコロンの欠落など）を防ぐ手段を講じていますが、入力内容は注意深く確認すること。

完成したプロジェクトを City Bars のコードサイト（https://github.com/SenchaArchitect/CityBars）からダウンロードしてコードを比較し、問題を捜すこともできます。

その他のステップ

作成したプロジェクトを本番環境で稼動させるには、さらにビルドとパッケージ化を行うことが必要です。詳細は、保存、プレビュー、ビルドを参照してください。

Last updated

12月 18, 2014

Architect Guides