YAPC::Hiroshima2024 に参加したら自分のお好みが見えた


[YAPC::Hiroshima2024](https://yapcjapan.org/2024hiroshima/) の参加レポート！

## 参加よもやま
> YAPCはYet Another Perl Conferenceの略で、Perlを軸としたITに関わる全ての人のためのカンファレンスです。
>
> by YAPC::Hiroshima2024

[https://yapcjapan.org/2024hiroshima/:embed]

YAPC は去年の京都に引き続き２回目の参加です。京都に参加してとてもよかったので今年も参加しました。
去年の自分はどうやらブログ書いてないみたいですね。反省。

こういうときに去年のブログを書いていれば振り返って去年との感じ方の差分を残していけるからもっとブログ書くべきだと思いますね。
（毎度ブログもっと書くべきって言ってる気がする）

今年の YAPC のテーマは「what you like」ということでそれぞれのお好みを語るというテーマでした。
じぶんは好きなものを表明するのをためらっていた時期もあり、お好みを自覚するのがあまり得意ではないのでこのテーマはちょっとドキッとしました。

今回参加して自分のお好みがはっきりしたと共に、もっと尖らせていこうと思ったので筆をとりました。

## セッション感想
今回の YAPC ではプログラムの話よりもコミュニティや発信など、ソフトスキル的なセッションが多かったように感じました。
というよりも自分がそういうセッションが好きで重点的に聞いていたというだけの説はあります。

前回はメインの会場と他の会場の階が違っていて結構階段移動が大変だったイメージなんですが、今回はすべての会場が同じ階にあったので楽ちんでした。
廊下やホワイエが広く、椅子も多かったのでそこで作業してる人や会話を楽しんでいる人が多くいて印象的でした。

いくつか自分がとても印象的だったセッションについて書きます

### [コミュニティと共に生きる - キャリアの螺旋](https://speakerdeck.com/soudai/live-with-community)
[https://speakerdeck.com/soudai/live-with-community:embed]

[そーだい](https://twitter.com/soudai1025) さんがコミュニティでの活動を通してキャリアを前に進めてきたお話でした。
最初から最後までそーだいさん自身の人生が変わった言葉、出来事がちりばめられていて、[計画的偶発性理論](https://www.rgf-professional.jp/insights/2020-06-what-is-planned-happenstance-theory-how-to-create-a-career-contingency-career-plan)によるキャリアの成長を完全に体現していることをありありと感じられたセッションでした。

自分はまだまだこれからですが、いろいろな人と話したりブログ書いたりする理由の一つにこれもあるよなと思って大きく頷いて聞いていました。

思い返すと自分の人生の転機も結局偶然の出来事が多かったように思っていて、今後もよりいろいろな人と会って、本を読んでコード書いてやっていこうと決意を新たにさせてくれるセッションでした。

余談ですが、自分の所属するフリー株式会社が去年開催した「[freee 技術の日](https://www.freee.co.jp/event/freee-tech-day-2023/)」で、自分も[仕事がしやすくなる社内発信のすすめ](https://speakerdeck.com/hayaokimura/work-happily-by-tweeting)という題で登壇していました。
このときの登壇を YAPC::Hiroshima の SmartHR のスポンサーブースの方が聴いていて、覚えてくださっていました。そーだいさんの登壇と相まってとても嬉しかったです。今後も良いコンテンツを作りたいと思いました。

### [Blogを作り、育み、慈しむ ~ Blog Hacks 2024](https://junkyard.song.mu/slides/yapc-hiroshima-2024)
[https://junkyard.song.mu/slides/yapc-hiroshima-2024:embed]

[soungmu](https://twitter.com/songmu)さんの、Blog を中心としたエンジニアの発信についての登壇でした。
特に個人サイト、個人ブログの良さについて多く語られていました。

このブログも個人サイトの一つです。そのため、 songmu さんがコントロールしたいものの話はすごく共感できました。
また、「個人サイトは家、SNSは社交場」という話はすごく印象的でした。
個人的に個人サイトと他の文章プラットフォームの使い分けに悩んでいたのですごくしっくりきました。

今後はもっとこのブログを育てていきたい、そう思わせてくれる登壇でした。YAPC::Hiroshima で [yusukebe](https://twitter.com/yusukebe) さんが発表していた Hono v4 に書き換えたりなど、やりたいことはいくつかあるので盆栽精神でやっていきたいですね。

### 杜甫々さんキーノート
とほほのWWW入門の作者である杜甫々さんのキーノートで、杜甫々さんのこれまでのキャリアやとほほのWWW入門を書く経緯、どんなものをこれまで書いてきたのかのお話でした。

登壇から伝わってくる圧巻の執筆、発信量はもちろんですが、興味の幅と深さやなど、とても印象深いセッションでした。
特にとほほのWWW入門で意識していることの話はとても勉強になりました。
1ページで書くことで検索しやすくしたり、必要最低限のサンプルコードと短い説明を交互に書いたりすることを意識しているとおっしゃっていて、
自分が今後技術的な記事を書くときの参考にしたいと思いました。

杜甫々さんはとほほのWWW入門をいつも参照してプログラムを書いたりしていると言っていて、自分で作ったものを自分で使うことによる効用をすごく感じました。
自分は自分用に Obsidian というノートアプリを使ってメモを取っていて、少し前までノートが死蔵されてしまうことが課題だったのですが、Random note で頻繁に見返すようにしてから死蔵を防げており、自分で見返すことで書く行動が促進されるのを身を持って感じています。
とほほのWWW入門でも同様の事が起きているのかもしれないと勝手に共感していました。

最後の質問コーナーで「なぜそんなに続けられる・書けるのですか？」という質問に対して杜甫々さんが「単純に好きだからですね」と淡々と答えていたのがかっこよすぎる & 今回の YAPC のテーマである「What you like」とどんぴしゃすぎて勝手に感動で震えてました。

最高のセッションでした。

### YAPC 以外
初の広島だったので色々行きました！

宮島、呉、尾道と大満足でした！

![厳島神社の大鳥居](/img/miyajima.jpg)

![呉のてつのくじら館](/img/kure.jpg)

## まとめ
今回の YAPC は自分のやっていることをもっとやっていこうと再認識させてくれたそんなカンファレンスでした！次回の情報はまだですが、次回も参加したいと思います！最後になりましたが YAPC の運営の皆様、登壇者の皆様、スポンサーの皆様、良いカンファレンスをつくっていただきありがとうございました！


ランニングを10分だけしたらコンビニパンを食べたくなくなった


あけましておめでとうございます。本年もよろしくお願いします。

今年はフルマラソンを完走するのを個人的な目標の一つにしています。がんばります。
そこで今日から軽いランニングを始めました。
自分はコンビニのパンとコーヒーを朝食にすることが多いのですが、そのコンビニへ向かう道すじを遠回りして軽くランニングしてから向かいました。

最初は冬の朝ということもあり、手が冷たくて最初は辛かったのですが、10分ぐらい走ると手が温まっていい感じでした。
ただ、久しぶりに走ったこともあって土踏まずが痛くなったのでその後は歩いてました。

朝食を食べる前に走ったということもあり、とても空腹を感じつつコンビニに向かったわけですが、コンビニのいつものパンコーナーを見ても全く食欲が湧きませんでした。

走って思考がクリアになったことで本当に食べたいものの区別がついたのか、走ることで胃が求めるものが変わったのかわからないですが自分としては衝撃をうけました。

あれはなんだったんだろう……

ランニングはもう少し続けてみようと思います。






2022年振り返り



去年振り返りを書いたので今年も振り返りを書きます。
このブログ見るの年末年始ぐらいになってしまっているのは今年の一つ目の反省点。

## 環境の変化
今年は大きく環境が変わった年でした。年始には結婚し、３月には東京から大阪に引っ越し、転職もしました。
結婚と転居は一緒にやるものではないなと思ったとともに、結婚も転職も多くを妻が進めてくれていたのは本当にありがたかったです。東京のど真ん中から大阪のちょっと田舎に引っ越したので近所の環境は大きく変わったが、個人的には２ヶ月に一回ぐらいの頻度で東京に行っていて、これぐらいの頻度のほうが東京を満喫できて今の自分には割と合っている気がします。
東京にいたときはリモートワークのときはリビングで仕事をしていたのだけど、引っ越して仕事部屋ができてとてもはかどっています。最近は昇降デスクも買ってよりはかどっている感じがします。環境大事。

## 仕事
今は、freee の関西拠点で働いています。[関西初の会計エンジニアとして入社して爆速でバリューを出すためにしたこと](https://developers.freee.co.jp/entry/first-kansai-kaikei-engineer-join) という記事を入社エントリー代わりに書いたとおり、自分は会計チームの関西拠点一人目として参画しました。

詳しいことは上記のエントリに書いているのですが、社内の自分の情報発信を意識して行っていたことが仕事のしやすさにつながっていると思っています。最近はあまり発信できてないので続けたいと思っています。

個人的には新しい環境でも結構楽しくやれていて、自分のやりたいことができていると感じています。
3/4年働いて、仕事に少しずつ慣れてきたとともに、そろそろコンフォートゾーンに浸かってしまっている感じがするので、来年はより高い目標に到達できるように気を引き締め直してがんばります。


## 発信
このブログこそ書けてないですが、今年は会社のブログを今までよりは書いた年でした。

[https://developers.freee.co.jp/entry/first-kansai-kaikei-engineer-join:embed]

[https://developers.freee.co.jp/entry/hachi-refactoring-tips:embed]

[https://developers.freee.co.jp/entry/vscode-to-neovim:embed]

あといくつか社内ブログを書いたり、LT 登壇したりと、今までと比べると格段に発信量が増えました。やっぱり反応を貰えると書くのが楽しくなりますね。

## 買ってよかったもの

電動昇降デスクは買ってよかったです。

[https://flexispot.jp/e7-set.html:embed]

## 今年の反省
正直今年は結構頑張ったほうだと思っています。

ただ、イベントや旅行が多く、お金を使いすぎてしまった感があるので、もう少し来年は引き締めたいと思っています。
お金を使わずより稼ぐエンジニアになりたいですね。来年はもっといろんな新しい経験ができたらいいなぁ。

あとやっぱりこのブログがほったらかしになってしまったことが悔やまれるので、もう少し書いていこうと思います。

## 最後に
おわり！来年もよろしく！





2021年振り返り


今年も残すところあと数日ですね。毎年振り返りをちゃんとやっているわけではないですが、せっかくの年の瀬なので今年はちゃんと振り返りをしようと思います。

## 目次
- 実績
- １年前よりできるようになったこと

## 実績
### 仕事
仕事では Wantedly Pulse の開発に携わりました。Pulseでは体験の一部を Slack アプリ内で実現していて、
仕事で知った Slack アプリ開発で自分が知っておけばよかった Tips をブログで公開したら結構読まれました。

[https://www.wantedly.com/companies/wantedly/post_articles/302887:embed]

発信でいうと、ほかは個人的に気になったものをいくつか投稿したぐらいで量的に満足のいく一年ではなかったです。
ただ、Slackアプリの記事もそうですが書いたものに反応をいただいたり、
それによって繋がりが増えたりしたので発信はやっぱりするといいことがあるなと感じたので
来年は是非もっといろんなことを文字で残していきたいと思っています。（動画とか音声もできたら挑戦したい）

肝心の仕事自体の出来でいうと、去年よりは確実に良くなっているという実感はあります。

特に去年１年は新しい機能をどんどん作っていくことが業務のメインでしたが、
今年はそれを改善することにシフトしていきました。
去年書いた実装が今見ると良い手ではなかったものがあったり、
その逆があったりと同じサービスを継続して開発しているから気づけたことが多かったように思います。

### 私生活
私生活ではやっぱり結婚の話がやっと進められるようになったのが大きいです。
２年前にプロポーズしたんですが、その後すぐにコロナウイルスが流行って両家顔合わせができない状態になってしまってずっと pending になってました。

現状国内だとかなりコロナが落ち着いていて、このタイミングを逃すと次いつできるかわからないというのもあっての顔合わせでした。

[https://hayaokimura.com/blogs/kaoawase-prepare:embed]

結婚自体は来年にする予定です。

あと、学生の時にサークルでやっていたダイビングを再開して今年は結構潜りに行きました。
大体伊豆で潜ってました。ハンマーヘッドシャークを見に神子元に行ったのに風が強くて潜れなかったのは結構辛かったです。

## １年前よりできるようになったこと

- テキストコミュニケーションの改善
  - テキストで相手に伝えるということがあまり得意ではなかったのですが、この一年で結構改善されました。（とはいえまだまだですが）
- 仕事との関わり方を見直した
  - 今となって思うのですが、一年前は結構必死に仕事をしていた感じがします。自分で自分を駆り立てるような、追い詰めるような感じでした。あまり自覚的ではなかったのですが、今年の中旬ぐらいにそれを自覚して改善しています。
- 少しずつテキストで発信できるようになってきた
  - まだまだですが、少しだけ public な場になにかを発信するという活動をすることができました。少なくとも去年よりは
- 一つ一つの仕事が丁寧になりつつある
  - テキストコミュニケーションの改善も含めてなのですが、丁寧に一つ一つ進めることの重要性を再認識しました。

まだまだできるようになったことはあると思うのですがパッと出てこない……来年の抱負はまた別途書きます。
来年はできるようになったことを１年で振り返るのではなくてもう少し頻繁に文章にして残していけたらいいなと思っています。



両家顔合わせ case. hayaokimura (準備編)


[hayaokimura アドベントカレンダー](https://adventar.org/calendars/7251)22日めの記事です。

[https://adventar.org/calendars/7251:embed]

私事ですが、近いうちに結婚する予定です。
20歳ぐらいの頃は彼女の「か」の字もなかったので、5年前ぐらいの自分に「5年後お前は結婚するぞ」と言うと心底驚きそうです。

結婚するにあたって多くの人は両家顔合わせなるイベントをやると思います。自分も先日無事終わりました。
顔合わせをすすめるにあたってネットの情報はいくつかあったものの、
体験談みたいなものは見つけられなかったので自分が書くと誰かの参考になるかもしれないという体でブログに残しておきます。
人生に一回しかない体験だと思うので残しておきたいという気持ちもあります。

今回は顔合わせの日までに準備したことを書きました。
事前に以下を決めておきました。
- 地域
- お店
- 服装
- 手土産
- 会計

**地域**

自分と彼女はふたりとも地方に実家があるので地域としては「自分の実家の近く」、「彼女の実家の近く」、「東京」の3択がありました。
一般的には彼女の実家の近くに伺う事が多いようですが、彼女のご両親がせっかくなら遠出したそうという話を彼女から聞いていたので今回は東京にしました。

**お店**

自分の顔合わせのイメージは和食だったので、とりあえず和食をメインに色々探しました。
今回の場合どちらの両親も地方から東京に来ていただくので東京駅か品川駅の近くかなーって感じで今回はグランドプリンスホテル新高輪の和食清水にしました。
雰囲気もよく、料理も大変美味しかったです。両家顔合わせプランみたいなのがあってそれにした気がします。

[https://www.princehotels.co.jp/shintakanawa/restaurant/shimizu/:embed]

余談ですが品川駅には品川プリンスホテルとグランドプリンスホテル新高輪があるんですね。自分は知らなくて危うく当日品川プリンスホテルの方に行くところでした。

**服装**

服装もある程度決めて伝えておくとよいみたいです。とりあえずセミフォーマルの洋装とだけ伝えました。（彼女が服装色々悩んでました。自分はスーツを着るだけでいいので楽でした。こういうところは男性の方が楽ですね。）

**手土産**

手土産の有無も確認しておきました。統一しておくのがよいです。有りと双方に伝えました。

**会計**

会計を誰がするかを決めておくとバタバタしなくてよいです。今回は自分と彼女が出すことを両方の両親に伝えておきました。

ネットを見ると顔合わせで色々やる場合もあるみたいですが、うちはかなりシンプルな方だと思います。
結局それぞれの家族の形があるので話し合うのが大事ですね。
当日の話をしだすと長くなりそうなのでこの記事はここまでにしておきます。当日の感じはまた別で書きます。


イラストアイコンにしたい


[hayaokimura アドベントカレンダー](https://adventar.org/calendars/7251)６日めの記事です。

[https://adventar.org/calendars/7251:embed]

イラストアイコンにしたい。誰かにイラストをお願いしたい。

インターネット上で自分のアイコンとしてずっと自分の写真を使ってきたんだけど、以下のような理由でイラストアイコンにしたい。

- アイコンを設定するたびに自分の顔が拡大されててちょっと恥ずかしい
- その割にアイコンにすると縮小されるのでなにか分かりづらい
- イラストのほうがパッと見たときの認識がしやすい
- ちょっと自分を美化したい

イラストをお願いするには何をするといいんだ...

とりあえず自分の画像を集めるのとイラストのイメージを自分の中で固めておくのがよさそう

けんすうさんの 00:00 Studio のヘッダー画像を描いたバニリゾさん気になっているのでイメージ固められたらお願いしてみよう。



一人アドベントカレンダーはじめました


[hayaokimura アドベントカレンダー](https://adventar.org/calendars/7251)５日めの記事です。５日目ですが、１記事目です。

[https://adventar.org/calendars/7251:embed]

1~4日目はいずれ書きます。スターウォーズエピソード４みたいなものです。

## なんで書く？
このブログが放置気味でかわいそうだったのと、アドベントカレンダー書かないんですか？って煽られたからです。

もう４日経ってしまったけどゆるっと巻き返します。大丈夫、まだ土日はたくさんある。

## 何を書くか
年末なので今年の振り返りや来年の抱負などを書きたいです。
あとは普通にちょっと調べたこととか最近気になってることとかを短めに書けたらいいなって思います。
ついでにこのブログの改善を進めたいです。

基本的に一文字でも書けたらOKとします。全部埋まったら誰か褒めてください

やっていき


metascraper + unified でブログカードを作った


こんにちは。ブログ作って9ヶ月放置した人です。

正月に書こうと思っていたんですが、

- ブログのデザインがひどくて書く気になれなかった
- ブログカードを実装したかった
  - 2021年買ってよかったものリストを書こうと思ったらブログカード作りたくなった

みたいな経緯があって正月はこのブログのブログカードを作ってました。

今日はそのブログです。ちなみにブログカード以外にもちょこちょこ読みやすくなるように CSS をいじってます。

なんで正月に書かずに今書いているかというと最後の詰めをサボったからです。すみません。

## ブログカード完成品
今回作るにあたって、
- サムネイルとタイトル、説明を表示する
- ビルド時にサイトから OGP でデータを読み込んでビルドする

ことを要件としました。できあがったものがこちらです。

[https://hayaokimura.com/blogs/create-blog-with-next-netlify-cms:embed]

みための改善余地はまだあるなと思いつつ、ある程度作りたいものが作れたので良しとしました。
使いかたは、リンクにしたい URL を `[]` で囲って、URL の最後に `:embed`を追加すると使えます。上のリンクは

```
[https://hayaokimura.com/blogs/create-blog-with-next-netlify-cms:embed]
```

みたいな感じです。

## やったこと

最終的にやったこととしては、

- ReactMarkdown を使うのをやめる
- unified をそのままつかって markdown to HTML 変換をビルド時に行う
- 特定の文字列を embed タグとして扱う unified plugin を書く
- レンダリング時は HTML to react をする。その時 embed タグを解釈する

### ReactMarkdown を使うのをやめる

もともとこのブログは ReactMarkdown をつかって markdown を react 化していました。（作ったばかりのブログカード使いたがるのは許してください。）

[https://github.com/remarkjs/react-markdown:embed]

ですが、この方法だとそもそも markdown to react をページを読み込んだときに行っています。

自分が今回やりたかったのはビルド時に markdown to react するとともに OGP でデータをサイトから読み込むことだったので、 ReactMarkdown をこのまま使うことはできませんでした。

### unified をつかって md to HTML をビルド時にする。
unified はいろんな文字列を構文木に変換して扱えるようにするライブラリです。 ReactMarkdown の内部でも結局は unified のプラグインで md to react が成されています。

[https://github.com/unifiedjs/unified:embed]

これを使って、まず markdown to HTML をビルド時に行うようにしました。HTML の文字列として props に保存される形になります。

### 特定の文字列を embed タグとして扱う unified plugin を書く
unified で markdown を HTML にするとき、特定の文字列の場合（今回は `[]` で囲まれた `:embed` を含んだ URL 文字列）に OGP から情報を取ってきて、出力する HTML の文字列に OGP でとってきた情報を含めたいです。

unified は Transformer という構文木を変換するプラグインを挟むことで、変換時にいろいろな処理をすることができます。unified 公式のこの図がわかりやすいです。

![unified がやること](/img/unified.png)

今回の場合、Input が markdown、Output が HTML です。Parserで、markdown を構文木にした後、Transformer を構文木に作用させる事によって、色々できます。今回の場合は、特定の文字列の場合に `embed` という HTML タグにするようにしました。

```javascript
async function transformer(tree, file) {
  const nodes = selectPossibleOembedLinkNodes(tree);

  await nodes.map((node) => processNode(node));

  async function processNode(node) {
    if (!node.children || node.children.length == 0) {
      return;
    }
    const firstText = node.children[0];
    if (firstText.type !== "text") {
      return;
    }
    const value = firstText.value;

    if (value && isEmbed(value)) {
      node.type = "rehype-embed";
      const { body: HTML, url } = await got(extractUrl(value));
      const metadata = await metascraper({ HTML, url });
      node.data = metadata;
      node.children = null;
    }
  }
}
```

`node.type` に `rehype-embed` を指定し、metascraper ライブラリで取得した OGP のデータを node.data にわたすことで、props としてフロントで取得できるようにしています。

### レンダリング時に HTML を React に変換する。その時ブログカードコンポーネントを作る

ビルド時にうまく行っていれば、`[https://hoge.hoge:embed]`という文字列は `rehype-embed` タグと OGP のデータに変換されてフロントに渡ってきます。
フロントでもunifiedを用いて HTML から React に変換します。このとき、特定のタグの変換の仕方を components を与えることで指定できます。今回の場合下記のように RehypeEmbed コンポーネントを指定することで、ブログカードを作ることができます。

```javascript
const processor = unified().use(rehype2react, {createElement: React.createElement, components: {"rehype-embed": RehypeEmbed}});
```

```javascript
export const RehypeEmbed: React.FC<any> = (props) => {
  return (
    <ALink href={props.url} target="_blank" rel="noopener noreferrer">
      <ImageWrapper>
        <Image src={props.image} />
      </ImageWrapper>
      <DescriptionWrapper>
        <Title>{props.title}</Title>
        <Description>{props.description}</Description>
      </DescriptionWrapper>
    </ALink>
  );
}
```

こうすると metadata として HTML に渡した情報が props として利用でき、React で利用できます。

## まとめ

意外と長くなってしまった。 unified を触るのが初めてだったので結構楽しかったですが、実際は結構手こずってました笑

React でブログ作ってる人は参考にしてみてください。では！


Next.js + Netlify CMS でブログを作る


ブログ作りました！🎉🎉🎉
自分で作ったブログは機能こそ少ないですが、とても愛着が湧いていいです。せっかく作ったので、備忘録がてら今回作ったブログの作り方を書いておきます。

目次

```
- 構成
  - Next.js
  - Netlify CMS
- やったこと
- これから作りたいもの
```

## 構成

### Next.js

React のフレームワーク。SSR や、ビルド時レンダリング（SSR っぽい略し方を知らない）を簡単にすることができる。ルーティングもフォルダ構成で簡単にすることができて便利。自分は今まで Next.js を全く使ったことがなかったので、[チュートリアル](https://nextjs.org/learn/basics/create-nextjs-app)を一通りやってなんとなく使い方を理解した。

### Netlify CMS

静的ホスティングサービス[Netlify](https://www.netlify.com/)が提供している Git ワークフロー用 CMS。サイトに CMS 機能を追加することができる。

[https://www.netlify.com/:embed]

## やったこと

- Next.js のセットアップ
- Netlify CMS の設定
- デプロイ

### Next.js のセットアップ

自分は[Netlify CMS の Next.js セットアップフロー](https://www.netlifycms.org/docs/nextjs/)を進めて Netlify CMS with Next.js をセットアップしましたが、ブログを作りたいならこれはあまりおすすめしません。このフローでは markdown を react コンポーネントに変換する際に、[frontmatter-markdown-loader](https://hmsk.github.io/frontmatter-markdown-loader/)を使用していますが、これを使うとファイル名を指定して直接インポートする必要があるため、ファイル名を利用した dynamic routing ができませんでした。（できる方法があったら教えてほしい）

より良い方法として、[Creating a Markdown Blog with Next.js](https://dev.to/tinacms/creating-a-markdown-blog-with-next-js-52hk)を見ながらすすめることをおすすめします。これに沿ってセットアップすればとりあえず Next.js でブログを作るところまで進められます。

### Netlify CMS の設定

Next.js をつかった Markdown Blog を作ることはできたので、次はそれを Netlify CMS で管理できるようにしたいです。[Netlify CMS の Next.js セットアップフローの Adding Netlify CMS](https://www.netlifycms.org/docs/nextjs/#adding-netlify-cms)より後を参考にするといいです。ここでは、`admin/index.html`と`admin/config.yml`の作成をして Netlify にデプロイしています。`admin/index.html`はコピペで済むのですが、`admin/config.yml`は若干設定を変える必要があるので今自分が使っている設定を参考に、config.yml の設定をしてください。

```yaml
backend:
  name: git-gateway
  branch: master
media_folder: public/img
public_folder: img
publish_mode: editorial_workflow
collections:
  - name: "blogs"
    label: "Blogs"
    folder: "posts/blogs"
    create: true
    slug: "{{fields.slug}}"
    fields: # The fields for each document, usually in front matter
      - { label: "Layout", name: "layout", widget: "hidden", default: "blog" }
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Slug", name: "slug", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Featured Image", name: "thumbnail", widget: "image" }
      - { label: "Body", name: "body", widget: "markdown" }
```

**backend:** backend のプロトコル設定。git-gateway をよくわかってないけど、レポジトリとサイトの間の通信を担っています。デプロイする branch を指定できますが、基本 master でいいと思います。

**media_folder:** 画像など、メディアファイルを格納する場所。Next.js は public 以下が静的アセットを格納する場所なので public 以下を指定します。

**public_folder:** 画像を公開するパス。Next.js であれば media_folder の public を抜いたものになるはずです。

**publish_mode:** このオプションは指定しなくてもいいですが、指定すると下書き機能が有効になります。便利。下書き中の記事はブランチ切って PR として保存されています。

**collections:** 記事のフォーマットを指定します。複数指定できるので、ブログ記事と作品一覧みたいな使い方もできそう。

collections の中のパラメータとして一番大事なのは`create: true`です。これを指定しないと Admin の画面で編集ができません。あと、日本語の記事タイトルにするのであれば、`slug: "{{fields.slug}}"`は大事です。デフォルトでは、タイトルがファイル名になるので、日本語のタイトルを付けていると url が日本語になってダサいし長いです。fields に slag を追加して、slag を指定できるようにするとそれぞれファイル名を指定することができるようになります。fields は編集できる変数を追加できます。今自分が指定しているパラメータだと編集画面はこのように表示されます

![Netlify cms 上での表示](/img/netlify-cms-editor-params-shot.png)

### デプロイ

[Publishing to GitHub and Netlify](https://www.netlifycms.org/docs/nextjs/#publishing-to-github-and-netlify)のとおりに進めればデプロイできるはずです！これでブログの完成！やったね！

## つまづいたとこ

**date の取得**

[Creating a Markdown Blog with Next.js](https://dev.to/tinacms/creating-a-markdown-blog-with-next-js-52hk)に従ってセットアップをしていましたが、markdown を取得するところでエラーになりました。

```js
export async function getStaticProps({ ...ctx }) {
  const { slug } = ctx.params;
  const content = await import(`../../posts/${slug}.md`);
  const config = await import(`../../data/config.json`);
  const data = matter(content.default);

  return {
    props: {
      siteTitle: config.title,
      frontmatter: data.data,
      markdownBody: data.content,
    },
  };
}
```

```
SerializableError: Error serializing `.frontMatter.date` returned from `getStaticProps` in "/blogs/[slug]".
Reason: `object` ("[object Date]") cannot be serialized as JSON. Please only return JSON serializable data types.
```

[Next.js の SSG で AMP-only のブログを作った](https://hbsnow.dev/blog/nextjs-blog-ssg/) を参考に直しました。

[https://hbsnow.dev/blog/nextjs-blog-ssg/:embed]

return するときに　`JSON.parse(JSON.stringify(returnData))` をすると治ります。（対症療法感がすごい）

## これから作りたいもの

一旦はブログを作ることができました。ただ、一般的なブログに備わってる機能でまだ足りないものがいくらかあるのでこれから実装したいです。

- OGP 設定
- ブログカードなど、OGP の埋め込み設定
- 関連記事など、回遊対策
- SEO
- 画像サイズの自動調節
- sitemap.xml の設定
- コード埋め込み時の言語に応じたコードハイライト

OGP 埋め込みと画像サイズは実装が悩ましい……
またいい感じの実装ができたらブログにします。ではでは
