Lightning コンポーネント開発者ガイド
jステップ 1: 静的モックアップを作成する
アプリケーションのエントリポイントとなる .app ファイルに静的モックアップを作成します。他のコンポーネントおよび HTML マークアップを含めることができます。
次のフローチャートに、アプリケーションでのデータフローをまとめます。アプリケーションでは、クライアント側のコントローラ、ヘルパー関数、Apex コントローラを組み合わせてレコードからデータが取得されます。これは、このクイックスタートで後ほど作成します。
- をクリックして、開発者コンソールを開きます。
- 開発者コンソールで、 をクリックします。
- [New Lightning Bundle (新規 Lightning バンドル)] ポップアップウィンドウの [Name (名前)] 項目に、「expenseTracker」と入力します。これにより、expenseTracker.app という新しいアプリケーションが作成されます。
-
ソースコードエディタで、次のコードを入力します。アプリケーションは最上位レベルのコンポーネントであり、コンポーネントへのメインエントリポイントとなります。これには、コンポーネントや、<div> タグおよび <header> タグなどの HTML マークアップを含めることができます。
1swfobject.registerObject("clippy.codeblock-0", "9"); 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17<aura:application> 18 <ltng:require styles="/resource/bootstrap"/> 19 <div class="bootstrap-sf1"> 20 <div class="navbar navbar-inverse"> 21 <div class="navbar-header"> 22 <a href="#" class="navbar-brand">My Expenses</a> 23 </div> 24 </div> 25 </div> 26</aura:application> -
Salesforce1 のスタイルを使用したテーマを http://developer.salesforcefoundation.org/bootstrap-sf1/ からダウンロードし、bootstrap-namespaced.min.css ファイルを静的リソースとしてアップロードします。このファイルは、/dist/css ディレクトリにあります。この CSS リソースには、他の名前空間とのスタイルの競合を回避する .bootstrap-sf1 セレクタが含まれます。
- [設定] から、 をクリックします。[新規] をクリックします。
- [名前] 項目に「bootstrap」と入力します。[ファイルを選択] ボタンをクリックし、bootstrap-namespaced.min.css ファイルを選択します。このチュートリアルを簡略化するため、他のファイルはアップロードしません。
- [保存] をクリックします。
- 変更を保存し、サイドバーの [プレビュー] をクリックしてアプリケーションをプレビューします。または、https://<mySalesforceInstance>.lightning.force.com/<namespace>/expenseTracker.app (<mySalesforceInstance> は、na1 など、組織をホストするインスタンスの名前です) に移動します。名前空間を使用しない場合は、/c/expenseTracker.app でアプリケーションを使用できます。