【タイピング】タイピング速度を上げてみたくなった
事の顛末
ぼーっとはてブを眺めているとこんな記事が目に入ってきました。
ほほう。
PCを触り始めて十数年、これといったタイピング練習はしてきませんでした。
キーボードを見ながら打てるくらいの技量です。
最近はプログラミングを優先してタイピング練習を後回しにしてきたので少し気になりました。
結論からいうと、写経が速くなるので勉強効率が良くなります。
読んでいて中でも一番身にしみたのはこの一文。
確かに。。。
そんなこんなでタイピング練習をかじってみようかな。
タイピング練習のサービスをみてみる
参照した記事が公開されていたのは2016年。
約3年ほど経っているので改めて自分に合いそうなタイピング練習のサービスがないか探してみます。
typing.io
参照した記事にも載っていたサービスです。
リンクが切れていたのでこちらからどうぞ。
WPM (word per minute : 1分間に打てる文字数)も測れるし、
日本語ではなくプログラミングのタイピング練習ができるのがいいところですね。
さらに、入力を間違えるとバックスペースを入力して削除しなければいけないので、
実際のプログラムを入力している感覚で練習できます！
myTyping
P検タイピング？だったり、歌詞のタイピングだったり、
難易度も様々で誰でもタイピング練習が楽しめそうなサービスでした。
寿司打
みんな知ってる寿司打ですね。
練習用ではないかなって感じなので、
慣れてきたときに打てる速度をシェアしたくなったらこれをやるのがいいかも。
typing.ioやってみた
最終的にはプログラミングの学習に活かそうとして始めたので、
プログラムで練習できるtyping.ioをやってみました！
ブラインドタッチで
WPM12!!!
・・・これはひどい。
エンジニアやっててここまでひどい人はなかなかいないと思います。
まあブラインドタッチできないのに、
意識してやったのでめちゃめちゃ遅くなってしまいました。
いつも通りに
悔しかったので何も意識せずいつも通りにやってみました。
参照した記事を書かれた方と同じ記録のWPM25でした。
せっかくなので自分もWPM50を目指したいなあ。。。
何事も継続
1回やっただけでは何も変わらないので、
今日から飽きるまで続けてみます。
ブログ書くネタにも困らないし。
【React】初心者が勉強するための教材
Reactとは
Facebookが開発した、Javascriptフレームワーク。
DOMの管理が簡単になったそうな。
解説記事は検索すると色々出てくる。
とりあえず教材探してみた
WEBサイト
Reactチュートリアル
非公式だけど、日本語版もあるそうな。
Progate
環境構築しなくて良いのでお手軽。 prog-8.com
書籍
書籍は買っていないが、こちらを参考にできそう。
動画
udemyだといつもセールやってるので、1,200円ほどで勉強できてお得！
（今回はudemyで勉強することにした）
https://www.udemy.com/courses/search/?src=ukw&q=react
Reactを少し理解できたら読んでみようかなという記事
【Markdown】差分表示
差分表示したいときの記法
下記のように書けば・・・
```diff
+ 変更後のコード
- 変更元のコード
変更してないコード
```
こんな感じで表示される。
+ 変更後のコード - 変更元のコード 変更してないコード
ただ、シンタックスハイライトは効かなくなる
言語の定義をする場所に diff を書いているので仕方ない。。。
【CircleCI】CICDの結果通知をSlackに【5分で簡単】
CircleCIの結果通知をSlackに送信させる
Slackにあるアプリを追加するだけで、
CircleCIからの通知を受け取ることができます。
下記ページの Slackに追加 から設定できます。
w1560437954-enn891242.slack.com
通知を受け取るチャンネルの設定
通知するチャンネルを選択して
次に進みます。
セットアップ手順
あとはWEBページ通りに
CircleCIアカウントの方で Webhook URL を設定できれば
通知を受け取ることができます。
実際の通知
こんな感じで通知されます。
ここに表示される名前やアイコンもカスタマイズできるようです。
【Rails6】いま、自動デプロイをしないで、いつしますか？ ~CircleCIからHerokuへ~
ささっとHerokuへ自動デプロイ
こちらの記事の続きです。
諸々の設定はこちらを参考に。
今回はmasterへマージされたときに、
CircleCIがHerokuへ自動デプロイもやってくれるようにするところまでです。
CircleCIの設定
こちらの記事の後半を参考に進めていきます。
config.ymlの修正
.circleci/config.yml にHeroku CLIのインストールと
デプロイ用のプッシュとマイグレートのコマンドを追記します。
HerokuCLIはメンテナンスモードとマイグレートする際に必要です。
# Heroku CLIのインストール
- run:
name: 'Install Heroku CLI, if necessary'
command: |
if [[ $(command -v heroku) == "" ]]; then
curl https://cli-assets.heroku.com/install.sh | sh
else
echo "Heroku is already installed. No operation was performed."
fi
# masterブランチのときHerokuにデプロイ
- deploy:
name: Deploy Master to Heroku
command: |
if [ "${CIRCLE_BRANCH}" == "master" ]; then
heroku maintenance:on --app ${HEROKU_APP_NAME}
git push https://heroku:$HEROKU_API_KEY@git.heroku.com/$HEROKU_APP_NAME.git master
heroku run rails db:migrate --app ${HEROKU_APP_NAME}
heroku maintenance:off --app ${HEROKU_APP_NAME}
fi
Herokuの環境変数を取得
HEROKU_APP_NAME と HEROKU_API_KEY の設定が必要になります。
HEROKU_APP_NAME はHerokuで管理しているアプリの名前で、
デプロイ先を示すことになります。
画像の例だと study-roadmap です。
HEROKU_API_KEY はAccount settingsのAPI Keyから取得できます。
（Revealを押下するとキーを確認できるようになります。）
CircleCIに環境変数を設定
Keyの設定はプロジェクトの Environment Variables から、
Add Variable を選択することで設定できます。
Name は HEROKU_APP_NAME と HEROKU_API_KEYで、
Value には先ほど取得した値を設定します。
masterに プッシュ or マージ して結果を待つ。
これで、masterにプッシュ、マージされた際に自動デプロイされるようになりました。
SUCCESSになればOK。
Herokuにデプロイしたアプリもアクセスして確認します。
終わりに
これで CI/CD できた😂
参考記事
【Rails6】CircleCIでminitestとrubocopを実行【CIしてみる】
はじめに
CircleCIを導入して自動テスト、rubocopを実行してreviewdogでGithub上に出力までを行います。
こちらの記事を参考に進めていきます。
最終的な .circleci/config.yml ファイル
はじめに結果だけ載せておきます。
下記が最終的なCircleCIの設定ファイルです。
あとreviewdogを導入するにあたって、
環境変数の設定も必要です。
設定方法は記事内で説明します。
# Ruby CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-ruby/ for more details
#
version: 2
jobs:
build:
docker:
# specify the version you desire here
- image: circleci/ruby:2.6.4-node-browsers
environment:
BUNDLER_VERSION: 2.0.2
RAILS_ENV: test
REVIEWDOG_VERSION: 0.9.11
working_directory: ~/repo
steps:
- checkout
- run:
name: setup bundler
command: |
sudo gem update --system
sudo gem uninstall bundler
sudo rm /usr/local/bin/bundle
sudo rm /usr/local/bin/bundler
sudo gem install bundler
# Download and cache dependencies
- restore_cache:
keys:
- v1-dependencies-{{ checksum "Gemfile.lock" }}
# fallback to using the latest cache if no exact match is found
- v1-dependencies-
# yarnのインストール
- run: yarn install --check-files
# bundlerのインストール
- run:
name: install dependencies
command: |
bundle install --jobs=4 --retry=3 --path vendor/bundle
- run: bundle exec rake webpacker:compile
- save_cache:
paths:
- ./vendor/bundle
key: v1-dependencies-{{ checksum "Gemfile.lock" }}
# Reviewdogのインストール
- run:
name: Install Reviewdog
command: |
curl -fSL https://github.com/haya14busa/reviewdog/releases/download/$REVIEWDOG_VERSION/reviewdog_linux_amd64 -o reviewdog && chmod +x ./reviewdog
# Database setup
- run: bundle exec rails db:create
- run: bundle exec rails db:migrate
# run tests!
- run:
name: Rails Test
command: bundle exec rake test
# Rubocop & Reviewdogの実行
- run:
name: Rubocop & Reviewdog
command: bundle exec rubocop | ./reviewdog -f=rubocop -reporter=github-pr-review
事前準備
事前に準備することが2点あります。
Githubアカウントの作成
CircleCIではリポジトリを使用するため、Githubアカウントが必要になります。
また、CircleCIのアカウントとGithubのアカウントを連携することになりますので作成しておきます。
CIするリポジトリの用意
CIしたいリポジトリを用意します。
今回はminitestとrubocopを実行してCIしたいので、
事前に設定をしておきました。
リポジトリがない場合はscaffold コマンドでアプリを作成して、
rubocopの設定を追加でしていただければと思います。
Githubと連携したCircleCIアカウントの作成
こちらの公式ページからCircleCIのアカウントを作成します。
Continuous Integration and Delivery - CircleCI
Pricingを選択
無料枠で登録するので、Start Building for Freeを選択
Githubと連携したいので、Sign Up with Githubを選択
アカウントや認証を確認して、Authorize circleciを選択
Githubのパスワードを入力
登録完了！
minitestを実行するための設定ファイルの作成
Add projectsを選択して、CIするリポジトリを選択します。
(今回はstudy_roadmapというリポジトリ)
Linux, Ruby を選択します。
Webページ上での作業はとりあえずここまでで、
次はリポジトリにファイルを追加します。
minitestを実行する設定ファイル
config.yml ファイルとは
このファイルはテスト等を検証するコンテナ環境下で、
何をインストールさせて何を実行させるかを自由に設定できます。
設定したファイル
.circleci/config.yml ファイルを作成します。
今回minitestを実行するまでに設定したファイルが下記になります。
これをconfig.ymlに書き込みます。
# Ruby CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-ruby/ for more details
#
version: 2
jobs:
build:
docker:
# specify the version you desire here
- image: circleci/ruby:2.6.4-node-browsers
environment:
BUNDLER_VERSION: 2.0.2
RAILS_ENV: test
working_directory: ~/repo
steps:
- checkout
- run:
name: setup bundler
command: |
sudo gem update --system
sudo gem uninstall bundler
sudo rm /usr/local/bin/bundle
sudo rm /usr/local/bin/bundler
sudo gem install bundler
# Download and cache dependencies
- restore_cache:
keys:
- v1-dependencies-{{ checksum "Gemfile.lock" }}
# fallback to using the latest cache if no exact match is found
- v1-dependencies-
# yarnのインストール
- run: yarn install --check-files
# bundlerのインストール
- run:
name: install dependencies
command: |
bundle install --jobs=4 --retry=3 --path vendor/bundle
- run: bundle exec rake webpacker:compile
- save_cache:
paths:
- ./vendor/bundle
key: v1-dependencies-{{ checksum "Gemfile.lock" }}
# Database setup
- run: bundle exec rails db:create
- run: bundle exec rails db:migrate
# run tests!
- run:
name: Rails Test
command: bundle exec rake test
test_helper.rb
現状のままだと、CircleCI上でテストの並列処理ができないようでしたので、
下記のように修正しておきます。
gemで並列処理を可能にするものがあるらしいので、
修正予定。
# Run tests in parallel with specified workers parallelize(workers: 1)
リポジトリにプッシュ
タイトルの通り、リポジトリにプッシュします。
CircleCIのWebページに戻って
準備が完了したので、
先ほどのページで start building を実行します。
次のページで SUCCESS と表示されていればOKです。
Githubでプルリクエストを送ってCIする
ここまでの設定でプルリクエストを送ることで、
自動的にCIできるようになっています。
確認だけ行います。
プルリクエストの作成
下記のように新しいブランチを作成して、
プルリクエストを作成します。
# 新しいブランチの作成 $ git checkout -b ci-test # 何かしら編集 $ vim README.md # コミットしてプッシュ $ git add README.md $ git commit -m 'READMEの編集' $ git push origin ci-test
Githubのリポジトリのページにbranchesのページがあるのでそちらに遷移して、
New pull request からプルリクエストを作成します。
CIの実行
あとは待つだけで
Github上でCIの結果が表示されます。
ここまでで、プルリクエストを作成すると 自動的にテストを実行してくれるようになりました。
これによってテストの確認を怠ってプルリクエストがマージされるということが
なくなるはずですので、安全な開発ができます！
rubocopとreviewdogを実行するための設定
rubocop も自動的に実行してくれるようにして、
常に規約を守ったコードをリポジトリで管理できるようにします。
rubocop
コードの規約を守っているかチェックしてくれるツールです。
gem をインストールするだけですぐに終わります。
インストールとコードの修正は
下記の以前書いた記事を参考にしていただければと思います。
reviewdog
チェックツール等の結果をGithubのPull Requestにコメントしてくれるツールです。
こちらを使用してrubocopで警告があった際に、
Github上でコメントしてくれるようにします。
下記が紹介記事とgithubのページです。
設定ファイル
今回はrubocopが既に導入済みの前提ですので、
reviewdogの設定のみ行います。
config.ymlには下記の設定を追加します。
- reviewdogのバージョン指定
- reviewdogのインストール
- rubocopとreviewdogの実行
編集後の config.yml ファイルです。
# Ruby CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-ruby/ for more details
#
version: 2
jobs:
build:
docker:
# specify the version you desire here
- image: circleci/ruby:2.6.4-node-browsers
environment:
BUNDLER_VERSION: 2.0.2
RAILS_ENV: test
REVIEWDOG_VERSION: 0.9.11
working_directory: ~/repo
steps:
- checkout
- run:
name: setup bundler
command: |
sudo gem update --system
sudo gem uninstall bundler
sudo rm /usr/local/bin/bundle
sudo rm /usr/local/bin/bundler
sudo gem install bundler
# Download and cache dependencies
- restore_cache:
keys:
- v1-dependencies-{{ checksum "Gemfile.lock" }}
# fallback to using the latest cache if no exact match is found
- v1-dependencies-
# yarnのインストール
- run: yarn install --check-files
# bundlerのインストール
- run:
name: install dependencies
command: |
bundle install --jobs=4 --retry=3 --path vendor/bundle
- run: bundle exec rake webpacker:compile
- save_cache:
paths:
- ./vendor/bundle
key: v1-dependencies-{{ checksum "Gemfile.lock" }}
# Reviewdogのインストール
- run:
name: Install Reviewdog
command: |
curl -fSL https://github.com/haya14busa/reviewdog/releases/download/$REVIEWDOG_VERSION/reviewdog_linux_amd64 -o reviewdog && chmod +x ./reviewdog
# Database setup
- run: bundle exec rails db:create
- run: bundle exec rails db:migrate
# run tests!
- run:
name: Rails Test
command: bundle exec rake test
# Rubocop & Reviewdogの実行
- run:
name: Rubocop & Reviewdog
command: bundle exec rubocop | ./reviewdog -f=rubocop -reporter=github-pr-review
tokenを作成して、CircleCIの環境変数に設定
reviewdogからgithubのPull Requestにコメントさせるには
権限が必要になります。
githubでtoken作成
権限を証明するtokenをgithub上で作成します。
generate new token を押下して作成ページに行きます。
Noteにtoken作成の目的を入力して、
- publicの場合は
public_repo - privateの場合は
repo
にチェックを入れます。
これでtokenは作成できました。
CircleCIにtokenを設定しなければいけないので、
作成したtokenは控えておいてください。
CircleCIでtokenを設定
プロジェクトの環境変数に先ほど作成したtokenを設定します。
ADD PROJECTSメニューから
CIしているプロジェクト（リポジトリ）を押下
歯車のボタンがあるのでそれを押下
左側のメニューにあるEnvironment Variablesを押下して、
右上のAdd Variableを押下
ポップアップが表示されたら
Name：REVIEWDOG_GITHUB_API_TOKEN
Value："先ほど作成したtoken"
を設定
これでtokenをCircleCIの環境変数に設定することができたので、
reviewdogへの権限の付与は完了です。
わざとrubocopの制約に引っかかってreviewdogの確認
確認のためにrubocopで警告が出されるコードをプッシュします。
インデントを不揃いにしたり、数十行のメソッドにしてみたり、
なんでもいいです。
今回はインデントを不要なところで１つ下げてプッシュしてみます。
下記のように「インデントを揃えて」とGithub上で指摘されたので
reviewdogが正常に動作していることを確認できました。
終わりに
Pull Requestを作成するだけで
自動的にテストとコード規約のチェックを行ってくれるようになりました！
次はCircleCIを使って自動デプロイとかSlackへの通知をやるよ。
知識皆無の状態でとりあえず動くまでをやったので、
コンテナとかCircleCIの勉強してまた修正予定。。。
とても参考になった記事
【CircleCI】CircleCI 2.0からはじめる個人での簡単なCI導入方法 - githubとの連携まで - tweeeetyのぶろぐ的めも
RailsプロジェクトにささっとCircleCI2.0を導入する - Qiita
CircleCI2入門① CirlceCIについて | Yuuの悠々自適Blog
【Git】.gitignoreでどのファイルを除外するか悩んでいませんか？
.gitignoreで悩んだら見るサンプル集
.gitignoreに関するリポジトリの紹介です。
.gitignore リポジトリ
様々な言語やフレームワークごとの.gitignoreがまとまっています！
感動ものですね。
早速、Railsの.gitignoreを参考にしていますが、
すでにRails6に対応しているようです。
gitチートシート
英語ですが、チートシートもありました。
https://github.github.com/training-kit/downloads/github-git-cheat-sheet.pdf
Pro Git
Pro Gitという本も紹介されていました。
とても詳しくGitのことが書かれており、しかも無料ですので、
興味のある方は読んでみるといいと思います。
他にも、動画でのgit紹介やドキュメントに関連サイト...
gitを学びたいならこのサイトで十分。
終わりに
なぜこんな素晴らしい書籍が無料なんだろうか。。。
目指せgitマスター！
【Rubocop】警告を参考にコード修正してみる
Rubocop とは
Rubocopはコード規約をチェックしてくれるライブラリです。
いい感じにコードを統一させてくれるやつです。
さっそくbundlerでインストール
下記がgithubにあるページで、インストールする方法も載っています。
今回はRailsのアプリの想定でインストールします。
インストールはすぐに終わります。
Gemfileに下記を追記。
gem 'rubocop', require: false
そして、Railsアプリのディレクトリに移動した後、ターミナルで
$bundle install
これで終わりです。
ターミナルで $rubocop とするだけでコードをチェックしてくれます。
VSCodeでrubocopをの警告を表示してほしい！ってときは下記の記事を見てね。
Rubocopで警告が出た時の対処法を書き留める
Google翻訳も載せます。
Use nested module/class definitions instead of compact style.
コンパクトなスタイルではなく、ネストされたモジュール/クラス定義を使用します。
こちらの記事に詳しく載っていました。
既存のコードでコンパクトなスタイルのクラスがあり、
あまり修正したくなかったので無視することにしました。
Missing top-level class documentation comment.
最上位クラスのドキュメントコメントがありません。
class の前にコメントを記述しておかないと警告されます。
Prefer single-quoted strings when you don't need string interpolation or special symbols.
文字列の補間や特別な記号が必要ない場合は、単一引用符で囲まれた文字列を優先します。
優先して シングルクォーテーションを使用してくださいという警告です。
rubocopを気にせずコードを書いていると、だいたいこれに引っかかると思います。
無効化している記事をよく見かけます。
Put empty method definitions on a single line.
空のメソッド定義を1行に配置します。
空のメソッドの場合は1行にまとめないといけないようです。
Final newline missing.
最終改行がありません。
ファイルの最終行に改行を入れます。
assumes too much for instance variable '@roadmap_header'
インスタンス変数 '@roadmap_header'が多すぎると想定
わけわかりませんでしたが、下記を見ると納得。
インスタンス変数はクラス内のみで考えて、
値が入れられているはずとか適当に設計してはいけないということですね。
この警告はrubocopと関係ない気がしましたが、紛れ込ませます。。。
Extra empty line detected at class body beginning.
クラス本体の先頭で余分な空行が検出されました。
classとdefの間にあった空行を削除で解決
Extra empty line detected at class body end.
クラス本体の終わりに余分な空行が検出されました。
空行を削除で解決
Add an empty line after magic comments.
マジックコメントの後に空の行を追加します。
コメントの後に空行を追加しておきました。
Align the elements of a hash literal if they span more than one line.
ハッシュリテラルの要素が複数行にわたる場合、それらの要素を整列します。
下記のように汚かったものを、
patch roadmap_edit_path(@roadmap_header), params: { roadmap_header: {
title: "title is title",
roadmap_detail_attributes: {
sub_title: "sub_title",
content: "context",
time_required: ""
} } }
下記のように修正しました。
patch roadmap_edit_path(@roadmap_header),
params: {
roadmap_header: {
title: "title is title",
roadmap_detail_attributes: {
sub_title: "sub_title",
content: "context",
time_required: ""
}
}
}
Use 2 spaces for indentation in a hash, relative to the start of the line where the left curly brace is.
ハッシュ内のインデントには、左中括弧がある行の開始点に対して2つのスペースを使用します。
if文等と同じようなインデントでかけということですね。
上の警告の際に一緒に表示された警告でした。
Trailing whitespace detected.
末尾の空白が検出されました。
不要な空白は削除します。
VSCodeだと拡張機能を入れるとわかりやすくなって便利です。
Do not use space inside array brackets.
配列括弧内にスペースを使用しないでください。
不要なスペースがあったので削除します。
[ :request_id ]
[:request_id]
Extra empty line detected at module body beginning.
モジュール本体の先頭で余分な空行が検出されました。
余分な空行は削除します。
Use %i or %I for an array of symbols.
シンボルの配列には％iまたは％Iを使用します。
シンボルの配列は%記法を用いて記述します。
あまり%記法は好きではなかったので無効化しました。
%記法にすると配列の種類も細かく分けることができて、
grepするときに便利なのかなと思いました。
必要だと感じたら有効化して修正しようと思います。
Space missing after colon.
コロンの後にスペースがありません。
ハッシュの配列のところで警告されたのでスペースを追加しました。
あまり書かれていない Rubocop の豆知識
C: Style/StringLiterals: Prefer single-quoted strings when you don't need string interpolation or special symbols.
と警告があったときに Style/StringLiterals の部分を .rubocop.yml ファイル内で下記のようにしてあげると警告自体を無視できるようです。
Style/StringLiterals: Enabled: false
覚えておくとパッと.rubocop.ymlに記述して無効化できるので便利そう。
(Enabled 以外にもオプションはありそうなので気になったら要チェック)
色々記事見てたけど気づかなかった。。。
Rails Copsについて
Rails用の規約チェックが以前はできたのですが、
別のgemに分けられたようです。
rubocop-rails gemはこちら
今回作成した.rubocop.yml
最終的な.rubocop.ymlファイルです。
参考にどうぞ
require:
- rubocop-rails
AllCops:
# 除外するディレクトリ（自動生成されたファイル）
# デフォルト設定にある"vendor/**/*"が無効化されないように記述
Exclude:
- bin/*
- db/schema.rb
- db/migrate/*
- vendor/**/*
- node_modules/**/* # node_modules配下のフォルダを除外
- tmp/**/*
- public/**/*
- Gemfile
TargetRubyVersion: 2.6.4
# classのドキュメントコメントを無効
Style/Documentation:
Enabled: false
# ダブルクォーテーション、シングルクォーテーションの制限無効
Style/StringLiterals:
Enabled: false
# コードの長さの制限無効
Metrics/LineLength:
Enabled: false
# 日本語のコメントを許可する
Style/AsciiComments:
Enabled: false
# !! のイディオムは積極的に使う
Style/DoubleNegation:
Enabled: false
# 明示的に else で nil を返すのは分かりやすいので許可する
Style/EmptyElse:
EnforcedStyle: empty
# 条件式の方を意識させたい場合には後置の if/unless を使わない方が分かりやすい
Style/IfUnlessModifier:
Enabled: false
# 1_000_000 と区切り文字が 2 個以上必要になる場合のみ _ 区切りを必須にする
Style/NumericLiterals:
MinDigits: 7
# * 式展開したい場合に書き換えるのが面倒
# * 文章ではダブルクォートよりもシングルクォートの方が頻出する
# ことから EnforcedStyle: double_quotes 推奨
# Style/StringLiterals:
# EnforcedStyle: double_quotes
# 20 行超えるのは migration ファイル以外滅多に無い
Metrics/MethodLength:
Max: 20
Exclude:
- "db/migrate/*.rb"
# クラスの行数が多すぎる
ClassLength:
Enabled: false
# メソッドの行数が多すぎる
MethodLength:
Enabled: false
# Frozenのコメント
Style/FrozenStringLiteralComment:
Enabled: false
# ネストなスタイルとコンパクトなスタイルのクラス両方を許可
# (既存のコードをあまり触りたくない)
Style/ClassAndModuleChildren:
Enabled: false
# シンボルの配列は%記法を用いなくてもよい
Style/SymbolArray:
Enabled: false
終わりに
開発初期からrubocop入れておけばよかったと後悔。。。
【Rails6】Bootstrapテンプレートを適用してみた
はじめに
Rails6でポートフォリオサイトを開発しています。
デザインをどうしようかなと考えているときに、
Bootstrapテンプレートを使用すれば簡単におしゃれなサイトを作れると見かけました。
そんなこんなでBootstrapテンプレート適用します。
Bootstrapテンプレート
まずBootstrapを簡単に説明すると、
容易にサイトのデザインを整えてくれる
フロントエンドのフレームワークです。
cssとかいじらなくても、少ない知識で良さげなデザインにできるんですね。
さらにBootstrapテンプレートでは
Bootstrapを使用してほぼ完成されたデザインが提供されているということですね。
自分のサイト用に修正は必要ですが、デザインを考える手間を考えるとめっちゃ便利。
そもそも自分で考えてもおしゃれにできませんし。。。
Bootstrapについては下記のサイトなんかも参考にすると良いかもしれません。
Bootstrapテンプレート適用の手順
テンプレートをダウンロードしてファイルを開けば、
完成されたWEBページを確認することができます！
が、今回はRails6に合わせて適用することが目的ですので、
Railsのルールに合わせるっていうところが結構手間でした。
あとフォントと一部のjsはエラーのままで修正することができませんでした。。。
しかし、デザインはなんとか適用できたのでそれまでの手順を残しておきます。
Bootstrapテンプレートのダウンロード
今回はめちゃんこおしゃれな下記のテンプレートを使用します。
画像の赤枠のところからダウンロードできます。
ファイルはこんな感じになってます。
cssフォルダを配置
ダウンロードした css フォルダを丸々 app/assets/stylesheets/ 配下にコピペします。
下記のフォルダ構成になります。
app/assets/stylesheets/css
jsフォルダを配置
次にjs フォルダを丸々 app/javascript/ 配下にコピペします。
jsはRails6以前のフォルダ構成と違っているので設置場所に注意しないといけないです。
下記のフォルダ構成になります。
app/javascript/js
imgフォルダを配置
imgフォルダを public/ 配下にコピペします。
下記のフォルダ構成になります。
public/img
fontawesomeのインストール
fontawesomeを使用するため、gemのインストールを行います。
Gemfileに下記を記述して、
gem 'font-awesome-rails'
bundleでインストールします。
$bundle install
使用ファイルの設定
cssとjsフォルダのファイルとfontawesomeは使用するための設定が必要なようです。
下記の記述を追記してください。
↓見づらいですが、ドラッグすると見えます。。
app/assets/stylesheets/application.scss
@import "css/bootstrap.min"; @import 'css/mdb.min'; @import 'css/style.min'; @import "font-awesome";
app/javascript/packs/application.js
require("js/jquery-3.4.1.min")
require("js/popper.min")
require("js/bootstrap.min")
require("js/mdb.min")
あとは...
作業の記録を残していなかったので曖昧ですが、
headタグのcssの読み込みやbodyタグの最後の方にあるscriptタグの中身で
使用しないものを消すとエラーも消えていたとはずです。
これで一部を除いてOK
一応デザインは完成しました！ 動画等を変えて少し修正しました。
一部エラーが残っています。
chromeの開発者ツール（F12キー）で確認できます。
(警告の部分は改修しているうちに出てきた模様)
参考にした記事
https://coliss.com/articles/build-websites/operation/work/material-design-for-bootstrap4.html
終わりに
作業記録を逐一残しとくの大事。
