画像、アイコン、アバターの仕様

学習の目的

この単元を完了すると、次のことができるようになります。

  • 画像コンポーネントを使用してデザインにアバターを追加する。
  • Design System SVG スプライトマップを使用してデザインにアイコンを含める。
  • Visualforce 内で操作するときのマークアップの問題について説明する。

アバターは千もの言葉に匹敵する

このセクションでは、画像と新しいアイコンセットを使用してデザインを明るくします。簡単なことのようなのに、画像について 1 つの単元すべてを使うとは意外に思われるかもしれません。これらは主要なコンポーネントであり、特にアイコンのマークアップで最先端技術を使用するときに、それがよく理解できるでしょう。また、Trailhead バッジを獲得するには、サンプルページを明るくする必要があります。

コードの説明に進む前に、アクセシビリティに関して留意点があります。すべての <img /> タグには、支援技術ユーザのための alt 属性が必要です。情報を伝達する画像には、alt を明確で簡潔な説明に設定します。画像が単なる装飾のため、または隣接するテキストと重複する場合には、空の alt 属性を <img alt="" src="decorative-image.jpg" /> に設定します。

画像については、Design System にはアバター用の特別なスタイル設定が含まれています。この円形の画像は、最近インターネットでよく見かけるものです。

アバターの例

アバターslds-avatar クラスが指定された <span> 要素で <img /> 要素をラップして作成します。slds-avatar_large などのサイズ設定ヘルパークラスを追加で適用できます。Design System のダウンロードには、/assets/images にアバターの例がいくつか含まれています。これらは自由にアプリケーションに含めてください。次に、マークアップの例を示します。

<span class="slds-avatar slds-avatar_x-small">
 <img src="/assets/images/avatar1.jpg" alt="meaningful text" />
</span>

コピー

メディアオブジェクト

Web サイトに画像を含めるときには、画像とテキストを横並びにするのが一般的なパターンです。Design System には、これを簡単にできるコンポーネント、メディアオブジェクトが含まれています。

では、前の単元のコードに戻ってみましょう。メディアオブジェクト を使用してページヘッダーにアバターを含めます。マークアップの <!-- HEADING AREA --> 部分を次のコードで置き換えます。

<!-- HEADING AREA -->
<div class="slds-media slds-no-space slds-grow">
 <div class="slds-media__figure">
 <span class="slds-avatar slds-avatar_medium">
 <img src="{!URLFOR($Asset.SLDS, 'assets/images/avatar1.jpg')}" alt="" />
 </span>
 </div>
 <div class="slds-media__body">
 <p class="slds-text-title_caps slds-line-height_reset">Accounts</p>
 <h1 class="slds-page-header__title slds-m-right_small slds-align-middle slds-truncate" title="My Accounts">My Accounts</h1>
 </div>
</div>
<!-- / HEADING AREA -->

コピー

ページをプレビューすると、視覚的な魅力が増してきているのわかります。

アバターのあるリストビュー

メディアオブジェクトコンポーネントの基本クラスは slds-media です。どのコンテナ要素にでも適用できますが、ここでは <div> を使用します。コンテナ内で、図 (画像) とボディ (コンテンツ) を提供します。

図、すなわちアバターは、slds-media__figure クラスが指定された <span> 内に含まれます。アバター画像は、標準の <img /> 要素で指定されます。ここにアイコンを含めることもできます (以下参照)。

ボディは、slds-media__body クラスが指定された <div> です。これで先ほど使用したヘッダーテキストをラップします。

アイコン

Salesforce のアイコンを更新することは、この取り組みに着手したときから高い優先度を持っていました。正直に言うと、既存の「クリップアート」は時代遅れで少しくたびれた感じがしていたので、独自のアプリケーションで使用できるように、幅広い使用事例に対応するテクニカラーアイコンセットを提供することになりました。

