この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。
英語に切り替える

Lightning コンポーネント開発者ガイド

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

ステップ 1: 静的モックアップを作成する

アプリケーションのエントリポイントとなる .app ファイルに静的モックアップを作成します。他のコンポーネントおよび HTML マークアップを含めることができます。

次のフローチャートに、アプリケーションでのデータフローをまとめます。アプリケーションでは、クライアント側のコントローラ、ヘルパー関数、Apex コントローラを組み合わせてレコードからデータが取得されます。これは、このクイックスタートで後ほど作成します。

アプリケーションを読み込むと init イベントがトリガされる。
  1. あなたの名前 | [開発者コンソール] をクリックして、開発者コンソールを開きます。
  2. 開発者コンソールで、[ファイル] | [新規] | [Lightning アプリケーション] をクリックします。
  3. [New Lightning Bundle (新規 Lightning バンドル)] ポップアップウィンドウの [Name (名前)] 項目に、「expenseTracker」と入力します。これにより、expenseTracker.app という新しいアプリケーションが作成されます。
  4. ソースコードエディタで、次のコードを入力します。
    1swfobject.registerObject("clippy.codeblock-0", "9");<aura:application>
2     <link href='/resource/bootstrap/' rel="stylesheet"/>
3    <div class="container">
4        <h1>Add Expense</h1>
5    </div>
6</aura:application>
    アプリケーションは最上位レベルのコンポーネントであり、コンポーネントへのメインエントリポイントとなります。これには、コンポーネントや、<div> タグおよび <header> タグなどの HTML マークアップを含めることができます。

    ファイルパス名 bootstrap は、このクイックスタートで後からアップロードする静的リソースの名前に対応します。リソースが見つからないというエラーがブラウザコンソールに表示されても、このクイックスタートでは使用しないため心配しないでください。

    メモ

  5. 新しいコンポーネントにスタイルを追加します。
    1. サイドバーで、[STYLE] をクリックします。これで、expenseTracker.css という新しい CSS リソースが作成されます。
    2. 次の CSS ルールセットを入力します。
      1.THIS h1 {
2    background: url(/img/icon/creditCard32.png) no-repeat;
3    padding-left: 40px;
4}

      THIS は、CSS に名前空間を追加して別のコンポーネントとのスタイルの競合を回避するためのキーワードです。背景のアイコンは、経費オブジェクトを作成するで作成したタブのクレジットカードアイコンを表します。

      メモ

  6. Salesforce1 のスタイルを使用したテーマを http://developer.salesforcefoundation.org/bootstrap-sf1/ からダウンロードし、bootstrap.css ファイルを静的リソースとしてアップロードします。このファイルは、/dist/css ディレクトリにあります。
    1. [設定] から、[開発者] | [静的リソース] をクリックします。[新規] をクリックします。
    2. [名前] 項目に「bootstrap」と入力します。[ファイルを選択] ボタンをクリックし、bootstrap.css ファイルを選択します。このチュートリアルを簡略化するため、他のファイルはアップロードしません。
    3. [保存] をクリックします。
  7. 変更を保存し、サイドバーの [プレビュー] をクリックしてアプリケーションをプレビューします。または、https://<mySalesforceInstance>.lightning.force.com/<namespace>/expenseTracker.app (<mySalesforceInstance> は、na1 など、組織をホストするインスタンスの名前です) に移動します。ヘッダーとアイコンが、灰色の背景に表示されます。