2023年を振り返る。

目次

<ul class="table-of-contents">
 <li><a href="#仕事">仕事</a></li>
 <li><a href="#ゲーム">ゲーム</a></li>
 <li><a href="#映画">映画</a></li>
 <li><a href="#買ったもの">買ったもの</a></li>
 <li><a href="#行った場所">行った場所</a></li>
 <li><a href="#2024年に向けて">2024年に向けて</a></li>
</ul>

<h2 id="仕事">仕事</h2>

<a href="https://azujuuuuuun.hatenablog.com/entry/2023/05/02/220637">2023&#x5E74;4&#x6708;&#x307E;&#x3067;&#x306E;&#x904E;&#x3054;&#x3057;&#x65B9; - &#x306A;&#x3093;&#x3067;&#x3082;&#x30CE;&#x30FC;&#x30C8;</a>にも書いたが、リーダーからメンバーに戻った。

今年は<a class="keyword" href="https://d.hatena.ne.jp/keyword/Java">Java</a>・Spring BootでMQコンシューマーやバッチを書いたり、<a class="keyword" href="https://d.hatena.ne.jp/keyword/Apache">Apache</a> Solrをちょっとだけ触ったり、<a class="keyword" href="https://d.hatena.ne.jp/keyword/Kubernetes">Kubernetes</a>をちょっとだけ触ったりした。

<h2 id="ゲーム">ゲーム</h2>

今年は沢山ゲームをした年だった。どのゲームも夜更かしするぐらい面白かった。

<ul>
<li><a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%B9%A1%BC%A5%D1%A1%BC%A5%C0%A5%F3%A5%AC%A5%F3%A5%ED%A5%F3%A5%D12%20%A4%B5%A4%E8%A4%CA%A4%E9%C0%E4%CB%BE%B3%D8%B1%E0">スーパーダンガンロンパ2 さよなら絶望学園</a></li>
<li><a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%CB%A5%E5%A1%BC%A5%C0%A5%F3%A5%AC%A5%F3%A5%ED%A5%F3%A5%D1V3%20%A4%DF%A4%F3%A4%CA%A4%CE%A5%B3%A5%ED%A5%B7%A5%A2%A5%A4%BF%B7%B3%D8%B4%FC">ニューダンガンロンパV3 みんなのコロシアイ新学期</a></li>
<li><a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%BC%A5%EB%A5%C0%A4%CE%C5%C1%C0%E2">ゼルダの伝説</a> ティアーズ オブ ザ キングダム</li>
<li>超探偵事件簿 レインコード</li>
<li>バディミッション BOND</li>
<li>十三機兵防衛圏</li>
<li><a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%DB%A5%B0%A5%EF%A1%BC%A5%C4">ホグワーツ</a>・レガシー Hogwarts Legacy（プレイ中）</li>
</ul>


<h2 id="映画">映画</h2>

今年は38本の映画を観た。<a class="keyword" href="https://d.hatena.ne.jp/keyword/%BB%B0%C2%EB%A4%CE%BF%B9%A5%B8%A5%D6%A5%EA%C8%FE%BD%D1%B4%DB">三鷹の森ジブリ美術館</a>に行くために観た<a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%B8%A5%D6%A5%EA">ジブリ</a>作品13本と<a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%CF%A5%EA%A1%BC%A1%A6%A5%DD%A5%C3%A5%BF%A1%BC">ハリー・ポッター</a>シリーズが半分以上を占めている。

THE FIRST <a class="keyword" href="https://d.hatena.ne.jp/keyword/SLAM%20DUNK">SLAM DUNK</a>とRRRが面白かった。

<h2 id="買ったもの">買ったもの</h2>

<ul>
<li>本棚用ラック</li>
<li>DVDプレイヤー</li>
<li>M2 <a class="keyword" href="https://d.hatena.ne.jp/keyword/MacBook%20Air">MacBook Air</a></li>
<li><a class="keyword" href="https://d.hatena.ne.jp/keyword/iPhone">iPhone</a> 15</li>
<li>Echo Dot with clock</li>
</ul>


<a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%B8%A5%D6%A5%EA">ジブリ</a>作品をレンタルDVDで観るためにDVDプレイヤーを買った。<a class="keyword" href="https://d.hatena.ne.jp/keyword/Mac">Mac</a>と<a class="keyword" href="https://d.hatena.ne.jp/keyword/iPhone">iPhone</a>を新調した。

<h2 id="行った場所">行った場所</h2>

<a href="https://azujuuuuuun.hatenablog.com/entry/2023/05/08/215904">&#x30B4;&#x30FC;&#x30EB;&#x30C7;&#x30F3;&#x30A6;&#x30A3;&#x30FC;&#x30AF; 2023 - &#x306A;&#x3093;&#x3067;&#x3082;&#x30CE;&#x30FC;&#x30C8;</a>にも書いたが、<a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%B4%A1%BC%A5%EB%A5%C7%A5%F3%A5%A6%A5%A3%A1%BC%A5%AF">ゴールデンウィーク</a>に伊勢を旅行した。

<a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%B8%A5%D6%A5%EA">ジブリ</a>作品を観てから<a class="keyword" href="https://d.hatena.ne.jp/keyword/%BB%B0%C2%EB%A4%CE%BF%B9%A5%B8%A5%D6%A5%EA%C8%FE%BD%D1%B4%DB">三鷹の森ジブリ美術館</a>に行った。絵コンテすごかった。

8月に小樽を旅行した。

11月に6年半ぶりにディズニーランドに行った。アプリの<a class="keyword" href="https://d.hatena.ne.jp/keyword/QR%A5%B3%A1%BC%A5%C9">QRコード</a>で入場したり、<a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%D5%A5%A1%A5%B9%A5%C8%A5%D1%A5%B9">ファストパス</a>がなくなっていたり、新しいアト<a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%E9%A5%AF">ラク</a>ションができていたりしていろいろ変わっていたが、夢の国は楽しかった。

<h2 id="2024年に向けて">2024年に向けて</h2>

来年も充実した1年を送りたい。

2023年を振り返る。 目次 仕事 ゲーム 映画 買ったもの 行った場所 2024年に向けて 仕事 2023年4月までの過ごし方 - なんでもノートにも書いたが、リーダーからメンバーに戻った。 今年はJava・Spring BootでMQコンシューマーやバッチを書いたり、Apache Solrをちょっとだけ触ったり、Kubernetesをちょっとだけ触ったりした。 ゲーム 今年は沢山ゲームをした年だった。どのゲームも夜更かしするぐらい面白かった。 スーパーダンガンロンパ2 さよなら絶望学園 ニューダンガンロンパV3 みんなのコロシアイ新学期 ゼルダの伝説 ティアーズ オブ ザ キングダム 超探…

2023年振り返り

今年の自分の<a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%B4%A1%BC%A5%EB%A5%C7%A5%F3%A5%A6%A5%A3%A1%BC%A5%AF">ゴールデンウィーク</a>は4/28〜5/7の10連休だった。会社の祝日振替休日 + 有給休暇を2日取得した。散歩、伊勢旅行、このすば、<a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%B8%A5%D6%A5%EA">ジブリ</a>映画という感じだった（他にもしたけれど）。

<h2 id="散歩">散歩</h2>

<a class="keyword" href="https://d.hatena.ne.jp/keyword/%C1%A5%B6%B6">船橋</a>と<a class="keyword" href="https://d.hatena.ne.jp/keyword/%C0%BE%C1%A5%B6%B6">西船橋</a>、<a class="keyword" href="https://d.hatena.ne.jp/keyword/%CB%DC%C8%AC%C8%A8">本八幡</a>、市川の駅周辺を散歩した。<a class="keyword" href="https://d.hatena.ne.jp/keyword/%C1%A5%B6%B6">船橋</a>・<a class="keyword" href="https://d.hatena.ne.jp/keyword/%C0%BE%C1%A5%B6%B6">西船橋</a>間、<a class="keyword" href="https://d.hatena.ne.jp/keyword/%C0%BE%C1%A5%B6%B6">西船橋</a>・<a class="keyword" href="https://d.hatena.ne.jp/keyword/%CB%DC%C8%AC%C8%A8">本八幡</a>間は電車で移動し、<a class="keyword" href="https://d.hatena.ne.jp/keyword/%CB%DC%C8%AC%C8%A8">本八幡</a>・市川間は歩いた。ここ数年、行ける距離なのに行ったことがない街があるのは勿体無いと思い散歩をしている。<a class="keyword" href="https://d.hatena.ne.jp/keyword/%C1%A5%B6%B6">船橋</a>も行ったことないと思っていたが、駅から出てみたら中学生の頃に来たことがあるのを思い出し感慨深くなった。どこも住みやすそうな街だった。

<h2 id="伊勢旅行">伊勢旅行</h2>

伊勢に1泊2日で旅行した。1日目は<a class="keyword" href="https://d.hatena.ne.jp/keyword/%B0%CB%C0%AA%BF%C0%B5%DC">伊勢神宮</a>の外宮と内宮にお参りし、<a class="keyword" href="https://d.hatena.ne.jp/keyword/%A4%AA%A4%AB%A4%B2%B2%A3%C3%FA">おかげ横丁</a>に行った。神宮の公式サイトの<a href="https://www.isejingu.or.jp/about/">神宮について</a>や<a href="https://www.isejingu.or.jp/first/">はじめての神宮</a>を読んでから行った。勉強になったしサイトで見た宮だ！となって面白かった。次、他の神社にお参りするときも知識をつけてからお参りしようと思った。2日目は<a href="https://www.kankomie.or.jp/spot/2231">夫婦岩</a>にお参りし、<a class="keyword" href="https://d.hatena.ne.jp/keyword/%BE%BE%BA%E5%B5%ED">松阪牛</a>のステーキを食べ、<a class="keyword" href="https://d.hatena.ne.jp/keyword/%C4%BB%B1%A9%BF%E5%C2%B2%B4%DB">鳥羽水族館</a>に行った。ラッコやアザラシなど可愛い動物が沢山いて、スナドリネコがとてもカッコよかった。

<figure class="figure-image figure-image-fotolife" title="神宮内宮">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/azujuuuuuun/20230508/20230508214203.jpg" width="1024" height="768" loading="lazy" title="" class="hatena-fotolife" style="width:400px" itemprop="image"><figcaption>神宮内宮</figcaption></figure>

<figure class="figure-image figure-image-fotolife" title="おかげ横丁のふくすけの月見伊勢うどん"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/azujuuuuuun/20230508/20230508214242.jpg" width="1024" height="768" loading="lazy" title="" class="hatena-fotolife" style="width:400px" itemprop="image"><figcaption><a class="keyword" href="https://d.hatena.ne.jp/keyword/%A4%AA%A4%AB%A4%B2%B2%A3%C3%FA">おかげ横丁</a>のふくすけの月見<a class="keyword" href="https://d.hatena.ne.jp/keyword/%B0%CB%C0%AA%A4%A6%A4%C9%A4%F3">伊勢うどん</a></figcaption></figure>

<figure class="figure-image figure-image-fotolife" title="夫婦岩">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/azujuuuuuun/20230508/20230508214303.jpg" width="1024" height="768" loading="lazy" title="" class="hatena-fotolife" style="width:400px" itemprop="image"><figcaption><a class="keyword" href="https://d.hatena.ne.jp/keyword/%C9%D7%C9%D8%B4%E4">夫婦岩</a></figcaption></figure>

<figure class="figure-image figure-image-fotolife" title="鳥羽水族館のスナドリネコ">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/azujuuuuuun/20230508/20230508214317.jpg" width="768" height="1024" loading="lazy" title="" class="hatena-fotolife hatena-fotolife-height-only" style="height:400px" itemprop="image"><figcaption><a class="keyword" href="https://d.hatena.ne.jp/keyword/%C4%BB%B1%A9%BF%E5%C2%B2%B4%DB">鳥羽水族館</a>のスナドリネコ</figcaption></figure>

<h2 id="このすば">このすば</h2>

今、<a href="http://konosuba.com/bakuen/">この素晴らしい世界に爆焔を！</a>のアニメが放送されている。自分は<a class="keyword" href="https://d.hatena.ne.jp/keyword/d%A5%A2%A5%CB%A5%E1%A5%B9%A5%C8%A5%A2">dアニメストア</a>で観ている。アニメを観て、このすばをもっと見たくなったので<a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%E9%A5%CE%A5%D9">ラノベ</a>の<a class="keyword" href="https://d.hatena.ne.jp/keyword/Kindle">Kindle</a>版を買って読んだ。8巻から17巻（本編最終巻）まで読んだ。面白かったの一言に尽きる。

<div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/dp/B019I5E45Y?tag=hatena-22&amp;linkCode=osi&amp;th=1&amp;psc=1" class="hatena-asin-detail-image-link" target="_blank" rel="noopener"><img src="https://m.media-amazon.com/images/I/61Hh4dC1G7L._SL500_.jpg" class="hatena-asin-detail-image" alt="この素晴らしい世界に祝福を！ 8　アクシズ教団VSエリス教団【電子特別版】 (角川スニーカー文庫)" title="この素晴らしい世界に祝福を！ 8　アクシズ教団VSエリス教団【電子特別版】 (角川スニーカー文庫)"></a><div class="hatena-asin-detail-info"><a href="https://www.amazon.co.jp/dp/B019I5E45Y?tag=hatena-22&amp;linkCode=osi&amp;th=1&amp;psc=1" target="_blank" rel="noopener">この素晴らしい世界に祝福を！ 8　アクシズ教団VSエリス教団【電子特別版】 (角川スニーカー文庫)</a><ul class="hatena-asin-detail-meta"><li>作者:<a href="https://d.hatena.ne.jp/keyword/%B6%C7%20%A4%CA%A4%C4%A4%E1" class="keyword">暁 なつめ</a></li><li><a class="keyword" href="https://d.hatena.ne.jp/keyword/KADOKAWA">KADOKAWA</a></li></ul><a href="https://www.amazon.co.jp/dp/B019I5E45Y?tag=hatena-22&amp;linkCode=osi&amp;th=1&amp;psc=1" class="asin-detail-buy" target="_blank" rel="noopener">Amazon</a></div></div>

