Salesforceが新しく公開したCSS Framework、Lightning Design Systemをさわってみました。Lightning Experienceスタイルのページを開発するときに便利そうです。
Topページの『Get Design System』ボタンをクリックするとダウンロードページを表示できます。ここから必要なCSSファイルなどをダウンロードできるみたいです。
ダウンロードしてみたところこんな感じのファイルが用意されていました。
もう一つのボタン、『Read Tutorials』ボタンをクリックするとGetting Startedのページを表示できました。
VisualforceとLightning Componentのリンクが用意されているのですが、Visualforceリンクの方では未管理パッケージのリンクが公開されていました。
パッケージ内に入っているコンポーネントを確認してみると静的リソースが1つだけ入っていました。サンプルコードではなくLightning Design Systemに必要なファイルをすぐに用意するためのパッケージみたいです。
Lightning Design Systemでどんなことができるかを確認してみたところいろいろなコンポーネントが用意されていました。
どのように表示されるかとサンプルコードを確認できるようになっています。
サンプルコードで使い方がなんとなくわかったので、とりあえずHerokuとRailsアプリの環境で試してみました。画像の表示などちょっとうまくいっていないのですが、ざっくり動作確認ができました。
次のCSSファイルを読み込むことで利用できるみたいです。
SLDS080/assets/styles/salesforce-lightning-design-system.min.css
次はSalesforceのLightning Componentで試してみたいと思います。Lightning Design Systemですが、TrailheadにTutorialが用意されています。まだ確認していないのですが、より詳しい使い方を確認できると思います。
追記
Lightning Componentの前にVisualforceで試してみました。上のRailsでつくったサンプルよりもきちんとできていると思います。
追記の追記 (2015/8/31)
Lightning Component版も作成できました。
