PostgreSQL 入門


銀座うしごろに行ってきました！
おそらく、人生で一番高級な焼肉でした。おいしかった〜！

https://ushigoro.com/shop/ginza/

![お店](/images/20220507-05.jpeg)

# シャトーブリアン

お肉の王様 `シャトーブリアン` は赤み最強のお肉でとろけるほど柔らかく、赤みのにくにくしい味が堪能できて満足です！

![シャトーブリアン](/images/20220507-01.jpeg)

この二切れで 4600 円はさすがでした。お金のことをきにすることなくこれだけ食べていたい。。。

![シャトーブリアン](/images/20220507-04.jpeg)

# 究極の黒タン 厚切り

タンと言えばやっぱり厚切りだよねってことで、厚切りタンは脂がしっかりとしていてとろとろでした。おいしい、、、

![究極の黒タン 厚切り](/images/20220507-06.jpeg)

この二切れで 3200 円です。ひとくちあたり 1600 円。うーん、すごい。

# しんしん（薄切り）

赤み肉代表の `しんしん` は薄切りで、さっと焼いていただきました。おいしすぎる〜〜！

![しんしん](/images/20220507-02.jpeg)

# 厳選和牛と咖喱の石焼チーズリゾット

うしごろ銀座店限定の `厳選和牛と咖喱の石焼チーズリゾット` は満腹状態で食べたのでそこまでの感想はないのですが、
見た目通りの味で見た目通りの美味しさでした。美味。

![厳選和牛と咖喱の石焼チーズリゾット](/images/20220507-03.jpeg)

# 感想

上記以外にもユッケとかリブとか食べていたのですが、赤み肉であっても全般的に脂が少し強いかもしれないです。
最後のほうは満腹なのと、脂で胃がやられていました。

立地は東京駅と有楽町駅のちょうど中間ぐらいで歩いて行くには少し遠いですが、おいしいお肉を都市部（銀座あたり）で食べるにはちょうどよいお店で、お店の人の干渉もそこまで多くないので豪遊したいときにいいですね。


銀座うしごろで焼肉食べた


2022 年 4 月 18 日、かすみがうらフルマラソンに参加し、26 km 地点でリタイアしました。

リタイアしてしまったものの、驚きと教訓があって参加してよかったです。

1. 心拍は全然辛くない
2. ハーフまでは誰でも完走できること
3. フルマラソンは 脚 を作り、楽なフォームで走ることが何よりも大事

# 走ってみたら脚以外は辛くなかった

びっくりなんですが、大勢の人と少しゆっくり目のペースで走ると全然心臓は辛くなかったのです。

ランニングといえば、とにかく息苦しくて辛い競技の印象がありますが、
普段の 5 km ランニングとは違いました。面白い。

見返すと、心拍数は 160 程度を維持していました。
事前に心拍は慣れるよ〜って聞いていたのですが、ここまで気にならいのはびっくりでした。

# 街道の応援うれしい

もー色んな人が頑張れ〜って応援してくれるので普通にうれしい！
不特定多数の人から応援されることは日常生活ではないのでいいですね。

最後、脚を引きずって歩いていたときは大丈夫？頑張って！って応援してもらえるも、
その後リタイアしました。

# 30 km の壁は経験できなかった

走るときには糖と脂肪を消費していくのですが、人間が体にある量は約 30 km 走る分しかないと言われています。
なので、30 km より先はエネルギー切れの状態で走らないと行けず、新境地があるとのことです。

この壁を経験したかったのに無念。。。

# 補給ポイントはほぼバナナしかなかった

補給ポイントでステーキ食べたりみたいな記事を事前に読んでいたので、とても楽しみにしていましたがバナナでした。
場所によってはお酒もでるみたいですが、お水とポカリでした。

それでも走りながら、がちって紙コップを掴み、お水を一気に煽るプレイができたので満足です。

# 脚が辛いと何も出来ない

心拍は OK なのに脚の痛みが先に来てしまいました。
脚が痛いとどうしようもないね。

## 16 km 地点で足に異変