Design System には、5 つのカテゴリに分かれたさまざまな新しいアイコンが含まれています。

  • カスタム - これらのアイコンは、UI のカスタム Salesforce オブジェクトを表します。Salesforce システム管理者がカスタムオブジェクトを作成するときに使用可能になるアイコンです。
  • 文書型 - 一般的なドキュメント形式およびファイル形式。
  • 標準 - これらのアイコンは、UI の標準 Salesforce オブジェクトすべてに対応します。
  • ユーティリティ - これらのアイコンは、モーダルを閉じる、前のページに戻る、ドロップダウンメニューを開くなど、UI でユーザが操作できるインタラクションを表すのに使用します。
  • アクション - 最後に、古き良きアクションカテゴリです。これらのアイコンは、モバイル UI 内のかなり特定の使用事例に使用します。標準セットとカスタムセットの一部が重複していることに気付くかもしれせんが、間違いではないので慌てないでください。このカテゴリをすべて無視したとしても、思いつくどのような使用事例にも十分な数のアイコンがあります。

アイコンの例

アイコンは個別の PNG と SVG の両方で用意されており、SVG スプライトマップ内にパッケージされています。上記の各アイコンカテゴリには、/assets/icons に独自のスプライトマップがあります。スプライトマップは、ページにアイコンを含めるときの推奨方法です。従来のアイコンフォントより SVG スプライトマップを使用することの利点は、より詳細な CSS 制御、コンポーネントでの配置のしやすさ、そしてベクターベース SVG のサイズ変更に優れているという点です。最後の利点は、応答性の高い設計です。ベクターベースの画像は、どのサイズでもきれいに表示されます。

注意: 現在のバージョンの Edge、Google Chrome、Safari、Firefox ではすでに SVG スプライトマップがサポートされています。SVG スプライトマップ画像アイコンを Microsoft Internet Explorer 11 で使用するには、svg4everybody という小さいスクリプトをダウンロードする必要があります。svg4everybody をダウンロードしたら、svg4everybody.min.js スクリプトを静的リソースとして追加してページに含め、<script> タグでコールします。詳細は、svg4everybody の Web サイトの手順を参照してください。前の項で説明したとおり、このアイコン手法を使用するメリットは、この余分なステップを補って余りあります。

 <apex:includeScript value="{!$Resource.REPLACE_WITH_NAME_OF_SVG4EVERYBODY_STATIC_RESOURCE}" />
 <script>
 svg4everybody();
 </script>
</head>

コピー

また、SVG スプライトマップは、<html> 要素に xmlns 属性と xmlns:xlink 属性を追加しなければならない理由でもあります。この理由とは、SVG と xlink 名前空間を Visualforce 内で設定することです。ほんの少しの作業ですが、その見返りは大きいものです。

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">

コピー

Design System のアイコンマークアップを初めて使用する方が多いので、例を見てみましょう。スタンドアロンアイコンのマークアップを次に示します。UI 内での配置がユーザにとって重要であると想定してみましょう (すなわち、アイコンは装飾用ではない)。これは、アイコンと共に支援テキストを提供する必要があるということです。

<span class="slds-icon_container slds-icon-standard-account" title="description of icon when needed">
 <svg aria-hidden="true" class="slds-icon">
 <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#account')}"></use>
 </svg>
 <span class="slds-assistive-text">Account Icon</span>
</span>

コピー

では、各要素と各クラスを順に見ていきましょう。このアイコンはスタンドアロンであり、意味を持つため、slds-icon_container クラスを持つ外側の span の内側に配置します。

このアイコンに標準の背景色はありません。設定するには、2 番目のクラスを span に適用します。特定のアイコンでデフォルトの色を使用するには、slds-icon-、スプライトマップ名、および -icon を連結してアイコンの特定のユーティリティクラスの名前を構築します。このクラスを <span> 要素に適用します。例では、「standard」スプライトマップと「account」アイコンを使用しているため、クラスは slds-icon-standard-account になっています。

<span> の内側に、slds-icon クラスを持つ <svg> 要素があります。<svg> 要素には <use> タグが含まれており、xlink:href 属性に基づいて表示するアイコンが指定されています。

xlink:href パスを設定する手順は、次のとおりです。

  1. まず使用するアイコンをアイコンページから選択します。どのカテゴリ (アクション、カスタム、文書型、標準、またはユーティリティ) にアイコンが含まれているかをメモします。
  2. カテゴリスプライト (「standard-sprite」など)、/svg/symbols.svg#、およびカテゴリ内の特定のアイコン (「account」など) を連結して、xlink:href 属性を入力します。したがって、上記の例のパス assets/icons/standard-sprite/svg/symbols.svg#account になります。

