Lightning コンソールアプリケーションの作成

操作内容

このステップでは、インスタント通知アプリケーションの最初の静的バージョンを定義し、それを Lightning コンソールアプリケーションとしてリリースします。

次のことを実行します。

  • インスタント通知アプリケーション用の Lightning コンポーネントを作成する

  • コンポーネントを Lightning コンソールアプリケーションにリリースする

Trail Together の動画

このステップをインストラクターの説明を見ながら進めて行きたい場合は、Trailhead Live の Trail Together シリーズの一部である、こちらの動画をご覧ください。

(巻き戻して最初から見直したい場合、このクリップは 7:29 分から開始されます。)

Lightning コンポーネントの作成

  1. [Setup (設定)] (設定アイコン) をクリックして、[Developer Console (開発者コンソール)] を選択します。

  2. [File (ファイル)] > [New (新規)] > [Lightning Component (Lightning コンポーネント)] をクリックします。

  3. コンポーネントに notificationConsole と名前を付けます。

  4. [Submit (実行)] をクリックします。

  5. notificationConsole.cmp のコードを次のように変更します。

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
  <aura:attribute name="notifications" type="List"/>
  <aura:attribute name="isMuted" type="Boolean" default="false"/>
  <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
  <aura:registerEvent name="toastEvent" type="force:showToast"/>

  <div class="container">
    <!-- Header -->
    <div class="slds-p-around_x-small slds-border_bottom slds-theme_shade">
      <div class="slds-grid slds-grid_align-spread slds-grid_vertical-align-center">
        <div>
          <span class="slds-badge">{!v.notifications.length}</span>
        </div>
        <div>
          <lightning:buttonIcon onclick="{!c.onClear}" iconName="utility:delete" title="Clear notifications"
            alternativeText="Clear notifications" variant="border-filled"/>
          <lightning:buttonIcon onclick="{!c.onToggleMute}"
            iconName="{!v.isMuted ? 'utility:volume_off' : 'utility:volume_high'}"
            title="{!v.isMuted ? 'Unmute notifications' : 'Mute notifications'}"
            alternativeText="Toggle mute" variant="border-filled"/>
        </div>
      </div>
    </div>
    <!-- Notification list -->
    <div class="slds-container_fluid slds-scrollable_y content">
      <aura:iteration items="{!v.notifications}" var="notification">
        <div class="slds-p-around_small slds-border_top">
          <div class="slds-grid slds-grid_align-spread slds-has-flexi-truncate">
            <p>{!notification.message}</p>
            <p class="slds-text-color_weak slds-p-left_x-small">{!notification.time}</p>
          </div>
        </div>
      </aura:iteration>
    </div>
  </div>
</aura:component>

コードのポイント:

  • Lightning コンポーネントには 2 つの部分が含まれています (これらはサブコンポーネントにすることができます)。

    • 通知カウンターと通知のクリアやミュートを行うボタンが含まれるヘッダー。
    • メッセージと送信された時刻が含まれる通知リスト。
  • このコンポーネントでは、flexipage:availableForAllPageTypes を使用して、Lightning コンソールアプリケーションとして使用できるようにしています。

  • コンポーネントは、Lightning Experience でトースト通知を表示するために使用する force:showToast (ドキュメント) 標準 Lightning イベントを登録します。

  1. [File (ファイル)] > [Save (保存)] メニューをクリックするか、Ctrl + S キーを押してファイルを保存します。

コンポーネントへのコントローラーの追加

  1. 開発者コンソールの右側にある [Controller (コントローラー)] をクリックして notificationConsole コンポーネントのコントローラーを作成します。

  2. すべてのデフォルトのコードを次のコードに置き換えます。

