Johnman.md

プログラミングのことや個人的なことを書きます。たぶん。

react-dropzoneで画像サイズのバリデーションを行う

仕事でReactを書いていて、react-dropzoneを使う機会がありました。

react-dropzone.js.org

その中で、画像サイズ(縦x横)のバリデーションを行う際に手間取ったので、やり方を残しておこうと思います。

  • 基本的な使い方
  • react-dropzoneでのバリデーション
    • validatorでimg.onloadを使う(失敗)
    • getFilesFromEventでfileにwidth, height要素を付与する(成功)
  • 最終的なコード
  • まとめ

続きを読む

CircleCIでMySQLが起動できなくなる問題のまとめ

起きたこと

2021/03/18の午前中から、circleci/mysqlイメージを使っていたジョブが動かなくなるという問題が起きていました。

出力されるエラーは下記。

2021-03-18 01:32:50+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 5.7.33-1debian10 started.
2021-03-18 01:32:50+00:00 [Note] [Entrypoint]: Switching to dedicated user 'mysql'
2021-03-18 01:32:50+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 5.7.33-1debian10 started.
2021-03-18 01:32:50+00:00 [ERROR] [Entrypoint]: MYSQL_USER="root", MYSQL_PASSWORD cannot be used for the root user
    Use one of the following to control the root user password:
    - MYSQL_ROOT_PASSWORD
    - MYSQL_ALLOW_EMPTY_PASSWORD
    - MYSQL_RANDOM_ROOT_PASSWORD

Exited with code 1
CircleCI received exit code 1

原因

これはMySQLのDockerイメージが更新されたことが原因です。該当のPRはこちら。

https://github.com/docker-library/mysql/pull/749

entrypoint内ですでにrootユーザーを作成しているので、重複してrootユーザーを作成してしまわないようにととられた対策なのかな?

そして、circleci/mysql内で MYSQL_USER=root を指定しているので、今回の変更にひっかかってしまい、エラーになっていました。

暫定対応

問題になっているバージョンが5.7系だと circleci/mysql:5.7.33 だったので、circleci/mysql:5.7.32 を使うことでひとまず動くようになりました。

恒久対応

そもそもの原因は circleci/mysqlMYSQL_USER=root が使われていることなので、これを削除すれば動くようになるはずです。

これに関しては、すでにPRが出ていました。

https://github.com/circleci/circleci-images/pull/540

マージされたようなので、imageが公開されれば今まで通り動くようになりそうです。

まとめ

とりあえず今は5.7.32を使うことで凌いでいます。

原因を調べる中でTwitterも参考にしましたが、同じ問題にぶつかっている人がたくさんいると安心しますね。


追記(2021/03/19 08:45)

docker imageも更新されていたので、今まで通りの設定でcircleci/mysql:5.7が動くようになってました。よかった。

もちろんconfig.ymlの中で MYSQL_USER=root と指定しちゃうと落ちるので、そこは気をつけないとだめですね。

悲しいけれど、それでもこれはクウガだった。【小説 仮面ライダークウガ】

この記事は仮面ライダークウガおよび小説 仮面ライダークウガのネタバレを含みます。

僕は仮面ライダークウガが大好きです。

たぶんリアルタイムでも見ていたはずなんですけど、ちゃんと観たのは小学生くらいの頃に父親がDVDを揃えてから。

その頃はまだヒーローとしての楽しみ方しかしていなかったんですが、今考えるとなかなか考えさせられる内容だったよなぁと思います。

子供ながらに48話のクウガとダグバの戦闘は痛々しくて怖いくらいでした。

そんな僕なんですが、やっと小説版のクウガを読んで気持ちがたかまって仕方がないので感想を書こうと思います。

結論、読んでいてめちゃくちゃ悲しかったけれど、それでもこれはクウガでした。

続きを読む

2月の鑑賞記録【映画】

2月分の鑑賞記録、映画編です。

本・ゲーム・アニメはこっち。 johnmanjiro13.hatenablog.com

映画

1917 命をかけた伝令

1917 命をかけた伝令 (字幕版)

1917 命をかけた伝令 (字幕版)

  • 発売日: 2020/05/20
  • メディア: Prime Video

舞台は第一次世界大戦。ドイツ軍と戦闘中のイギリス軍。

二人の若い兵士が伝令役として前線にいる舞台のもとまで駆けるという話です。