15 km までは心拍も余裕で キロ 6 ペースを維持して走ることが出来ていました。

16 km に差し掛かったタイミングで、急に足裏が痛くなり速度を落としながらも継続して走っていました。

21 km 地点では足裏の痛みが耐えられないほど痛くなり、路肩でストレッチするも改善せず、フルマラソンの洗礼を受けました。

## 足裏の痛みは耐えられない

関節の痛みも同様ですが、足裏も走る／歩くと必ず地面と接地するので一歩一歩で激痛が走りました。

## 足裏の痛みを後で調べてわかったこと

足裏の痛みは `足底筋膜炎` で、考えられる原因は 3 つありました。

1. 足裏含めた脚全体の筋力不足
2. 過度な前傾姿勢による足裏への負担
3. 大きめサイズの靴および靴下

いずれも該当しており、2 番は腹筋／背筋が足りていないことを自覚しており、そこからランニングフォームが前傾になっていることを認識していました。

また、靴に関しても少し大きめサイズの靴で、かつ、締め付けがきつい靴下（以前にこの靴下で同様の痛みあり）を履いていたのも起因していそうです。

# 次回に向けた対策

まずはランニングシューズを新調しようと思います。お金で解決できるかもしれないので！
狙いは hoka oneone の厚底靴。

日々のランニングは 5 km ランだったのですが、定期的に 10 km 〜 20 km の少し長めのランをしていくことが重要ですね。


初めてフルマラソンを走った感想


何もしていないと嫌なこと（特に仕事のストレス）でネガティブな思考がぐるぐるしてしまいます。
そんなときはお散歩すると効果的だったので、やり方をメモっておきます。

半年前ぐらいに発見してから週に 3 回ぐらいはやっています。

# お散歩効果

- 散歩の最初の 10 分ぐらいは嫌なことを考えてしまうが、段々とこの建物きれいとか他のことを考えるようになる
- 他のことを考えるようになるといつの間にかネガティブな思考がなくなる

嫌なことの大きさによって効果が出るまで歩く時間が長くなりますが、
大体は 30 分も歩けば十分です。

20 分歩いても他のことを考えられない場合はお散歩の効果がないです。
何回かそういうときもありましたが、今の所対策がないので諦めて寝るしかないです。

# 散歩のやり方（やってよかったもの）

一番重要なのは「景色を見て景色のことを考える」ことと「スマホを持ち歩かない」です。

- 周りの景色や自然（星とか木とか）を意識的によく見る
- 音楽を聞かない
- 携帯電話を持たない
  - どうしても持ち歩くときはカメラアプリと Wallet アプリ以外は視界に入れてはいけない
- 軽装で歩く
  - iPhone は重たいので持ち歩いちゃだめ
- 人が少なく静かなところを歩く
- とにかく内省する

# 試したけど効果なかったもの

- サウナ
  - 気持ちいいけど人が周りにいると落ち着かないので今ひとつ
- ゲーム／読書／動画視聴
  - 集中できない
- ドライブ
  - 多少は効果あったけど都内は車が多くて気を使うから今ひとつ
  - ただ河原とか遠出して誰もいない静かなところにいくと落ち着く
- 自転車でお散歩
  - 自転車だと動きが早くて景色からのインプットが少なくてそこまで効果がない
- 登山／森にいく
  - 登山や森にいくために電車乗ったりするのが意味をなさない
  - メンタル維持のためではなくただのイベントになってしまう
- 瞑想
  - やり方が下手なのかもしれないけど効果ないし、難しいしで今ひとつ
- 美味しいものを食べる
  - メンタル不調のときは美味しいものたべてもあまり美味しく感じなかった
  - そして美味しいのは本当に一瞬で食事終わったら戻るのでコスパが悪すぎる
- ショッピング／買い物
  - ストレス発散でよくみるショッピングは虚無だった。一切の効果なし。
- ファッション
  - テンションの上がる服やアクセサリをつけたらどうかと思ったけど今ひとつ
  - 多少の効果はあるけど効果が低いのと、持続性がない。そしてお金かかる。


