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.11.02

長年続いてきた商習慣や人事制度を、「当たり前」と受け入れていないでしょうか。今回は、IT業界の多重下請け構造と役職定年制度について考えます。技術者を育て、顧客に提供する価値を高めること。当社の取り組みも交えながら、中小企業が生産性向上と賃上げを両立するために、見直すべき課題をお伝えします。

日本の生産性を阻む「当たり前」を見直す

独自の音声入力アプリを作成してみた

2026.10.26

便利な音声入力アプリを、社内のみんなにも使ってほしい。でも、全社員分の利用料を考えると導入をためらってしまう――。そんな課題をきっかけに、AIエージェントを使って独自のアプリを作ってみました。いきなりコードを書かせず、まずは課題と設計を整理することからスタート。実装やテスト、不具合の修正を経て、1日である程度使える形になるまでの進め方を紹介します。「作るか、買うか」を考えるヒントになる開発体験記です。

独自の音声入力アプリを作成してみた

門司港で南極観測船「しらせ」を見学してきました

2026.10.19

南極へ向かう船の中は、どうなっているのでしょうか？14年ぶりに門司港へ寄港した南極観測船「しらせ」の一般公開に行ってきました。間近で見る全長138mの船体の迫力や、甲板・艦橋などの見学を通して、遠い南極での活動がぐっと身近に。街では南極の氷や石の展示、しらせのレシピを使ったカレーも楽しめるなど、寄港を歓迎する催しが行われました。見学で印象に残ったことや、周辺イベントの様子をご紹介します。

門司港で南極観測船「しらせ」を見学してきました

子どもも大笑い、懐かしい物語　プロイスラー作『大どろぼうホッツェンプロッツ』を読み返して

2026.10.13

子どもの頃に親しんだ『大どろぼうホッツェンプロッツ』を、小学2年生の子どもに読み聞かせて再発見した物語の魅力。魔法使いと少年の愉快なやりとり、おいしそうな食べ物、ハラハラさせる描写など、三部作それぞれの味わいを紹介します。懐かしい『セロ弾きのゴーシュ』との再会にも触れながら、親子で一緒に笑い、本のおもしろさを分かち合える今の時間を大切にしたいですね。

子どもも大笑い、懐かしい物語　プロイスラー作『大どろぼうホッツェンプロッツ』を読み返して
過去一覧を見る

カテゴリーリスト

アーカイブ

ブログ内検索

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

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

検 索

Copyright (C) SUNBIT All Rights Reserved.