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とは、css、javascript、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
Trouble Shooting
Rails Asset Pipelineがうまくいかないときの問題の切り分けかた - Qiita