Lightning コンポーネント開発者ガイド
jステップ 1: 静的モックアップを作成する
アプリケーションのエントリポイントとなる .app ファイルに静的モックアップを作成します。他のコンポーネントおよび HTML マークアップを含めることができます。
次のフローチャートに、アプリケーションでのデータフローをまとめます。アプリケーションでは、クライアント側のコントローラ、ヘルパー関数、Apex コントローラを組み合わせてレコードからデータが取得されます。これは、このクイックスタートで後ほど作成します。
このチュートリアルでは、Lightning Experience とデザインを合わせることができる Lightning Design System CSS フレームワークを使用します。
- https://www.lightningdesignsystem.com/resources/downloads に移動し、バージョン 0.9.0 の Design System 未管理パッケージをダウンロードします。メッセージに従って、未管理パッケージを組織にインストールします。[インストール済みパッケージ] ページに SLDS090 パッケージが表示される場合、インストールは正常に完了しています。
-
開発者コンソールを開きます。
- Salesforce Classic では、 をクリックします。
-
Lightning Experience では、クイックアクセスメニュー (
) をクリックしてから、[開発者コンソール] をクリックします。
- 新しい Lightning アプリケーションを作成します。開発者コンソールで、 をクリックします。
- [New Lightning Bundle (新規 Lightning バンドル)] ポップアップウィンドウの [Name (名前)] 項目に、「expenseTracker」と入力します。これにより、expenseTracker.app という新しいアプリケーションが作成されます。
-
ソースコードエディタで、次のコードを入力します。アプリケーションは最上位レベルのコンポーネントであり、コンポーネントへのメインエントリポイントとなります。これには、コンポーネントや、<div> タグおよび <header> タグなどの HTML マークアップを含めることができます。CSS クラスは、Lightning Design System CSS フレームワークによって提供されます。
1<aura:application> 2 <!-- Define the Design System static resource (version 0.9.0) --> 3 <ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system.min.css"/> 4 5 <div class="slds"> 6 <div class="slds-page-header"> 7 <div class="slds-grid"> 8 <div class="slds-col slds-has-flexi-truncate"> 9 <p class="slds-text-heading--label">Expenses</p> 10 <div class="slds-grid"> 11 <div class="slds-grid slds-type-focus slds-no-space"> 12 <h1 class="slds-text-heading--medium slds-truncate" title="My Expenses">My Expenses</h1> 13 </div> 14 </div> 15 </div> 16 </div> 17 </div> 18 </div> 19</aura:application> -
変更を保存し、サイドバーの [Preview (プレビュー)] をクリックしてアプリケーションをプレビューします。または、https://<myDomain>.lightning.force.com/<namespace>/expenseTracker.app に移動します。ここで、<myDomain> はカスタム Salesforce ドメインの名前です。名前空間を使用しない場合は、/c/expenseTracker.app でアプリケーションを使用できます。
ヘッダー My Expenses が表示されます。