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