Lightning コンポーネント開発者ガイド
jステップ 1: 静的モックアップを作成する
アプリケーションのエントリポイントとなる .app ファイルに静的モックアップを作成します。他のコンポーネントおよび HTML マークアップを含めることができます。
次のフローチャートに、アプリケーションでのデータフローをまとめます。アプリケーションでは、クライアント側のコントローラ、ヘルパー関数、Apex コントローラを組み合わせてレコードからデータが取得されます。これは、このクイックスタートで後ほど作成します。
このチュートリアルでは、Lightning Experience とデザインを合わせることができる Salesforce Lightning Design System CSS フレームワークを使用します。
- https://www.lightningdesignsystem.com/resources/downloads にアクセスして、最新バージョンの Lightning Design System zip アーカイブの静的リソースをダウンロードし、組織にインストールします。静的リソースに「SLDSv2」以外の名前を付けた場合、静的リソースの名前を反映するように、実行するサンプルコードを修正する必要があります。
-
開発者コンソールを開きます。
- 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 <!-- Include the SLDS static resource (adjust to match package version) --> 3 <ltng:require styles="{!$Resource.SLDSv2 + 4 '/assets/styles/salesforce-lightning-design-system-ltng.css'}"/> 5 6 <div class="slds"> 7 <div class="slds-page-header"> 8 <div class="slds-grid"> 9 <div class="slds-col slds-has-flexi-truncate"> 10 <p class="slds-text-heading--label">Expenses</p> 11 <div class="slds-grid"> 12 <div class="slds-grid slds-type-focus slds-no-space"> 13 <h1 class="slds-text-heading--medium slds-truncate" title="My Expenses">My Expenses</h1> 14 </div> 15 </div> 16 </div> 17 </div> 18 </div> 19 </div> 20</aura:application> -
変更を保存し、サイドバーの [Preview (プレビュー)] をクリックしてアプリケーションをプレビューします。または、https://<myDomain>.lightning.force.com/<namespace>/expenseTracker.app に移動します。ここで、<myDomain> はカスタム Salesforce ドメインの名前です。名前空間を使用しない場合は、/c/expenseTracker.app でアプリケーションを使用できます。
ヘッダー My Expenses が表示されます。