<div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/dp/B0875TYLDK?tag=hatena-22&amp;linkCode=osi&amp;th=1&amp;psc=1" class="hatena-asin-detail-image-link" target="_blank" rel="noopener"><img src="https://m.media-amazon.com/images/I/510KQqIOfML._SL500_.jpg" class="hatena-asin-detail-image" alt="この素晴らしい世界に祝福を！１７　この冒険者たちに祝福を！ (角川スニーカー文庫)" title="この素晴らしい世界に祝福を！１７　この冒険者たちに祝福を！ (角川スニーカー文庫)"></a><div class="hatena-asin-detail-info"><a href="https://www.amazon.co.jp/dp/B0875TYLDK?tag=hatena-22&amp;linkCode=osi&amp;th=1&amp;psc=1" target="_blank" rel="noopener">この素晴らしい世界に祝福を！１７　この冒険者たちに祝福を！ (角川スニーカー文庫)</a><ul class="hatena-asin-detail-meta"><li>作者:<a href="https://d.hatena.ne.jp/keyword/%B6%C7%20%A4%CA%A4%C4%A4%E1" class="keyword">暁 なつめ</a></li><li><a class="keyword" href="https://d.hatena.ne.jp/keyword/KADOKAWA">KADOKAWA</a></li></ul><a href="https://www.amazon.co.jp/dp/B0875TYLDK?tag=hatena-22&amp;linkCode=osi&amp;th=1&amp;psc=1" class="asin-detail-buy" target="_blank" rel="noopener">Amazon</a></div></div>

<h2 id="ジブリ映画"><a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%B8%A5%D6%A5%EA">ジブリ</a>映画</h2>

<a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%E9%A5%D4%A5%E5%A5%BF">ラピュタ</a>と<a class="keyword" href="https://d.hatena.ne.jp/keyword/%A4%E2%A4%CE%A4%CE%A4%B1%C9%B1">もののけ姫</a>を見た。どちらも今まで観たことがなかった。<a class="keyword" href="https://d.hatena.ne.jp/keyword/%B6%E2%CD%CB%A5%ED%A1%BC%A5%C9%A5%B7%A5%E7%A1%BC">金曜ロードショー</a>がお風呂の時間に被っていたのと流体が苦手で<a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%B8%A5%D6%A5%EA">ジブリ</a>映画は観てこなかった。重い腰を上げてGEOの会員登録をして<a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%B4%A1%BC%A5%EB%A5%C7%A5%F3%A5%A6%A5%A3%A1%BC%A5%AF">ゴールデンウィーク</a>最終日に滑り込みで観た。どちらも面白かった。<a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%E9%A5%D4%A5%E5%A5%BF">ラピュタ</a>は<a class="keyword" href="https://d.hatena.ne.jp/keyword/Twitter">Twitter</a>でしか見たことなかった<a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%D0%A5%EB%A5%B9">バルス</a>を聴けてよかった。アシタカかっこいい。やはりタタリ神の流体が苦手だった。次は<a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%CA%A5%A6%A5%B7%A5%AB">ナウシカ</a>と<a class="keyword" href="https://d.hatena.ne.jp/keyword/%C0%E9%A4%C8%C0%E9%BF%D2%A4%CE%BF%C0%B1%A3%A4%B7">千と千尋の神隠し</a>を見る予定。

今年の自分のゴールデンウィークは4/28〜5/7の10連休だった。会社の祝日振替休日 + 有給休暇を2日取得した。散歩、伊勢旅行、このすば、ジブリ映画という感じだった（他にもしたけれど）。 散歩 船橋と西船橋、本八幡、市川の駅周辺を散歩した。船橋・西船橋間、西船橋・本八幡間は電車で移動し、本八幡・市川間は歩いた。ここ数年、行ける距離なのに行ったことがない街があるのは勿体無いと思い散歩をしている。船橋も行ったことないと思っていたが、駅から出てみたら中学生の頃に来たことがあるのを思い出し感慨深くなった。どこも住みやすそうな街だった。 伊勢旅行 伊勢に1泊2日で旅行した。1日目は伊勢神宮の外宮と内宮…

ゴールデンウィーク 2023

<a href="https://azujuuuuuun.hatenablog.com/entry/2023/01/29/123301">Romeを使ってみた</a><a class="keyword" href="https://d.hatena.ne.jp/keyword/%A4%AB%A4%E9%A4%B7">からし</a>ばらくブログを書いていなかった。もう少し頻度高く書けるようにしたい。

比較的大きな変化や出来事はなかったので過ごし方というタイトルにした。

<ul>
<li>色々な技術のドキュメントを読んだり、触ったりした</li>
<li>技術書を読んでいた</li>
<li>仕事でリーダーからメンバーに戻った</li>
<li>会社の同期の結婚式と会社の同期の結婚式の二次会に出席した</li>
</ul>


名前は聞いたことあるけど何なのか知らないフロントエンドのツールが多かったのでドキュメントを読んだり、触ったりしていた。具体的には以下。

<ul>
<li>Vite</li>
<li>Vitest</li>
<li>esbuild</li>
<li>SWC</li>
<li>Parcel</li>
<li>pnpm</li>
<li>MSW</li>
<li>Puppeteer</li>
<li>Playwright</li>
</ul>


また、GoとRustでLeetCodeを解いたり、簡単なコードを書いたりもしていた。

技術書は以下を読んだ。

<ul>
<li>Team Topologies</li>
<li>実践Node.js入門</li>
<li>フロントエンド開発のためのセキュリティ入門</li>
<li><a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%D7%A5%ED%A5%C0%A5%AF%A5%C8%A5%DE%A5%CD%A5%B8%A5%E1%A5%F3%A5%C8">プロダクトマネジメント</a>のすべて</li>
<li>ソフトウェア<a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%A2%A1%BC%A5%AD%A5%C6%A5%AF%A5%C1%A5%E3">アーキテクチャ</a>の基礎</li>
<li><a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%D7%A5%ED%A5%B0%A5%E9%A5%DE%A1%BC">プログラマー</a>脳</li>
<li>情熱<a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%D7%A5%ED%A5%B0%A5%E9%A5%DE%A1%BC">プログラマー</a>（2回目）</li>
<li>入門モダン<a class="keyword" href="https://d.hatena.ne.jp/keyword/Linux">Linux</a></li>
</ul>


読み終えたが、読み終えることを意識しすぎて内容が頭に定着していない感が否めないので、最近反省している。

仕事ではリーダーからメンバーに戻った。1年間と短い期間だったがとても勉強になり、貴重な経験をさせてもらえたことに感謝しかない。一方でまだまだ手を動かして開発したい、技術力を高めたいという気持ちが強くあることに気づき、メンバーに戻ることにした。

2人の会社の同期の結婚式と結婚式の二次会に招待していただき、出席した。友人の結婚式に出席するのは初めてだったので持ち物や服装などソワソワした。どちらも楽しく素敵な結婚式、二次会だった。

その他、友人とご飯を食べたり、散歩したりもした。こんな感じに過ごしていた。

Romeを使ってみたからしばらくブログを書いていなかった。もう少し頻度高く書けるようにしたい。 比較的大きな変化や出来事はなかったので過ごし方というタイトルにした。 色々な技術のドキュメントを読んだり、触ったりした 技術書を読んでいた 仕事でリーダーからメンバーに戻った 会社の同期の結婚式と会社の同期の結婚式の二次会に出席した 名前は聞いたことあるけど何なのか知らないフロントエンドのツールが多かったのでドキュメントを読んだり、触ったりしていた。具体的には以下。 Vite Vitest esbuild SWC Parcel pnpm MSW Puppeteer Playwright また、Goと…

2023年4月までの過ごし方

<a href="https://rome.tools/">Rome</a> という開発ツールを使ってみた。RomeはRome1つでフォーマットやlintなどができる統合開発ツールを目指していて、2023年1月現在はフォーマッターとLinterがリリースされている。そのフォーマッターとLinterを使ってみた。<a href="https://github.com/azujuuuuuun/url-query-editor/pull/3">最近開発しているChrome拡張にPrettierとESLintを入れてなかったので代わりにRomeを導入してみた</a>。

やったこと

<ul>
<li>Romeのインストール</li>
<li>Romeの設定

<ul>
<li><code>pnpm rome init</code> + インデントスタイルの変更</li>
</ul>
</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/VSCode">VSCode</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B3%C8%C4%A5%B5%A1%C7%BD">拡張機能</a>の設定

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EF%A1%BC%A5%AF%A5%B9%A5%DA%A1%BC%A5%B9">ワークスペース</a>設定の対応言語のみデフォルトフォーマッターをRomeにした</li>
</ul>
</li>
<li>npm scriptの設定</li>
</ul>


感想

<ul>
<li>コードベースが小さいので参考にならないかもしれないが確かに速い（Rustで作られている）</li>
<li>1つのパッケージをインストールするだけでいいのは簡単だった

<ul>
<li>ESLintだと色々な<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3">プラグイン</a>を入れるのでやや面倒</li>
</ul>
</li>
<li>Lintのルールは<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3">プラグイン</a>で拡張できるESLintの方がまだまだ豊富</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3">プラグイン</a>機能がないので拡張したい人にとっては物足りないかもしれない

<ul>
<li>ツールの設定に時間をとられないようにあえてないのかもしれない</li>
</ul>
</li>
</ul>

Rome という開発ツールを使ってみた。RomeはRome1つでフォーマットやlintなどができる統合開発ツールを目指していて、2023年1月現在はフォーマッターとLinterがリリースされている。そのフォーマッターとLinterを使ってみた。最近開発しているChrome拡張にPrettierとESLintを入れてなかったので代わりにRomeを導入してみた。 やったこと Romeのインストール Romeの設定 pnpm rome init + インデントスタイルの変更 VSCodeの拡張機能の設定 ワークスペース設定の対応言語のみデフォルトフォーマッターをRomeにした npm scriptの…

Romeを使ってみた

<a href="https://azujuuuuuun.hatenablog.com/entry/2021/12/31/220346">2021年振り返り</a>

2022年も振り返る。<a href="https://azujuuuuuun.hatenablog.com/entry/2022/08/03/220826">2022年7月末までのトピック</a>の内容を含んだ振り返りになる。

<ul>
<li>仕事

<ul>
<li>リーダーになった</li>
<li>10月に部署異動があった

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Java">Java</a>、Spring Bootを書くようになった</li>
</ul>
</li>
</ul>
</li>
<li>プライベート

<ul>
<li>買ったもの

<ul>
<li>ベッド</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%EB%A5%B4%A5%D2%A5%E5%A1%BC%A5%DE%A5%F3">エルゴヒューマン</a></li>
<li>ソファ</li>
<li>リビングテーブル</li>
</ul>
</li>
<li>友人から電動昇降デスクをもらった</li>
<li>旅行

<ul>
<li>山梨</li>
<li>大曲の花火大会</li>
<li>浜松</li>
</ul>
</li>
<li><a href="https://azujuuuuuun.hatenablog.com/entry/2022/06/20/211014">技術書を電子書籍から紙書籍に戻した</a></li>
</ul>
</li>
</ul>


去年の今頃と比べて部屋の環境が大きく変わった。暮らしやすく仕事しやすくなった（はず）。

今年は旅行に行けたのも良かった。

技術書を紙書籍で買うようにしてからインプットが増えた。その代わりアウトプットが少なくなってしまったので来年はバランスに気をつけたい。

来年も充実した1年を送りたい。

2021年振り返り 2022年も振り返る。2022年7月末までのトピックの内容を含んだ振り返りになる。 仕事 リーダーになった 10月に部署異動があった Java、Spring Bootを書くようになった プライベート 買ったもの ベッド エルゴヒューマン ソファ リビングテーブル 友人から電動昇降デスクをもらった 旅行 山梨 大曲の花火大会 浜松 技術書を電子書籍から紙書籍に戻した 去年の今頃と比べて部屋の環境が大きく変わった。暮らしやすく仕事しやすくなった（はず）。 今年は旅行に行けたのも良かった。 技術書を紙書籍で買うようにしてからインプットが増えた。その代わりアウトプットが少なくなって…

2022年振り返り

<a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a> Actionsで以下のエラーが出た。

<pre class="code shell" data-lang="shell" data-unlink>Push the commit or tag
 /usr/bin/git push origin master
 remote: Permission to azujuuuuuun/azujuuuuuun.github.io.git denied to github-actions[bot].
 fatal: unable to access &#39;https://github.com/azujuuuuuun/azujuuuuuun.github.io.git/&#39;: The requested URL returned error: 403
 Error: Action failed with &#34;The process &#39;/usr/bin/git&#39; failed with exit code 128&#34;</pre>


権限がなく<a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a> Actionsからpushが拒否されたよう。直前のPRで権限を変更したので心当たりがあった。

<a href="https://github.com/azujuuuuuun/azujuuuuuun.github.io/blob/d38acc9466d01ec004d861427e285597055db0a4/.github/workflows/continuous-delivery-workflow.yml#L13-L15">https://github.com/azujuuuuuun/azujuuuuuun.github.io/blob/d38acc9466d01ec004d861427e285597055db0a4/.github/workflows/continuous-delivery-workflow.yml#L13-L15</a>

<pre class="code lang-yaml" data-lang="yaml" data-unlink> permissions:
 contents: &quot;read&quot;
 id-token: &quot;write&quot;
</pre>


このpermissionsは<a href="https://github.com/google-github-actions/auth">google-github-actions/auth</a>を元に設定した。<a href="https://docs.github.com/ja/actions/using-jobs/assigning-permissions-to-jobs#assigning-permissions-to-a-specific-job">Assigning permissions to jobs - GitHub Docs</a>によると

<blockquote>これらのスコープのいずれかのアクセスを指定した場合、指定されたなかったものはすべてnoneに設定されます。</blockquote>

だそうだ。つまり、このpermissionsの設定によってどれかのスコープにnoneが設定されて書き込み権限がなくなったか、<code>contents: "read"</code> によって書き込み権限がなくなったかのどちらかが原因だとわかった。

スコープと対応するアクセス権限は<a href="https://docs.github.com/en/rest/overview/permissions-required-for-github-apps">Permissions required for GitHub Apps - GitHub Docs</a>にあった。Git操作のアクセス権はcontentsスコープだったので <code>contents: "write"</code> に変更したら解決した。

GitHub Actionsで以下のエラーが出た。 Push the commit or tag /usr/bin/git push origin master remote: Permission to azujuuuuuun/azujuuuuuun.github.io.git denied to github-actions[bot]. fatal: unable to access 'https://github.com/azujuuuuuun/azujuuuuuun.github.io.git/': The requested URL returned error: 403 Error…

GitHub ActionsからGitHubへpushできないエラー

