githubのREADME.mdについて調べたので、qiitaでもできるのかなと思ったらできました。
mdはマークダウンというもので、#や*を使って文字を装飾できます。
h1
- リストだったり。
まぁ、それは置いておいて。本題に入らせてもらいます。
bootstrapの導入方法
- CDN
- ファイルの配置
- yarnをインストール
などで導入できます。
CDNとは コンテンツデリバリーネットワークの略
使ったことがないからよくわからないが、たぶんlinkタグとscriptタグを貼り付けて使うのだと予想する。ただ、ネットが繋がらないと使えないだろうし、バージョンが古くなっていくと使えなくなる可能性があるだろうから、オススメはしない。そこらへんも使う機会があれば調べるとしよう。
ファイルの配置で使う。ファイルをダウンロードしてzipファイルを解凍して、どこかに配置する。
どこかは知らない。app/javascript/webpack内だろうか？ 機会があれば調べるとしよう。
yanrのインストール
yarnというパッケージマネージャでインストールする。
yarnでの導入の仕方を書いていく。
前提
アプリケーションを作成済み
$ yarn add bootstrap #最新版
最新版をインストールできるが、今回は
$ yarn add jquery bootstrap@4.5 popper.js #バージョンとライブラリ指定
で導入する。
popper.jsは詳しくはわからないが
ツールチップやドロップダウンといったポップアップ要素の表示位置をいい感じにしてくれる
jsライブラリ...らしい。
config/webpack/environment.js
const webpack = require('webpack')
environment.plugins.prepend(
'Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery',
Popper: 'popper.js'
})
)
これを追記。
stylesheetsフォルダを作成。
app/javascript/stylesheets
その中に、application.scssを作成。
開いたら以下を記述。
app/javascript/stylesheets/application.scss
@import '~bootstrap/scss/bootstrap';
app/javascript/packs/application.js
#記述
import "jquery";
import "popper.js";
import "bootstrap";
import "../stylesheets/application"
app/views/layouts/application.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
これをlinkからpackに書き直す。
stylesheet_pack_tag
linkだと、app/assetsフォルダを参照する。
packだと、app/javascriptフォルダを参照する。
自作のスタイルシートをapp/javascriptに作成する
app/javascript/自作.css
※「自作」は、わかりやすいようにしているだけ。
実際はstyle.cssとかでOK
app/javascript/packs/application.js
import "自作"
これで反映される。ちなみに、cssは拡張子書かなくてもいいっぽい。
ちなみにjsファイルを、cssファイルと一緒の場所に作成した場合。
import "自作.js"
と拡張子を書く。
app/javascript/stylesheets/自作.css を作成した場合
app/javascript/packs/application.js
import '../stylesheets/自作.css
bootstrap導入や、自作cssの入れ方を忘れ気味なので書いてみました。
つづいて、オマケで自作のjsファイルの導入とjQueryの導入。
importで読み込む場合
さっきチラッと説明しましたが、詳しい導入を書いていきます。
app/javascript/scripts/自作.js
というjsファイルを作った場合は、
app/javascript/packs/application.jsに
import "scripts/自作.js"
と書くことで読みこまれる。
javascript_pack_tagで読み込む場合
例として
app/view/適応させたい.html.erb
<%= javascript_pack_tag '自作' %>
拡張子は書かない。
app/javascript/packs/scripts/自作.js
この階層で作った場合は
<%= javascript_pack_tag 'scripts/自作' %>
という記述になる。
※ javascript_pack_tag を使うことで、記述した特定のページにのみ、適応させられる。
CDNで読み込む
適応させたいviewファイルに記述。
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
全部に適応させたいなら、
app/views/layout/application.html.erb
ここに貼る。
この時、貼る場所は"javascript_pack_tag"より上にはらないと、エラーが出るから注意
application.html.erbのheadタグ内
上から読み込まれ、下にいくにつれてファイルの上書きがされていく。
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
*** 終わりに
今回、ついつい忘れがちな基本を書きました、これでスムーズに導入できるようになる！！