メンタル維持はお散歩が一番よかった


# What is WSL

- Windows Subsystem for Linux
- 少ないオーバヘッドで GNU/Linux の CLI Program を実行できる環境を提供する機能のこと
- 簡単に言うと Windows 上で bash が動く

# 本来は Windows 上で Linux プログラムは動かない

- Windows
  - Portable Executable
- Linux
  - Executable and Linkable Format

# （補足）ファイルフォーマット

一言でいうとバイナリファイルの中身の作り方

## Portable Executable（PE）

- Windows のローダが認識する実行可能ファイルのフォーマット
- EXE, DLL, SYS, FON など
- MS-DOS HEADER > MS-DOS REAL-MODE STUB PROGRUM > NT ヘッダ > セクションテーブル > セクションデータ

## Executable and Linkable Format（ELF）

- Linux や 組み込み系で使われている
- C をコンパイルしたプログラム など
- ELF ヘッダ > プログラムヘッダ > セクションヘッダ

# ELF を動かすために必要なこと

- Linux カーネルレベルの機能
  - システムコール API（プロセス管理、メモリ管理など）
- Shell
- Package Manager
  - プログラムの入手方法の提供

WSL では Linux システムコールを Windows の機能として用意し、Microsoft Store からダウンロードした Linux を動かす

# WSL には Vesrion 1 と Vesrion 2 がある

v1 と v2 でアーキテクチャが全く違うので単純な後継バージョンではない。

- v1（since 2016/4/6）
  - メモリ消費が少ない
- v2（since 2020/5/19 正式版）
  - I/O の高速化
  - 完全な Linux 互換性

# Architecture の違い

- v1
  - NT Kernel Driver（Pico Provider）が、Linux システムコール命令 → Windows システムコール命令 へ変換する
  - ファイルシステム = VolFS
  - Pico Provider（Linux） >（Linux SysCall）> Pico Provide（NT Kernel）r > （WinNT SysCall） > Windows NT Kernel
- v2
  - Hyper-V 仮想マシン上で動く Linux カーネルでシステムコールを実行する
  - ファイルシステム = 仮想ディスクに Linux ファイルシステム（ext4 とか）
  - Linux 仮想マシン > （Linux SysCall） > Linux Kernel > （CPU 命令） > Hyper-V Hypervisior

# WSL 1 の仕組み

v2 と共存可能ではあるけど、利点がないので省略

※Linux ディストリビューション単位で v1 と v2 の切り替え可能

# WSL 2 の仕組み

- Hyper-V で軽量な Linux を動かす（Linux が動くのは仮想化技術の範囲）
- ホストマシン（Windows）とのやり取りは「9P」を介してやり取りする
  - Win : p9rdr.sys（in Windows NT Kernel）
  - Lin : /init
  - /sys とか /proc とかの特殊ディレクトリも 9P でやり取り可能に！

Ubuntu だと 400 MB ぐらい・・！

# ファイルシステムの違い

- ファイルシステム
  - v1 : NTFS 上にマッピングした VolFS
  - v2 : 仮想 HDD（root.vhdx）上の ext4
- アクセス方法
  - v1 : DrvFS
  - v2 : 9P

# WSL を使ってみる

とても簡単（だけど苦労した）

- Windows 10 Version 2004 Build 19041 or later
- Windows 10 Home Edition でも OK

# Install WSL

```powershell
# コンパネからもできるけどコマンドで
# Microsoft-Windows-Subsystem-Linux : 有効化
# VirtualMachinePlatform : 有効化
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

# デフォルトを WSL 2 へ
wsl --set-default-version 2

# Windowws Store から Linux ディストリビューションをダウンロード
# Ubuntu or SUSE
# DL 終わったら「Launch（起動）」
bash
echo "Hello WSL 2"
```

# WSL 起動方法

とても簡単

- Command Prompt から bash
- Poershell から bash
- Ubuntu Application を Launch

# explorer から ファイルシステムへアクセスする

```
\\wsl$\Ubuntu
```

# Linux 側から Windows 側へアクセスする

