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    

最近のエントリー

Autodesk FusionとAI連携（MCP）実現できる設計DXの可能性

2026.05.11

Autodesk FusionがMCP（Model Context Protocol）に対応したことで、生成AIがCADを直接操作できる可能性が広がっています。本記事では、Claude DesktopとFusionを連携し、プロンプトによる3Dモデリングや三面図からの3D化、アセンブリ情報の取得を実際に検証しました。現時点では細かな設計意図の指示が必要な場面もありますが、部品情報の抽出や見積・原価計算の自動化など、設計業務と基幹システムをつなぐ新たなDXの可能性が見えてきました。

Autodesk FusionとAI連携（MCP）実現できる設計DXの可能性

春季労使交渉に思う、“ビッグステイ”を選ばれる会社の条件

2026.05.07

春季労使交渉のニュースを見ると、大手企業との賃金差を実感します。今回は、物価上昇率や民間給与実態統計をもとに、当社の平均年収の位置づけを確認しました。転職ではなく、今の会社に留まることを前向きに選ぶ「ビッグステイ」。その選択肢になれる会社であり続けるために、何が必要なのかを考えます。

春季労使交渉に思う、“ビッグステイ”を選ばれる会社の条件

水木しげるさんの戦記を読む｜戦後90年に向けて

2026.04.27

水木しげるさんの戦記や関連著作を5冊読み比べながら、それぞれの本の魅力と心に残った点を紹介します。戦争の過酷さや生き残ったことの重みが描かれる一方で、文章や絵の力によって不思議と「もっと知りたい」と思わされる読書体験が綴られています。戦後90年に向けて、戦争を知らない世代が何を受け取り、どうつないでいくかを考えるきっかけになる内容です。

水木しげるさんの戦記を読む｜戦後90年に向けて

Salesforce のダッシュボードの機能 〜動的ゲージグラフの数式を使った目標値〜

2026.04.24

Salesforceの動的ゲージグラフにおいて、数式を用いた目標値の設定方法を解説します。年間目標から月次目標を算出する基本的な使い方に加え、役職や勤続年数に応じて目標値を変動させる方法を紹介。IF関数や日付項目を活用することで、複数条件に基づいた柔軟な目標設定が可能になります。さらに、カスタムオブジェクトやフローを組み合わせることで、より高度な管理にも対応できる点についても触れています。

Salesforce のダッシュボードの機能 〜動的ゲージグラフの数式を使った目標値〜
過去一覧を見る

カテゴリーリスト

アーカイブ

ブログ内検索

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

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

検 索

Copyright (C) SUNBIT All Rights Reserved.