bootstrapのadminテンプレートadminLTEを手動でrails 5.1のアプリに導入

1.Bootstrapテンプレートを手動で組みこむ際の手順

How to integrate custom bootstrap theme in Rails - Viblo       <= Tutorial

① zipファイルをダウンロード。

② rootディレクトリに配置されているhtmlファイル(adminLTEはstrater.htmlで実施)を適用させたいファイルに一回移す

③ htmlファイルの上部に読み込まなければならないcssファイル、下部jsファイルがある。それらをがんばってインストールする(ここが一番大変)

 

2. 今回

今回はusersコントローラーに対するviewのみ、admin画面にしたかった。自分が実施した際に身に着けた順を時系列に表示する

・view/layouts/application.html.erbはデフォルトで指定されるview画面である。controllerに対してviewを変更したいときは、<controller名>.html.erbで変更できる。

・Asset Pipelineについて

  ・Asset Pipelineとは、cssjavascript、imgをコンパイル時にそれぞれ一つにまとめる仕組み。あと、sassやcoffeeなどの高級な言語も使えるようになる。

仕組み:css(.scss, .css)+js(.coffee, .js)+.erb => assetsconfig/manifest.js(設定ファイル=> sprocketsでコンパイル、最小化

  ・プリプロセッサについて:sprocketsは拡張子を右から左に読み、ファイルを変換する。そのため、css.scss.erbはerb~> scss~> cssに変換され、最終的にcssファイルになる。つまり、erb.scssという書き方はscssに変換された後rubyファイルは読まれないので、できない。(scss.cssは大丈夫なのかな、、??)

  ・大前提:assetとは、webアプリケーションの直接レスポンス以外の構成要素(javascript, css, img)。

  ・大前提2:外部のasset filesはapp/assetsかlib/assetsかvendor/assetsに配置しなければならない。

  ・大前提3:どのassetをインクルードするかという命令をdirectiveといい、それらは手動でmanifest fileに自分で書かなければならない。cssのmanifest fileは、app/assets/stylesheet/application.js、jsはapp/assets/javascripts/application.jsに記述する。

  ・コントローラ毎に異なるmanifestファイルが必要だったら、applicsion.js/cssがと同じディレクトリに<name>.css/scss/jsファイルを作る。

  ・マニフェストファイルはcssかscssかにより書き方が違う。上から下に読まれていくので記述する順番も重要(今回の例は省略する)。

  ・尚、必要なライブラリがgemによってインストールされている場合、sprocketsはライブラリを探しその全ての機能が使えるindex.htmlファイルを見つける。よって、@import bootstrapなどの記述が可能。

  ・マニフェストファイルは読み込みたいhtmlファイルに記述することによって読み込まれる。css/scssは、<%= stylesheet_link_tag '<manifest file、拡張子は省略>', media: 'all', 'data-turbolinks-track': 'reload' %> 、jsは、<%= javascript_include_tag '<manifest file 拡張子は省略>', 'data-turbolinks-track': 'reload' %>。

 

参考記事

[Ruby入門 Rails5編] 05. アセットパイプラインでフロントエンドのリソースを管理する - Qiita

アセットパイプライン | Rails ガイド

Trouble Shooting

Rails Asset Pipelineがうまくいかないときの問題の切り分けかた - Qiita