Sencha ArchitectはあなたのSenchaプログラミング生産力を高めてくれるビジュアルな開発ツールです。Sencha Architectを利用すると素早くExt JSやSencha Touchアプリケーションを生成できるようになります。

次の生産能力を高める7つの機能を知ると、これまでよりも効率的になれるでしょう！

1. プロパティフィルターキーボードショートカット: Ctrl-E (Macでは⌘-E)

やり方

Ctrl-E(Macでは⌘-E)をタイプすると、カーソルがconfig/propertyのフィルターフィールドに移動します。

解説

私はいつもプロパティフィルターを利用して普段とても大きいリストを速くクリックしてエディット出来るようにコンフィグプロパティを三つか四つに分けて絞り込みます。

これがよく使うエディットの順番です：

1. Project Inspectorでコンポーネントにクリック
2. Ctrl-Eを入力してカーソルをプロパティフィルターに入れる
3. 二つか三つの文字を入力してコンフィグのリストを絞り込む
4. 変更したいプロパティをエディットします

2. フィルターをロック

やり方

config/propertyのフィールドの中の “lock” アイコンをクリックします。 こうするとProject Inspectorの他のアイテムをクリックしても、現在のフィルターはロックされます。

解説

Project Inspectorまたはdesign viewで新しいアイテムにクリックすると、「Ctrl-E (または⌘-E)」を入力してENTERを押すまでフィルターは適用されないことにお気づきになったでしょう。しかし、フィルターエリアで “lock” のアイコンをクリックすると、アイテムを変更する度にフィルターは自動的に適用されます。

この機能を利用すると同じ機能を沢山の似ているアイテムです速く編集することができます。例えば、フィルターフィールドに “align” と入力して（ “al” でも大丈夫です）、次に配置を変更したいクリッドカラムをクリックできます。

3. Toolboxのカテゴリー、またはToolbox全体を折りたたむ

   

やり方

Toolboxカテゴリーだけを閉じるならカテゴリーのスプリッタの真ん中に（ほとんど見えない）小さい矢印がありますので、それをクリックして下さい。 Toolbox全体を閉じるにはToolboxヘッダーの一番右側の矢印をクリックして下さい。

解説

私は割といつもToolboxカテゴリーのウィンドウを非表示のままにしています。 “Everything“ を選択させたまま必要なものをフィルターします。カテゴリーを非表示したあと、もっとスペースを欲しかったらToolboxの幅を小さくできます。

さらにもっとスペースが欲しかったら、右側の折りたたみの矢印をクリックしてToolboxを完全に折りたたむことをできます。

4. 外部のサードパーティーjavaScript APIへの参照を追加する

   

やり方

Project Managerで[+]ボタンをクリックして、 “Resource“ をクリックして、サブメニューのアイテム “JS Resource“ をクリックします。

解説

Sencha Architectで外部JavaScript APIへの参照を追加すると、Architectアプリケーションのどの部分からもそのライブラリ関数を呼び出す事が出来ます。例えば、Google Maps、Google Analytics、jQueryなど使用可能なサードパーティjavaScriptライブラリは何百もあります。

もしわずか30行のコードで生成したArchitectアプリケーションで完全に機能しているGoogle Maps Tab Panelを見たかったら、下にコメントを書いて頂ければ、今後のブログ投稿でこのテーマについて書きます。

5. クラスに昇格

やり方

昇格したい（つまり別なクラスファイルに保存したい）コンポーネントかコンテナを右クリックして下さい。 contextメニューから ”Promote to Class” を選択します。

解説

最初にSencha Architectのアプリケーションを作り始める時はviewportやTab Panelにコンポーネントを追加します。 さらにコンポーネントを追加していくとこのコンテナのアイテム配列は扱いにくくなってくるので、その時点で大きいコンポーネントから別な分離したクラスを作成したほうが良いです。

別なクラスを生成する時には、そこにカスタムなxtypeを割り当てますので、それが親のアイテム配列でクラスを参照するのに利用されます。refsのselectionやコントローラーのComponentQuery.query()呼び出しでもカスタムxtypeが利用できます。

6. プロキシの付いていないストアを追加する

やり方

プロキシが付いてないStoreを生成するには、上のスクリーンショットでご覧の通りにProject Inspectorの[+]ボタンをクリックしたあとにトップレベルの「Store」をクリックして下さい。

解説

普通は[+]ボタンをクリックして ”Store” メニューアイテムの上をホバーすると、サブメニューの中にあるそれぞれのStoresを見えます。どのStoreを選んでも、それにはプロキシが付いています。

既にモデルにストアがついていることがあるので、プロキシが付いてないStoreを生成したいとこともあります。トップレベルのStoreメニューアイテムをクリックするとプロキシが付いてないStoreが追加されます。

おまけ

”proxy” はModelかStoreに添付されてAPIがどこに存在するかを定義します。”url” と ”type” (jsonとxmlタイプは組み込まれている)のプロパティは必須です。

ModelかStoreにプロキシを添付するのはどう区別しますか？もしModel.save() メソッドを利用していてModelインスタンスを一つ一つ生成していたら、Modelにプロキシを添付します。

7. タブをリストするショートカット: Ctrl-L (Macでは⌘-L) – Version 2.2から追加!

やり方

Type Ctrl-L (⌘-L on Macs) to see a list of currently open tabs. Arrow up and down to move within the listing, and hit ENTER to select and focus a tab. 現時点で開いているタブのリストを見るにはCtrl-L (Macでは⌘-L)をタイプします。 上下の矢印でリストの中を移動してタブを選択し、ENTERを押してフォーカスします。

解説

Sencha Architect 2.2での新機能: アプリケーション内の各クラスはそれぞれの独立したタブに置かれています。 このお陰でProject Inspectorの中でスクロールして行ったり来たりしないでもアプリケーションの異なった部分（例えばグリッドと連携されているストア）をす速くエディットできます。またいつでもタブを閉じることができます。

問題はタブのスペースよりも多くのタブがあるときです。解決策は ”Ctrl-L (Macでは⌘-L）” をタイプして全ての開いているタブをリストします。 （他にもタブスペースの右側にある ”List Tabs” のアイコンをクリックするやり方もあります）

これで上下の矢印キーで、す速くタブに移動してそれにフォーカスする為にENTERを押せば良いだけです。今のところはタブはドラッグして移動できませんが、もし順番を変えて関係しているタブを近づけたかったらタブを閉じてから再び開けば可能です。

まとめ

いくつか新しい機能を紹介できて、あなたの作業時間を減らせたら嬉しいです。

ここで紹介したSencha Architectの機能は使用可能なもののほんの一部です。 Sencha ArchitectはSenchaが認定した先生が世界中で教えているSencha TouchとExt JSの5日間のSencha Trainingコースでとても詳しく説明されています。 詳しくは sencha.com/training へどうぞ。

感想はコメントセクションに入れて下さい。