<a href="https://azujuuuuuun.hatenablog.com/entry/2022/09/03/152125">GitHub Pages&#x306B;&#x306F;&#x3066;&#x306A;&#x30D6;&#x30ED;&#x30B0;&#x306E;&#x6700;&#x65B0;&#x8A18;&#x4E8B;&#x3092;&#x8868;&#x793A;&#x3059;&#x308B; - &#x306A;&#x3093;&#x3067;&#x3082;&#x30CE;&#x30FC;&#x30C8;</a>に<a class="keyword" href="https://d.hatena.ne.jp/keyword/GitHub">GitHub</a> ActionsからGCSへの認証に困ったと書いた。詳細をこの記事に書く。

前回の記事ではGCSにアップロードした<a class="keyword" href="https://d.hatena.ne.jp/keyword/JSON">JSON</a>を取得し、その<a class="keyword" href="https://d.hatena.ne.jp/keyword/JSON">JSON</a>に入っているブログの最新記事を表示した。<a class="keyword" href="https://d.hatena.ne.jp/keyword/JSON">JSON</a>取得に<a href="https://cloud.google.com/nodejs/docs/reference/storage/latest">Cloud StorageのNode.js Clientライブラリ</a>を利用した。

<h2 id="サービスアカウントを利用した認証">サービスアカウントを利用した認証</h2>

<a href="https://cloud.google.com/storage/docs/reference/libraries#setting_up_authentication">Cloud Storage client libraries &nbsp;|&nbsp; Google Cloud</a>の順に沿ってセットアップを進めた。

<ol>
<li>サービスアカウントを作成</li>
<li>サービスアカウントにGCSの読み取りロールを付与</li>
<li>サービスアカウントキーを作成し、<a class="keyword" href="https://d.hatena.ne.jp/keyword/JSON">JSON</a>ファイルをダウンロード</li>
<li><a class="keyword" href="https://d.hatena.ne.jp/keyword/%B4%C4%B6%AD%CA%D1%BF%F4">環境変数</a> <code>GOOGLE_APPLICATION_CREDENTIALS</code> に3でダウンロードしたクレデンシャルファイルのパスを設定</li>
</ol>


これでライブラリが<a class="keyword" href="https://d.hatena.ne.jp/keyword/%B4%C4%B6%AD%CA%D1%BF%F4">環境変数</a>に設定したパスからクレデンシャルファイルを読み込み、よしなに<a class="keyword" href="https://d.hatena.ne.jp/keyword/Google">Google</a> Cloudと認証を行ってくれるようになった。ローカルで認証できるようになったが、<a class="keyword" href="https://d.hatena.ne.jp/keyword/GitHub">GitHub</a> Actions上で認証するにはどうしたらよいか。Next.jsのgetStaticPropsでStatic Site Generationをしているので、<a class="keyword" href="https://d.hatena.ne.jp/keyword/GitHub">GitHub</a> Actionsでのビルド時に<a class="keyword" href="https://d.hatena.ne.jp/keyword/JSON">JSON</a>取得、認証が行われる。<a class="keyword" href="https://d.hatena.ne.jp/keyword/GitHub">GitHub</a>で <code>GOOGLE_APPLICATION_CREDENTIALS</code> で検索したら、以下のコードがあった（一部省略）。

<a href="https://github.com/Gradder-Official/gradder_main/blob/a00b4030e20119ab91dc73df33361f030e21708f/.github/workflows/deploy.yml#L23-L30">https://github.com/Gradder-Official/gradder_main/blob/a00b4030e20119ab91dc73df33361f030e21708f/.github/workflows/deploy.yml#L23-L30</a>

<pre class="code lang-yaml" data-lang="yaml" data-unlink> env: 
 GOOGLE_APPLICATION_CREDENTIALS: key.json
 run: |
 echo -n '${{ secrets.GOOGLE_APPLICATION_CREDENTIALS }}' &gt; key.json
</pre>


<a class="keyword" href="https://d.hatena.ne.jp/keyword/GitHub">GitHub</a> Actionsのシークレットにクレデンシャルファイルを保存しておいて、ジョブの実行時にファイルに書き出すというものだった。自分も考えはしたが、間違えてファイルの中身がログに出力されないか不安があったのでもう少し調べた。

<h2 id="Workload-Identity-連携">Workload Identity 連携</h2>

調べたところ以下のブログを見つけた。

<iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fcloud.google.com%2Fblog%2Fja%2Fproducts%2Fidentity-security%2Fenabling-keyless-authentication-from-github-actions" title="GitHub Actions からのキーなしの認証の有効化 | Google Cloud 公式ブログ" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" loading="lazy"></iframe><cite class="hatena-citation"><a href="https://cloud.google.com/blog/ja/products/identity-security/enabling-keyless-authentication-from-github-actions">cloud.google.com</a></cite>

<ul>
<li>サービスアカウントキーより認証情報の有効期限を短くでき、不正利用時間が短くなる</li>
<li>サービスアカウントキーより管理コストが小さい</li>
<li>サービスアカウントより詳細な権限管理ができる</li>
</ul>


というものだった。また、<a href="https://github.com/google-github-actions/auth">auth</a>という<a class="keyword" href="https://d.hatena.ne.jp/keyword/GitHub">GitHub</a> Actionで簡単に認証ができそうだった。Workload Identity連携の方がサービスアカウントより総合的に良さそうだったので利用することにした。

<a href="https://cloud.google.com/iam/docs/configuring-workload-identity-federation">Configure workload identity federation with AWS or Azure &nbsp;|&nbsp; IAM Documentation &nbsp;|&nbsp; Google Cloud</a>と
<a href="https://cloud.google.com/iam/docs/using-workload-identity-federation">Configure workload identity federation with AWS or Azure &nbsp;|&nbsp; IAM Documentation &nbsp;|&nbsp; Google Cloud</a>に沿って、以下の設定をした。

<ul>
<li>IDプールを作成</li>
<li>プールにプロバイダを追加

<ul>
<li>プロバイダ：<a class="keyword" href="https://d.hatena.ne.jp/keyword/OpenID">OpenID</a> Connect（OIDC）</li>
<li>発行元 URL：<a href="https://token.actions.githubusercontent.com/">https://token.actions.githubusercontent.com/</a></li>
</ul>
</li>
<li>属性<a class="keyword" href="https://d.hatena.ne.jp/keyword/%A5%DE%A5%C3%A5%D4%A5%F3%A5%B0">マッピング</a>を追加

<ul>
<li><a class="keyword" href="https://d.hatena.ne.jp/keyword/google">google</a>.subject=assertion.repository</li>
</ul>
</li>
<li>外部 IDにサービスアカウントの権限借用を許可</li>
</ul>


また、<a class="keyword" href="https://d.hatena.ne.jp/keyword/GitHub">GitHub</a> Actionsのワークフローにauth <a class="keyword" href="https://d.hatena.ne.jp/keyword/GitHub">GitHub</a> Actionのstepを追加した。必須パラメーターの <code>workload_identity_provider</code> と <code>service_account</code> を設定した。<code>create_credentials_file</code> パラメーターがデフォルト <code>true</code> で設定されていて、Clientライブラリで利用するクレデンシャルファイルを生成してくれる。また、<code>cleanup_credentials</code> パラメーターがデフォルト <code>true</code> で設定されていて、ジョブ終了時にクレデンシャルファイルを削除してくれる。

これで<a class="keyword" href="https://d.hatena.ne.jp/keyword/GitHub">GitHub</a> Actionsから<a class="keyword" href="https://d.hatena.ne.jp/keyword/Google">Google</a> Cloudに認証することができるようになった。

<h2 id="感想">感想</h2>

どうするのが良いかわからなかったので困ったが、無事に解決できてよかった。Workload Identity連携はまだ理解がふわふわしているので醸成したい。

GitHub Pagesにはてなブログの最新記事を表示する - なんでもノートにGitHub ActionsからGCSへの認証に困ったと書いた。詳細をこの記事に書く。 前回の記事ではGCSにアップロードしたJSONを取得し、そのJSONに入っているブログの最新記事を表示した。JSON取得にCloud StorageのNode.js Clientライブラリを利用した。 サービスアカウントを利用した認証 Cloud Storage client libraries | Google Cloudの順に沿ってセットアップを進めた。 サービスアカウントを作成 サービスアカウントにGCSの読み取りロールを…

GitHub ActionsからGoogle Cloudに認証する

<a href="https://azujuuuuuun.github.io">https://azujuuuuuun.github.io</a>にブログの最新記事を出した。

<h2 id="実装方法">実装方法</h2>

<ol>
<li><a href="https://help.hatenablog.com/entry/feed">はてなブログの更新フィード</a>を取得する

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/Atom">Atom</a>フォーマットを取得する</li>
</ul>
</li>
<li>1の更新フィードを<a class="keyword" href="http://d.hatena.ne.jp/keyword/JSON">JSON</a>に変換する

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/XML">XML</a>より扱いに慣れているので<a class="keyword" href="http://d.hatena.ne.jp/keyword/JSON">JSON</a>に変換した</li>
</ul>
</li>
<li>2の<a class="keyword" href="http://d.hatena.ne.jp/keyword/JSON">JSON</a>を<a href="https://cloud.google.com/storage?hl=ja">Google Cloud Storage</a>（以下、GCS）にアップロードする

<ul>
<li>無料枠があるのでGCSを選択した</li>
</ul>
</li>
<li>Next.jsのgetStaticPropsでGCSから<a class="keyword" href="http://d.hatena.ne.jp/keyword/JSON">JSON</a>を取得する</li>
</ol>


当初の目的はブログを更新したらazujuuuuuun.<a class="keyword" href="http://d.hatena.ne.jp/keyword/github">github</a>.ioを更新することだった。それを踏まえた実装方法になっている。今後、以下の日時の定期実行処理を別<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>に実装する。

<ol>
<li>GCSから更新フィード<a class="keyword" href="http://d.hatena.ne.jp/keyword/JSON">JSON</a>を取得する</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A4%CF%A4%C6%A4%CA%A5%D6%A5%ED%A5%B0">はてなブログ</a>の更新フィード<a class="keyword" href="http://d.hatena.ne.jp/keyword/Atom">Atom</a>を取得する</li>
<li>1と2の<a class="keyword" href="http://d.hatena.ne.jp/keyword/JSON">JSON</a>と<a class="keyword" href="http://d.hatena.ne.jp/keyword/Atom">Atom</a>の最終更新日時が同じ場合は処理を終了する</li>
<li>異なる場合

<ol>
<li>2の<a class="keyword" href="http://d.hatena.ne.jp/keyword/Atom">Atom</a>から<a class="keyword" href="http://d.hatena.ne.jp/keyword/JSON">JSON</a>を生成し、GCSにアップロードする</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a> Actionsの<a href="https://docs.github.com/ja/actions/using-workflows/events-that-trigger-workflows#repository_dispatch">repository dispatch</a>を利用して<a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a> Pagesのデプロイ処理を走らせる</li>
</ol>
</li>
</ol>


<h2 id="困ったこと">困ったこと</h2>

<h3 id="GCSのバケット名">GCSの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%B1%A5%C3%A5%C8">バケット</a>名</h3>

<blockquote data-conversation="none" class="twitter-tweet" data-lang="ja">GCSの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%B1%A5%C3%A5%C8">バケット</a>名に悩む&mdash; jun (@azujuuuuuun) <a href="https://twitter.com/azujuuuuuun/status/1564286725262049280?ref_src=twsrc%5Etfw">2022年8月29日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

<a href="https://cloud.google.com/storage/docs/naming-buckets">https://cloud.google.com/storage/docs/naming-buckets</a>

<blockquote><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%B1%A5%C3%A5%C8">バケット</a>名は一般公開されます。
ユーザー ID、メールアドレス、プロジェクト名、プロジェクト番号、個人を特定可能な情報（PII）を<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%B1%A5%C3%A5%C8">バケット</a>名に使用しないでください。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%B1%A5%C3%A5%C8">バケット</a>の存在を誰でも調べることができます。</blockquote>

この考慮事項に悩まされた。良い<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CC%BF%CC%BE%B5%AC%C2%A7">命名規則</a>が未だにわからない。当たり障りのない<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%B1%A5%C3%A5%C8">バケット</a>名をつけた。

<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a> Cloudはリソースに名前とIDを求められるのでその度に悩んでいる。

<h3 id="GCSの無料枠を超えないか">GCSの無料枠を超えないか</h3>

GCSの無料枠は2022/09/03現在以下の条件。

<blockquote><ul>
<li>5 GB 月の Regional Storage（米国リージョンのみ）</li>
<li>5,000 回のクラス A オペレーション（1 か月あたり）</li>
<li>50,000 回のクラス B オペレーション（1 か月あたり）</li>
<li>1 GB の北米から全リージョン宛ての下りネットワーク（1 か月あたり、中国とオーストラリアを除く）</li>
</ul>
</blockquote>

<a href="https://cloud.google.com/free/docs/free-cloud-features?hl=ja">https://cloud.google.com/free/docs/free-cloud-features?hl=ja</a>

クラスAオペレーションとクラスBオペレーションは<a href="https://cloud.google.com/storage/pricing?hl=ja">https://cloud.google.com/storage/pricing?hl=ja</a>の説明を参照。更新系や<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%B1%A5%C3%A5%C8">バケット</a>内のオブジェクト一覧取得などのやや重い処理がクラスA、比較的軽めの参照系がクラスB。

ローカルで開発中にビルドの度にファイル取得が走るので無料枠を超えないか心配だった。とりあえず、開発中は<a href="https://github.com/azujuuuuuun/azujuuuuuun.github.io/blob/6127c5c3a89fded59c32193b36847d38984f6f7e/src/api/fetch-feed.ts#L31">環境変数でローカルのファイルを参照するようにした</a>。ただ、開発中の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A1%BC%A5%B9%A5%B3%A1%BC%A5%C9">ソースコード</a>と本番の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A1%BC%A5%B9%A5%B3%A1%BC%A5%C9">ソースコード</a>が異なるので、GCS互換のオブジェクトストレージをローカルに立てられないか検討中。

<h3 id="GitHub-ActionsからGCSへの認証方法"><a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a> ActionsからGCSへの認証方法</h3>

長くなりそうなので別の記事に書く。

<h2 id="感想">感想</h2>

<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a> Cloudを初めて触るので読むドキュメントが多い。実装より<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a> Cloudの設定、<a class="keyword" href="http://d.hatena.ne.jp/keyword/Google">Google</a> Cloudの設定よりリソースの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%CC%BF%CC%BE">命名</a>に時間を使ってる気がする。

