Blog

BLOG

2018.01.09

Visualforce をLightning Experience 風のスタイルに ～ LightningStylesheets 属性～

Tweet

こんにちは。クラウドソリューショングループのエンジニアの高尾です。

2015年にForce.com プラットフォームの新たなユーザインターフェース（以下「UI」）として「 Lightning Experience（以下「LEX」）」が発表されました。

発表当初からすると最近ではずいぶんと機能が充実してきており、従来のUI（= Salesforce Classic ）と遜色ないぐらいに使えるようになってきています。

そのような状況からこのところ弊社の既存のお客様からちらほらとLEXで Salesforce を使いたいという要望を頂くようになりました。

ただし、そのためにはいくつか乗り越えなければならない問題があり、その中の一つとして独自開発した Visualforce はそのままではLEX風のUIにならないという点があります。

当然HTMLとStyleSheetを駆使してLEXに最適化された Visualforce とすることは可能ですし、「 Lightning Design System 」というLEXで使われているCSSフレームワークも存在しますが、いずれにしても対応にはそれなりの工数が必要となり、お客様へその工数をご負担頂くことも難しいため、弊社でも頭を抱えておりました。

そのような時に Salesforce プラットフォームにWinter18のアップデートが適用され、β版ではありますが新機能として、既存の Visualforce をLEX風のスタイルに変換してくれる機能が追加となりました。

設定方法は非常に簡単で、「ApexPage」タグにて「LightningStylesheets="true"」の属性を追加するだけです。

以下は実装例です。
単純に取引先の詳細画面を表示するだけの Visualforce 画面です。

LightningStylesheets 属性追加前

ソース

LightningStylesheets属性追加前のソース

※クリックすると拡大します

画面

LightningStylesheets属性追加前の画面

※クリックすると拡大します

LightningStylesheets 属性追加後

ソース

「ApexPage」タグにて「LightningStylesheets="true"」の属性を追加します

※クリックすると拡大します

画面

LightningStylesheets属性追加後の画面

※クリックすると拡大します

β版ということもあって日付項目が正しく動作しないなど問題もあるようですが、個人的には既存のお客様にも気軽にLEXのUIをご利用頂けるように早く正式リリースとなればと心待ちにしています。

ユーザからの要望はどのように伝わる？

Salesforce のカスタマーコミュニティ（ IdeaExchange ）では、ユーザからの要望を投稿できるようになっていて広くアイディアを募集しています。
他のユーザが投稿した要望に『いいね！（賛同）』することで機能追加されやすくなるようです。

・IdeaExchange
http://successjp.salesforce.com/ideaexchange/

最後に

今回ご紹介しました通り、Salesforce では、年に3回行われるバージョンアップで毎年100以上の新機能が追加されています。エンドユーザからの要望のあるものは続々とリリースされ、常に進化し使い勝手の良いサービスとなっております。

Salesforce 技術関連記事

一緒に開発しませんか？

サンビット株式会社では、Salesforce によるクラウドシステム構築の開発技術者を募集しています！
興味のある方はぜひお問い合わせください。

Salesforce お役立ち/TIPS記事

  • by サンビット株式会社
  • 08:55

カレンダー

«1月»
日 月 火 水 木 金 土
 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31    

最近のエントリー

新春から晴れやかな気持ちに－「世界秩序が変わるとき」－を読みおえて

2026.02.02

年末年始に読了した「世界秩序が変わるとき」を通じ、新自由主義の終焉と国家主導・地政学重視の新たな世界秩序への転換を考察します。覇権国家アメリカの立場を踏まえつつ、日本が「失われた30年」で培った現場力や組織力が、いま再評価される可能性に着目。世界のパラダイムシフトを前向きに捉え、日本の未来に希望を見いだす内容です。

新春から晴れやかな気持ちに－「世界秩序が変わるとき」－を読みおえて

炊飯器の買い替え｜メーカーから機種選びまで

2026.01.26

10年使った炊飯器が大きな故障はないものの、水漏れや炊き上がりの変化などから寿命を意識し、買い替えを検討。ネット検索では情報過多に戸惑い、家電量販店で最新事情を確認する流れを選びました。メーカーは保温性能と使い慣れた考え方を重視し、象印マホービンを継続候補に。価格帯や世代差、型落ち上位モデルの魅力を整理し、価格推移を見ながら最適な購入タイミングを探っています。

炊飯器の買い替え｜メーカーから機種選びまで

Salesforce のダッシュボードの機能 〜動的ゲージグラフの設定方法〜

2026.01.23

ダッシュボードの目標管理を、もっと効率的に行いたい方におすすめの記事です。Salesforceの「動的ゲージグラフ」は、ユーザーやレコードの項目を目標値として参照できるため、複数のダッシュボードで同じ目標を使っている場合でも、元データを一か所更新するだけで反映される点が特長です。具体的な仕組みから具体的な作成手順、活用時のポイントまでを分かりやすく解説しています。KPI管理や目標達成率の可視化に役立つ内容となっております。

Salesforce のダッシュボードの機能 〜動的ゲージグラフの設定方法〜

"寝る"以外の科学的な休養法

2026.01.19

疲れたときは「寝る」だけで十分だと思っていませんか？本記事では、科学的な視点から休養を7つのタイプに分類し、運動や人との交流、環境の変化など、行動することで回復につながる方法を紹介しています。自分に合った休養の取り方を知り、日々の疲労と上手に付き合うためのヒントをお届けします。

"寝る"以外の科学的な休養法
過去一覧を見る

カテゴリーリスト

アーカイブ

ブログ内検索

採用情報
マイナビ転職でサンビットページをみる

  1. TOP
  2. BLOG
  3. Visualforce をLightning Experience 風のスタイルに ～ LightningStylesheets 属性～

検 索

Copyright (C) SUNBIT All Rights Reserved.