```bash
xxxxx@DESKTOP-O5ES243:/$ cd /mnt
xxxxx@DESKTOP-O5ES243:/mnt$ ll
total 8
drwxr-xr-x  6 root  root  4096 Oct 18 21:07 ./
drwxr-xr-x 19 root  root  4096 Oct 18 21:12 ../
drwxrwxrwx  1 xxxxx xxxxx  512 Oct 18 20:55 c/
drwxrwxrwx  1 xxxxx xxxxx  512 Oct 18 20:55 d/
drwxrwxrwx  1 xxxxx xxxxx  512 Jan  1  1980 e/
drwxrwxrwt  2 root  root    40 Oct 18 21:10 wsl/
```

# シンボリックリンクをつけておくと楽

```bash
xxxxx@DESKTOP-O5ES243:/mnt/d/work$ sudo ln -s /mnt/d/work/linux-work/ /work
[sudo] password for xxxxx:
xxxxx@DESKTOP-O5ES243:/mnt/d/work$
xxxxx@DESKTOP-O5ES243:/mnt/d/work$ ll -ad /work
lrwxrwxrwx 1 root root 23 Oct 18 21:22 /work -> /mnt/d/work/linux-work/
```

# Windows Terminal

get from Microsft Store

# 参考

https://roy-n-roy.github.io/Windows/WSL%EF%BC%86%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A/Architecture/


What is WSL


アイコン入ると質素な感じがなくなってかっこいい〜

# fontawesome で追加しました

Markdown 記事の YAML に icon を追加しました。
icon には fontawesome の class を記載すると記事一覧にアイコンとして表示します。

```yaml
---
title: "記事アイコンを追加しました"
date: "2022-04-09"
topics: ["blog"]
icon: "fa-solid fa-paw"
---
```

https://fontawesome.com/icons/paw?s=solid

# デフォルトアイコン設定

記事ごとにアイコンセットするのが面倒なときは、空欄（ `icon: ""` ）にするとデフォルトアイコンにセットしたアイコンを表示します。

```json:site.config.json
{
  ...
  "defaultPostIcon": "fa-solid fa-folder-open"
}
```

# ランダムカラーモード

記事名からアイコンカラーを計算する機能も追加しました。
`true` にするとランダム、`false` にするとサイトのプライマリカラーです。

```json:site.config.json
{
  ...
  "randomColorPostIcon": true
}
```

## 実装

タイトル文字列から各文字のコードを取得して足していき、hsl を使って色調整をしています。

```typescript:slugCard.tsx
const stringToNumber = (str: string): number =>
  Array.from(str)
    .map((ch) => ch.charCodeAt(0))
    .reduce((a, b) => a + b);
const iconColorNum = stringToNumber(title) % 360;
const iconColorHsl = config.randomColorPostIcon
  ? `hsl(${iconColorNum}, 40%, 60%)`
  : "";
```

`<Icon>` コンポーネントは `sx={{ color: "" }}` だと `color="primary"` が優先されます。

```typescript:slugCard.tsx
<Icon
  className={icon || config.defaultPostIcon}
  color="primary"
  sx={{
    fontSize: "40px",
    m: 2,
    color: iconColorHsl,
  }}
/>
```

# 困ったこと

## Google Material Icons のフォントサイズが変更できない

記事の Markdown にアイコン名をセットしたかったので、SVG Icon を利用することができず、
Web Font のアイコンセットを利用することにしました。

最初は、Material UI 5 の `<Icon></Icon>` コンポーネントのデフォルトである Google Material Icons を利用することを考えていました。

ただ、この場合は Google Material Icons の CSS をオーバライドすることができずフォントサイズが変更できません。

```jsx
// 以下の書き方だとフォントサイズが変更されない
<Icon sx={{ fontSize: "50px" }}>
```

https://mui.com/material-ui/icons/

公式サイトに書いてあるとおり、フォントサイズは変更されません。
MUI の Issue として挙げられており、解決策も書いてありますがあとから見たときにわからなくなると思ったので素直に fontawesome を利用することにしました。