https://azujuuuuuun.github.ioにブログの最新記事を出した。 実装方法 はてなブログの更新フィードを取得する Atomフォーマットを取得する 1の更新フィードをJSONに変換する XMLより扱いに慣れているのでJSONに変換した 2のJSONをGoogle Cloud Storage（以下、GCS）にアップロードする 無料枠があるのでGCSを選択した Next.jsのgetStaticPropsでGCSからJSONを取得する 当初の目的はブログを更新したらazujuuuuuun.github.ioを更新することだった。それを踏まえた実装方法になっている。今後、以下の日…

GitHub Pagesにはてなブログの最新記事を表示する

恥ずかしながらこれまで<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>の開発にデバッガーを使ってこなかった。ひたすらconsole.logを仕込み<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%D0%A5%C3%A5%B0">デバッグ</a>していた。<a class="keyword" href="http://d.hatena.ne.jp/keyword/VSCode">VSCode</a>でTypeScriptの<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%D0%A5%C3%A5%B0">デバッグ</a>をする方法を調べた。

とりあえずデバッガーを起動できるようになった設定ファイルは<a href="https://github.com/azujuuuuuun/notion-diary-page-creator/blob/73465fccf6d216436e7bc8d737c08c0b7e427e93/.vscode/launch.json">こちら</a>。

<ul>
<li><a href="https://code.visualstudio.com/docs/editor/debugging#_launch-configurations:~:text=every%20launch%20configuration%3A-,type,-%2D%20the%20type%20of">type</a>

<ul>
<li>デバッガーの種類</li>
<li><code>node</code> は組み込みのNode Debugger</li>
</ul>
</li>
<li><a href="https://code.visualstudio.com/docs/editor/debugging#_launch-configurations:~:text=and%20Go%20extensions.-,request,-%2D%20the%20request%20type">request</a>

<ul>
<li>起動設定のリク<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%B9">エス</a>トの種類</li>
</ul>
</li>
<li><a href="https://code.visualstudio.com/docs/editor/debugging#_launch-configurations:~:text=attach%20are%20supported.-,name,-%2D%20the%20reader%2Dfriendly">name</a>

<ul>
<li>名前</li>
</ul>
</li>
<li><a href="https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_skipping-uninteresting-code">skipFiles</a>

<ul>
<li>（雑な説明）<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%D0%A5%C3%A5%B0">デバッグ</a>中にスキップするファイル一覧</li>
<li><code>&lt;node_internals&gt;</code> はNode.jsの組み込みのコアモジュール</li>
</ul>
</li>
<li><a href="https://code.visualstudio.com/docs/editor/debugging#_launch-configurations:~:text=the%20following%20attributes%3A-,program,-%2D%20executable%20or%20file">program</a>

<ul>
<li>デバッガー起動時に実行するもの</li>
</ul>
</li>
<li><a href="https://code.visualstudio.com/docs/editor/debugging#_launch-configurations:~:text=Debug%20quick%20pick.-,preLaunchTask,-%2D%20to%20launch%20a">preLaunchTask</a>

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%D0%A5%C3%A5%B0">デバッグ</a>セッションを始める前に実行するタスク</li>
<li>TypeScriptを<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>にトランスパイルするためにnpm Scriptのbuildを指定している</li>
</ul>
</li>
<li><a href="https://code.visualstudio.com/docs/typescript/typescript-debugging#_mapping-the-output-location">outFiles</a>

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/VSCode">VSCode</a>のデバッガーがTypeScriptのコードからトランスパイルされた<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>を探すための<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>の出力場所</li>
<li><a href="https://github.com/azujuuuuuun/notion-diary-page-creator/blob/73465fccf6d216436e7bc8d737c08c0b7e427e93/tsconfig.json#L6">dist</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%A3%A5%EC%A5%AF%A5%C8">ディレクト</a>リに出力している</li>
</ul>
</li>
<li><a href="https://code.visualstudio.com/docs/editor/debugging#_launch-configurations:~:text=undefine%22%20a%20variable)-,envFile,-%2D%20path%20to%20dotenv">envFile</a>

<ul>
<li>.envファイルのパス</li>
<li>ローカル環境では<a href="https://github.com/motdotla/dotenv">dotenv</a>で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B4%C4%B6%AD%CA%D1%BF%F4">環境変数</a>を読み込んでいるので</li>
</ul>
</li>
</ul>


<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/azujuuuuuun/20220822/20220822221129.png" width="1200" height="750" loading="lazy" title="" class="hatena-fotolife" itemprop="image">

画像の左のペインの「Launch Program」（launch.<a class="keyword" href="http://d.hatena.ne.jp/keyword/json">json</a>のnameに設定した値）をクリックすると、プログラムとデバッガーが実行される。元のTSファイルに<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D6%A5%EC%A1%BC%A5%AF%A5%DD%A5%A4%A5%F3%A5%C8">ブレークポイント</a>を設定すれば、そこで処理が止まり、ローカル変数や<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B0%A5%ED%A1%BC%A5%D0%A5%EB%CA%D1%BF%F4">グローバル変数</a>の値を見ることができる。

今回はTypeScriptのシンプルな<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%D0%A5%C3%A5%B0">デバッグ</a>をした。デバッガーを起動できるようになったので一歩前進。より実践的に<a class="keyword" href="http://d.hatena.ne.jp/keyword/Web%A5%D6%A5%E9%A5%A6%A5%B6">Webブラウザ</a>で動く<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>や<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A2%A5%D7%A5%EA%A5%B1%A1%BC%A5%B7%A5%E7%A5%F3%A5%B5%A1%BC%A5%D0">アプリケーションサーバ</a>ーを<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%C7%A5%D0%A5%C3%A5%B0">デバッグ</a>できるようにしていきたい。

恥ずかしながらこれまでJavaScriptの開発にデバッガーを使ってこなかった。ひたすらconsole.logを仕込みデバッグしていた。VSCodeでTypeScriptのデバッグをする方法を調べた。 とりあえずデバッガーを起動できるようになった設定ファイルはこちら。 type デバッガーの種類 node は組み込みのNode Debugger request 起動設定のリクエストの種類 name 名前 skipFiles （雑な説明）デバッグ中にスキップするファイル一覧 <node_internals> はNode.jsの組み込みのコアモジュール program デバッガー起動時に実行するも…

VSCodeのデバッガーでTypeScriptのスクリプトをデバッグをする

いつからかコロナの感染者数の推移を見なくなった。メディアの公式LINEから速報で来なくなったし、自分から調べる回数も減った。7月から<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BF%B7%B7%BF%A5%B3%A5%ED%A5%CA%A5%A6%A5%A4%A5%EB%A5%B9">新型コロナウイルス</a>新規感染者数が増えている。早く落ち着いてほしいと願っている。在宅勤務でテレビでもネットでもニュースを見ていないので世の中の情報がなかなか入ってこない。積極的に情報を取りに行くのはなかなかハードルが高いが、受動的に受け取ることはできる。コロナの感染者数をSlackに通知できないかと考えた。

<h2 id="やりたいこと">やりたいこと</h2>

<ul>
<li>毎日1回東京都の新型コロナウィルス感染者数をSlackに通知する</li>
</ul>


<h2 id="実現方法">実現方法</h2>

<h3 id="ツールデータ">ツール・データ</h3>

<ul>
<li>定期実行には今回も<a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a> Actionsを利用することにした</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%ED%A5%CA%A5%A6%A5%A4%A5%EB%A5%B9">コロナウイルス</a>感染者数のデータは<a href="https://www.mhlw.go.jp/stf/covid-19/open-data.html">厚生労働省のオープンデータ</a>を使うことにした

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/CSV">CSV</a>ファイル：<a href="https://covid19.mhlw.go.jp/public/opendata/newly_confirmed_cases_daily.csv">https://covid19.mhlw.go.jp/public/opendata/newly_confirmed_cases_daily.csv</a></li>
</ul>
</li>
<li>Slackは個人の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EF%A1%BC%A5%AF%A5%B9%A5%DA%A1%BC%A5%B9">ワークスペース</a>

<ul>
<li>Slack Appを作ったが、よく理解せず作ってしまった...</li>
</ul>
</li>
</ul>


<h3 id="フロー">フロー</h3>

<ol>
<li>データを取得する</li>
<li>最新のデータを取り出す</li>
<li>Slackに通知する</li>
</ol>


<h3 id="技術スタック">技術スタック</h3>

<ul>
<li>今回はTypeScriptを使った</li>
<li>fetch <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>を使ってみたかったのでNode.js 18を利用した

<ul>
<li>関連リンク：<a href="https://nodejs.org/de/blog/announcements/v18-release-announce/#fetch-experimental">Node.js 18 is now available! | Node.js</a></li>
</ul>
</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/CSV">CSV</a>のパースに<a href="https://csv.js.org/parse/">csv-parse</a>を利用した</li>
<li>Slackへの通知には<a href="https://github.com/slackapi/node-slack-sdk">Node Slack SDK</a>を使った</li>
</ul>


<h2 id="作ったもの">作ったもの</h2>

<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>：<a href="https://github.com/azujuuuuuun/newly-cases-slack-notification">https://github.com/azujuuuuuun/newly-cases-slack-notification</a>

<figure class="figure-image figure-image-fotolife" title="8/17・18分の通知"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/azujuuuuuun/20220819/20220819235118.png" width="868" height="240" loading="lazy" title="" class="hatena-fotolife" itemprop="image"><figcaption>8/17・18分の通知</figcaption></figure>

<h2 id="終わりに">終わりに</h2>

これを作る前に「LINE新型コロナ情報」というLINE公式アカウントを友だち追加していた。今朝、国内感染者数の推移と<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C5%D4%C6%BB">都道</a>府県別感染状況が来ていた。これで十分だったのでSlack通知は止めることにした。

<iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Flinecorp.com%2Fja%2Fpr%2Fnews%2Fja%2F2020%2F3204" title="LINEのトークに新型コロナウイルス感染症の最新情報が届くLINE公式アカウント「LINE新型コロナ情報」を本日開設 | ニュース | LINE株式会社" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" loading="lazy"></iframe><cite class="hatena-citation"><a href="https://linecorp.com/ja/pr/news/ja/2020/3204">linecorp.com</a></cite>

いつからかコロナの感染者数の推移を見なくなった。メディアの公式LINEから速報で来なくなったし、自分から調べる回数も減った。7月から新型コロナウイルス新規感染者数が増えている。早く落ち着いてほしいと願っている。在宅勤務でテレビでもネットでもニュースを見ていないので世の中の情報がなかなか入ってこない。積極的に情報を取りに行くのはなかなかハードルが高いが、受動的に受け取ることはできる。コロナの感染者数をSlackに通知できないかと考えた。 やりたいこと 毎日1回東京都の新型コロナウィルス感染者数をSlackに通知する 実現方法 ツール・データ 定期実行には今回もGitHub Actionsを利用す…

新型コロナウイルス新規感染者数をSlackに通知する

依存パッケージを更新することなくpackage.<a class="keyword" href="http://d.hatena.ne.jp/keyword/json">json</a>とpackage-lock.<a class="keyword" href="http://d.hatena.ne.jp/keyword/json">json</a>のversionを上げる方法をまとめる。

<pre class="code lang-zsh" data-lang="zsh" data-unlink>$ npm version patch
</pre>


このコマンドでセマンティックバージョニングのパッチバージョンを上げることができる。versionが <code>1.0.0</code> だった場合、<code>1.0.1</code> になる。<code>1.0.1</code> というメッセージでgitのコミットが作成され、<code>v1.0.1</code> というgitのタグが作成される。マイナーバージョンを上げたい場合はpatchをminorに、メジャーバージョンを上げたい場合はpatchをmajorにすればよい。コミットメッセージを指定したい場合は <code>-m</code> もしくは <code>--message</code> オプションをつければよい。

<pre class="code lang-zsh" data-lang="zsh" data-unlink>$ npm version patch -m &quot;Upgrade to %s&quot;
</pre>


<code>%s</code> は該当バージョンに置き換えられる。

gitのタグを打ちたくない場合は、以下のように <code>--no-git-tag-version</code> をつける。

<pre class="code lang-zsh" data-lang="zsh" data-unlink>$ npm --no-git-tag-version patch
</pre>


もしくは <code>npm config</code> コマンドでgit-tag-versionをfalseに設定して、<code>npm version</code> コマンドを実行する。

<pre class="code lang-zsh" data-lang="zsh" data-unlink>$ npm config set git-tag-version false

$ npm version patch
</pre>


いずれの場合もpackage.<a class="keyword" href="http://d.hatena.ne.jp/keyword/json">json</a>ファイルとpackage-lock.<a class="keyword" href="http://d.hatena.ne.jp/keyword/json">json</a>ファイルのversionは変更されるが、コミットとタグは作成されない。

参考リンク：<a href="https://docs.npmjs.com/cli/v8/commands/npm-version">https://docs.npmjs.com/cli/v8/commands/npm-version</a>

依存パッケージを更新することなくpackage.jsonとpackage-lock.jsonのversionを上げる方法をまとめる。 $ npm version patch このコマンドでセマンティックバージョニングのパッチバージョンを上げることができる。versionが 1.0.0 だった場合、1.0.1 になる。1.0.1 というメッセージでgitのコミットが作成され、v1.0.1 というgitのタグが作成される。マイナーバージョンを上げたい場合はpatchをminorに、メジャーバージョンを上げたい場合はpatchをmajorにすればよい。コミットメッセージを指定したい場合は -m もし…

依存パッケージを更新することなくpackage.jsonとpackage-lock.jsonのversionを上げる

タイトルにある通り、1日1ページNotionに日記を書いている。「YYYY/MM/DD(ddd)」というタイトルをつけているのだが、この入力が地味にめんどくさかった。「きょう」→変換→ 「(」→「つき」→変換→「)」という手順で入力していた。<a href="https://azujuuuuuun.hatenablog.com/entry/2022/08/15/000918">Notion API&#x3092;&#x4F7F;&#x3063;&#x3066;&#x307F;&#x305F; - &#x306A;&#x3093;&#x3067;&#x3082;&#x30CE;&#x30FC;&#x30C8;</a> でNotion <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>の使い方がわかったので、このページ作成を自動化することにした。

<h2 id="要件">要件</h2>

<ul>
<li>毎日NotionのDiaryデータベースにページを自動で作成する</li>
<li>タイトルは「YYYY/MM/DD(ddd)」</li>
<li>ページが既に作成済みであれば作成しない

<ul>
<li>自分が翌日分を手動で作成することもあるため</li>
</ul>
</li>
</ul>


<h2 id="開発">開発</h2>

定期実行に今回は<a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a> Actionsを利用することにした。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>は<a href="https://github.com/azujuuuuuun/notion-diary-page-creator">こちら</a>。