なにがすごいって、120分ある内容を全編ワンカットで撮影していること。 それによって臨場感が半端なく、隠れながら進むシーンや敵から逃げるようなシーンは息を飲んでました。

とてもいい映画。

フォレスト・ガンプ/一期一会

フォレスト・ガンプ/一期一会 (字幕版)

フォレスト・ガンプ/一期一会 (字幕版)

  • 発売日: 2013/11/26
  • メディア: Prime Video

1994年製作の映画。僕より年上です。

ベンチでバスを待つ主人公フォレスト・ガンプが隣に座る人々に自分の人生を語って聞かせるという構成のお話。

フォレストは知能的なハンデを抱えていながらもひたすらまっすぐに生きていてとても好感がもてます。彼の語り口も単調なのに心地よく、すぐ映画の中に引き込まれました。

実在の人物や企業が出てくるシーンでは腹を抱えて笑ったし、感動的なシーンでは涙しました。

これは僕の今までみた映画の中でも最高に近い映画でした。絶対に見返すと思います。

花束みたいな恋をした

hana-koi.jp

主演に菅田将暉有村架純を据えた、今年1月に公開された映画。

なんだかもう、めちゃくちゃよかったです。 恋愛映画なんですが、こういう映画にありがちなドラマはまったくありません。彼女が大病を患っていたりもしないし、どっちかが大財閥の御曹司だったりもしないし、ましてやスパイだったりもしない。 ただひたすら現代を生きている普通の二人の、普通の恋愛が描かれています。だから面白い。

この映画には大きな敵も出てきません。二人に立ちはだかるのは、恋愛をしていたら誰しもがぶち当たるありふれた壁。静かに始まり、静かに終わっていきます。

話に出てくる話題も今を生きている人に向けられているんだなと感じます。だから「今」観ないと、数年後に観てもピンとこないかも知れません。

本当に、今が一番美しい、いずれ枯れてしまう、花束みたいな映画でした。

もともとこの映画を観る気はなかったんですが、こちらの動画を観て興味が湧いて観ました。ネタバレ含みますが、よければ。

映画 すみっコぐらし とびだす絵本とひみつのコ

映画 すみっコぐらし とびだす絵本とひみつのコ

映画 すみっコぐらし とびだす絵本とひみつのコ

  • 発売日: 2020/03/26
  • メディア: Prime Video

公開当時Twitterで話題になっていた映画。

みんなが言う通り、最初は「かわいいなぁ」くらいだったんですがラストにはもうボロボロ泣いていました。 これは子供に連れられて一緒に観に行った親がやられるやつや。子供向けだからといって侮っちゃだめですね。

これをきっかけにすみっコぐらしがちょっと好きになりました。ざっそうかわいい。

時間も1時間でさっくり観れるのがいいですね。

のび太結婚前夜

3Dのほうじゃなくて旧ドラえもんのほう。

子供のころ観てて久しぶりに観たいなと思って見直しました。 この話で一番有名なのはしずかちゃんのパパがしずかちゃんに語りかける部分だと思うんですが、子供のころ好きだったのは、のび太ジャイアンたちと一緒にお酒を飲んでいるシーンでした。 のび太の真似をしてコーラで「おっとっとっと」とかしてたなぁ。

幼い頃からの友達が、みんな変わらずにずっと仲間でいるっていうのはとても尊いものだなぁと、ある程度大人になって感じました。

この作品だけに出てくる先生とのび太が話すシーンもいいですね。先生にとってはのび太はいつまでものび太なんだなぁ。

久しぶりの旧ドラでしたが違和感なく楽しめたし、懐かしい気持ちでいっぱいになりました。またちょこちょこあの頃のドラえもんを見返すのもいいな。

まとめ

以上、2月に観た映画でした。

個人的にとてもいい映画に出会えた月だったなぁ。フォレスト・ガンプも花束もすみっコぐらしも最高。

2月の鑑賞記録【本・ゲーム・アニメ】

本当の自由を手に入れるお金の大学

去年、マネーリテラシーとかちゃんとしてないとまずいよなぁと思って貯蓄や投資の勉強をしてました。その復習も兼ねてのこの本。

お金について、次の「5つの力」という観点から説明しています。

  • 貯める力
  • 稼ぐ力
  • 増やす力
  • 守る力
  • 使う力

