Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)
jLightning 基本コンポーネントの使用
Lightning 基本コンポーネントは、最新の Lightning Experience、Salesforce アプリケーション、および Lightning コミュニティのユーザインターフェースを構成するビルディングブロックです。
Lightning 基本コンポーネントには Lightning Design System のマークアップとクラスが組み込まれており、最小のフットプリントでパフォーマンスとアクセシビリティの向上を提供します。
これらの基本コンポーネントは、HTML と CSS の詳細を処理します。各コンポーネントには、さまざまなスタイル設定を可能にする簡単な属性が用意されています。つまり、通常は CSS を使用する必要はまったくありません。Lightning 基本コンポーネント属性の簡素化と、その属性の無駄がなく一貫性のある定義によって属性が使いやすくなり、ビジネスロジックに集中できます。
Lightning 基本コンポーネントを lightning 名前空間内で検索し、既存の ui 名前空間コンポーネントを補完できます。一致する ui と lightning 名前空間コンポーネントがあるインスタンスでは、lightning 名前空間コンポーネントを使用することをお勧めします。lightning 名前空間コンポーネントは、一般的な使用事例に合うように最適化��れています。Lightning Design System のスタイル設定が装備されているコンポーネントの範囲を超えると、アクセシビリティ、リアルタイム操作、および拡張エラーメッセージが処理されます。
後続のリリースでは、追加の Lightning 基本コンポーネントを提供していく予定です。今後 lightning 名前空間が ui 名前空間と同等になり、やがてそれを超えることが想定されています。また、Lightning 基本コンポーネントは時間と共に Lightning Design System に合わせて進化していきます。そのため、カスタマイズは引き続き Lightning Experience と Salesforce アプリケーションに整合します。
基本コンポーネントは視覚的なビルディングブロックで、標準で最小限の機能を提供しますが、この基本コンポーネントを組み合わせて、豊富な機能を有する「実用コンポーネント」を作成し、そのコンポーネントに Lightning アプリケーションビルダーでアクセスすることができます。システム管理者はこの実用コンポーネントをドラッグアンドドロップすることで、ユーザインターフェースを容易に作成し、設定できます。たとえば、Lightning アプリケーションビルダーの Chatter フィードコンポーネントは、タブのコレクション、ボタンのグループ、およびリッチテキストエディタで構成されます。
API バージョン列は、コンポーネントを使用するために、開発者コンソールまたは Force.com IDE で、または API を介して 設定する必要がある最小の API バージョンを示します。最小 API バージョンが指定されていないコンポーネントは、API バージョン 37.0 以降で使用できます。
ボタン
以下のコンポーネントはさまざまなボタンの種類を提供します。
| 種別 | Lightning コンポーネント名 | Description | Lightning Design System | API バージョン |
|---|---|---|---|---|
| ボタン | lightning:button | ボタン要素を表します。 | ボタン | |
| ボタングループ | lightning:buttonGroup | ボタンのグループを表します。 | ボタングループ | |
| ボタンアイコン | lightning:buttonIcon | アイコンのみの HTML ボタン。 | ボタンアイコン | |
| ボタンアイコン (ステートフル) | lightning:buttonIconStateful | 状態を保持するアイコンのみのボタンです。 | ボタンアイコン | 41.0 |
| ボタンメニュー | lightning:buttonMenu | アクションまたは関数のリストを含むドロップダウンメニュー。 | メニュー | |
| lightning:menuItem | lightning:buttonMenu のリスト項目。 | |||
| lightning:menuDivider | lightning:buttonMenu のメニュー項目を分離する横線。 | |||
| lightning:menuSubheader | lightning:buttonMenu のメニュー項目のサブヘッダー。 | |||
| ボタンステートフル | lightning:buttonStateful | 状態を切り替えるボタン。 | ボタンステートフル | |
| [画像を挿入] ボタン | lightning:insertImageButton | lightning:inputRichText に画像を挿入するボタン。 | ボタンアイコン | 43.0 |
データ入力
データ入力では、以下のコンポーネントを使用します。
| 種別 | Lightning コンポーネント名 | Description | Lightning Design System | API バージョン |
|---|---|---|---|---|
| 住所 | lightning:inputAddress | 住所複合項目を表します。 | フォームレイアウト | 42.0 |
| チェックボックスグループ | lightning:checkboxGroup | オプションのグループの単一または複数の選択を有効にします。 | チェックボックス | 41.0 |
| コンボボックス | lightning:combobox | オプションのリストから単一の選択を有効にする入力要素。 | コンボボックス | |
| デュアルリストボックス | lightning:dualListbox | 選択可能なオプションのリストボックスを含む入力リストボックスを提供します。2 つのリスト間でオプションを移動できます。 | デュエル選択リスト | 41.0 |
| ファイルアップローダおよびプレビュー | lightning:fileUpload | レコードへのファイルのアップロードを有効にします。 | ファイルセレクタ | 41.0 |
| lightning:fileCard | アップロードされたコンテンツの表現を表示します。 | 項目 | ||
| 入力 | lightning:input | type 属性に応じてユーザ入力を受け入れる対話型コントロールを表します。 | 入力 | |
| 入力項目 | lightning:inputField | Salesforce オブジェクトの項目に対応する編集可能な入力を表します。 | フォームレイアウト | 42.0 |
| 入力名 | lightning:inputName | 名前複合項目を表します。 | フォームレイアウト | 42.0 |
| 入力位置 (地理位置情報) | lightning:inputLocation | 緯度値と経度値を受け入れる地理位置情報の複合項目。 | フォームレイアウト | 41.0 |
| ラジオグループ | lightning:radioGroup | オプションのグループの単一の選択を有効にします。 | ラジオボタン | 41.0 |
| 選択 | lightning:select | HTML select 要素を作成します。 | 選択 | |
| スライダ | lightning:slider | 指定した 2 つの数字間の値を指定するための入力範囲スライダ。 | スライダ | 41.0 |
| リッチテキストエリア | lightning:inputRichText | カスタマイズ可能なツールバーを備えた、リッチテキスト入力用の WYSIWYG エディタ。 | リッチテキストエディタ | |
| テキストエリア | lightning:textArea | 複数行のテキスト入力。 | テキストエリア |
データの表示
データを表示するには、以下のコンポーネントを使用します。
| 種別 | Lightning コンポーネント名 | Description | Lightning Design System | API バージョン |
|---|---|---|---|---|
| 住所 | lightning:formattedAddress | Google マップ上の特定の場所へのリンクを提供する、書式設定された住所を表示します。 | なし | 42.0 |
| クリック-to-ダイヤル | lightning:clickToDial | |||
| 日付/時間 | lightning:formattedDateTime | 書式設定された日付と時刻を表示します。 | ||
| メール | lightning:formattedEmail | mailto: URL スキームが付いているハイパーリンクとしてメールを表示します。 | 41.0 | |
| 地理位置情報 | lightning:formattedLocation | 緯度, 経度の形式を使用して地理位置情報を表示します。 | 41.0 | |
| 名前 | lightning:formattedName | 敬称と肩書きを含めることができる、書式設定された名前を表示します。 | 42.0 | |
| 数値 | lightning:formattedNumber | 書式設定された数値を表示します。 | ||
| 出力項目 | lightning:outputField | Salesforce オブジェクトの項目の表示ラベル、ヘルプテキスト、値を表示します。 | 41.0 | |
| 電話 | lightning:formattedPhone | tel: URL スキームが付いているハイパーリンクとして電話番号を表示します。 | 41.0 | |
| リッチテキスト | lightning:formattedRichText | ホワイトリストに登録されているタグと属性を使用して書式設定されたリッチテキストを表示します。 | 41.0 | |
| テキスト | lightning:formattedText | テキストを表示し、改行を禁則処理で置き換え、要求された場合は linkify で表示します。 | 41.0 | |
| 時間 | lightning:formattedTime | ユーザのロケールに基づいて書式設定された時間を表示します。 | 42.0 | |
| URL | lightning:formattedUrl | URL をハイパーリンクとして表示します。 | 41.0 | |
| 相対日付/時間 | lightning:relativeDateTime | 参照元の日時と指定された日時の相対的な時差を表示します。 |
フォーム
レコードを編集および表示するには、以下のコンポーネントを使用します
| 種別 | Lightning コンポーネント名 | Description | Lightning Design System | API バージョン |
|---|---|---|---|---|
| レコード編集フォーム | lightning:recordEditForm | フォーム内で編集されるレコード項目の lightning:inputField コンポーネントのグループ。 | フォームレイアウト | 42.0 |
| レコードフォーム | lightning:recordForm | レコード項目を表示および編集するためにフォーム作成を簡易化するコンテナ。 | フォームレイアウト | 43.0 |
| レコードビューフォーム | lightning:recordViewForm | フォームにレコード項目を表示する、lightning:outputField コンポーネントおよびその他の書式設定された表示コンポーネント。 | フォームレイアウト | 42.0 |
レイアウト
次のコンポーネントは、関連情報をまとめてグルーピングします。
| 種別 | Lightning コンポーネント名 | Description | Lightning Design System | API バージョン |
|---|---|---|---|---|
| アコーディオン | lightning:accordion | 複数のコンテンツ領域を含むセクションを縦に積み上げたコレクション。 | アコーディオン | 41.0 |
| lightning:accordionSection | lightning:accordion コンポーネント内にネストされた 1 つのセクション。 | |||
| カード | lightning:card | 情報の関連グルーピングを囲むコンテナを適用します。 | カード | |
| カルーセル | lightning:carousel | 水平方向に 1 つずつ表示する画像のコレクション。 | カルーセル | 42.0 |
| レイアウト | lightning:layout | ページにコンテナを配置するための反応型グリッドシステム。 | グリッド | |
| lightning:layoutItem | lightning:layout コンポーネント内のコンテナ。 | |||
| タブ | lightning:tab | lightning:tabset コンポーネント内にネストされた 1 つのタブ。 | タブ | |
| lightning:tabset | タブのリストを表します。 | |||
| タイル | lightning:tile | レコードに関連付けられた関連情報のグループ。 | タイル |
ナビゲーションコンポーネント
次のコンポーネントでは、階層内、またはアプリケーション内の他の場所に移動するリンクとアクションが整理されます。
| 種別 | Lightning コンポーネント名 | Description | Lightning Design System | API バージョン |
|---|---|---|---|---|
| ブレッドクラム | lightning:breadcrumb | ユーザが表示しているページの階層パス内の項目。 | ブレッドクラム | |
| lightning:breadcrumbs | Web サイトまたはアプリケーション内で現在アクセスしているページの階層パス。 | |||
| ナビゲーション | lightning:navigation | ページ参照の URL を生成します。 | なし | 43.0 |
| 地図 | lightning:map | 1 つ以上のロケーションの地図を表示します。 | 地図 | 44.0 |
| ツリー | lightning:tree | ネストされた項目の階層構造を表示します。 | ツリー | 41.0 |
| 垂直ナビゲーション | lightning:verticalNavigation | 別のページまたは現在のページの別の部分に移動するための垂直型のリンクリスト。 | 垂直ナビゲーション | 41.0 |
| lightning:verticalNavigationItem | lightning:verticalNavigationSection または lightning:verticalNavigationOverflow 内のテキストのみのリンク。 | |||
| lightning:verticalNavigationItemBadge | lightning:verticalNavigationSection または lightning:verticalNavigationOverflow 内のリンクとバッジ。 | |||
| lightning:verticalNavigationItemIcon | lightning:verticalNavigationSection または lightning:verticalNavigationOverflow 内のリンクとアイコン。 | |||
| lightning:verticalNavigationOverflow | lightning:verticalNavigation の項目のオーバーフロー。 | |||
| lightning:verticalNavigationSection | lightning:verticalNavigation 内のセクション。 |
ビジュアルコンポーネント
次のコンポーネントは、たとえばアイコンや読み込みスピナーなどの情報キューを提供します。
| 種別 | Lightning コンポーネント名 | Description | Lightning Design System | API バージョン |
|---|---|---|---|---|
| アバター | lightning:avatar | オブジェクトのビジュアル表現。 | アバター | |
| バッジ | lightning:badge | 少量の情報を保持する表示ラベル。 | バッジ | |
| データテーブル | lightning:datatable | 型に応じて書式設定されたデータの列を表示するテーブルです。 | データテーブル | 41.0 |
| 動的アイコン | lightning:dynamicIcon | さまざまなアニメーションアイコン。 | 動的アイコン | 41.0 |
| ヘルプテキスト (ツールチップ) | lightning:helptext | 少量のテキストのポップオーバーコンテナ付きアイコン。 | ツールチップ | |
| アイコン | lightning:icon | コンテキストを提供するビジュアル要素。 | アイコン | |
| リストビュー | lightning:listView | 指定されたオブジェクトのリストビューを表示します。 | なし | 42.0 |
| メッセージング | lightning:overlayLibrary | モーダルおよびポップオーバーを使用してメッセージを表示します。 | メッセージング | 41.0 |
| lightning:notificationsLibrary | 通知およびトーストを使用してメッセージを表示します。 | メッセージング | 41.0 | |
| パス | lightning:path | 選択リスト項目とパス設定メタデータによって決定されるパスを表示します。 | パス | 41.0 |
| 選択リストパス | lightning:picklistPath | 指定された選択リスト項目に基づくパスを表示します。 | ||
| ピル | lightning:pill | ピルとは、ユーザが生成する自由形式のテキストではない、データベース内の既存の項目を表します。 | ピル | |
| ピルコンテナ | lightning:pillContainer | コンテナ内でグループ化されたピルのリスト。 | ピル | 42.0 |
| 進行状況バー | lightning:progressBar | 操作の進行状況を示す、左から右の水平方向の進行状況バー。 | 進行状況バー | 41.0 |
| 進行状況インジケータとパス | lightning:progressIndicator | 完了している内容を示す処理のステップを表示します。 | 進行状況インジケータ | 41.0 |
| ツリーグリッド | lightning:treeGrid | テーブルに表示されるデータの階層ビュー。 | ツリー | 42.0 |
| スピナー | lightning:spinner | アニメーションスピナーを表示します。 | スピナー |
機能固有のコンポーネント
次のコンポーネントは、特定の Salesforce 機能のコンテキストでのみ使用できます。
| 種別 | Lightning コンポーネント名 | Description | Lightning Design System | API バージョン |
|---|---|---|---|---|
| Lightning ページ範囲 | lightning:flexipageRegionInfo | 上位のコンポーネントに Lightning ページ範囲の情報を提供します。 | なし | 41.0 |
| フローインタビュー | lightning:flow | Lightning ランタイムでのフローインタビューを表します。 | 41.0 | |
| オムニチャネルツールキット | lightning:omniToolkitAPI | オムニチャネルツールキットのメソッドへの API アクセスを提供します。 | 41.0 | |
| Lightning コンソールユーティリティバー | lightning:utilityBarAPI | Lightning コンソールのユーティリティバーのメソッドへの API アクセスを提供します。 | 41.0 | |
| Lightning コンソールワークスペース | lightning:workspaceAPI | Lightning コンソールのワークスペースのメソッドへの API アクセスを提供します。 | 41.0 | |
| 埋め込みチャット | lightningsnapin:prechatAPI | 事前チャットページのユーザインターフェースのカスタマイズを有効にします。 | 42.0 | |
| 埋め込みチャット | lightningsnapin:settingsAPI | カスタム組み込みサービスコンポーネント内の組み込みサービス設定への API アクセスを提供します。 | 43.0 | |
| 埋め込みチャット | lightningsnapin:minimizedAPI | 組み込みチャットで最小化されたウィンドウのユーザインターフェースのカスタマイズを有効にします。 | 43.0 | |
| EmpJs ストリーミング API ライブラリ | lightning:empApi | ストリーミングチャネルの登録とイベントメッセージのリスンを行うメソッドにアクセスできます。 | 44.0 |