<h3 id="やったこと">やったこと</h3>

<ul>
<li><a href="https://github.com/azujuuuuuun/notion-diary-page-creator">スクリプト</a>を実装

<ul>
<li>日付の操作に<a href="https://day.js.org/">Day.js</a>を利用</li>
</ul>
</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a> Actionsの<a href="https://docs.github.com/ja/actions/deployment/targeting-different-environments/using-environments-for-deployment">環境</a>と<a href="https://docs.github.com/ja/actions/security-guides/encrypted-secrets">シークレット</a>を作成</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a> Actionsの<a href="https://github.com/azujuuuuuun/notion-diary-page-creator/blob/main/.github/workflows/create-notion-diary-page.yml">ワークフロー</a>を作成

<ul>
<li>特に理由はないが日本時間の7時に起動することにした</li>
</ul>
</li>
</ul>


<h2 id="感想">感想</h2>

<ul>
<li>自動化便利</li>
<li>Notion <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>は前回以上のことをしていないのでコメントなし</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a> Actionsは環境ごとにシークレットを作成できて便利</li>
<li>ワークフローのファイル名とnameをどんな風につければいいかまだわかってない</li>
</ul>

タイトルにある通り、1日1ページNotionに日記を書いている。「YYYY/MM/DD(ddd)」というタイトルをつけているのだが、この入力が地味にめんどくさかった。「きょう」→変換→ 「(」→「つき」→変換→「)」という手順で入力していた。Notion APIを使ってみた - なんでもノート でNotion APIの使い方がわかったので、このページ作成を自動化することにした。 要件 毎日NotionのDiaryデータベースにページを自動で作成する タイトルは「YYYY/MM/DD(ddd)」 ページが既に作成済みであれば作成しない 自分が翌日分を手動で作成することもあるため 開発 定期実行に…

GitHub ActionsでNotionの日記ページを毎日作成する

<a href="https://www.notion.so/ja-jp">Notion</a>でネットの記事の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C0%D1%C6%C9">積読</a>を管理している。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C0%D1%C6%C9">積読</a>の数が1000を超え、ノイズになっていたので一度全て断捨離することにした。

<h2 id="状況やりたかったこと">状況・やりたかったこと</h2>

<ul>
<li>Articleというデータベースで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C0%D1%C6%C9">積読</a>を管理</li>
<li>Read StatusというSelectカラムでステータス管理

<ul>
<li>未設定：<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C0%D1%C6%C9">積読</a></li>
<li>Read：読んだ</li>
<li>Trash：やっぱ読むのをやめた、読まない</li>
</ul>
</li>
<li>→ Read Statusが未設定のページのRead StatusをTrashにする</li>
</ul>


1000以上のページを手動で変更するのはできなくはなかったが、せっかくなのでNotion <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>を使ってみた。

<iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fdevelopers.notion.com%2F" title="Start building with the Notion API" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" loading="lazy"></iframe><cite class="hatena-citation"><a href="https://developers.notion.com/">developers.notion.com</a></cite>

<h2 id="やったこと">やったこと</h2>

<ul>
<li><a href="https://developers.notion.com/docs/getting-started#getting-started">Getting started</a> にしたがって作業

<ul>
<li>Integrationを作成</li>
<li>Articleデータベースを作成したIntegrationにシェア</li>
</ul>
</li>
<li><a href="https://github.com/makenotion/notion-sdk-js">NotionのJavaScript SDK</a>を使って<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%C3%A5%C1%BD%E8%CD%FD">バッチ処理</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>を書いた

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%BD%A1%BC%A5%B9%A5%B3%A1%BC%A5%C9">ソースコード</a>：<a href="https://github.com/azujuuuuuun/notion-page-update-batch">https://github.com/azujuuuuuun/notion-page-update-batch</a></li>
</ul>
</li>
</ul>


<h2 id="バッチ処理スクリプトの詳細"><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%C3%A5%C1%BD%E8%CD%FD">バッチ処理</a><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AF%A5%EA%A5%D7%A5%C8">スクリプト</a>の詳細</h2>

<ul>
<li>メインの処理

<ul>
<li>カーソルを使って対象のページを全件取得

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>：<a href="https://developers.notion.com/reference/post-database-query">https://developers.notion.com/reference/post-database-query</a></li>
</ul>
</li>
<li>1件ずつ直列で更新

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>：<a href="https://developers.notion.com/reference/patch-page">https://developers.notion.com/reference/patch-page</a></li>
<li><a href="https://developers.notion.com/reference/request-limits#rate-limits">Rate Limits</a> (<a class="keyword" href="http://d.hatena.ne.jp/keyword/avg">avg</a>: 3rps)に引っかからないように直列にリク<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%B9">エス</a>ト</li>
<li>さらに念のため、<a href="https://nodejs.org/docs/latest-v16.x/api/timers.html#timerspromisessettimeoutdelay-value-options">timersPromises.setTimeout</a>でsleepをかける</li>
</ul>
</li>
</ul>
</li>
<li>サブ

<ul>
<li><a href="https://github.com/motdotla/dotenv">dotenv</a> で<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B4%C4%B6%AD%CA%D1%BF%F4">環境変数</a>を設定</li>
<li><a href="https://nodejs.org/docs/latest-v16.x/api/perf_hooks.html#performancenow">performance.now()</a> を使って処理時間を計測</li>
<li>Dry Runオプションをつけて、Dry Runの場合は更新処理をスキップ</li>
</ul>
</li>
</ul>


<h2 id="実行結果">実行結果</h2>

以下、試しに2件更新してみたときのRTT。

<pre class="code lang-zsh" data-lang="zsh" data-unlink>Update took 684.6306619644165ms.
Update took 283.28467202186584ms.
</pre>


以下、全件更新結果。

<pre class="code lang-zsh" data-lang="zsh" data-unlink>$ npm run start

&gt; notion-article-batch@1.0.0 start
&gt; node -r dotenv/config index.js

Sun Aug 14 2022 hh:mm:ss GMT+0900 (日本標準時) Update started.
Sun Aug 14 2022 hh:mm:ss GMT+0900 (日本標準時) 1055 pages updated. Update took 694149.2413560152ms.
</pre>


特にエラーが出ることなく無事に全件更新された。

<h2 id="所感">所感</h2>

<ul>
<li>ドキュメントが充実していてスムーズに開発できた</li>
<li>深く考えていないが、ドキュメント、<a class="keyword" href="http://d.hatena.ne.jp/keyword/SDK">SDK</a>、<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>のI/F、<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>利用体験がよかったので好印象</li>
<li>もう1個Notion <a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>を使ったコードを書いたのでブログを書く</li>
</ul>

Notionでネットの記事の積読を管理している。積読の数が1000を超え、ノイズになっていたので一度全て断捨離することにした。 状況・やりたかったこと Articleというデータベースで積読を管理 Read StatusというSelectカラムでステータス管理 未設定：積読 Read：読んだ Trash：やっぱ読むのをやめた、読まない → Read Statusが未設定のページのRead StatusをTrashにする 1000以上のページを手動で変更するのはできなくはなかったが、せっかくなのでNotion APIを使ってみた。 developers.notion.com やったこと Gett…

Notion APIを使ってみた

<code>git config --global</code> コマンドで各種設定値を設定できる <code>~/.gitconfig</code> ファイルを整備した。整備した <code>.gitconfig</code> ファイルは <a href="https://github.com/azujuuuuuun/dotfiles/blob/master/.gitconfig">https://github.com/azujuuuuuun/dotfiles/blob/master/.gitconfig</a> にpushした。変更前のファイルをコミットしていなかったので差分をこのブログに記録する。

変更前はuser, core, alias, credential, merge, pullを設定していた。mergeとpullはよく理解せずにその場しのぎで設定していた。

今回、<a href="https://git-scm.com/docs/git-config">Git - git-config Documentation</a> を参照しつつ、設定を追加した。量が膨大だったのでよく使うコマンドを検索して、目についたものを設定した。fetchのpruneオプションが綺麗になったのがお気に入り。

変更前

<pre class="code lang-config" data-lang="config" data-unlink>[alias]
 fe = fetch -p
</pre>


変更後

<pre class="code lang-config" data-lang="config" data-unlink>[alias]
 fe = fetch
[fetch]
 prune = true
</pre>

git config --global コマンドで各種設定値を設定できる ~/.gitconfig ファイルを整備した。整備した .gitconfig ファイルは https://github.com/azujuuuuuun/dotfiles/blob/master/.gitconfig にpushした。変更前のファイルをコミットしていなかったので差分をこのブログに記録する。 変更前はuser, core, alias, credential, merge, pullを設定していた。mergeとpullはよく理解せずにその場しのぎで設定していた。 今回、Git - git-config Doc…

.gitconfigを整備した

<ul>
<li><a href="https://github.com/settings/emails">https://github.com/settings/emails</a> へアクセスする</li>
<li>「Keep my email addresses private」（2022/08/11現在の文言）をチェックする</li>
</ul>


これで<a class="keyword" href="http://d.hatena.ne.jp/keyword/GitHub">GitHub</a>からマージや編集などのGitの操作をしたときのメールアドレスが <code>ID+username@users.noreply.github.com</code> になる。ローカルでしたコミットに紐づくメールアドレスも他のユーザーからわからないようにするために <code>ID+username@users.noreply.github.com</code> に変更する。

<pre class="code lang-zsh" data-lang="zsh" data-unlink>$ git config --global user.email &quot;ID+username@users.noreply.github.com&quot;

$ git config --global user.email
ID+username@users.noreply.github.com
</pre>


参照：<a href="https://docs.github.com/ja/account-and-profile/setting-up-and-managing-your-personal-account-on-github/managing-email-preferences/setting-your-commit-email-address">&#x30B3;&#x30DF;&#x30C3;&#x30C8;&#x30E1;&#x30FC;&#x30EB;&#x30A2;&#x30C9;&#x30EC;&#x30B9;&#x3092;&#x8A2D;&#x5B9A;&#x3059;&#x308B; - GitHub Docs</a>

https://github.com/settings/emails へアクセスする 「Keep my email addresses private」（2022/08/11現在の文言）をチェックする これでGitHubからマージや編集などのGitの操作をしたときのメールアドレスが ID+username@users.noreply.github.com になる。ローカルでしたコミットに紐づくメールアドレスも他のユーザーからわからないようにするために ID+username@users.noreply.github.com に変更する。 $ git config --global user.e…

GitHubでメールアドレスをプライベートにする

Nodeのバージョン管理に<a href="https://github.com/nodenv/nodenv">nodenv</a>を利用していた。<a href="https://volta.sh/">Volta</a>は良いと聞いていたが、面倒くさくて触ってこなかった。今更ながら重い腰を上げて移行してみた。

<h2 id="やったこと">やったこと</h2>

<h3 id="nodenvのアンインストール">nodenvのアンインストール</h3>

<a href="https://github.com/nodenv/nodenv#uninstalling-nodenv">https://github.com/nodenv/nodenv#uninstalling-nodenv</a> に書いてあることをした。アンインストール手順まで書いてあって親切。.zshrcにあった以下の行を削除。

<pre class="code lang-zsh" data-lang="zsh" data-unlink>eval &quot;$(nodenv init -)&quot;
</pre>


以下のコマンドを実行。

<pre class="code lang-zsh" data-lang="zsh" data-unlink>$ rm -rf `nodenv root`
$ brew uninstall nodenv
</pre>


無事にアンインストールが完了した。

<h3 id="Voltaのインストール">Voltaのインストール</h3>

<a href="https://docs.volta.sh/guide/getting-started">https://docs.volta.sh/guide/getting-started</a> 通りにコマンドを実行した。

<pre class="code lang-zsh" data-lang="zsh" data-unlink>$ curl https://get.volta.sh | bash

 % Total % Received % Xferd Average Speed Time Time Time Current
 Dload Upload Total Spent Left Speed
100 12319 100 12319 0 0 12221 0 0:00:01 0:00:01 --:--:-- 12233
 Installing latest version of Volta (1.0.8)
 Checking for existing Volta installation
 Fetching archive for macOS, version 1.0.8
######################################################################## 100.0%
 Creating directory layout
 Extracting Volta binaries and launchers
 Finished installation. Updating user profile settings.
Updating your Volta directory. This may take a few moments...
success: Setup complete. Open a new terminal to start using Volta!
</pre>


以下の2つのexportコマンドが.zshrcに書き込まれた。

<pre class="code lang-zsh" data-lang="zsh" data-unlink>export VOLTA_HOME=&quot;$HOME/.volta&quot;
export PATH=&quot;$VOLTA_HOME/bin:$PATH&quot;
</pre>


<h3 id="Nodeをインストール">Nodeをインストール</h3>

<pre class="code lang-zsh" data-lang="zsh" data-unlink>$ volta install node@16
success: installed and set node@16.16.0 (with npm@8.11.0) as default

$ node -v
v16.16.0

$ which node
~/.volta/bin/node
</pre>


最初のコマンドで2022/08/11現在、LTS版の16.16.0がインストールされた。インストールが速いと聞いていたが、確かに速かった。

<h3 id="Nodeのバージョンを固定">Nodeのバージョンを固定</h3>

<a href="https://docs.volta.sh/reference/pin">pinコマンド</a>でNodeのバージョンを固定するらしい。

<pre class="code lang-zsh" data-lang="zsh" data-unlink>$ volta pin node
success: pinned node@16.16.0 (with npm@8.11.0) in package.json

$ git diff
diff --git a/package.json b/package.json
index d49efda..a026ba0 100644
--- a/package.json
+++ b/package.json
@@ -21,5 +21,8 @@
 &quot;eslint&quot;: &quot;8.21.0&quot;,
 &quot;eslint-config-next&quot;: &quot;12.2.4&quot;,
 &quot;typescript&quot;: &quot;4.7.4&quot;
+ },
+ &quot;volta&quot;: {
+ &quot;node&quot;: &quot;16.16.0&quot;
 }
 }
</pre>


package.<a class="keyword" href="http://d.hatena.ne.jp/keyword/json">json</a>のvoltaフィールドにNodeのバージョンが書き込まれた。これでVoltaを利用していれば他のプロジェクトメンバーも同じNodeのバージョンで開発することができる。

Nodeのバージョン管理にnodenvを利用していた。Voltaは良いと聞いていたが、面倒くさくて触ってこなかった。今更ながら重い腰を上げて移行してみた。 やったこと nodenvのアンインストール https://github.com/nodenv/nodenv#uninstalling-nodenv に書いてあることをした。アンインストール手順まで書いてあって親切。.zshrcにあった以下の行を削除。 eval "$(nodenv init -)" 以下のコマンドを実行。 $ rm -rf `nodenv root` $ brew uninstall nodenv 無事にアンインストールが…