https://github.com/mui/material-ui/issues/19746

## Google Material Icons vs Fontawesome

Lighthouse でパフォーマンスを測定すると若干ですが Google Material Icons のほうが軽かったです。

- Google Material Icons = -3 パフォーマンス
- Fontawesome = -5 パフォーマンス

# Github

コードはここです。

https://github.com/potof/nextjs-blog-ts-mui-starter


記事アイコンを追加しました


記事の下部に同じトピックスからの記事を出力する関連記事機能を追加しました。

```json:site.config.json
{
  "isViewRelatedPosts": true,   // 表示有無
  "relatedPostsMaxCount": 3     // 表示件数
}
```


Git で別リポジトリの変更を取り込む


# なぜ作ったのか

もともと、旅行記録を取るためのブログを作っていたのですが、旅行以外の記録は別のブログにしたいと思って作りました。

https://potof.net/

# Obsidian との棲み分け

今まではこの手のメモはすべて Obsidian & Github（Private）で Knowledge 管理していたのですが、
せっかくなので Web 公開する道筋も作ってもいいかなって思って用意しました。

しばらくは Obsidian に書いた内容を整理してこのブログに入れていこうかなって思います。

# Next.js

旅行のブログはもともと Wordpress で作っており、サーバ代を無料するために SSG なブログへ作り直しました。
ほぼ初のモダンなフロントエンドなこともあって苦戦しました。

どうせブログに必要な機能なんて決まっているので、
もう少し簡単に作られればいいのに、、、と思い、初回の反省を踏まえてスタータキットをまず作りました。

https://github.com/potof/nextjs-blog-ts-mui-starter

このブログは上記リポジトリをベースに作っています。
自分でほしい機能は作ったつもりですが、今後、なにか必要になれば上記を更新していこうと思います。

このブログとの差異はコンテンツと `site.config.json` だけなのでメンテナンスも簡単ですね。

## Markdown ブログ

流行り廃りによって技術要素は変わってくるので、
このブログは特殊な記法をしないピュアな Markdown で記事を管理します。

一応、Zenn の特殊記法も使えるのですが、普段使わないしぱっとかけないので使いません。

## Vercel にデプロイしました

アドセンスやアフィリエイト目的ではないので、無料枠で使える Vercel にしました。
やっぱり Next.js の胴元なだけあってめちゃはやです。すごい！

## YAML front-matter

YAML front-matter はブログの機能に直結するので、少なすぎるとできること少ないし、多いと更新するのがめんどいので結構悩みました。
結局、以下の 3 つだけ指定することにしました。

```yaml
---
title: "Next.js でブログを作りました"
date: "2022-03-30"
topics: ["blog", "Next.js"]
---
```

どっかで Vercel が有料になった〜とかで移行する場合を考え、
その時も Zenn はあるかなってことで Zenn への移行性を考慮しました。

ちなみに Zenn は以下です。

```yaml
title: "" # 記事のタイトル
emoji: "😸" # アイキャッチとして使われる絵文字（1文字だけ）
type: "tech" # tech: 技術記事 / idea: アイデア記事
topics: [] # タグ。["markdown", "rust", "aws"]のように指定する
published: true # 公開設定（falseにすると下書き）
```

`type` を実装するかすごく悩んだのですが、個人ブログの規模で `type` は不要だし、
移行する場合は大半が技術記事かなって思い捨てました。

`emoji` はキャッチーな割にサムネイル画像のように重たくもならないので魅力的ですが、
シンプルなサイトゆえに使う絵文字でサイトコンセプトがごちゃごちゃになってしまうのでやめました。

CatNose さんの個人ブログがとても素敵ですが、これは絵文字じゃなくて画像だからかっこいいですよね。

https://archived.catnose.me/

これに対抗して fontawesome をキャッチアイコンにしようかとも思ったのですが、
`Next.js Icon` も `React Icon` も `MUI Icon` もいずれも import しないのといけない関係上、動的にはできないのでやめました。

ここは webfont な方式でいけば解消できるかもなので実装できるようであれば作ってみようかな。
