Memos About SalesForce

Salesforceにハマってたこと!

- About Salesforce Post Blog -

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

つい、LEXに手を出して、

触ってみたです。

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

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

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

探せ!

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

目次

まず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>

まとめ

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