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