SFDC SLDS LEX 画像　アイコン　アバターの使用

つい、LEXに手を出して、

触ってみたです。

今回、デザイン系のアイコン系を使ってみたです。

それを共有したいと思います。

欲しけりゃくれてやる・・・。

探せ！

この世の全てをそこに置いてきた〜笑

まずDesign Systemを理解
なぜ、LEXを触ってみたか
SLDSを使い、アイコンを使うにはまず準備
まとめ

まずDesign Systemを理解

アプリケーション構築に役立つ 4 種類のリソースがバンドルされています

CSS フレームワークスペーシング、サイズ設定、およびその他の視覚的調整を行うためのページヘッダー、表示ラベル、フォーム要素などの UI コンポーネント、グリッドレイアウトシステム、および単一目的のヘルパークラスを定義します。

アイコン — アクション、カスタム、文書型、標準、およびユーティリティの各アイコンの PNG および SVG (個別かつスプライトマップ) バージョンが含まれます。

フォントタイポグラフィは Salesforce 製品の中核を成すものです。Salesforce 製品であることが明確に認識されるようにデザインされた新しい Salesforce Sans フォントを Design System から利用できます。

設計トークンこれらの設計変数を使用して、ブランドに合うようにビジュアルデザインを調整できます。カスタマイズ可能な変数には、色、フォント、スペーシング、サイズ設定があります

なぜ、LEXを触ってみたか

LEXはずっと良く分からない、いつか、触れようと思って、

やっと、チャンスがきて、【戻るボタン】にアイコンをつけたいとのことがあり、著作権などもあり、標準機能を使おうと思い、触れたです。

SLDSを使い、アイコンを使うにはまず準備

静的リソース準備

静的リソースをダウンロード

ダウンロードしたら、

svg4everybody.min.js スクリプトを静的リソースとして

追加してページに含め、script タグでコールします

apexPageも HTMLのように構成する下記がサンプル構成

<apex:page showHeader="false"
           standardStylesheets="false"
           sidebar="false"
           applyHtmlTag="false"
           applyBodyTag="false"
           docType="html-5.0">
<html xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <title>SFDC デザインシステム</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <apex:includeScript value="{!$Resource.svg4everybody}" />
  <!-- Design System をインポートします-->
  <apex:slds />
</head>
<body>
  <!-- SLDS 適用範囲ラッパ-->
  <div class="slds-scope">
      <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>
       <span class="slds-icon_container slds-icon-action-close " title="description of icon when needed">
              <svg aria-hidden="true" class="slds-icon">
                    <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/action-sprite/svg/symbols.svg#close ')}"></use>
              </svg>
              <span class="slds-assistive-text">Account Icon</span>
        </span>
  </div>
  <!-- SLDS 適用範囲ラッパ -->
</body>
</html>
</apex:page>

適用結果も非常にシンプル f:id:jude2016:20180818110012p:plain

使用できるアイコンはサイトから確認しどのカテゴリ (アクション、カスタム、文書型、標準、またはユーティリティ) にアイコンが含まれているかをメモしてくださいアイコン

アイコン手順通りにやってもうまくいかない時に

確認するべきのところ

・要素に xmlns 属性と xmlns:xlink 属性が適用されていることを確認する。

・MSIE を使用している場合は、最新バージョンを使用し、svg4everybody スクリプトを上記の説明に従ってページに含める。

・スプライト種別とアイコンが svg パスで正しく指定されていることを確認する。

・静的リソースへの URLFOR パスが正しいことを再確認する。最後に、ブラウザの開発者ツールでページに難解な問題がないか確認する

VFでの読み込みするところ

<head>
    //ここに記述
    <apex:includeScript value="{!$Resource.[リソース名]}" />
</head>

VFでのSLDSの使用

<head>
    //ここに記述
    // Design System をインポートします
    <apex:slds />
</head>

VFでのSLDSの適用範囲

   <!-- SLDS 適用範囲ラッパ-->
  <div class="slds-scope">
       // 記述したいものをここに
  </div>

サンプル

<body>
  <!-- SLDS 適用範囲ラッパ-->
  <div class="slds-scope">
      <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>
       <span class="slds-icon_container slds-icon-action-close " title="description of icon when needed">
              <svg aria-hidden="true" class="slds-icon">
                    <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/action-sprite/svg/symbols.svg#close ')}"></use>
              </svg>
              <span class="slds-assistive-text">Account Icon</span>
        </span>
  </div>
  <!-- SLDS 適用範囲ラッパ -->
</body>

まとめ

見るだけじゃ、色々わからないと思う、遊んで見たら、どうでしょう

Memos About Salesforce

Salesforceにハマってたこと！