なんでもノート

なんでも書くノートみたいなブログ

<video>に読み込んだ動画の秒数を取得する

技術記事

<input type="file">で選択したファイルのサイズを取得する - なんでもノートに続きtips2個目。video要素に読み込んだ動画の秒数を取得する方法。durationchangeイベント発生時にdurationから読み取れる。以下、React + TypeScriptのサンプルコード。

import React, { useRef } from "react";

// …(略)… 

const ref = useRef<HTMLVideoElement>(null);

const onChangeVideoDuration = () => {
  if (ref.current) {
    const videoDuration = ref.current.duration;
    console.log(videoDuration);
  }
}

// 任意のタイミングでsrcを変更する
const onXXX = () => {
  if (ref.current) {
    ref.current.src = "sample.mp4";
    ref.current.addEventListener("durationchange", onChangeVideoDuration, { once: true });
  }
}

// …(略)…

<video ref={ref} />

<input type="file">で選択したファイルのサイズを取得する

技術記事

最近使ったtipsを1つずつブログにまとめておこうと思う。1つ目はで選択したファイルのサイズを取得する方法。以下、React + TypeScriptでのサンプルコード。

const onChangeFile = (e: React.ChangeEvent<HTMLInputElement>) => {
  const fileSize = e.target?.files?.[0]?.size;
  console.log(fileSize + " Bytes");
}

// …(中略)…

<input type="file" onChange={onChangeFile} />

2022年7月末までのトピック

雑記

2022年になってからブログを全然書いていなかった。仕事が忙しかったと言い訳してしまう。以下、7月末までのトピック。

ベッドを買った
エルゴヒューマンを買った
仕事でリーダーになった
山梨に行った
ソファを買った

その他、友達と遊んだり、会社の人と飲みに行ったりもした。

ベッド、ワーキングチェア、ソファと物理的に大きい買い物をした。ミニマリストからは大きく遠ざかった。

仕事ではリーダーになった。名前から伝わりにくいが、最初の管理職だ。整理してブログに書きたい内容が多い。

山梨に行った。旅行ブログを書くかもしれないし、書かないかもしれない。

またぼちぼち書いていく。

技術書を電子書籍から紙書籍に戻した

雑記

最後にブログを書いてから3ヶ月も経ってしまった。3ヶ月の間に色々あったがおいおい書いていきたい。

タイトル通り、電子書籍で買っていた技術書を紙書籍で買うようにした。6月から紙書籍を買っている。

電子書籍を買い始めたのは2018年の8月ごろなので、かれこれ4年近くなる。電子書籍を買い始めた理由は2つだったと思う。1つ目は紙の本を外に持ち歩くのは重かったから、2つ目は当時ミニマリストに憧れていたからだったとと思う。

そして最近、電子書籍が売ってない紙の本を読む機会があった。久しぶりの紙の本はとても読みやすく、すぐに読み終えてしまった。技術書も紙にすればもっと読めるんじゃないかと思い、紙で買うことにした。

結果、10日間くらいで2冊も読みきれてしまった。ちなみに呼んだのは以下の2冊。

Web配信の技術―HTTPキャッシュ・リバースプロキシ・CDNを活用する

Web配信の技術―HTTPキャッシュ・リバースプロキシ・CDNを活用する

作者:田中祥平
技術評論社

分散システムデザインパターン ―コンテナを使ったスケーラブルなサービスの設計

分散システムデザインパターン ―コンテナを使ったスケーラブルなサービスの設計

作者:Brendan Burns
オライリー・ジャパン

なぜかは言語化できないのだが、紙の書籍の方が電子書籍より読みやすいと感じた。また、物理的に存在することによる読まなくてはというプレッシャーを感じるので自然と手が伸びた。

一方で場所を取る、どこでも読めるわけではないというデメリットがあり、それらの点については電子書籍の方が優っている。

しかし、総合的に見てインプットの質が上がり、量も増えそうなので技術書は紙で買おうと思う。

Docker ComposeでMySQLを動かしてみた

技術記事

Docker ComposeでMySQLを動かしてみたのでメモ。

リポジトリ：https://github.com/azujuuuuuun/try-docker-mysql
image: https://hub.docker.com/_/mysql
環境変数は .env ファイルで設定している
- https://github.com/azujuuuuuun/try-docker-mysql/blob/d13cd6981c8cd128936d073bc7898044eb9a6479/docker-compose.yml#L6-L9
- https://docs.docker.jp/compose/environment-variables.html#env
  - .env ファイルは .gitignore に追加している
ボリュームでMySQLのデータと設定ファイルをマウント
- https://github.com/azujuuuuuun/try-docker-mysql/blob/main/docker-compose.yml#L11-L12
MySQLの設定ファイルにはデフォルトの認証プラグインを設定している
- https://github.com/azujuuuuuun/try-docker-mysql/blob/main/mysql/my.cnf
  - MySQL8.0 認証方式を変更する(Laravel5) - Qiita と同様のエラーが出たので変更した
docker-compose up で空のデータベースが出来上がった

新型コロナウィルスワクチン接種3回目の副反応の記録

日記

2022/03/03(木)に新型コロナウィルスの3回目のワクチン接種を受けてきた。今更ながら記録を残す。

前回の記録

azujuuuuuun.hatenablog.com

今回の記録

2022/03/03 15:00
- ワクチン接種
- ファイザー社のワクチン
- 解熱剤を2錠もらう
2022/03/04 08:57
- 36.6℃
- 注射したところに痛い
- 脇の下に筋肉痛のような痛み
13:18
- 頭が重い
- 36.7℃
15:25
- 37.7℃
- 解熱剤を飲む
17:34
- 37.6℃
18:00
- 36.9℃
18:56
- 37.1℃
2022/03/05 8:15
- 37.5℃
10:00
- 37.3℃
10:59
- 37.1℃
16:06
- 37.5℃
19:36
- 37.4℃
2022/03/06 9:20
- 36.4℃

体温しか記録していなかった...。

最高温度は37.7℃と前回の38.6℃より低かった。接種翌日の夕方には微熱になっていたので次の日にはおさまるだろうとたかを括っていた。

しかし、次の日も1日中37℃台の熱がおさまらなかった。動けないほどではないが、身体に力が入らず、せっかく天気が良い休日だったのにもったいない感じがして辛かった。

前回と違って熱さまシートとポカリの準備を忘れていたのが敗因だったように思う。熱対策には以下を忘れないようにしたい。

解熱剤
氷枕
熱さまシート
ポカリスエット
簡単に食べられる食料

marginとpaddingの使い分け

技術記事

CSSのmarginとpaddingの使い分けについてふと思ったので書く。

対象要素とその兄弟要素との間の余白を確保する場合はmarginを使う
対象要素とその子要素との間の余白を確保する場合はpaddingを使う

このシンプルなルールで大抵の場合は使い分けられるのではないかと思う。多分。