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

tyoshikawa1106のブログ

- Force.com Developer Blog -

Rails:Bootstrap SF1の読み込みを試してみました

Rails

Bootstrap SF1はSalesforce1風のスタイルを簡単に適用できるBootstrapです。このBootstrap SF1をRailsアプリで読み込んで利用してみました。

Bootstrap SF1


利用するのに必要なファイルはこんな感じです。

<link rel="stylesheet" href="dist/css/bootstrap.css" />
<link rel="stylesheet" href="dist/css/docs.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" />
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" />
<script type="text/javascript" src="js/docs.js" />


BootstrapSF1を利用するにはBootstrap自体が必要になります。これはGemで簡単に用意できます。

gem 'bootstrap-sass', '~> 3.3.5'

Gem編集後の『bundle install』実行や、CSSで『@import "bootstrap"』の宣言も忘れずに行ってください。
f:id:tyoshikawa1106:20150817184129p:plain


Bootstrap SF1のJSとCSSは公式サイトからダウンロードできます。ダウンロードしたら『app > assets』の『stylesheets』と『javascripts』にそれぞれ配置します。
f:id:tyoshikawa1106:20150817190454p:plain


application.html.erbで読み込み処理を宣言します。

<!-- bootstrap sf1 -->
<%= javascript_include_tag "bootstrap-sf1/js/docs.js" %>
<%= stylesheet_link_tag "bootstrap-sf1/dist/css/bootstrap.css" %>
<%= stylesheet_link_tag "bootstrap-sf1/dist/css/docs.min.css" %>

f:id:tyoshikawa1106:20150817190609p:plain


これで読み込み完了です。
f:id:tyoshikawa1106:20150817190736p:plain


font読み込みのエラーが出ますが、そのファイル自体が見当たりませんでした。
f:id:tyoshikawa1106:20150817190825p:plain


ダウンロードしたファイル一式の中に入っているサンプルコードでデモサイトの表示ができるようになっていたので、今回はこれをRailsアプリで動かしていました。
f:id:tyoshikawa1106:20150817225055p:plain


そのときのコードはGitHubにアップしてあります。

デモ動画