読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:IE11とLighitnig Design System

salesforce.com Lightning

ちょっと前にLightning Design Systemの使い方を確認しようと思ってこんな感じの画面をつくってみました。
f:id:tyoshikawa1106:20151108172424p:plain


自分でCSSを用意せずにこういう画面をつくれるのはすごく便利だなと思っていたのですが、Lightning Design SystemのアイコンはSVGだからIEで表示されないといった話を聞きました。


・・・ということでIEで表示したときどうなるか確認してみました。


こちらがIE11で表示してみたときの画面です。
f:id:tyoshikawa1106:20151108172642p:plain


みごとにアイコン部分が非表示になっています。SVGを利用することってほぼなかったので意識してませんでしたが、まだ未対応のブラウザがあったりするんですね。


検索してみるとこのIEでSVG表示する方法がいくつか見つかりました。一応頑張ればなんとかできそうです。
f:id:tyoshikawa1106:20151108173331p:plain


ここで気になったのですが、Lightning Experienceの標準レイアウトでもDesign Systemが利用されています。そこはどうなっているのかと確認してみました。
f:id:tyoshikawa1106:20151108173631p:plain


Lightning Experienceの標準レイアウトはIEでも大丈夫みたいです。Lightning Design Systemはまだバージョン『0.11.0 』なのでこの先のアップデートで便利な対応方法が追加されるかもしれません。


SVG以外の部分は問題なさそうなので、アイコン表示はioniconsなどのアイコンフォントに変更してしまう方法でも対応できそうです。それからSalesforce1モバイルの方ではSVGでもきちんと表示されたので、S1モバイルアプリの開発では特に気にしなくて大丈夫です。