Lightning開発:Aura Documentationの使い方

  • 2
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

今年もAdventCalenderの季節がやってきました。少し前にSalesforceのLightning Componentが正式にリリースされたのでLightning開発に関係する話を投稿しようと思います。

SalesforceのLightningにはAura Documentationというドキュメントページが用意されています。このページでLighting開発で利用できる標準コンポーネントの情報を確認できるのですが、その他にも自分達で開発したコンポーネントの情報も確認することができます。
スクリーンショット 2015-11-23 10.46.04.png

このとき、自分達で開発したコンポーネントについては任意の情報を記載することが可能となっています。今回はどのような情報を記載できるか確認してみたいと思います。

はじめに

Aura DocumentationのページはSalesforceにログイン後、以下のURLにアクセスすると表示できます。

https://<mySalesforceInstance>.lightning.force.com/auradocs/reference.app

マイドメイン設定していた場合は次のようになります。

https://<myDomain>-dev-ed.my.salesforce.com/auradocs/reference.app

これでAura Documentationのページを確認できると思います。

Description

Descriptionにはそのコンポーネントについての説明を記載できます。機能の概要についてと使用時に注意することなどについてまとめておくといいと思います。
スクリーンショット 2015-11-23 12.22.03.png

Descriptionに説明を記載するには、auradocファイルを用意する必要があります。このファイルは開発者コンソールの右側にあるワークパネルのDOCUMENTAIONをクリックすることで作成できます。

次のように『aura:description』タグ内に記述した内容がDescriptionに表示されます。
スクリーンショット 2015-11-23 12.25.58.png

Attributes

AttributesにはLightning Componentで利用するaura:attributeタグの情報が表示されます。これでaura:attributeタグで宣言した各変数が何に利用されるかについて説明することができます。
スクリーンショット 2015-11-23 12.33.02.png

これはaura:attributeタグのdescription属性に記述した内容が表示されます。
スクリーンショット 2015-11-23 12.35.39.png

Handled Events

これもAttributesのようにコンポーネント内で使用しているHandled Eventsの情報が表示されます。
スクリーンショット 2015-11-23 12.44.19.png

次のようにaura:handlerタグのdescription属性に記述した内容が表示されます。
スクリーンショット 2015-11-23 12.46.53.png

Examples

これがAura Documentationで一番便利な機能だと思います。Examplesタグを選択することで表示できます。先程のDescriptionでは概要についての簡単な説明を記述しました、こちらではより詳細な情報を記述することが可能です。
スクリーンショット 2015-11-23 12.54.37.png

Examplesに説明を表示するにはauradocファイルのaura:exampleタグを用意する必要があります。
スクリーンショット 2015-11-23 12.59.52.png

rel属性には対象のコンポーネント名を指定して、label属性にタイトル的な内容を記述します。aura:exampleタグ内に詳細情報を記述していけるのですが、このとき一部HTMLタグの利用が可能となっています。
スクリーンショット 2015-11-23 13.17.35.png

上記のように記述した結果がこちらです。
スクリーンショット 2015-11-23 13.17.13.png

Examplesタグの便利機能と注意点

Examplesタグではコンポーネントのプレビューが表示されます。ただのプレビューではなく実際に動かすことが可能となっています。
スクリーンショット 2015-11-23 13.22.00.png

タブを切り替えてグラフを表示したり・・・
スクリーンショット 2015-11-23 13.22.23.png

編集用のポップアップを表示したりといったことが可能です。
スクリーンショット 2015-11-23 13.22.40.png

このような感じでどんなコンポーネントか確認できるようになっています。このプレビュー機能すごく便利なのですが、ひとつ注意点がありました。

次のように編集画面でレコードの更新を試してみます。

スクリーンショット 2015-11-23 13.27.46.png

Examplesタグ内の表示も更新されたことを確認できます。
スクリーンショット 2015-11-23 13.29.12.png

このときの更新はExamplesタグ内だけかと思ったのですが、実は実際にレコード更新処理が実行されています。
スクリーンショット 2015-11-23 13.30.23.png

Examplesタグで表示できるコンポーネントはプレビューではなく、埋め込み表示ができるという認識が正しいみたいです。

Aura Documentationページを表示するにはSalesforceユーザでログインしている必要があるので知らない間に動かされるということは無いのですが、お試し間隔で試してしまいそうなのでこの仕組みには注意が必要だと思います。

ということでAura DocumentationページのExamplesタグを利用する場合は、判定用のフラグを用意するなどして更新や削除ができないようにした方が良さそうです。

さいごに

ひとつ注意点もありましたが、このAura Documentationを利用することでいままで苦労した仕様書の作成も効率よく行えるのではないかと思います。クラウド上で管理できるので常に最新の仕様書として扱うことができます。

また書式も統一され他の開発者がつくったコンポーネントでも同じように管理できるんじゃないかと思います。

以上、Lihgtning開発のAura Documentationの使い方についてでした。Lightning Componentを開発するときはAura Documentationのことも意識しておくと良さそうです。