読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:はじめてのAura UI framework (β版)

salesforce.com Force.com Aura Lightning

Winter'15にバージョンアップされたDeveloper環境でAura UI framework (β版)を体験できるようになっていました。

f:id:tyoshikawa1106:20141010005958p:plain


チェックボックスにチェックをつけて有効化すると使えるようになります。有効化した後、開発者コンソールを確認するとNewで選択できる内容にAuraのための選択肢が追加されていました。

f:id:tyoshikawa1106:20141010010309p:plain


試しに適当に選択してみたところ次のエラーメッセージが表示されました。

f:id:tyoshikawa1106:20141010010400p:plain


Auraを利用するには管理パッケージをつくる際に必要な名前空間プレフィックスの設定が必要とのことです。メッセージ内のリンクから遷移することもできますが、パッケージの設定画面で名前空間プレフィックスを設定することができます。

f:id:tyoshikawa1106:20141010010630p:plain


これでAuraを開発する準備が完了しました。Auraを使った開発ですが、画面を表示する際に最低限必要になるファイルは以下の3つです。

  • Lightning Application
  • Lightning Component
  • CSS

Lightning Applicationがメインのファイルになります。ヘッダーやコンテンツ、フッダーなどの部品をLightning Componentでコンポーネント化して使用します。CSSも別ファイルとして用意することでLightning Application内に直接記載せずに済むようになっています。


実際に画面に表示してみるまでの手順は以下のとおりです。

1. Lightning Componentの作成

開発者コンソールのFile→New→Lightning Componentで作成します。

f:id:tyoshikawa1106:20141010064732p:plain

2. Lightning Applicationの作成

開発者コンソールのFile→New→Lightning Applicationで作成します。 Application内でComponentを使用する場合は『namespace:component name』の形式で宣言します。

f:id:tyoshikawa1106:20141010065002p:plain

3. CSSファイルの作成

CSSの作成ですが、Lightning Applicationを開いた状態で右側に表示されるメニューから作成することができます。※右側のメニューはApplicationとComponentでそれぞれ独立しています。

f:id:tyoshikawa1106:20141010065550p:plain:w200

ここからLightning Applicationに関連するファイルを作成できるようになっているみたいです。未作成のものにはCreateとついています。作成済みのファイルを選択するとコードが表示されます。

f:id:tyoshikawa1106:20141010070126p:plain


CSSは『.THIS クラス名』というように先頭に『.THIS』をつける必要があります。bodyタグに対してのCSSを書きたい場合は『.THIS』だけで大丈夫でした。ただし、Lightning Application内でbodyタグを宣言しているかいないかでCSSの反映のされ方が違ったので注意が必要です。


上記の手順でApplication, Component, CSSと画面表示に必要なものを作成できました。CSSは右側ののメニューから作成することでApplicationと関連付いているのでApplication側でCSSの読み込み処理を記載する必要はありませんでした。


必要なファイルを用意できたので実際に画面を表示してみます。右側のメニューにあるPreviewの部分がリンクになっています。

f:id:tyoshikawa1106:20141010071057p:plain:w200


Previewを選択すると実際に画面を表示することができます。

f:id:tyoshikawa1106:20141010071332p:plain


以上がアプリケーションファイルを作成して実際に画面に表示してみるまでの手順となります。ヘッダーやフッターなどは特になく全部自分で作成していく形になっていました。AuraにはまだLightning Interfaceなど他にも必要になるファイルがありますが、とりあえずはこれで動作確認することができます。

f:id:tyoshikawa1106:20141010071803p:plain:w150


AuraアプリのURLは次のようになるみたいです。

f:id:tyoshikawa1106:20141010072245p:plain


一度作成したAuraのファイルはFile→Open Lightning Resourceから開くことができました。対象ファイルを選択後に左下の『Open Selected』ボタンでファイルを開けます。

f:id:tyoshikawa1106:20141010072430p:plain:w200


f:id:tyoshikawa1106:20141010072610p:plain:w200


Auraのアプリケーションとコンポーネントは設定画面からも確認できます。ビューで条件を絞り込んで確認することもできるみたいです。

f:id:tyoshikawa1106:20141010072945p:plain


リンクをクリックすると詳細ページを表示できます。ここから開発者コンソールを開くこともできるようになっていました。

f:id:tyoshikawa1106:20141010073117p:plain


Aura UI frameworkで開発をしていくには覚えることがいろいろありそうですが、ひとまず基本的な操作は確認できたと思います。残りのファイルの使い方についても追々勉強していきたいと思います。