Node.jsのバージョン管理をVoltaに移行してみた

最近、Zodという名前を<a class="keyword" href="http://d.hatena.ne.jp/keyword/Twitter">Twitter</a>でよく見かける。

<iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2Fcolinhacks%2Fzod" title="GitHub - colinhacks/zod: TypeScript-first schema validation with static type inference" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" loading="lazy"></iframe><cite class="hatena-citation"><a href="https://github.com/colinhacks/zod">github.com</a></cite>

TypeScriptファーストな<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AD%A1%BC%A5%DE">スキーマ</a>ベースのバリデーションライブラリらしい。試しにNext.jsのクエリパラメーターのバリデーションで使ってみた。

<iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fgithub.com%2Fazujuuuuuun%2Ftry-zod-in-next" title="GitHub - azujuuuuuun/try-zod-in-next: ZodをNext.jsで使ってみた" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" loading="lazy"></iframe><cite class="hatena-citation"><a href="https://github.com/azujuuuuuun/try-zod-in-next">github.com</a></cite>

架空の検索結果ページのクエリパラメーターをバリデーションする想定で書いてみた。

パス

/search

クエリパラメーター

<table>
<thead>
<tr>
<th> key名 </th>
<th> 値 </th>
<th> 必須 </th>
<th> 型 </th>
<th> デフォルト値 </th>
<th> 取りうる値 </th>
<th> 対応する<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AD%A1%BC%A5%DE">スキーマ</a> </th>
</tr>
</thead>
<tbody>
<tr>
<td> q </td>
<td> 検索文字列 </td>
<td> ○ </td>
<td> string </td>
<td> </td>
<td> 1文字以上の文字列 </td>
<td> <a href="https://github.com/azujuuuuuun/try-zod-in-next/blob/main/src/model/search/search-query.ts">https://github.com/azujuuuuuun/try-zod-in-next/blob/main/src/model/search/search-query.ts</a> </td>
</tr>
<tr>
<td> page </td>
<td> ページ番号 </td>
<td> </td>
<td> number </td>
<td> 1 </td>
<td> 正の整数 </td>
<td> <a href="https://github.com/azujuuuuuun/try-zod-in-next/blob/main/src/model/search/page.ts">https://github.com/azujuuuuuun/try-zod-in-next/blob/main/src/model/search/page.ts</a> </td>
</tr>
<tr>
<td> sort </td>
<td> ソート順 </td>
<td> </td>
<td> string </td>
<td> "recommend" </td>
<td> "new", "recommend" </td>
<td> <a href="https://github.com/azujuuuuuun/try-zod-in-next/blob/main/src/model/search/sort.ts">https://github.com/azujuuuuuun/try-zod-in-next/blob/main/src/model/search/sort.ts</a> </td>
</tr>
</tbody>
</table>


感想

<ul>
<li>今回使った<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AD%A1%BC%A5%DE">スキーマ</a>は少ないが、他にも沢山の<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B9%A5%AD%A1%BC%A5%DE">スキーマ</a>があり表現力が豊か</li>
<li>バリデーションから型が推論されるので、バリデーション結果の型が信頼できる</li>
<li>メソッドチェーンのバリデーションでわかりやすい</li>
<li>サーバーサイドのパラメーターのバリデーションには十分使える</li>
</ul>

最近、Zodという名前をTwitterでよく見かける。 github.com TypeScriptファーストなスキーマベースのバリデーションライブラリらしい。試しにNext.jsのクエリパラメーターのバリデーションで使ってみた。 github.com 架空の検索結果ページのクエリパラメーターをバリデーションする想定で書いてみた。 パス /search クエリパラメーター key名 値 必須 型 デフォルト値 取りうる値 対応するスキーマ q 検索文字列 ○ string 1文字以上の文字列 https://github.com/azujuuuuuun/try-zod-in-next/blob/…

ZodをNext.jsで使ってみた

<a href="https://azujuuuuuun.hatenablog.com/entry/2022/08/05/223014">&lt;input type=&quot;file&rdquo;&gt;&#x3067;&#x540C;&#x3058;&#x30D5;&#x30A1;&#x30A4;&#x30EB;&#x3092;&#x9078;&#x629E;&#x3067;&#x304D;&#x308B;&#x3088;&#x3046;&#x306B;&#x3059;&#x308B; - &#x306A;&#x3093;&#x3067;&#x3082;&#x30CE;&#x30FC;&#x30C8;</a> に続きtipsの4個目。video要素のsrc属性を動的に変更したとき、<a class="keyword" href="http://d.hatena.ne.jp/keyword/iOS">iOS</a> <a class="keyword" href="http://d.hatena.ne.jp/keyword/Safari">Safari</a>で動画が表示されない事象に遭遇した。結論としてはvideo要素のsrc属性を動的に変更した場合は、<a href="https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/load">load()メソッド</a>を呼ぶ必要があった。以下、React + TypeScriptのサンプルコード。CodeSandboxを使ってみた（初めて使った）。12行目を<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%E1%A5%F3%A5%C8%A5%A2%A5%A6%A5%C8">コメントアウト</a>すると選択した動画が表示されなくなる（はず）。

<iframe width="1000" height="500" src="https://codesandbox.io/embed/ios-safari-video-load-3liwng" style="width:1000px; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe><cite class="hatena-citation"><a href="https://codesandbox.io/s/ios-safari-video-load-3liwng">codesandbox.io</a></cite>

<input type="file”>で同じファイルを選択できるようにする - なんでもノート に続きtipsの4個目。video要素のsrc属性を動的に変更したとき、iOS Safariで動画が表示されない事象に遭遇した。結論としてはvideo要素のsrc属性を動的に変更した場合は、load()メソッドを呼ぶ必要があった。以下、React + TypeScriptのサンプルコード。CodeSandboxを使ってみた（初めて使った）。12行目をコメントアウトすると選択した動画が表示されなくなる（はず）。 codesandbox.io

iOS Safariでvideo要素に設定した動画が表示されない

<a href="https://azujuuuuuun.hatenablog.com/entry/2022/08/05/220713">&lt;video&gt;&#x306B;&#x8AAD;&#x307F;&#x8FBC;&#x3093;&#x3060;&#x52D5;&#x753B;&#x306E;&#x79D2;&#x6570;&#x3092;&#x53D6;&#x5F97;&#x3059;&#x308B; - &#x306A;&#x3093;&#x3067;&#x3082;&#x30CE;&#x30FC;&#x30C8;</a> に続きtipsの3個目。<input type="file">でファイルを選択し、再度同じファイルを選択しても1度目の<a class="keyword" href="http://d.hatena.ne.jp/keyword/value">value</a>が残ってしまっているため、changeイベントが発火しない。対応方法は2つある。1つ目は1度目のchangeイベントの処理の最後に<a class="keyword" href="http://d.hatena.ne.jp/keyword/value">value</a>に空文字列を設定する方法。以下、React + TypeScriptのサンプルコード。

<pre class="code lang-typescript" data-lang="typescript" data-unlink>const ref = React.useRef&lt;HTMLInputElement&gt;(null);

const onChange = (e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
 // ここに処理を書く

 if (ref.current) {
 ref.current.value =&quot;&quot;;
 }
}

// …(略)…

&lt;input ref={ref} type=&quot;file&quot; onChange={onChange} /&gt;
</pre>


2つ目はclickイベントで<a class="keyword" href="http://d.hatena.ne.jp/keyword/value">value</a>に空文字列を設定する方法。以下、React + TypeScriptのサンプルコード。

<pre class="code lang-typescript" data-lang="typescript" data-unlink>const ref = React.useRef&lt;HTMLInputElement&gt;(null);

const onClick = () =&gt; {
 if (ref.current) {
 ref.current.value =&quot;&quot;;
 }
}

const onChange = (e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
 // ここに処理を書く
}

// …(略)…

&lt;input ref={ref} type=&quot;file&quot; onClick={onClick} onChange={onChange} /&gt;
</pre>

<video>に読み込んだ動画の秒数を取得する - なんでもノート に続きtipsの3個目。でファイルを選択し、再度同じファイルを選択しても1度目のvalueが残ってしまっているため、changeイベントが発火しない。対応方法は2つある。1つ目は1度目のchangeイベントの処理の最後にvalueに空文字列を設定する方法。以下、React + TypeScriptのサンプルコード。 const ref = React.useRef<HTMLInputElement>(null); const onChange = (e: React.ChangeEvent<HTMLInputElement>)…

<input type="file”>で同じファイルを選択できるようにする

<a href="https://azujuuuuuun.hatenablog.com/entry/2022/08/05/214012">&lt;input type=&quot;file&quot;&gt;&#x3067;&#x9078;&#x629E;&#x3057;&#x305F;&#x30D5;&#x30A1;&#x30A4;&#x30EB;&#x306E;&#x30B5;&#x30A4;&#x30BA;&#x3092;&#x53D6;&#x5F97;&#x3059;&#x308B; - &#x306A;&#x3093;&#x3067;&#x3082;&#x30CE;&#x30FC;&#x30C8;</a> に続きtips2個目。video要素に読み込んだ動画の秒数を取得する方法。<a href="https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/durationchange_event">durationchangeイベント</a>発生時に<a href="https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/duration">duration</a>から読み取れる。以下、React + TypeScriptのサンプルコード。

<pre class="code lang-typescript" data-lang="typescript" data-unlink>import React, { useRef } from &quot;react&quot;;

// …(略)… 

const ref = useRef&lt;HTMLVideoElement&gt;(null);

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

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

// …(略)…

&lt;video ref={ref} /&gt;
</pre>

<input type="file">で選択したファイルのサイズを取得する - なんでもノート に続きtips2個目。video要素に読み込んだ動画の秒数を取得する方法。durationchangeイベント発生時にdurationから読み取れる。以下、React + TypeScriptのサンプルコード。 import React, { useRef } from "react"; // …(略)… const ref = useRef<HTMLVideoElement>(null); const onChangeVideoDuration = () => { if (ref.current)…

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

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

<pre class="code lang-typescript" data-lang="typescript" data-unlink>const onChangeFile = (e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
 const fileSize = e.target?.files?.[0]?.size;
 console.log(fileSize + &quot; Bytes&quot;);
}

// …(中略)…

&lt;input type=&quot;file&quot; onChange={onChangeFile} /&gt;
</pre>

最近使った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} />

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

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

<ul>
<li>ベッドを買った</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%A8%A5%EB%A5%B4%A5%D2%A5%E5%A1%BC%A5%DE%A5%F3">エルゴヒューマン</a>を買った</li>
<li>仕事でリーダーになった</li>
<li>山梨に行った</li>
<li>ソファを買った</li>
</ul>


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

ベッド、ワーキングチェア、ソファと物理的に大きい買い物をした。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DF%A5%CB%A5%DE%A5%EA%A5%B9%A5%C8">ミニマリスト</a>からは大きく遠ざかった。

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

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

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

2022年になってからブログを全然書いていなかった。仕事が忙しかったと言い訳してしまう。以下、7月末までのトピック。 ベッドを買った エルゴヒューマンを買った 仕事でリーダーになった 山梨に行った ソファを買った その他、友達と遊んだり、会社の人と飲みに行ったりもした。 ベッド、ワーキングチェア、ソファと物理的に大きい買い物をした。ミニマリストからは大きく遠ざかった。 仕事ではリーダーになった。名前から伝わりにくいが、最初の管理職だ。整理してブログに書きたい内容が多い。 山梨に行った。旅行ブログを書くかもしれないし、書かないかもしれない。 またぼちぼち書いていく。

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

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

タイトル通り、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C5%C5%BB%D2%BD%F1%C0%D2">電子書籍</a>で買っていた技術書を紙書籍で買うようにした。6月から紙書籍を買っている。

<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C5%C5%BB%D2%BD%F1%C0%D2">電子書籍</a>を買い始めたのは2018年の8月ごろなので、かれこれ4年近くなる。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C5%C5%BB%D2%BD%F1%C0%D2">電子書籍</a>を買い始めた理由は2つだったと思う。1つ目は紙の本を外に持ち歩くのは重かったから、2つ目は当時<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DF%A5%CB%A5%DE%A5%EA%A5%B9%A5%C8">ミニマリスト</a>に憧れていたからだったとと思う。

そして最近、<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C5%C5%BB%D2%BD%F1%C0%D2">電子書籍</a>が売ってない紙の本を読む機会があった。久しぶりの紙の本はとても読みやすく、すぐに読み終えてしまった。技術書も紙にすればもっと読めるんじゃないかと思い、紙で買うことにした。

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

<div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/dp/B08VJ3YZK1?tag=hatena-22&amp;linkCode=ogi&amp;th=1&amp;psc=1" class="hatena-asin-detail-image-link" target="_blank" rel="noopener"><img src="https://m.media-amazon.com/images/I/51+BECAAh-L._SL500_.jpg" class="hatena-asin-detail-image" alt="Web配信の技術―HTTPキャッシュ・リバースプロキシ・CDNを活用する" title="Web配信の技術―HTTPキャッシュ・リバースプロキシ・CDNを活用する"></a><div class="hatena-asin-detail-info"><a href="https://www.amazon.co.jp/dp/B08VJ3YZK1?tag=hatena-22&amp;linkCode=ogi&amp;th=1&amp;psc=1" target="_blank" rel="noopener">Web配信の技術―HTTPキャッシュ・リバースプロキシ・CDNを活用する</a><ul class="hatena-asin-detail-meta"><li>作者:<a href="http://d.hatena.ne.jp/keyword/%C5%C4%C3%E6%20%BE%CD%CA%BF" class="keyword">田中 祥平</a></li><li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%B5%BB%BD%D1%C9%BE%CF%C0%BC%D2">技術評論社</a></li></ul><a href="https://www.amazon.co.jp/dp/B08VJ3YZK1?tag=hatena-22&amp;linkCode=ogi&amp;th=1&amp;psc=1" class="asin-detail-buy" target="_blank" rel="noopener">Amazon</a></div></div>

