2020-07-13

Rails の View(ERB) でカスタムデータ属性を設定したい時の方法

Rails の ERB で View のコードを書いている時にカスタムデータ属性( custom data attributes )を使いたい時がある．

developer.mozilla.org

HTML なら素直にdata-*という形式で書けば良いが， Rails ではどのように書くかを調べてみても中々見つけられなかった．

そんな中，幸運にもチームメンバーが知っており，設定方法を教えてもらったため今回はそれについてまとめておく．

設定方法

例えばdata-delayというカスタムデータ属性を作りたい場合，ERB では以下のように data: { delay: 属性名 } という形式で書けば良い．今回の場合はdata-delayという属性を設定した場合を記述する．

<%= image_tag('', alt:'テスト画像', data: { delay: image_path('hoge/test.png') }) %>

ブラウザで確認すると以下のようになる．

<img alt="テスト画像" data-delay="/assets/hoge/test-2nlgadihfdnkddvhiwdkwuiwjjkgiwl3dnfl57398482737dlfowpsjdhfgsa.png" src="/assets/hoge/test-2nlgadihfdnkddvhiwdkwuiwjjkgiwl3dnfl57398482737dlfowpsjdhfgsa.png" class="test-class">

まとめと所感

今回は Rails の View(ERB) でカスタムデータ属性の設定方法についてまとめてみた．内容はめちゃくちゃ小ネタではあったが，しばらく経ってからまたカスタムデータ属性を設定したい時に「アレ？どうやるんだっけ？」となりそうなので，この記事は今後ちょくちょくチェックしそうな気がする．

追記

もっとよく調べてみたら，Rails の API ドキュメントに例がちゃんと書いてあった．こちらの TechRacho の記事経由で Rails の APIドキュメントを見つけることができた． techracho.bpsinc.jp

api.rubyonrails.org

2020-07-06

「Pesticide for Chrome」を使って CSS のレイアウトのチェックをする

CSS Chrome 拡張機能 HTML Vue.js

「Vuetify.js」のキャッチアップをしている過程で，どうやら「CSS Flexbox」のキャッチアップも必要だと思い，進めているのですが CSS が崩れているかのチェックや実際はどのようなレイアウトでスタイルされているのかを確認するのが少し面倒になってきました...

そこで良い感じなツールが無いかを探してみた所，「Pesticide for Chrome」がどうやら便利そうだとわかったため今回はこの拡張機能についてまとめていきます．

使い方

とても簡単です．まずはここからインストールをします．

chrome.google.com

CSS のレイアウトのチェックをしたいページにアクセスします．今回は私のブログのページを対象にします． https://bake0937.hatenablog.com/archive

この虫マークを押すと...

f:id:bake0937:20200706135220p:plain

こんな感じで線が表示され，どのように CSS が当たっているのかがわかります！！！

f:id:bake0937:20200706135326p:plain

Dev ツールを併用すればクラス名も表示されるので，見たいスタイルを Pesticide for Chrome で明確にした上で確認できるようになりました．

f:id:bake0937:20200706135448p:plain

まとめと所感

今回は Pesticide for Chrome を使って CSS のレイアウトのチェックをする方法についてまとめました．いやぁ...そもそも今まで Float で CSS を書いていたのにいつの間にか CSS Flexbox や CSS Grid Layout など色々なレイアウト手法なんてあったんですね．最近やっと気が付きました...(というより，今まであまり意識していなかったというのが合ってそうですが...)

Rails の View をちょこちょこメンテする日々が続いていて，HTML や CSS の書き方が少し抜けてきたのを実感しているためこちら書籍を読んで復習し直してます．指示書に従ってコーディングする本とのことで実践的だと思い，買ってみました．

通しでやってみて，良さそうな本だったら書評を書こうと思います．

ep.ebisu.com

2020-06-29

Gitlab gem で GitLab API を使ってみる

GitLab Ruby GItLab API gem

趣味で GitLab も使ってみているのですが，GitLab API を使って issue やプルリクエストを Slack に通知したいなぁとふと思いました．

そこで octokit.rb のようなライブラリが GitLab にないかなぁと探してみたらやはりあるもんなんですね．今回は Gitlab gem の使い方についてまとめてみようと思います．

github.com

使い方

簡単に触ってみたのでこんなプロジェクト構成です．今回はプロジェクトにある issue を取得しようと思います．

gitlab-api-sample
├── .env
├── .gitignore
├── Gemfile
├── Gemfile.lock
└── app.rb

Gemfile

# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem 'gitlab'
gem 'dotenv'

.env

GITLAB_TOKEN='GitLab のパーソナルアクセストークン'
GITLAB_PRIJECT_ID='GitLab のプロジェクトID'

.gitignore

.env

app.rb

require 'dotenv'
require 'gitlab'
Dotenv.load

Gitlab.configure do |config|
  config.endpoint       = 'https://gitlab.com/api/v4'
  config.private_token  = ENV["GITLAB_TOKEN"]
end

puts issues = Gitlab.issues(ENV["GITLAB_PRIJECT_ID"], { labels:'Today,緊急', state:'opened' }).inspect

Gitlab gem で何ができるのかが下記のドキュメントをご確認ください．

www.rubydoc.info

ただ，上記のコードにあるように特定の Label がついた issue を取得する方法を理解するのに少し詰まりました．今回は使った issues のドキュメントはこちらになるのですが，Label の条件をどうやって追加するのかがパット見でわかりません．しかし，よく見てみるとドキュメントに以下の記述とコードがあります．

Parameters:

project (Integer, String) (defaults to: nil) — The ID or name of a project.

options (Hash) (defaults to: {}) — A customizable set of options.

# File 'lib/gitlab/client/issues.rb', line 20

def issues(project = nil, options = {})
  if project.to_s.empty? && project.to_i.zero?
    get('/issues', query: options)
  else
    get("/projects/#{url_encode project}/issues", query: options)
  end
end

どうやらoptionsに query を設定できることがわかります．

`query` ってどう書くの？

さて，そこで query はどう書くの！？という話になるのですが色々調べたり試してみた所，どうやら公式の Issues API にヒントがありました．

docs.gitlab.com

〜省略〜
GET /issues?labels=foo,bar
〜省略〜

どうやら，labelsというのをqueryとして利用すれば良さそうであることがわかります．

app.rbを改めて載せると下記のように Label の条件はハッシュで書くことで取得できます．stateなど他の条件もハッシュで書いていきます．

app.rb

require 'dotenv'
require 'gitlab'
Dotenv.load

Gitlab.configure do |config|
  config.endpoint       = 'https://gitlab.com/api/v4'
  config.private_token  = ENV["GITLAB_TOKEN"]
end

# Labelの条件は hash の形式で書く
puts issues = Gitlab.issues(ENV["GITLAB_PRIJECT_ID"], { labels:'Today,緊急', state:'opened' }).inspect

実際に実行すると下記のようになります．

gitlab-api-sample - [master●] » bundle install                                                    2020/06/29 19:54:11 
Using bundler 2.1.4
Using dotenv 2.7.5
Using mime-types-data 3.2020.0512
Using mime-types 3.3.1
Using multi_xml 0.6.0
Using httparty 0.18.1
Using unicode-display_width 1.7.0
Using terminal-table 1.8.0
Using gitlab 4.15.0
Bundle complete! 2 Gemfile dependencies, 9 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
gitlab-api-sample - [master●] » ruby app.rb
〜ここに label が Today, State が opened の issue 表示される〜

まとめと所感

今回は Gitlab gem で Ruby で GitLab API を使ってみたことについてまとめてみました．今回を通して Gitlab gem で簡単に GitLab API を使えることがわかったのに加えて，queryの書き方を調べたことで，この手のライブラリの読み方についてさらにわかったきたように思いました．

API のドキュメントって読むのに少し慣れが必要だと前々から何となく思っていて，今回を通してほんの少し成長した気がします笑

今作っているツールも出来上がり次第，ブログに書いていこうと思います！！！

2020-06-22

octokit.rb を使ってコミットハッシュに紐付いたプルリクエストを取得する

octokit git GitHub GitHub API Ruby

最近，業務でコミットハッシュ( SHA-1 )に紐付いたプルリクエストを取得する方法が無いかを探していて，意外と苦労していました．

ローカルリポジトリにある git の commit の sha またはブランチ名を利用して，プルリクエストの番号って取得できないかなぁ...
GitHub API のドキュメント見てもそれらしいものが無さそうな感じなんだよなぁ...なんか方法無いだろうか...
— okabeeeat (@okabeeeat) 2020年6月20日

もう駄目かなぁと思ったのですが，何とか方法を見つけたので今回はその方法についてまとめていきます・

やり方

探してみた結果，どうやらGitHub の「List pull requests associated with a commit」という API を使えば良いことがわかりました．

developer.github.com

注意点としてはこの API はプレビュー版のため，APIをリクエストする時に以下の Accept ヘッダーを追加する必要があります．

application/vnd.github.groot-preview+json

こんな感じで curl で叩けば取得できます．

$curl https://api.github.com/repos/ユーザ名/リポジトリ名/commits/コミットハッシュ/pulls -H "Accept: application/vnd.github.groot-preview+json"

[
  {
    "url": "https://api.github.com/repos/ユーザ名/リポジトリ名/pulls/コミットハッシュに紐付くプルリクエストの番号",
〜省略〜

octokit.rb を使う場合

octokit.rbを使って取得することもできます．あくまでサンプルですが既にプルリクエストが作られているプロジェクトに次のようなコードを追加をすれば，取得できます．

※octokit.rb のバージョンは v4.15 以上にする必要があります．

以下， sample プロジェクトにコードを追加した場合としています．

sample/.env

GITHUB_REPOSITORY='ユーザ名/リポジトリ名'
GITHUB_PERSONAL_ACCESS_TOKEN='アクセストークン'

sample/Gemfile

gem "octokit", "~> 4.18"
gem 'dotenv'

sample/sample.rb

require 'dotenv'
require 'octokit'
Dotenv.load

octkit_client = Octokit::Client.new(:access_token => ENV['GITHUB_PERSONAL_ACCESS_TOKEN'])

begin

  puts octkit_client.commit_pulls(ENV['GITHUB_REPOSITORY'], proc { `git rev-parse HEAD`.chomp }.call, accept: ::Octokit::Preview::PREVIEW_TYPES[:commit_pulls]).inspect
rescue Octokit::UnprocessableEntity
  puts 'commitを push していない, またはプルリクエストを作っていなければ error になります'
rescue => e
  puts e
end

Accept ヘッダーはoptionとして accept: ::Octokit::Preview::PREVIEW_TYPES[:commit_pulls] 追加すればできます．

参考: rdoc.info

実行

$sample - [sample-brunch] » bundle install
$sample - [sample-brunch] » ruby sample.rb
〜ここにレスポンス結果が表示される〜

まとめと所感

今回は octokit.rb を使ってコミットハッシュに紐付いたプルリクエストを取得する方法についてまとめみました．この内容についての文献があまりなかったのが少し不思議ではありました(こういうことやりたいのは自分だけってことなのかな😅)

こんなことをやりたかった理由についてなのですが，これについては業務で取り組んでいることが終わったタイミングでまたブログに書こうと思います(あともう少し！！！)．

2020-06-15

create-nuxt-app した Nuxt プロジェクトに Prettier を入れたら VSCode のフォーマット機能と競合した時の対応

Vue.js VSCode Nuxt.js Prettier トラブルシューティング

個人開発で create-nuxt-app で Nuxt プロジェクトを作成したのだが，Prettier と VSCode のフォーマット機能が競合した．

おそらく，最初に通る道なんだろうなと思ったが，意外とと対応方法がわかるのに時間が掛かったのでまとめてみる．

前提

VSCode に「vetur」という拡張機能が入っていること
VSCode の設定でeditor.formatOnsaveがオンになっていること

marketplace.visualstudio.com

何となくデフォルトで作成される.vueファイルを見た後，いつもの癖で保存する． f:id:bake0937:20200614191710p:plain

コミットすると，lint-stagedで引っかかることに気づく．

» git commit -m "fix"                                                                                                                                                2020/06/15 19:17:34 
husky > pre-commit (node v12.18.0)
✔ Preparing...
⚠ Running tasks...
  ❯ Running tasks for *.{js,vue}
    ✖ yarn lint [FAILED]
  ✔ Running tasks for *.{css,vue}
↓ Skipped because of errors from tasks. [SKIPPED]
✔ Reverting to original state because of errors...
✔ Cleaning up... 

✖ yarn lint:
error Command failed with exit code 1.
$ eslint --ext .js,.vue --ignore-path .gitignore . /Users/okabeeeat/projects/nuxt_project/layouts/default.vue /Users/okabeeeat/projects/nuxt_project/layouts/error.vue

/Users/okabeeeat/projects/nuxt_project/layouts/default.vue
  3:25  error  Replace `·v-model="drawer"·:mini-variant="miniVariant"·:clipped="clipped"·fixed·app` with `⏎······v-model="drawer"⏎······:mini-variant="miniVariant"⏎······:clipped="clipped"⏎······fixed⏎······app⏎····`    prettier/prettier
  5:21  error  Replace `·v-for="(item,·i)·in·items"·:key="i"·:to="item.to"·router·exact` with `⏎··········v-for="(item,·i)·in·items"⏎··········:key="i"⏎··········:to="item.to"⏎··········router⏎··········exact⏎········`  prettier/prettier

/Users/okabeeeat/projects/nuxt_project/layouts/default.vue/nuxt.config.js
  86:12  warning  'config' is defined but never used. Allowed unused args must match /^_/u  @typescript-eslint/no-unused-vars
  86:20  warning  'ctx' is defined but never used. Allowed unused args must match /^_/u     @typescript-eslint/no-unused-vars

✖ 4 problems (2 errors, 2 warnings)
  2 errors and 0 warnings potentially fixable with the `--fix` option.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
husky > pre-commit hook failed (add --no-verify to bypass)

原因は，改行していないことによる error で VSCode で自動修正する．そして保存したらまた自動修正する前の状態になる...どゆこと？？

f:id:bake0937:20200614191805p:plain