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

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Visualforce開発でBootstrapを使う方法

Visualforceページの開発でBootstrapを使おうとするとSFDCの標準スタイルに干渉してしまう問題があります。この問題を解決できるのがVisualStrapです。


その後、同じようなライブラリでBoostrap SF1が2014年10月頃に公開されました。これはPC向けの画面をつくるためではなく、Salesforce1モバイルアプリケーション向けのVisualforceページ開発で利用するためのものです。


どちらも便利なライブラリですが独自タグが必要なったりするので、普通にBootstrapを利用するときとは勝手が違う部分があったりします。そのあたりの問題を解決する方法も2015年03月頃に公開されています。


『Salesforce Namespacer』です。これをつかうとBootstrapのCSSに任意のプレフィックスを簡単に追加することができます。


今、Visualforceページの開発でBootstrapを利用したい場合はSalesforce Namespacerをつかってプレフィックスを追加したCSSを用意するのが一番いいと思います。

VisualforceでBootstrapを利用する

Salesforce NamespacerでBootstrapのCSSを取得する

  1. Enter CSS URLでBootstrapのバージョンを指定できます。
  2. Enter Namespaceでプレフィックス名を指定できます。
  3. SubmitでCSSを出力できます。

f:id:tyoshikawa1106:20160924154143p:plain


出力結果はこんな感じです。きちんとプレフィックスが追加されていることを確認できます。(先頭のコメント部分にも追加されてしまっていますが、そこだけ除外すれば問題ありません。)
f:id:tyoshikawa1106:20160924154653p:plain


これでプレフィックス付きのBootstrapのCSSが手に入りました。
f:id:tyoshikawa1106:20160924155257p:plain


あとはBowerなどでBootstrapのファイル一式をダウンロードし、bootstrap.cssを先程のCSSで上書きします。
f:id:tyoshikawa1106:20160924155730p:plain


これを静的リソースにアップロードすれば利用準備完了です。
f:id:tyoshikawa1106:20160924155953p:plain

動作確認

次のコードで確認してみます。
f:id:tyoshikawa1106:20160924161513p:plain


無事にSalesforceの標準スタイルに影響をあたえずにVisualforceでBootstrapのCSSを適用できました。Glyphiconsも正しく表示できています。
f:id:tyoshikawa1106:20160924161404p:plain

サンプルコード(Gist)