Salesforce.com Foundationのビジネスアプリケーションチームによって開発されたBootstrap SF1というのがあります。これを利用するとSalesforce1のスタイルを簡単に適用できるのでSalesforce1アプリを開発するときにすごく便利です。
基本的な使い方については以前こちらにまとめてみました。
今回は実際に使ってみて気づいたことについてまとめてみます。Bootstrap SF1は基本的には通常のBootstrapと同じ使い方です。なので次のようにクラスを指定するだけで簡単に見栄えの良いボタンを表示できます。
<button class="btn btn-primary">Reserve another seat</button>
このボタンのクラスを指定するとき『class="btn"』だけでも次のように表示できました。
これはこれでいいんじゃないかなと思ったのですが、この指定方法だとSalesforce1のモバイルアプリで表示した際に正しく表示されませんでした。
class="btn btn-default"やclass="btn btn-primary"というように指定すれば正しく表示されるのでこちらの方法で指定する必要があるみたいです。
こんな感じでPCで見たときとモバイルアプリからみたときで表示の仕方が違うことがあったので、きちんとモバイルアプリからも確認するようにした方がいいみたいです。
もうひとつ気になることがありました。個人的にRemoteObjectsやBootstrapSF1の読み込みなど宣言が長くなるものは別のVFページとして外出しして『apex:includeタグ』で読み込むようにすると共通化できたり、処理がスッキリしたりして良いんじゃないかなと思っています。
しかし、Bootstrap SF1でも同じように処理を書いてみたところ、一部のスタイルが適用されないといったことがありました。
背景色やフォントなど適用されている箇所もあるので、BootstrapSF1の読み込み自体はできていると思われます。静的リソースからJSファイルを読み込む『apex:includeScriptタグ』は問題なく動作したので、別のVFページから読み込むという処理によって影響がでるみたいです。
また、テンプレート用のページを作って共通化できる『apex:compositionタグ』も同様の結果になりました。BootstrapSF1を利用するときにはこれらのタグは利用しないようにしておいた方がいいみたいです。