このうち、「稼ぐ力・増やす力」については知っている内容がほとんどでした。「守る力・使う力」に関してはほぼ記載がありません。

ただ、貯める力の中では預金などの貯蓄の他に、日本の年金制度や保険制度についても詳しく説明されていて、そのあたりの話はなかなか知らなかったし自分でも使うことができるとても有益な情報でした。

イラストをメインにしている本なので、投資などがまったくわからない人におすすめの本です。

寝苦しい夜の猫

寝苦しい夜の猫 (扶桑社BOOKS)

寝苦しい夜の猫 (扶桑社BOOKS)

お笑い芸人かまいたちの山内さんのエッセイ本。ぼくがシンプルにかまいたちと山内さんが好きなので買いました。

M-1の裏側や今までのかまいたちの話を知れてすごく面白かったです。

普段しゃべりを仕事にしているからか文章もとても読みやすくてスラスラ読めました。普段こういうエッセイ本は読まないのでいい体験になったなと思います。

かまいたちが好きな人はぜひ。YouTubeでご本人が紹介している動画もあります。

youtu.be

進撃の巨人33巻

1月に発売されていたけどまだ読んでなかったので読みました。本当に完結に向かってるなぁ。

もう続きが気になりすぎてマガジンのアプリ入れて課金して読んでます。Twitterでネタバレ食らったりしたくないし。完結が楽しみ。

ゲーム

ウマ娘 プリティーダービー

umamusume.jp

やっっっっっっっっと配信されたウマ娘

アニメ放映当時めちゃくちゃはまっていて事前登録していましたが、正直もうリリースされないんじゃないかと思ってました。

キャラクターもかわいいし、競馬そのものにも興味が湧いてくるしいいゲームだと思います。ただめちゃくちゃムズイ。

スタートダッシュガチャ引いちゃったけど今後は完全無課金でやっていきます。課金の怖さはFGOで学んだんや。

アニメ

ウマ娘 プリティーダービー(再視聴)

anime-umamusume.jp

ウマ娘配信に伴って再視聴。

2年も経ってるとやっぱり話をほとんど忘れてましたが、やっぱりめちゃくちゃ面白かったです。がんばってる女の子っていいね。

当時は知らなかった競馬の知識も今は少しだけ持っているので、小ネタも以前より気づけるようになったのも面白さが増した要因の一つかもしれません。

VTuberの天開司が紹介している動画もあってめちゃくちゃわかりやすいのでぜひ(若干のネタバレがあります)。

youtu.be

ウマ娘 プリティーダービー Season 2

anime-umamusume.jp

今現在放送されているウマ娘の2期。

主人公にトウカイテイオーを据えて、新しい物語が描かれています(時系列的には1期の12話と13話の間だったりするのかな)。

新しいキャラクターも出てきてよりにぎやかで面白い。久しぶりにアニメを追いかけてます。ウマ娘はいいぞ。

まとめ

以上、2月に読んだ本・遊んだゲーム・観たアニメでした。

今回はちょっと数が多かったので映画を別にしています。こちら。 johnmanjiro13.hatenablog.com

LastPassが3月から使いづらくなるので、BitWardenへ移行した

LastPassが使いづらくなる

3月16日以降、LastPassの無料版では利用できるデバイスがモバイル端末かWebブラウザのどちらか一方しか使えなくなります。

www.itmedia.co.jp

ぼくは以前からLastPassスマホとPCで使っていました。
これが制限されてしまうと正直もう使い物にならなくなってしまうので、ほかのパスワード管理ツールに移行できるしようと考えはじめました。

移行先をいろいろ探していたんですが、最終的にBitWardenを使いはじめました。

BitWardenを選んだ理由

主な理由は次の3つです。

無料

なによりお金がかかりません。これは結構嬉しいことですね。

日本語に対応している

LastPassは英語にしか対応していませんでしたが、BitWardenはデフォルトで多言語対応しています。 リポジトリをみたところかなりの言語に対応しているようです。*1

OSSで開発されている

BitWardenはOSSとして開発されています。そのため、問題が見つかれば素早く対処される傾向が強いです(ぼくはそう思います)。

また、自分が貢献したければコントリビュートすることもできます。*2

移行手順

登録

登録と初期設定がめちゃくちゃ簡単でした。

以下のようなアカウント作成画面でメールアドレスとマスターパスワードを入力すれば完了です。 フォームに書いてありますが、マスターパスワードを紛失するとログインできなくなります。絶対になくさないようにしましょう。*3