アイコンが表示されない場合は、次を確認します。

  • <html> 要素に xmlns 属性と xmlns:xlink 属性が適用されていることを確認する。
  • MSIE を使用している場合は、最新バージョンを使用し、svg4everybody スクリプトを上記の説明に従ってページに含める。
  • スプライト種別とアイコンが svg パスで正しく指定されていることを確認する。
  • 静的リソースへの URLFOR パスが正しいことを再確認する。
  • 最後に、ブラウザの開発者ツールでページに難解な問題がないか確認する。がんばってください。

<svg> タグの後の、slds-assistive-text クラスを持つ span 内に補助テキストがあります。

アイコンの色やサイズの変更など、アイコンの使用についての詳細は、Design System の Web サイトでアイコンコンポーネントに関するドキュメントを参照してください。

リストビューデータテーブルへのアイコンの追加

では、取引先アイコンを使用してデータテーブルを明るくしてみましょう。updateOutputDiv 関数を次に置き換えて、アイコン付きの列を追加します。

var updateOutputDiv = function() {
 account.retrieve(
 { orderby: [{ LastModifiedDate: 'DESC' }], limit: 10 },
 function(error, records) {
 if (error) {
 alert(error.message);
 } else {
 // create data table
 var dataTable = document.createElement('table');
 dataTable.className = 'slds-table slds-table_bordered slds-table_cell-buffer slds-no-row-hover';
 // add header row
 var tableHeader = dataTable.createTHead();
 var tableHeaderRow = tableHeader.insertRow();
 var tableHeaderRowCellIcon = tableHeaderRow.insertCell(0);
 tableHeaderRowCellIcon.setAttribute('class', 'slds-cell-shrink');
 var tableHeaderRowCell1 = tableHeaderRow.insertCell(1);
 tableHeaderRowCell1.appendChild(document.createTextNode('Account name'));
 tableHeaderRowCell1.setAttribute('scope', 'col');
 tableHeaderRowCell1.setAttribute('class', 'slds-text-heading_label');
 var tableHeaderRowCell2 = tableHeaderRow.insertCell(2);
 tableHeaderRowCell2.appendChild(document.createTextNode('Account ID'));
 tableHeaderRowCell2.setAttribute('scope', 'col');
 tableHeaderRowCell2.setAttribute('class', 'slds-text-heading_label');
 // build table body
 var tableBody = dataTable.appendChild(document.createElement('tbody'))
 var dataRow, dataRowCell1, dataRowCell2, recordName, recordId;
 records.forEach(function(record) {
 dataRow = tableBody.insertRow();
 var sldsSpriteReference = document.createElementNS('http://www.w3.org/2000/svg', 'use');
 sldsSpriteReference.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#account')}');
 var accountIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
 accountIcon.setAttributeNS('http://www.w3.org/2000/svg', 'aria-hidden', true);
 accountIcon.classList.add('slds-icon');
 accountIcon.appendChild(sldsSpriteReference);
 accountIconWrapper = document.createElement('span');
 accountIconWrapper.classList.add('slds-icon_container', 'slds-icon-standard-account');
 accountIconWrapper.appendChild(accountIcon);
 dataRowCellIcon = dataRow.insertCell(0);
 dataRowCellIcon.appendChild(accountIconWrapper);
 dataRowCell1 = dataRow.insertCell(1);
 recordName = document.createTextNode(record.get('Name'));
 dataRowCell1.appendChild(recordName);
 dataRowCell2 = dataRow.insertCell(2);
 recordId = document.createTextNode(record.get('Id'));
 dataRowCell2.appendChild(recordId);
 });
 if (outputDiv.firstChild) {
 // replace table if it already exists
 // see later in tutorial
 outputDiv.replaceChild(dataTable, outputDiv.firstChild);
 } else {
 outputDiv.appendChild(dataTable);
 }
 }
 }
 );
}

コピー

ページをプレビューすると、実際のユーザインターフェースに近いものが表示されるはずです。ここで単元を見直し、この操作に必要だった CSS の行数を確認してみてください。

アイコンのあるデータテーブル

次の単元では、最も名高い Salesforce ページの 1 つ、レコードホームページを操作します。この単元で学んだスキルとコンポーネントを活用し、他の Design System コンポーネントについても紹介します。

リソース