({
  onInit: function (component, event, helper) {
    component.set('v.notifications', [
      { time: '00:01', message: 'Greetings Trailblazer!' },
      { time: '00:02', message: 'Congratulations on building this first version of the app.' },
      { time: '00:03', message: 'Beware of the bears.' }
    ]);
    helper.displayToast(component, 'success', 'Ready to receive notifications.');
  },

  onClear: function (component, event, helper) {
    component.set('v.notifications', []);
  },

  onToggleMute: function (component, event, helper) {
    const isMuted = component.get('v.isMuted');
    component.set('v.isMuted', !isMuted);
    helper.displayToast(component, 'success', 'Notifications ' + ((!isMuted) ? 'muted' : 'unmuted') + '.');
  }
})

コードのポイント:

このコントローラーは、次の 3 つのコントローラー機能を提供します。

  • onInit は、3 つのハードコードされた通知でコンポーネントデータを初期化し、アプリケーションが初期化されたことを示すトーストを表示します。

  • onClear は、通知履歴をクリアします。

  • onToggleMute は、ミュート状態とミュート解除状態 (通知がトーストに表示されるかどうか) を切り替えます。

  1. ファイルを保存します。

コンポーネントへのヘルパーの追加

  1. 開発者コンソールの右側にある [Helper (ヘルパー)] をクリックして notificationConsole コンポーネントのヘルパーを作成します。

  2. すべてのデフォルトのコードを次のコードに置き換えます。

({
  displayToast: function (component, type, message) {
    const toastEvent = $A.get('e.force:showToast');
    toastEvent.setParams({
      type: type,
      message: message
    });
    toastEvent.fire();
  }
})

コードのポイント:

displayToast 関数は showToast 標準 Lightning アプリケーションイベントを起動します。これによって、Lightning Experience でトーストが表示されます。

  1. ファイルを保存します。

コンポーネントのスタイル設定

  1. 開発者コンソールの右側にある [Style (スタイル)] をクリックして notificationConsole コンポーネントのスタイルシートを作成します。

  2. すべてのデフォルトのコードを次のコードに置き換えます。

.THIS.container {
  height:100%;
}
.THIS .content {
  height:calc(100% - 49px);
}

コードのポイント:

コンテナとリストコンテンツの高さを最大化するための特別なスタイルルールが設定されています。

  1. ファイルを保存して、開発者コンソールを閉じます。

Lightning コンソールアプリケーションのリリース

  1. [Setup (設定)] から、[Quick Find (クイック検索)] ボックスに App Manager (アプリケーションマネージャー) と入力し、[App Manager (アプリケーションマネージャー)] を選択します。

  2. Lightning 対応のセールスアプリケーションを見つけます。([App Type (アプリケーション種別)] 列が [Lightning] で、その横の [Visible in Lightning (Lightning で参照可能)] にチェックマークがあるものを探します。)右側の下矢印をクリックし、[Edit (編集)] を選択します。

  3. [Utility Items (ユーティリティ項目)] に移動します。

  4. [Utility Items (ユーティリティ項目)] の横にある [Add Utility Item (ユーティリティ項目を追加)] をクリックします。

  5. コンポーネントのリストをスクロールダウンし、[Custom (カスタム)] の下にある [notificationConsole] を選択します。

  6. コンポーネントのプロパティを次のように設定します。

    • Label (表示ラベル): Notifications (通知)
    • Icon (アイコン): announcement
    • Panel Width (パネルの幅): 340 (デフォルト値)
    • Panel Height (パネルの高さ): 300
    • [Start atuomatically (自動的に開始)] の隣にあるチェックボックスをオンにします。

ユーティリティバー設定画面

  1. [Save (保存)] をクリックして、[Back (戻る)] 戻るボタン をクリックします。

アプリケーションランチャー (アプリケーションランチャーアイコン) で、[Sales (セールス)] を見つけて選択します。[Ready to receive notifications (通知を受信する準備ができました)] というトーストが表示され、画面下部には [Notifications (通知)] Lightning コンソールアプリケーションが表示されます。[Notifications (通知)] アプケーションをクリックすると、下に示すように、ハードコードされた 3 つの通知が展開されます。

[Ready to receive notifications (通知を受信する準備ができました)] というトーストと、3 つのハードコードされた通知が含まれる [Notifications (通知)] Lightning コンソールアプリケーションが表示された画像。

無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる