Beeeat’s log

Beeeat’s log

プログラミングで出くわした知識やツール、日常生活、働き方その他色々なことをメモしていくブログ

Jira の「課題」に定型文(テンプレート文)を設定する方法

最近個人的に Jira を使い始めてみた.前々から話は聞いていたが,確かにスクラムやカンバンなどのアジャイル開発をする時に良いツールだと実感した.

機能が沢山ある分,カスタマイズ性が高いこともよくわかった. そこでかなり初歩だとは思うが課題を作成する時に定型文(テンプレート文)を設定したくなった. 調べてみたら以下のようなやり方を見つけた.

community.atlassian.com

qiita.com

www.ricksoft.jp

確かに方法は何となくわかったが.「思っていたより手間が掛かりそうだなぁ...」という印象だったため,引き続き自分で色々触ってみると簡単に設定できる方法がわかったためまとめてみる.

方法

すごい簡単だった.サイドバーにある「プロジェクト設定」→「課題タイプ」から設定したい課題タイプを選択し(今回は「Story」を選択),説明をクリックすると「既定の説明 (オプション)」の項目に定型文を設定することができる.

f:id:bake0937:20200928220644p:plain

課題を作成してみると以下のように定型文が入った状態になっていることを確認できた.

f:id:bake0937:20200928215819p:plain

まとめと所感

今回は Jira の「課題」で定型文を設定する方法についてまとめてみた. ひょっとしたら最初に私が調べた方法は定型文の意味合いが少し違っていたのかもしれないが, ひとまず今回やりたったレベルの定型文を設定できたのでひとまずOKとした.

Jira を使い始めてまだ2日くらいなので,来月くらいまでひとまず使ってみて使用感やどのように使ったかをまとめていこうと思う.

create-nuxt-app で現在のディレクトリにNuxtプロジェクトを作成する時に気をつけること

Nuxt.js の勉強していた時に最新のcreate-nuxt-app(v3.3.0)を使ってNuxtプロジェクトを作成した時にCan't create . because there's already a non-empty directory . existing in path.というエラーを踏んでしまったのでその時にどう対応したのかのメモをまとめておく.

前提

使用するファイルは以下になる.

# sample-nuxt/docker-compose.yml
version: "3"
services:
  frontend:
    build: ./frontend
    ports:
      - 8080:8080
    command: /bin/sh -c "yarn dev"
    volumes:
      - ./frontend:/app
      - frontend-node_modules:/app/node_modules
    environment:
      - HOST=0.0.0.0
      - PORT=8080
    tty: true
volumes:
  frontend-node_modules:
# sample-nuxt/frontend/Dockerfile
FROM node:12.9.0-alpine

ENV APP_HOME /app
ENV PATH ${APP_HOME}/node_modules/.bin:$PATH
ENV TZ Asia/Tokyo

ENV HOST 0.0.0.0
ENV PORT 8080

WORKDIR ${APP_HOME}
ADD . ${APP_HOME}

RUN apk update \
    && apk upgrade \
    && yarn install \
    && yarn global add create-nuxt-app \
    && rm -rf /var/cache/apk/*

EXPOSE ${PORT}

CMD ["yarn", "dev"]

rails new .(現在のディレクトリでRailsプロジェクトを作る)のような要領で現在のディレクトリでNuxtプロジェクトコードを作ろうとするとエラーになった.

$ pwd
sample-nuxt
$ docker-compose run --rm frontend yarn create nuxt-app .
yarn create v1.17.3
[1/4] Resolving packages...
⠠ color-name@1.1.3(node:1) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limi

・・・省略・・・

warning Your current version of Yarn is out of date. The latest version is "1.22.5", while you're on "1.17.3".
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
success Installed "create-nuxt-app@3.3.0" with binaries:
      - create-nuxt-app

create-nuxt-app v3.3.0
Can't create . because there's already a non-empty directory . existing in path.
Done in 16.75s.

原因

本家のリポジトリを見てみると,どうやらプロジェクトの作成する先のディレクトリが空ではない場合はエラーになる仕様のようだ. 今回の場合,frontendディレクトリにDockerfileがあるからエラーになったと考えられる.

github.com

回避方法

仕様なので仕方ないため力技ではあるが,さらに新しくfrontendプロジェクトを作成し(つまりfrontend/frontendの中にNuxtプロジェクトが作られる状態になる),その後でfrontend/直下にNuxtプロジェクトのファイル・ディレクトリを移動するようにする.

$ docker-compose run --rm frontend yarn create nuxt-app frontend
yarn create v1.17.3
[1/4] Resolving packages...
⠈ graceful-fs@^4.1.6(node:1) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 drain listeners added to [TLSSocket]. Use emitter.setMaxListeners() to increase limit
・・・省略・・・
create-nuxt-app v3.3.0
✨  Generating Nuxt.js project in frontend
? Project name: (frontend) 
・・・省略・・・
各設定を入力していく
# frontend直下にNuxtプロジェクトのファイル・ディレクトリを隠しファイル込みで移動する.
$ mv frontend/frontend/{*,.[^\.]*} frontend
# frontend/frontendは削除する
$ rm -r frontend/frontend
# node_modules内のパス等の情報を更新させるためにyarn installし直す
$ docker-compose run --rm --service-ports frontend yarn install

これで,docker-compose upすればNuxtプロジェクトが起動される.

まとめと所感

今回は create nuxt-app v3.3.0 でプロジェクトを作成する時に少し躓いたことについてまとめてみた.

前(今年の春頃)に使っていた create nuxt-app では現在のディレクトリにNuxtプロジェクトを作成することができていたように思えた(先程のプルリクエストも今年の7月にマージされたようなので...)が,Railsプロジェクトの作成方法とごっちゃに考えていたようにも思えるため混乱しないように気をつける.

docker-compose run --rm --service-ports frontend create-nuxt-app -hでヘルプを見てもそれらしい便利なオプションも見当たらないため,今後のアップデートに期待かなぁと思いながら作業を再開した.

Rails で URL の末尾にスラッシュを付ける方法

SEOチームから URL の末尾にはスラッシュを付けて欲しいという依頼を対応した時に文字連結とかでゴニョゴニョしようとしたが,Rails で用意されている機能で簡単にできることがわかったのでメモしておく.

やり方

とても簡単でroutes.rbでルーティングの設定の最後にtrailing_slash: trueをつければ良い.

これで URL の末尾にスラッシュが付くようになる.

# routes.rb
get '/hoge/:id', to: 'hoge#show', trailing_slash: true

まとめと所感

今回は Rails で URL の末尾にスラッシュを付ける方法についてメモをした.SEO 的に URL の末尾にスラッシュが必要かどうかは,正直人によって色々意見があるとは思うがだが,個人的には統一はしておいた方が良いと思った.

今回はホントにちょっとしたメモだが,ちょくちょく対応しそうなので他にわかったことがあったらここに追記していく.

参考

api.rubyonrails.org

CLS(Cumulative Layout Shift)を調査する時に使ったツールやサービスをまとめてみた

Google が「Core Web Vitals(コアウェブバイタル)」という新しいWebの指標を2021年以降に導入予定ということで話題になっています.

web.dev

developers-jp.googleblog.com

Core Web Vitals は LCP(Largest Contentful Paint), FID(First Input Delay), CLS(Cumulative Layout Shift)の3つに分かれています.

今回は担当している Webサイトの CLS...つまりどれだけレイアウトのズレが発生したのかを調査する時に使ったツールやサービスをまとめようと思います.

Web Vitals

現状のスコアをサクッと知りたい場合は「Web Vitals」というChrome拡張を使えばすぐにわかります. chrome.google.com

インストール後,調査したいページで Web Vitals を押すとスコアが表示されます.CLS はスコアの値がより小さければ良いです.

f:id:bake0937:20200907073217p:plain

少し脱線しますがインストールした拡張機能が表示されない場合は拡張機能のマークを選択し,ピンマークを押すと表示されるようになります(地味にここで時間が掛かった笑).

f:id:bake0937:20200907073329p:plain

PageSpeed Insights

Google が提供しているおなじみの Web パフォーマンスツールです.

developers.google.com

調べたいWebサイトのURLを入力すると,スコアの他に「累積レイアウト変更」という名前で CLS のスコアと詳細について把握することができます.

f:id:bake0937:20200907233044p:plain

Web Vitals Leaderboard

Core Web Vitals を比較できるサービスのようです.つまり自分が担当しているWebサイトと競合でどれだけ差があるのかを比較することができます.

デフォルトでスコアのランキングが1位のWebサイトが載っているため,優秀なサイトを研究したい時にも便利です.

vitals-leaderboard.pazguille.me

f:id:bake0937:20200907230512p:plain


Chrome DevTools

Chrome DevTools には以下のように様々な機能があります.

Rendering

Chrome DevTools を起動した状態で「⌘ + Shift + P」を押した後に「Show Rendering」と入力するとRendering ドロワーが候補に表示されるため選択する.

f:id:bake0937:20200907065914p:plain

Console ドロワーの隣に Rendering ドロワーが表示されます.そして Layout Shift Regions にチェックを入れます.

f:id:bake0937:20200907065933p:plain

ページをリロードし,スクロールするとどの箇所で Layout Shift が発生しているのかを視覚的に把握することができて便利です.

f:id:bake0937:20200907065833p:plain

Lighthouse

ちょっと前まで拡張機能を入れないといけなかった Lighthouse が実は Google Chrome に搭載されております.

Chrome DevTools を起動した状態で Lighthouse タブを選択し, 「Generate report」を押すと,測定が始まります.

f:id:bake0937:20200907070652p:plain

少し待つと測定結果が表示されます.

f:id:bake0937:20200907071255p:plain

「Avoid large layout shifts」を見ると Layout Shift がどの箇所で発生しているのかを要素レベルで調べることができます.どの要素を改善すれば良いのかを調べる時に便利です.

f:id:bake0937:20200908001703p:plain

まとめと所感

今回は担当プロダクトの CLS を調査する時に使ったツールやサービスをまとめてみました. 色々と調べてみると.現在この Core Web Vitals について様々な人が試行錯誤をしながら対策している真っ最中な印象を受けました.

ザッと確認したい時は,Web Vitals と PageSpeed Insights, 具体的な対策を取る時は Chrome DevTools など場面によって使い分けています. ちなみに Web Vitals Leaderboard をきっかけに THEGUARDIAN というメディアサイトを知ることができました. CLS のスコアが良く,どのように保っているのかを知るために最近ちょくちょく見てます.

今回は調査についてまとめましたが,実際にやってみた対策についても内容がまとまったタイミングで書いてみようと思います.

docker-compose でコンテナを起動し, localhost にアクセスする時に勘違いしていたこと

最近,Docker を使って vue-cli の勉強をしているのですが,アプリケーションのコンテナを起動し,ブラウザで localhost にアクセスすると「ERR_CONNECTION_REFUSED」と表示され,localhost にアクセスできなくなりました.

「え!? 突然どうした?」という状態になって少し混乱していたのですが,結論としては私の単なる勘違いが原因でした.今回はその勘違いしていた内容についてまとめようと思います.

使っていた Dockerfile

何の変哲のない,「Dockerfile」と「docker-compose.yml」です.

portsでポートフォワーディングし,ブラウザで「http://localhost:1234/」でアクセスするようにしています.

# vuejs-practice/Dockerfile 
FROM node:12.18.3-alpine

WORKDIR /app

RUN apk update && \
  npm install -g npm && \
  npm install -g @vue/cli

CMD ["/bin/ash"]
# vuejs-practice/docker-compose.yml
version: "3"
services:
  vuejs-practice:
    build: .
    command: yarn serve
    working_dir: /app/vuejs-practice
    ports:
      - 1234:8080
    volumes:
      - ./:/app
      - yarn-cache:/usr/local/share/.cache/yarn/v6
    stdin_open: true
    tty: true

volumes:
  yarn-cache:

アプリケーションを起動

さて,起動しましょう.当時は以下のコマンドで起動していました.

$ docker-compose run --rm vuejs-practice yarn serve

さてアクセスするぞ!!!という思いでブラウザで localhost にアクセスすると「ERR_CONNECTION_REFUSED」と表示されてしまいます...

f:id:bake0937:20200831200934p:plain

調べてみる

「なぜだ? 他のコンテナは停止もしているし,関係ありそうなプロセスも Kill しているのに...」と思いながらもdocker psで vue-cli のコンテナの起動状態を見てみました.

❯ docker ps
CONTAINER ID        IMAGE                         COMMAND                  CREATED             STATUS              PORTS               NAMES
ee9e63a14442        vuejs-practice_vuejs-practice   "docker-entrypoint.s…"   9 seconds ago       Up 8 seconds                            vuejs-practice_vuejs-practice_run_d4ff59ff1d93

はい...そうです...「PORTS」の設定が無いです.これではいくらブラウザで localhost にアクセスしてもアプリケーションのページは表示されません.

「アレ? docker-compose.yml に ports の設定書いたはずなんだけど?」と思っており,ここで少し混乱したのですが.... 「あ!そういえば docker-compose up で起動してなかったな」とふと思い,実行してみると...なんと「PORTS」が設定された状態になりました!

❯ docker-compose up
Starting vuejs-practice_vuejs-practice_1 ... done
Attaching to vuejs-lecture_vuejs-lecture_1
yarn run v1.22.4
$ vue-cli-service serve
vuejs-lecture_1  |  INFO  Starting development server...
❯ docker ps
CONTAINER ID        IMAGE                         COMMAND                  CREATED              STATUS              PORTS                    NAMES
0ba34e1ff069        vuejs-lecture_vuejs-lecture   "docker-entrypoint.s…"   About a minute ago   Up About a minute   0.0.0.0:1234->8080/tcp   vuejs-lecture_vuejs-lecture_1

localhost にアクセスすると無事アプリケーションのページが表示されました.

f:id:bake0937:20200830132758p:plain

原因

もうここまで読めばだいたいわかったと思いますが,原因はコンテナの起動コマンドにありました.

せっかく,「docker-compose.yml」でportsを設定していたのにも関わらず,docker-compose upではなく,docker-compose run --rm vuejs-practice yarn serveで vuejs-practice サービスでyarn serveを起動するコマンドを実行してしまってました.

これではdocker-compose.ymlで設定した情報に沿ってコンテナが起動するのでなく.単に vue-cli のコンテナが起動しただけで,ポートフォワーディングされない状態のため接続できなかったということでした.

起動するコマンドが変わっていた原因としては,読んでいた技術書が vue-cli をマシンに直接インストールする環境で書いており,Docker で起動する場合で読み替えるべきところを忘れたまま進めてしまっていました😇,つまり凡ミスです笑.

docker-compose run --rm vuejs-practice yarn serveでどうしても起動したい場合は以下のように-pオプションが必要です.

$ docker-compose run --rm -p 1234:8080 vuejs-lecture yarn serve
❯ docker ps
CONTAINER ID        IMAGE                         COMMAND                  CREATED             STATUS              PORTS                    NAMES
54df9ca7f7fa        vuejs-lecture_vuejs-lecture   "docker-entrypoint.s…"   28 seconds ago      Up 27 seconds       0.0.0.0:1234->8080/tcp   vuejs-lecture_vuejs-lecture_run_823dbcfa3088

と悔しさ半分で紹介しましたが,これだと「何のために docker-compose.yml を用意したんだよ!」って話になるので,おとなしくdocker-compose up (サービス名)またはdocker-compose run --rm --service-ports サービス名--service-portsオプション をつけて起動するようにします 😇

まとめと所感

今回は,docker-compose でアプリケーションのコンテナを起動した時に勘違いしていたことについてまとめてみました.

技術書の読み替えミスで色々混乱してしまいましたが,docker-compose updocker-compose run --rm サービス名 コマンドでコンテナを起動した時の違いについてわかったので,これはこれで良い学びでした.

もう同じようなことが起きてもこの記事を見直せばわかるので,読んでいる技術書をどんどん進めていきます!普段使いのコンテナも段々と慣れてきたぞ!!

勉強・個人開発用に作ってきた Dockerfile をリポジトリにまとめてみた

最近新しい MacBook Pro を買いました.「早速ライブラリやツールを入れていくぞぉ〜」って感じになったのですが,様々な言語・フレームワークの導入の都合で入れたツール・ライブラリの依存関係が原因でのエラーで時間を無駄に食ってきた記憶が頭を過ぎったので,普段の勉強・個人開発でも Docker をバリバリ使っていくことにしました.

そこで Dockerfile はちょこちょこ書いていたんですが,よく使う Dockerfile は dotfiles みたいにリポジトリにアップしてたら便利そうと思いました. というわけでは今回は Dockerfile をリポジトリ作ってみたのでそれについて思ったことなどをまとめていこうと思います.

Docker は普通に Docker for Mac です.ホストとゲストとファイル同期は Mutagen を使っています.

docs.docker.jp

作ったもの

リポジトリはこちら.まだ Rails6 と Vue CLI しかないです笑. コメントアウトで少し説明を入れています.使う時は消しています.これから用途に合わせて RubyGolang なども入れていく予定です.

github.com

やってみての感想

Docker を勉強せざる負えない環境を作ることができた

今までは比較的仕事では Docker,個人では Mac に言語やフレームワーク を直接導入してコードを書いていました. そのため,普段から Docker 使っていないことによる躓きが少し目立っていたなぁと感じていました.

今は何かしらの言語でコードを書くぞ! となったら,まずは Dockerfile を作るところから始まるので, Docker を勉強せざる負えなくなり,そのおかげで段々と知識が着いていき,躓いていた箇所(特に port 周り笑)が「え?こんな所で躓いていたのか」と理解できるようになってきました.

ちなみにこの本を読んでます.

book.mynavi.jp

クラウドネイティブなアプリ開発の事例が増えている実感がやっと出てきた

仕事ではアプリケーションサーバとして Amazon EC2,CI 環境として Amazon ECR + AWS Code Build を使っております.しかし,今から新しいプロダクトを作るなら Amazon ECS や AWS Fargate,Amazon EKS などを使ったクラウドネイティブな事例をよく聞くようになりました.

まぁもう既にそんな事例は国内で沢山あると思いますが社内で他の何チームかが使い始めた話を聞いて「いよいよ身近になってきたなぁ」と今更ながら実感してきました.

その状況下で,フロントエンド・サーバーサイド・インフラエンジニアなど職種に関係なく,今まで Mac に言語・フレームワークを直接導入していた感覚で, Dockerfile を作れるレベルになる必要にならないとなぁと思うようになりました.

まとめと所感

今回は勉強・個人開発用に作ってきた Dockerfile のリポジトリについてまとめてみました. Docker を普段使いにしてから1ヶ月ほど経ちましたがだいぶ慣れてきました. 特に技術書に書いてあるコードをシュッと試す時に今回作ったリポジトリが役立っています. この調子でコンテナサービスの使い方も勉強していこうと思います.

Cloud Run が従量課金制でかつ AWS Fargate よりも手軽に使えるというのを会社の上司が熱弁していて,GCP にも少し興味が湧いてきました.

cloud.google.com

そういえば,よく使う Vim の設定は dotfiles って名前でリポジトリ管理する話は聞きますが,よく使う Dockerfile をリポジトリでまとめる話ってそこまで聞かないですね.(あくまで雛形レベルでの管理になりますが) そこらへんのところって皆さんどうしてるんだろ...🤔

GitHub の suggestion 機能を使って提案されたコードを取り込む

GitHub のプルリクエストでチームメンバーへコードレビューを依頼した際に suggestion 機能を使ってソースコードで具体的に提案されることがある.

※下記は都合上,サンプル用のリポジトリで自分のプルリクエストに自分で提案をしている.

f:id:bake0937:20200817221926p:plain

実は今までここまでしか使っていなかったのだが,提案されたコードを取り込むができることをチームメンバーから聞いたため,今回はそれについてまとめていく.

コードを取り込む2つの機能

Commit suggestion

suggestion したコメントの下にある「Commit suggestion」ボタンを押すと,なんとコミットメッセージを入力することができる.

f:id:bake0937:20200817222446p:plain

「Commit changes」を押すと下記のようにコミットされた状態になる.

f:id:bake0937:20200817222628p:plain

Add suggestion to batch

取り込む方法はこれだけではない.下記のように複数の提案箇所を一つのコミットにまとめたい場合は「Add suggestion to batch」が便利.

f:id:bake0937:20200817222906p:plain

Add suggestion to batch を押すと,このように Commit suggestions が貯まっていく.

f:id:bake0937:20200817223056p:plain

ある程度のまとまりになったら Commit suggestion を押し,コミットメッセージを入れ,Commit changes を押す.

f:id:bake0937:20200817223324p:plain

するとこのようにコミットされた状態になる.

f:id:bake0937:20200817223604p:plain

まとめと所感

今回は GitHub の suggestion 機能を使って提案されたコードを取り込む方法についてまとめた.

今まではチームメンバーから提案されたコードや自分で見つけた改善案のコードをローカルリポジトリで コミットと push をしていた. しかし,これからはそれらの作業を GitHub 上でササッとできるのは確かに便利だと感じた.

この機能をうまく活用し,チームメンバーからのフィードバックを上手く取り込んでいくと,開発スピードが更に上がりそうだ.