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 フレームワークによって提供されます。
-
変更を保存し、サイドバーの [Preview (プレビュー)] をクリックしてアプリケーションをプレビューします。または、https://<myDomain>.lightning.force.com/<namespace>/expenseTracker.app に移動します。ここで、<myDomain> はカスタム Salesforce ドメインの名前です。名前空間を使用しない場合は、/c/expenseTracker.app でアプリケーションを使用できます。
ヘッダー My Expenses が表示されます。