Winter'15にバージョンアップされたDeveloper環境でAura UI framework (β版)を体験できるようになっていました。
チェックボックスにチェックをつけて有効化すると使えるようになります。有効化した後、開発者コンソールを確認するとNewで選択できる内容にAuraのための選択肢が追加されていました。
試しに適当に選択してみたところ次のエラーメッセージが表示されました。
Auraを利用するには管理パッケージをつくる際に必要な名前空間プレフィックスの設定が必要とのことです。メッセージ内のリンクから遷移することもできますが、パッケージの設定画面で名前空間プレフィックスを設定することができます。
これでAuraを開発する準備が完了しました。Auraを使った開発ですが、画面を表示する際に最低限必要になるファイルは以下の3つです。
- Lightning Application
- Lightning Component
- CSS
Lightning Applicationがメインのファイルになります。ヘッダーやコンテンツ、フッダーなどの部品をLightning Componentでコンポーネント化して使用します。CSSも別ファイルとして用意することでLightning Application内に直接記載せずに済むようになっています。
実際に画面に表示してみるまでの手順は以下のとおりです。
1. Lightning Componentの作成
開発者コンソールのFile→New→Lightning Componentで作成します。
2. Lightning Applicationの作成
開発者コンソールのFile→New→Lightning Applicationで作成します。 Application内でComponentを使用する場合は『namespace:component name』の形式で宣言します。
3. CSSファイルの作成
CSSの作成ですが、Lightning Applicationを開いた状態で右側に表示されるメニューから作成することができます。※右側のメニューはApplicationとComponentでそれぞれ独立しています。
ここからLightning Applicationに関連するファイルを作成できるようになっているみたいです。未作成のものにはCreateとついています。作成済みのファイルを選択するとコードが表示されます。
CSSは『.THIS クラス名』というように先頭に『.THIS』をつける必要があります。bodyタグに対してのCSSを書きたい場合は『.THIS』だけで大丈夫でした。ただし、Lightning Application内でbodyタグを宣言しているかいないかでCSSの反映のされ方が違ったので注意が必要です。
上記の手順でApplication, Component, CSSと画面表示に必要なものを作成できました。CSSは右側ののメニューから作成することでApplicationと関連付いているのでApplication側でCSSの読み込み処理を記載する必要はありませんでした。
必要なファイルを用意できたので実際に画面を表示してみます。右側のメニューにあるPreviewの部分がリンクになっています。
Previewを選択すると実際に画面を表示することができます。
以上がアプリケーションファイルを作成して実際に画面に表示してみるまでの手順となります。ヘッダーやフッターなどは特になく全部自分で作成していく形になっていました。AuraにはまだLightning Interfaceなど他にも必要になるファイルがありますが、とりあえずはこれで動作確認することができます。
AuraアプリのURLは次のようになるみたいです。
一度作成したAuraのファイルはFile→Open Lightning Resourceから開くことができました。対象ファイルを選択後に左下の『Open Selected』ボタンでファイルを開けます。
Auraのアプリケーションとコンポーネントは設定画面からも確認できます。ビューで条件を絞り込んで確認することもできるみたいです。
リンクをクリックすると詳細ページを表示できます。ここから開発者コンソールを開くこともできるようになっていました。
Aura UI frameworkで開発をしていくには覚えることがいろいろありそうですが、ひとまず基本的な操作は確認できたと思います。残りのファイルの使い方についても追々勉強していきたいと思います。