<div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/dp/4873118751?tag=hatena-22&amp;linkCode=ogi&amp;th=1&amp;psc=1" class="hatena-asin-detail-image-link" target="_blank" rel="noopener"><img src="https://m.media-amazon.com/images/I/41gt2b0uXpL._SL500_.jpg" class="hatena-asin-detail-image" alt="分散システムデザインパターン ―コンテナを使ったスケーラブルなサービスの設計" title="分散システムデザインパターン ―コンテナを使ったスケーラブルなサービスの設計"></a><div class="hatena-asin-detail-info"><a href="https://www.amazon.co.jp/dp/4873118751?tag=hatena-22&amp;linkCode=ogi&amp;th=1&amp;psc=1" target="_blank" rel="noopener">分散システムデザインパターン ―コンテナを使ったスケーラブルなサービスの設計</a><ul class="hatena-asin-detail-meta"><li>作者:<a href="http://d.hatena.ne.jp/keyword/Brendan%20Burns" class="keyword">Brendan Burns</a></li><li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%AA%A5%E9%A5%A4%A5%EA%A1%BC%A1%A6%A5%B8%A5%E3%A5%D1%A5%F3">オライリー・ジャパン</a></li></ul><a href="https://www.amazon.co.jp/dp/4873118751?tag=hatena-22&amp;linkCode=ogi&amp;th=1&amp;psc=1" class="asin-detail-buy" target="_blank" rel="noopener">Amazon</a></div></div>

なぜかは<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B8%C0%B8%EC%B2%BD">言語化</a>できないのだが、紙の書籍の方が<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C5%C5%BB%D2%BD%F1%C0%D2">電子書籍</a>より読みやすいと感じた。また、物理的に存在することによる読まなくてはというプレッシャーを感じるので自然と手が伸びた。

一方で場所を取る、どこでも読めるわけではないというデメリットがあり、それらの点については<a class="keyword" href="http://d.hatena.ne.jp/keyword/%C5%C5%BB%D2%BD%F1%C0%D2">電子書籍</a>の方が優っている。

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

最後にブログを書いてから3ヶ月も経ってしまった。3ヶ月の間に色々あったがおいおい書いていきたい。 タイトル通り、電子書籍で買っていた技術書を紙書籍で買うようにした。6月から紙書籍を買っている。 電子書籍を買い始めたのは2018年の8月ごろなので、かれこれ4年近くなる。電子書籍を買い始めた理由は2つだったと思う。1つ目は紙の本を外に持ち歩くのは重かったから、2つ目は当時ミニマリストに憧れていたからだったとと思う。 そして最近、電子書籍が売ってない紙の本を読む機会があった。久しぶりの紙の本はとても読みやすく、すぐに読み終えてしまった。技術書も紙にすればもっと読めるんじゃないかと思い、紙で買うことに…

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

Docker Composeで<a class="keyword" href="http://d.hatena.ne.jp/keyword/MySQL">MySQL</a>を動かしてみたのでメモ。

<ul>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EA%A5%DD%A5%B8%A5%C8%A5%EA">リポジトリ</a>：<a href="https://github.com/azujuuuuuun/try-docker-mysql">https://github.com/azujuuuuuun/try-docker-mysql</a></li>
<li>image: <a href="https://hub.docker.com/_/mysql">https://hub.docker.com/_/mysql</a></li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%B4%C4%B6%AD%CA%D1%BF%F4">環境変数</a>は <code>.env</code> ファイルで設定している

<ul>
<li><a href="https://github.com/azujuuuuuun/try-docker-mysql/blob/d13cd6981c8cd128936d073bc7898044eb9a6479/docker-compose.yml#L6-L9">https://github.com/azujuuuuuun/try-docker-mysql/blob/d13cd6981c8cd128936d073bc7898044eb9a6479/docker-compose.yml#L6-L9</a></li>
<li><a href="https://docs.docker.jp/compose/environment-variables.html#env">https://docs.docker.jp/compose/environment-variables.html#env</a>

<ul>
<li><code>.env</code> ファイルは <code>.gitignore</code> に追加している</li>
</ul>
</li>
</ul>
</li>
<li>ボリュームで<a class="keyword" href="http://d.hatena.ne.jp/keyword/MySQL">MySQL</a>のデータと設定ファイルをマウント

<ul>
<li><a href="https://github.com/azujuuuuuun/try-docker-mysql/blob/main/docker-compose.yml#L11-L12">https://github.com/azujuuuuuun/try-docker-mysql/blob/main/docker-compose.yml#L11-L12</a></li>
</ul>
</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/MySQL">MySQL</a>の設定ファイルにはデフォルトの認証<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D7%A5%E9%A5%B0%A5%A4%A5%F3">プラグイン</a>を設定している

<ul>
<li><a href="https://github.com/azujuuuuuun/try-docker-mysql/blob/main/mysql/my.cnf">https://github.com/azujuuuuuun/try-docker-mysql/blob/main/mysql/my.cnf</a>

<ul>
<li><a href="https://qiita.com/ucan-lab/items/3ae911b7e13287a5b917">MySQL8.0 &#x8A8D;&#x8A3C;&#x65B9;&#x5F0F;&#x3092;&#x5909;&#x66F4;&#x3059;&#x308B;(Laravel5) - Qiita</a> と同様のエラーが出たので変更した</li>
</ul>
</li>
</ul>
</li>
<li><code>docker-compose up</code> で空のデータベースが出来上がった</li>
</ul>

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/en…

Docker ComposeでMySQLを動かしてみた

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

前回の記録

<iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fazujuuuuuun.hatenablog.com%2Fentry%2F2021%2F07%2F31%2F004541" title="新型コロナウィルスワクチン接種2回目の副反応の記録 - なんでもノート" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe><cite class="hatena-citation"><a href="https://azujuuuuuun.hatenablog.com/entry/2021/07/31/004541">azujuuuuuun.hatenablog.com</a></cite>

今回の記録

<ul>
<li>2022/03/03 15:00

<ul>
<li>ワクチン接種</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D5%A5%A1%A5%A4%A5%B6%A1%BC">ファイザー</a>社のワクチン</li>
<li>解熱剤を2錠もらう</li>
</ul>
</li>
<li>2022/03/04 08:57

<ul>
<li>36.6℃</li>
<li>注射したところに痛い</li>
<li>脇の下に筋肉痛のような痛み</li>
</ul>
</li>
<li>13:18

<ul>
<li>頭が重い</li>
<li>36.7℃</li>
</ul>
</li>
<li>15:25

<ul>
<li>37.7℃</li>
<li>解熱剤を飲む</li>
</ul>
</li>
<li>17:34

<ul>
<li>37.6℃</li>
</ul>
</li>
<li>18:00

<ul>
<li>36.9℃</li>
</ul>
</li>
<li>18:56

<ul>
<li>37.1℃</li>
</ul>
</li>
<li>2022/03/05 8:15

<ul>
<li>37.5℃</li>
</ul>
</li>
<li>10:00

<ul>
<li>37.3℃</li>
</ul>
</li>
<li>10:59

<ul>
<li>37.1℃</li>
</ul>
</li>
<li>16:06

<ul>
<li>37.5℃</li>
</ul>
</li>
<li>19:36

<ul>
<li>37.4℃</li>
</ul>
</li>
<li>2022/03/06 9:20

<ul>
<li>36.4℃</li>
</ul>
</li>
</ul>


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

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

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

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

<ul>
<li>解熱剤</li>
<li>氷枕</li>
<li>熱さまシート</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%DD%A5%AB%A5%EA%A5%B9%A5%A8%A5%C3%A5%C8">ポカリスエット</a></li>
<li>簡単に食べられる食料</li>
</ul>

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…

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

<a class="keyword" href="http://d.hatena.ne.jp/keyword/CSS">CSS</a>のmarginとpaddingの使い分けについてふと思ったので書く。

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


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

CSSのmarginとpaddingの使い分けについてふと思ったので書く。 対象要素とその兄弟要素との間の余白を確保する場合はmarginを使う 対象要素とその子要素との間の余白を確保する場合はpaddingを使う このシンプルなルールで大抵の場合は使い分けられるのではないかと思う。多分。

marginとpaddingの使い分け

100記事目の記事です。

大<a class="keyword" href="http://d.hatena.ne.jp/keyword/%B3%A2%C6%FC">晦日</a>に<a href="https://azujuuuuuun.hatenablog.com/entry/2021/12/31/204256">2021&#x5E74;&#x8CB7;&#x3063;&#x3066;&#x3088;&#x304B;&#x3063;&#x305F;&#x30E2;&#x30CE; - &#x306A;&#x3093;&#x3067;&#x3082;&#x30CE;&#x30FC;&#x30C8;</a>と<a href="https://azujuuuuuun.hatenablog.com/entry/2021/12/31/220346">2021&#x5E74;&#x632F;&#x308A;&#x8FD4;&#x308A; - &#x306A;&#x3093;&#x3067;&#x3082;&#x30CE;&#x30FC;&#x30C8;</a>を書いて、2021年ギリギリに100記事に到達した。2021年はこの記事を除き、90記事書いたようだ。我ながら結構頑張ってた。

最近技術記事以外のカテゴリーを追加した。

<ul>
<li><a href="https://azujuuuuuun.hatenablog.com/archive/category/%E3%81%8A%E4%BB%95%E4%BA%8B">&#x304A;&#x4ED5;&#x4E8B; &#x30AB;&#x30C6;&#x30B4;&#x30EA;&#x30FC;&#x306E;&#x8A18;&#x4E8B;&#x4E00;&#x89A7; - &#x306A;&#x3093;&#x3067;&#x3082;&#x30CE;&#x30FC;&#x30C8;</a></li>
<li><a href="https://azujuuuuuun.hatenablog.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0">&#x30D6;&#x30ED;&#x30B0; &#x30AB;&#x30C6;&#x30B4;&#x30EA;&#x30FC;&#x306E;&#x8A18;&#x4E8B;&#x4E00;&#x89A7; - &#x306A;&#x3093;&#x3067;&#x3082;&#x30CE;&#x30FC;&#x30C8;</a></li>
<li><a href="https://azujuuuuuun.hatenablog.com/archive/category/%E6%96%99%E7%90%86">&#x6599;&#x7406; &#x30AB;&#x30C6;&#x30B4;&#x30EA;&#x30FC;&#x306E;&#x8A18;&#x4E8B;&#x4E00;&#x89A7; - &#x306A;&#x3093;&#x3067;&#x3082;&#x30CE;&#x30FC;&#x30C8;</a></li>
<li><a href="https://azujuuuuuun.hatenablog.com/archive/category/%E6%97%A5%E8%A8%98">&#x65E5;&#x8A18; &#x30AB;&#x30C6;&#x30B4;&#x30EA;&#x30FC;&#x306E;&#x8A18;&#x4E8B;&#x4E00;&#x89A7; - &#x306A;&#x3093;&#x3067;&#x3082;&#x30CE;&#x30FC;&#x30C8;</a></li>
<li><a href="https://azujuuuuuun.hatenablog.com/archive/category/%E8%B2%B7%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE">&#x8CB7;&#x3063;&#x305F;&#x3082;&#x306E; &#x30AB;&#x30C6;&#x30B4;&#x30EA;&#x30FC;&#x306E;&#x8A18;&#x4E8B;&#x4E00;&#x89A7; - &#x306A;&#x3093;&#x3067;&#x3082;&#x30CE;&#x30FC;&#x30C8;</a></li>
<li><a href="https://azujuuuuuun.hatenablog.com/archive/category/%E9%9B%91%E8%A8%98">&#x96D1;&#x8A18; &#x30AB;&#x30C6;&#x30B4;&#x30EA;&#x30FC;&#x306E;&#x8A18;&#x4E8B;&#x4E00;&#x89A7; - &#x306A;&#x3093;&#x3067;&#x3082;&#x30CE;&#x30FC;&#x30C8;</a></li>
</ul>


雑記、買ったもの、お仕事カテゴリーが多めだ。

このブログはメモや日記・備忘録代わり、考えていることや思っていることの整理を目的に書いている。投稿数や頻度のノルマは特に設けていない。書きたくなったら書いている。来年も同じ感じで続けると思う。ゆるく続けていきたい。

100記事目の記事です。 大晦日に2021年買ってよかったモノ - なんでもノートと2021年振り返り - なんでもノートを書いて、2021年ギリギリに100記事に到達した。2021年はこの記事を除き、90記事書いたようだ。我ながら結構頑張ってた。 最近技術記事以外のカテゴリーを追加した。 お仕事 カテゴリーの記事一覧 - なんでもノート ブログ カテゴリーの記事一覧 - なんでもノート 料理 カテゴリーの記事一覧 - なんでもノート 日記 カテゴリーの記事一覧 - なんでもノート 買ったもの カテゴリーの記事一覧 - なんでもノート 雑記 カテゴリーの記事一覧 - なんでもノート 雑記、買っ…

100記事目

年末なので2021年を振り返る。

2021年のメイントピックはやはり部署異動と引っ越しだった。部署異動は4月、引っ越しは10月下旬にした。環境の変化の効果は大きく、生活習慣やメンタルも変わった。総合的に見て変えてよかったと思う。

振り返りにあたってカレンダーや日記を見返した。色々思い出す出来事があったが、特に印象に残っているものは何かが変わった出来事だった。それこそ部署異動や引っ越しはそうだ。他には

<ul>
<li>ブログをそれなりの頻度で書くようになった</li>
<li>知らない街に行った</li>
<li>引っ越してからお昼ご飯を外で食べる頻度が高くなった</li>
<li>定期的な断捨離を始めた</li>
</ul>


とかが今年の出来事の中で印象が強く残っている。自分は変化を大事にしているのかもしれない。来年も何か良い方向に変わりたい。

年末なので2021年を振り返る。 2021年のメイントピックはやはり部署異動と引っ越しだった。部署異動は4月、引っ越しは10月下旬にした。環境の変化の効果は大きく、生活習慣やメンタルも変わった。総合的に見て変えてよかったと思う。 振り返りにあたってカレンダーや日記を見返した。色々思い出す出来事があったが、特に印象に残っているものは何かが変わった出来事だった。それこそ部署異動や引っ越しはそうだ。他には ブログをそれなりの頻度で書くようになった 知らない街に行った 引っ越してからお昼ご飯を外で食べる頻度が高くなった 定期的な断捨離を始めた とかが今年の出来事の中で印象が強く残っている。自分は変化を…

2021年振り返り

<a class="keyword" href="https://blog.hatena.ne.jp/-/campaign/odai">今週のお題</a>「買ってよかった2021」

2021年買ってよかったモノを書く。

<h2>ワイヤレス充電器</h2>

