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 のヘッダー画像を描いたバニリゾさん気になっているのでイメージ固められたらお願いしてみよう。

[https://0000.studio/banilizo:embed]


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


[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 埋め込みと画像サイズは実装が悩ましい……
またいい感じの実装ができたらブログにします。ではでは