f:id:johnmanjiro13:20210222174654p:plain:w320
アカウント登録画面

移行

BitWardenでは様々なパスワード管理ツールからの移行をサポートしているようです。LastPassのサポートもありました。

まず、LastPass側で 「Advanced > Export > LastPass CSV File」 と選択し、LastPassが管理しているデータが入ったCSVをダウンロードします。

次に、BitWardenのWebページで「ツール > データをインポート」と選択した後の画面で先ほどダウンロードしたCSVをアップロードすれば移行完了です。めちゃくちゃ簡単。

f:id:johnmanjiro13:20210222175054p:plain
インポート画面

自動入力の有効化

LastPassではよくフォームへの自動入力を使っていたんですが、BitWardenにも同様の機能がありました。ただまだ試験段階のようです。

以下はChrome拡張機能から設定する際の画面です。 ぼくはAndroidアプリも使っていますが、似たような設定でスマホでも有効化することができました。

f:id:johnmanjiro13:20210222175331p:plainf:id:johnmanjiro13:20210222175359p:plain
自動入力の設定

まとめ

BitWardenは日本語に対応しているので使い方もわかりやすく、必要な機能もある程度揃っていて、移行も簡単でさらに無料というとても満足のいく結果でした。LastPassには若干の使いづらさを感じていたので、だいぶ快適になりそうです。回し者じゃありません。

このまま使ってみて、何か思うことがあればまた書くかもしれません。

それでは。

*1:https://github.com/bitwarden/web/tree/master/src/locales

*2:C#やAngularだったので、ぼくとしてはウーンという感じでした。

*3:かといって簡単なパスワードにしてしまうと管理の意味がなくなります。

UUIDの大文字と小文字を簡単に出し分けられるシェルスクリプト

概要

仕事でよくUUIDを生成して使うことが多いので、シュッとUUIDを生成できて大文字小文字を簡単に出し分けられるシェルスクリプトが欲しかったので作りました。 コードはGitHubにも置いてあります。

github.com

uuidgenじゃだめなのか

一応、uuidgenコマンドがあるんですがこれにはアルファベットを小文字で出力するようなオプションはなく、常に大文字で出力されます。また、以下のようにコピペして使いたいという時に改行が入ってしまうのが地味に面倒でした。

$ uuidgen | pbcopy

# ペーストすると改行が入る
$ 783B3460-8D6E-4D4A-9E89-4A7C23D0285E
>

これを回避するためにtrコマンドで改行を消したり

$ uuidgen | tr -d '\n'

アルファベットを小文字に変換したりしていました。

$ uuidgen | tr -d '\n' | tr A-Z a-z

さすがに毎回このパイプを書くのは辛いので、シェルスクリプトを書いて一つのコマンドにまとめて、アルファベットはオプションで大文字と小文字を出し分けるようにしました。

uuid4.sh

ぼくはUUIDは小文字で使うことが多いので、デフォルトは小文字で出力して -u オプションで大文字に切り替えるようにしました。

/usr/local/binにシンボリックリンクを置いています。

# デフォルトは小文字で出力
$ uuid4
dc79fc98-2b2a-447d-84f8-3c045a7c3874
$ uuid4 -u
DB217891-D99E-4CDA-8B5F-5F563857A42B

実際に書いたスクリプトです。

#!/bin/bash

PROGRAM=$(basename "$0"); readonly PROGRAM

function usage() {
  cat <<EOS
Usage: $PROGRAM [OPTION]...
  -h, --help Display help
  -u         Generate UUID with uppercase
EOS
}

# 引数がない場合は改行を消し、小文字で出力
if [ $# -eq 0 ]; then
  uuidgen | tr -d '\n' | tr "[:upper:]" "[:lower:]"
  exit 0
fi

for OPT in "$@"; do
  case $OPT in
  -h |--help)
    usage
    exit 1
    ;;
  -u)
    # -uオプションの時は改行だけ消して大文字で出力
    uuidgen | tr -d '\n'
    break
    ;;
  -*)
    echo "$PROGRAM: illegal option -- '$(echo $1 | sed 's/^-*//')'">&2
    exit 1
    ;;
  esac
done

まとめ

これでターミナルでUUIDを生成するのが楽になりそうです。

今後よく使うシェルスクリプトGitHubにまとめていこうかなと思います。