<div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B08GQSD1MG/hatena-blog-22/" class="hatena-asin-detail-image-link" target="_blank" rel="noopener"><img src="https://m.media-amazon.com/images/I/31qwEe-l5vL._SL500_.jpg" class="hatena-asin-detail-image" alt="Anker PowerWave+ 3-in-1 Stand with Watch Holder ワイヤレス充電器 Apple Watchホルダー付" title="Anker PowerWave+ 3-in-1 Stand with Watch Holder ワイヤレス充電器 Apple Watchホルダー付"></a><div class="hatena-asin-detail-info"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B08GQSD1MG/hatena-blog-22/" target="_blank" rel="noopener">Anker PowerWave+ 3-in-1 Stand with Watch Holder ワイヤレス充電器 Apple Watchホルダー付</a><ul class="hatena-asin-detail-meta"><li>Anker</li></ul><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B08GQSD1MG/hatena-blog-22/" class="asin-detail-buy" target="_blank" rel="noopener">Amazon</a></div></div>

<a href="https://azujuuuuuun.hatenablog.com/entry/2021/09/25/220547">2021&#x5E74;&#x5EA6;&#x4E0A;&#x534A;&#x671F;My Best Buy - &#x306A;&#x3093;&#x3067;&#x3082;&#x30CE;&#x30FC;&#x30C8;</a>に書いたので詳細は省略。ケーブルを挿すのではなく、置くだけで充電できて楽。

<h2>スピーカーフォン</h2>

<div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00BF3B6RC/hatena-blog-22/" class="hatena-asin-detail-image-link" target="_blank" rel="noopener"><img src="https://m.media-amazon.com/images/I/414JCoosM4L._SL500_.jpg" class="hatena-asin-detail-image" alt="Jabra Speak 510 スピーカーフォン 【国内正規品】 Web会議 エコーキャンセラー内蔵 Bluetooth接続 USB接続 最長15時間バッテリー持続 100-43100000-40" title="Jabra Speak 510 スピーカーフォン 【国内正規品】 Web会議 エコーキャンセラー内蔵 Bluetooth接続 USB接続 最長15時間バッテリー持続 100-43100000-40"></a><div class="hatena-asin-detail-info"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00BF3B6RC/hatena-blog-22/" target="_blank" rel="noopener">Jabra Speak 510 スピーカーフォン 【国内正規品】 Web会議 エコーキャンセラー内蔵 Bluetooth接続 USB接続 最長15時間バッテリー持続 100-43100000-40</a><ul class="hatena-asin-detail-meta"><li>Jabra(ジャブラ)</li></ul><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B00BF3B6RC/hatena-blog-22/" class="asin-detail-buy" target="_blank" rel="noopener">Amazon</a></div></div>

こちらも
<a href="https://azujuuuuuun.hatenablog.com/entry/2021/10/27/201605">Jabra Speak 510&#x3092;&#x8CB7;&#x3063;&#x305F; - &#x306A;&#x3093;&#x3067;&#x3082;&#x30CE;&#x30FC;&#x30C8;</a>に書いたので詳細は省略。耳に優しいのとZoomのミュートが連動するのがよい。

<h2>ハンガーラック</h2>

<div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B099MZT2ZT/hatena-blog-22/" class="hatena-asin-detail-image-link" target="_blank" rel="noopener"><img src="https://m.media-amazon.com/images/I/31U0nJDQaOL._SL500_.jpg" class="hatena-asin-detail-image" alt="サニーポイント ハンガーラック プロ シングル 幅78.2~122.5×奥行37.8×高さ149.5cm 頑丈ハンガー 耐荷重80kg (黒 + シルバー, 基本型)" title="サニーポイント ハンガーラック プロ シングル 幅78.2~122.5×奥行37.8×高さ149.5cm 頑丈ハンガー 耐荷重80kg (黒 + シルバー, 基本型)"></a><div class="hatena-asin-detail-info"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B099MZT2ZT/hatena-blog-22/" target="_blank" rel="noopener">サニーポイント ハンガーラック プロ シングル 幅78.2~122.5×奥行37.8×高さ149.5cm 頑丈ハンガー 耐荷重80kg (黒 + シルバー, 基本型)</a><ul class="hatena-asin-detail-meta"><li>サニーポイント</li></ul><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B099MZT2ZT/hatena-blog-22/" class="asin-detail-buy" target="_blank" rel="noopener">Amazon</a></div></div>

こちらは初出。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BE%E5%C3%E5">上着</a>を羽織る寒い季節になった。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BE%E5%C3%E5">上着</a>のクローゼットの出し入れが面倒くさかった。ハンガーラックがその面倒臭さを解消してくれた。<a class="keyword" href="http://d.hatena.ne.jp/keyword/%BE%E5%C3%E5">上着</a>だけでなく鞄なども吊るせて便利。

<h2><a class="keyword" href="http://d.hatena.ne.jp/keyword/Wi-Fi%A5%EB%A1%BC%A5%BF">Wi-Fiルータ</a>ー</h2>

<div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B08LG6F4T4/hatena-blog-22/" class="hatena-asin-detail-image-link" target="_blank" rel="noopener"><img src="https://m.media-amazon.com/images/I/31rEYojQPVL._SL500_.jpg" class="hatena-asin-detail-image" alt="バッファロー WiFi ルーター 無線LAN 最新規格 Wi-Fi6 11ax / 11ac AX3200 2401+800Mbps 日本メーカー 【iPhone13/12/11/iPhone SE(第二世代) PS5 メーカー動作確認済み】 WSR-3200AX4S/NBK" title="バッファロー WiFi ルーター 無線LAN 最新規格 Wi-Fi6 11ax / 11ac AX3200 2401+800Mbps 日本メーカー 【iPhone13/12/11/iPhone SE(第二世代) PS5 メーカー動作確認済み】 WSR-3200AX4S/NBK"></a><div class="hatena-asin-detail-info"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B08LG6F4T4/hatena-blog-22/" target="_blank" rel="noopener">バッファロー WiFi ルーター 無線LAN 最新規格 Wi-Fi6 11ax / 11ac AX3200 2401+800Mbps 日本メーカー 【iPhone13/12/11/iPhone SE(第二世代) PS5 メーカー動作確認済み】 WSR-3200AX4S/NBK</a><ul class="hatena-asin-detail-meta"><li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%D0%A5%C3%A5%D5%A5%A1%A5%ED%A1%BC">バッファロー</a></li></ul><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B08LG6F4T4/hatena-blog-22/" class="asin-detail-buy" target="_blank" rel="noopener">Amazon</a></div></div>

こちらは<a href="https://azujuuuuuun.hatenablog.com/entry/2021/12/01/220041">&#x30A4;&#x30F3;&#x30BF;&#x30FC;&#x30CD;&#x30C3;&#x30C8;&#x306E;&#x901F;&#x5EA6;&#x304C;&#x4E0A;&#x304C;&#x3063;&#x305F; - &#x306A;&#x3093;&#x3067;&#x3082;&#x30CE;&#x30FC;&#x30C8;</a>に書いた購入した<a class="keyword" href="http://d.hatena.ne.jp/keyword/Wi-Fi%A5%EB%A1%BC%A5%BF">Wi-Fiルータ</a>ー。この<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EB%A1%BC%A5%BF%A1%BC">ルーター</a>のおかげかはわからないが、ネットが速くなったので買ってよかった。

<hr>


2022年も良いお買い物をしたい。

今週のお題「買ってよかった2021」 2021年買ってよかったモノを書く。 ワイヤレス充電器 Anker PowerWave+ 3-in-1 Stand with Watch Holder ワイヤレス充電器 Apple Watchホルダー付AnkerAmazon 2021年度上半期My Best Buy - なんでもノートに書いたので詳細は省略。ケーブルを挿すのではなく、置くだけで充電できて楽。 スピーカーフォン Jabra Speak 510 スピーカーフォン 【国内正規品】 Web会議 エコーキャンセラー内蔵 Bluetooth接続 USB接続 最長15時間バッテリー持続 100-4310…

2021年買ってよかったモノ

Eufy RoboVac 15C（以下、ユーフィと書く）はAnkerのロボット掃除機。数日前から使い始めた。使用感を書く。

<div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07MH4J8QZ/hatena-blog-22/" class="hatena-asin-detail-image-link" target="_blank" rel="noopener"><img src="https://m.media-amazon.com/images/I/41vt+IMKIKL._SL500_.jpg" class="hatena-asin-detail-image" alt="Anker Eufy RoboVac 15C（ロボット掃除機)【BoostIQ搭載/アプリ対応/超薄型/強力吸引/静音設計/自動充電/落下防止/衝突防止】（ホワイト）" title="Anker Eufy RoboVac 15C（ロボット掃除機)【BoostIQ搭載/アプリ対応/超薄型/強力吸引/静音設計/自動充電/落下防止/衝突防止】（ホワイト）"></a><div class="hatena-asin-detail-info"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07MH4J8QZ/hatena-blog-22/" target="_blank" rel="noopener">Anker Eufy RoboVac 15C（ロボット掃除機)【BoostIQ搭載/アプリ対応/超薄型/強力吸引/静音設計/自動充電/落下防止/衝突防止】（ホワイト）</a><ul class="hatena-asin-detail-meta"><li>Eufy (ユーフィ)</li></ul><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B07MH4J8QZ/hatena-blog-22/" class="asin-detail-buy" target="_blank" rel="noopener">Amazon</a></div></div>

ユーフィを買う前はフローリングの床にカーペットを敷いていたが、諸事情でカーペットをやめることにした。カーペットをやめることの問題はフローリングの色が白いことにより髪の毛や埃が目立つことだった。掃除機をかけるのは面倒くさかったし、ロボット掃除機に興味があったので買ってみた。

何回か使ってみて色々な課題が出てきた。

まず、ユーフィが玄関に落ちた。玄関と廊下の段差が3cmだったので段差と検知せず落ちたようだ。3cmの段差は登れず、玄関から復帰できないという状態が発生した。侵入禁止エリアを設定できるモデルにすればよかったと後悔した。買いかえが頭によぎったが、できる対策がないか調べた。<a href="https://yonner-life.com/%E4%BD%BF%E3%81%84%E5%A7%8B%E3%82%81%E3%81%A6%EF%BC%91%E5%B9%B4%E5%8D%8A%E3%81%A1%E3%82%87%E3%81%A3%E3%81%A8%E3%80%81%E6%A0%BC%E5%AE%89%E3%81%A7%E9%AB%98%E6%80%A7%E8%83%BD%E3%81%AA%E3%83%AD%E3%83%9C/#toc14">&#x683C;&#x5B89;&#x306A;&#x30ED;&#x30DC;&#x30C3;&#x30C8;&#x6383;&#x9664;&#x6A5F;&#x3092;&#x4F7F;&#x3063;&#x3066;&#xFF11;&#x5E74;&#x534A;&#x3002;&#x3088;&#x3044;&#x3068;&#x3053;&#x3001;&#x56F0;&#x3063;&#x305F;&#x70B9;&#x3002; | YONNER LIFE</a>によると、

<blockquote>玄関下に黒いシートを敷くとうまく反応して落ちなくなりました。</blockquote>

とあった。黒いシートはどこで入手できるかわからなかったので、黒のビニールテープで代用することにした。

<div class="hatena-asin-detail"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B002G10NIK/hatena-blog-22/" class="hatena-asin-detail-image-link" target="_blank" rel="noopener"><img src="https://m.media-amazon.com/images/I/51y5KousMKL._SL500_.jpg" class="hatena-asin-detail-image" alt="ニチバン ビニールテープ VT-19 黒" title="ニチバン ビニールテープ VT-19 黒"></a><div class="hatena-asin-detail-info"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B002G10NIK/hatena-blog-22/" target="_blank" rel="noopener">ニチバン ビニールテープ VT-19 黒</a><ul class="hatena-asin-detail-meta"><li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%CB%A5%C1%A5%D0%A5%F3">ニチバン</a>(Nichiban)</li></ul><a href="https://www.amazon.co.jp/exec/obidos/ASIN/B002G10NIK/hatena-blog-22/" class="asin-detail-buy" target="_blank" rel="noopener">Amazon</a></div></div>

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/azujuuuuuun/20211230/20211230144906.jpg" alt="f:id:azujuuuuuun:20211230144906j:plain" width="1024" height="768" loading="lazy" title="" class="hatena-fotolife" itemprop="image">

玄関がダサくなったが、ユーフィは落ちなくなった。玄関の数センチ手前で後ろに下がるようになった。ありがとう。

次に、椅子の足の間にハマって動けなくなった。足の間にギリギリ入り、キャスターが回転しピッタリハマり動けなくなるようだ。こっちは一時凌ぎでビニール紐で足の間に入れないようにした。

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/a/azujuuuuuun/20211230/20211230145727.jpg" alt="f:id:azujuuuuuun:20211230145727j:plain" width="1024" height="768" loading="lazy" title="" class="hatena-fotolife" itemprop="image">

果てしなくダサくなった。他の解決策を探している。

次に、推進力が高すぎて家財に傷がつかないか心配だ。思っていたより推進力があり、ある程度重たいモノでも押して突き進み、壁には突進していく。擦り傷や衝突による傷がつかないかが心配だ。こちらはまだ対策ができていない。滑り止め等の対策が必要だ。

最後に、音が思ったより大きかった。<a href="https://my-best.com/137">【2021年】ロボット掃除機のおすすめ人気ランキング16選【徹底比較】 | mybest</a>に

<blockquote>静音性の高いモデルが多いので、子どもが寝ているときや、リモートワーク中にも活躍します。もちろん無音ではないですが、気にならないレベルです。</blockquote>

とあったのでミーティング中に使えることを期待していたが、ミーティング中は止めた方がよさそうな音の大きさだった（リモートワーク中とはあるが、ミーティング中とは書いてなかった）。

色々と課題ばかり書いてきたが、肝心の清掃力については正直まだはっきりと言えない。課題の対策に追われて試運転しかできていないためだ。ランダム清掃でどれくらい網羅できるのかは気になるところ。今のところサイドブラシで角をよく掃除できている印象を受ける。これからの活躍に期待だ。

Eufy RoboVac 15C（以下、ユーフィと書く）はAnkerのロボット掃除機。数日前から使い始めた。使用感を書く。 Anker Eufy RoboVac 15C（ロボット掃除機)【BoostIQ搭載/アプリ対応/超薄型/強力吸引/静音設計/自動充電/落下防止/衝突防止】（ホワイト）Eufy (ユーフィ)Amazon ユーフィを買う前はフローリングの床にカーペットを敷いていたが、諸事情でカーペットをやめることにした。カーペットをやめることの問題はフローリングの色が白いことにより髪の毛や埃が目立つことだった。掃除機をかけるのは面倒くさかったし、ロボット掃除機に興味があったので買ってみた。 …

azujuuuuuun.github.io

About

Favorite

Link

Blog