エンジニア採用の話です。観測範囲ですが「2年間ずっと声かけ続けて入社してもらいました！」みたいなケースが増えていると感じます。その背景には、エンジニア採用の母集団形成の難しさがあげられるでしょう。

母集団形成は採用に重要と言われ続けていますが、1人の採用から逆算して、10000人にテンプレートのスカウトを送る行為は、おかしいと思わないのでしょうか？ 1人にコンタクトして1人採用する世界がベストだったはずでは？

母集団形成の採用活動は、質の勝負ではなく、量の勝負になります。

アウトソース前提の採用活動になるので、委託先にとってはウハウハで、採用コンサルが基本的に称賛する方向にあるのも頷けます。ただ、その採用方法が自社の今のフェーズに合うのかどうかは本当よく考えたほうが良いでしょう。特に量の勝負ができないスタートアップ。

そして、採用したい人材は、本当にアウトソースで採用できる人材なのでしょうか？よく考えたいですね。

では、私の所属するチームの認識はどうか？
アウトソースで優秀なエンジニアが採用できるほど、甘い世界ではないという認識を持っています。

現在採用で成功している企業（特にスタートアップ）は

- かなり前からこの時流を読み、刹那的な採用から中長期的な採用にシフト
- ファーストコンタクトから定期的に接点を持つというアクションを愚直に実行している
- 現場のエンジニアが、上記アクションを推進している

中長期的な採用をやりきるために現場の協力が必要なのであって、刹那的な採用をするために現場に採用を求めている企業はどんどん競争力を失っていくと考えています（たまに見かけます）。また、組織崩壊のリスクも高まるので、転職先を選ぶという観点でも見ておくといいでしょう。

私のチームもずっと前からこの方針に切り替えてアクションしているのですが、ようやく芽がでてきたなあと感じています。そしてこの考え方と実行力は、他社が気軽に作ることのできない、競合優位性になると信じています。

<br>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">一緒に働いてくれる方を募集しています！！！<a href="https://t.co/rG3euJHHqo">https://t.co/rG3euJHHqo</a></p>&mdash; ころちゃん (@corocn) <a href="https://twitter.com/corocn/status/1570559995745533952?ref_src=twsrc%5Etfw">September 15, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


ファーストコンタクトから声をかけ続けてN年後に入社！のようなケースが増えている件

<img width="1599" alt="PXL_20220908_011832196.MP.jpg (513.4 kB)" src="https://dzpkei5uih1fk.cloudfront.net/uploads/production/attachments/13493/2022/09/15/25374/be6caedf-04c5-4814-bf80-48ad2a9c5622.jpg">


Leaner Technologies というBtoBなSaaSを運営している会社でプロダクトマネージャーとして働いています。RubyKaigi 2022に参加してきたので振り返りブログです。

## みんな元気そうだった

普段はリモートで引きこもっているので、久しぶりにリアルで知り合いに会えたのがシンプルに嬉しかったです。みんな元気そうでよかった。

SmartHRさんのイラストマスクのおかげで、気づいて話しかけてもらえる機会が増えました。ありがとうございました。他のカンファレンスなどに参加することも見越して、イラストシール作っておこうかなと思いました。

## Matzの "Money" の話

最近開発に時間を割けていないのもあって参加するのが億劫だったのですが、Matzの「Money」の話で元気がでました。要約すると次の内容。

 - YコンビネーターのTop 50 Startups を分析すると、時価総額比率だと52%がRuby利用企業
 - Rubyは趣味だけでなく仕事で使えるものになってきた => Rubyistの雇用が生まれる

最近は技術よりビジネスに向き合っているのですが、大きなビジネスが作れれば、その分エンジニアの居場所を作ることができ、ちゃんとコミュニティに還元できそうだなという気持ちになりました。

自分の仕事が地続きになっている実感がありました。

## コミュニティの話

普段は長良川のほとりで開催される 長良.rb（nagara.rb）に参加しているのですが、コロナもあってかなかなかオフライン開催できてないので、うまく再始動させたいですね。RubyKaigi も岐阜で開催できると面白そうです。

自分はコミュニティに助けられた人間の1人ですが、コミュニティにいる人の良さが、Rubyの良さに繋がっているなと思います。

<br>

以上、簡単にですが参加報告でした。来年は松本でお会いしましょう！


<br>

<img width="1599" alt="PXL_20220910_071028882.MP-1.jpg (413.1 kB)" src="https://corocn-dot-dev-bucket.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/13493/2022/09/15/25374/776acdba-88a9-4cd3-ba7c-6251dc4de9ed.jpg">
写真は妻に頼まれた日本酒。作 ひやおろし2022が美味かった。

RubyKaigi2022 と "Money" の話

がむしゃらにやってたら入社1年経過していた、ころちゃんです。

プロダクトマネージャーというロールになっているけれど、ロールによって仕事が縛られるのは正直嫌いなので、今の社内で自分が最もこのポジションが適任で、最終的にお客さんの価値に貢献できるなら、なんでもやるというスタンスで腹くくって踏ん張ってた。まあただ、PdMっぽい仕事はやってみたかったのと、1年ぐらい続けていると楽しい何かが得られるという経験則があるので、大変だけど頑張ってみるかなーという感じ。エンジニア採用も1年ぐらいやってたら急にビビッときたので。

今はまずはお金を払ってくれているお客さんに全力で価値を返すことしか正直考えていない。ここに向き合えなかったら、新規の契約とってもチャーンで自転車操業みたいになるだろう。とにかくオンボーディングよという気持ち。

チームの話だと、これだけ色んな会社の選択肢があって、娯楽にも溢れている中で、あえてスタートアップにきているので、楽しまなきゃソンだな〜と思っていて、みんな楽しく仕事できてるかな〜というのを気にしている。1日の1/3以上使うんだぜ？ やりたくないこと、やってもなあ。

プロダクトマネージャーはマネージャーという名前がついているけど、自分はマネジメントがクソほど苦手なので、できるだけ管理しない方針に早々と切り替えた。ガチガチに管理をはじめると自分がボトルネックになって結果的に開発スピードが遅くなることが目に見えていて、みんなの仕事もつまらなくなると思うので、好きにやってもらって、その得意領域の総和をうまく価値に変換するのが自分の仕事だと認識している。

採用はライフワークみたいな感じなので引き続きやっていきたい。Devは30人ぐらいまでスカウト媒体なしでいけるやろという気持ちになっている。特にDevは人数増やしても効率が上がるわけではないので、腰を据えて長期的な目線で採用活動すればいい。今のDevの採用の考え方は良いチームが土壌にないとできない手法をとっていて、スケールは難しい気もするが、ROIはめちゃくちゃいいと思っているので、うまく成功させたい。まあなんか芽はでてきているし、実もなりそう。

自分は採用媒体の運用経験もあって、採用媒体でスカウト打ったら返信めちゃんこ高かった成功体験もあるんだけど、いま同じことをしてもそんなに返事こない市場になってるので、アンラーニングできてよかったな。もっと本質的な採用をトライしたい。採用って結構アウトソースしちゃう分野だと思うんだけど、アウトソースできない部分をコアにした採用活動をしたい。

次の1年は日々失敗しているが、更に失敗していきたい。ダンジョンの回り道の先にはお宝があるぐらいの気持ちでやろうかな。

最近仕事で考えていること 2022-08-18

## Before

 - OGP生成用のAPIを別に用意
 - HTMLでレイアウトを組んでpuppeteer でスクショをとってpngイメージ化していた

## Problem

 - OGPの生成が遅くタイムアウトしてしまう
 - puppeteerが入った Docker を用意するのが面倒
 - DockerベースとはいえAPIをVercel外で管理することになる（つまりお金かかる）

## After

 - @napi-rs/canvas で canvas にテキストを描画するようにした
     - https://www.npmjs.com/package/@napi-rs/canvas は node-canvas の alternative
     - 使用感は node-canvas と同じ

## Tips

 - レイアウトはpngで準備して、canvasに合成、その上に ctx.fillText で描画
 - テキスト折返しは自動で行われないので ctx.measureText を使って自前で計算して力技で描画
 - 背景画像やフォントファイルなどのリソースファイルを参照するときに、Output File Tracing + path.resolve しないと、Vercelで動かしたときにうまく読み込みができなかった
     - https://nextjs.org/docs/advanced-features/output-file-tracing


OGPの生成をcanvasベースに書き換えた

こんなツイートを見た。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">プロダクトの死のサイクル <a href="https://t.co/OZIpAcvDuo">pic.twitter.com/OZIpAcvDuo</a></p>&mdash; のなと@もちねこはIT屋さん (@Nonato_Note) <a href="https://twitter.com/Nonato_Note/status/1518530262002372608?ref_src=twsrc%5Etfw">April 25, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

めちゃめちゃ同意なんだけど、言うは易く行うは難しだなあとも思う。

100徳ナイフを作らないのは非常に難しくて「作らないようにしよう！」の圧が強くなると、恐れて何もリリースできない状態に陥るのかなと。

なので、100徳ナイフができあがった状態からどうリカバリするか、どうプロダクトを軌道修正するかを常々考えているし、そっちのほうが健全のように思っている。

最近はこんな観点でやってる。

1. 刃物を折る（プロダクトの機能を消す）
2. 刃物をつけかえる（一度機能を取り下げて、ブラッシュアップして出し直す）
3. 刃物をわける（それぞれのナイフにする）
4. 作り直す（リニューアル）

もっと視点はありそう、、

特に最近は勇気を出して 1. 刃物を折る を頑張っている。リファクタをする前に、これをやったほうがいい。使われない機能を含めてリファクタするのは虚無なので。

実際のナイフだと、それぞれの刃を見れば「これ全然使われてなくない？」ってことが分かりそうだけど、今のプロダクトはユーザーさんに使ってますか？って聞いちゃってるので、データ見るだけで活用状況がトラックできるようにしていきたい。



刃物を折ってプロダクトを軌道修正する

今年は新居に引っ越した関係もあって色々買っちゃいましたね…
スマホもPCも買っていないので許して。

## ambie AM-TW-01

<a target="_blank"  href="https://www.amazon.co.jp/gp/product/B09MJVP4NZ/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B09MJVP4NZ&linkCode=as2&tag=corocn-22&linkId=6eb509db32658226c1b3e6d03da7108a"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=B09MJVP4NZ&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=corocn-22" ></a>

https://corocn.dev/posts/ambie-new-model でも書いたけど、骨伝導ヘッドフォンから乗り換えた。頭も痛くならないし超良い。

## HyperX Quadcast S

<a target="_blank"  href="https://www.amazon.co.jp/gp/product/B08G8WH435/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B08G8WH435&linkCode=as2&tag=corocn-22&linkId=68be25711c48cae632b4498bc1ba31a6"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=B08G8WH435&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=corocn-22" ></a>

ポップフィルター内蔵、防振マウント内蔵なので色々つける必要がない。なによりタップでミュートの切り替えがすぐできるのがいい。ミュート中はLEDの色が消えるのでミスも少ない。

## Dell U4021QW 5K2Kモニタ

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">5k2k + 4kの頭悪い感じになってきた... <a href="https://t.co/dbkzUKt22W">pic.twitter.com/dbkzUKt22W</a></p>&mdash; ころちゃん | Leaner (@corocn) <a href="https://twitter.com/corocn/status/1472053916955455501?ref_src=twsrc%5Etfw">December 18, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

でかさは正義。[公式](https://www.dell.com/ja-jp/shop/dell-u4021qw-40%E3%82%A4%E3%83%B3%E3%83%81%E3%83%AF%E3%82%A4%E3%83%89%E6%9B%B2%E9%9D%A2usb-c-hub-%E3%83%A2%E3%83%8B%E3%82%BF-5k2k-21-9-ips%E9%9D%9E%E5%85%89%E6%B2%A2-tbhdmix2dprj45-%E9%AB%98%E3%81%95%E8%AA%BF%E6%95%B4/apd/210-aypy/%E3%83%A2%E3%83%8B%E3%82%BF%E3%83%BC-%E3%83%A2%E3%83%8B%E3%82%BF%E3%83%BC%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B5%E3%83%AA%E3%83%BC)で安い時に買うのが一番いい。

## パネルヒーター

<a target="_blank"  href="https://www.amazon.co.jp/gp/product/B07NDNGQ5H/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B07NDNGQ5H&linkCode=as2&tag=corocn-22&linkId=24fdfc9b4074d4596370a88c41fb9ec9"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=B07NDNGQ5H&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=corocn-22" ></a>

下半身を温めるだけでこんなに暖かいとは。

## アイリスオーヤマの電気ケトル

<a target="_blank"  href="https://www.amazon.co.jp/gp/product/B08151C6SB/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B08151C6SB&linkCode=as2&tag=corocn-22&linkId=998a97e158a4ca80c187cee4cd05d384"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=B08151C6SB&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=corocn-22" ></a>

温度調整できて、注ぎ口も細くてコーヒーが入れやすい。朝ドリップコーヒー淹れる時間が5分になった。

## ミーレの食洗機

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">新居にキッチン入ったようなので見てきた。<br><br>食洗機、今までは鍋を結局手洗いしていたのと、配置考えないと入りきらないのが辛かったので、でかいの買ってしまったわ。時短したい人にオススメかも。 <a href="https://t.co/qVIoZCKir3">pic.twitter.com/qVIoZCKir3</a></p>&mdash; ころちゃん | Leaner (@corocn) <a href="https://twitter.com/corocn/status/1338387281313349634?ref_src=twsrc%5Etfw">December 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

家買う時につけた。でかいと鍋ごと放り込めるので楽。

##  乾太くん

<a target="_blank"  href="https://www.amazon.co.jp/gp/product/B07PQPVWZ5/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B07PQPVWZ5&linkCode=as2&tag=corocn-22&linkId=3fbbc8c6783471e802db53420162ca3a"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=B07PQPVWZ5&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=corocn-22" ></a>

ガス乾燥機。家買う時につけた。子どもがゲロゲロしてもリカバリが楽で良い。乾燥時間が1時間ぐらいなので洗濯物多くても便利。

## 日本酒冷蔵庫

<a target="_blank"  href="https://www.amazon.co.jp/gp/product/B082P2QD59/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=B082P2QD59&linkCode=as2&tag=corocn-22&linkId=7a8b6756d4cf3bf4d3ddf0a820cfdb90"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=B082P2QD59&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=corocn-22" ></a>

妻への誕プレであげた。0度まで下がるので、日本酒以外にも缶ビールとか入れてキンキンに冷える。


2021年に買ってよかった家電とか

以前は仕事中に [AfterShokz AS801-ABT01](https://aftershokz.jp/products/wireless-tv-headphone) を使っていました。「テレビ用モデル骨伝導イヤホン」と書いてありますが、実はこれAfterShokz Aeropexの上位モデルで、aptX 対応 + BTレシーバーが付属する製品になります。

かなり重宝していたのですが、頭の後ろにケーブルが回ってしまうのが若干邪魔だったのと、骨伝導の特性上、顔の側面に密着させて使うことになるので長時間装着していると頭がいたくなってしまうのがネックでした。

最近、[ambie NEWモデル（AM-TW01）](https://ambie.co.jp/soundearcuffs/tws/) が発売されて、これは・・！？と思って買ってみました。イヤーカフ型でして、耳をはさみこむように装着するイヤホンです。耳の穴を塞ぎません。

普段スタンドマイクを使用しているので、ambieから出た音が集音されてハウリングしないか心配でしたが、問題なさそうです。耳が痛くなったりもしないので、完全に移行して、もう骨伝導は使用しなくなりました。若干気になる点ですが、接続直後に音飛びが発生することぐらいでしょうか（再接続ですぐ直る）。これは私の環境が悪いだけかもしれません。

連続再生時間は6時間なので、午前使用して昼休憩中に充電して午後も使用するような感じで1日使っています。装着していたことを忘れるレベルで快適です。ambieに搭載されたマイクは微妙なので、スタンドマイクと併用しています。スタンドマイクはHyperX Quadcastを使っています。こちらもオススメ。

<img width="1164" alt="Screen Shot 2021-11-14 at 23.44.29.png (1.9 MB)" src="https://dzpkei5uih1fk.cloudfront.net/uploads/production/attachments/13493/2021/11/14/25374/4aa7da6d-b598-4a25-8795-0bc593f8ec2c.png">


骨伝導ヘッドセットからambieの新型に乗り換えた

https://slackemojigen.com/ をちょっと更新しました

## やったこと

 - NetlifyからVercelに移動
 - フォントセットの刷新
 - Light Mode / Dark Mode切り替え
 - 一部ライブラリのアップデート

slackemojigenのお引越し

注文住宅買ったときの話。メリデメ。主にお金の話。

## Pros

 - 打ち合わせがしやすい
     - 土日はだいたい混んでる
     - 平日だと設計&営業担当の予定をおさえやすい
     - ただしハウスメーカーは火曜日水曜日休みが多い
 - 補助金を満額ゲットできる可能性が高まる
     - 所得に応じた補助がある（すまい給付金）
     - 育休中は所得が減るため、補助金がもらいやすくなる
     - 具体的には20万ぐらい変わった
     - もちろんタイミングによる
 - お出かけする言い訳になる
     - ずっと家にいるのも退屈なので
     - 色々見て回って子供の刺激にもなってよかった
 - 休み中に余裕ができた時間を検討時間に回せた
     - 住宅購入は育児理由が大きく育休中に片付けられてよかった
     - 働きながら打ち合わせしてたら疲弊してたと思う

## Cons

 - 住宅ローンの選択肢が狭まる
     - ネット銀行は源泉徴収票の金額で足切りする
         - 育児休業給付金は所得ではないので、収入がすごく下がったように見えてしまう
         - そのため仮審査で落ちやすい
         - 長期間休んでるとインパクトが大きい
     - その土地ゆかりの金融機関は前向きに考えてくれやすい
         - 審査担当が育休関連の知識を持ってないことが多いが、資料作ってちゃんと説明したらサクッと通った。
         - どちらかというと、ちゃんと復帰して継続的に収入があるかどうかをみているようだった（継続的に返済してかなきゃいかんのでそれはそう）
         - ネット銀行はイレギュラーケース対応を切り捨てることで審査のコストカットを行い超低金利を実現しているのでまあしょうがないなとは思った
         - 実際に地銀で住宅ローンを契約した
             - プランも悪くなかった。がん団信ついてるし。
      - 融資実行日が職場復帰後である必要があった
          - 金融機関によるところが大きい
          - 注文住宅の場合引き渡しまでに結構時間がかかるので、あんまり問題にはならんかも
              - 自分は土地購入から引っ越しまで1年近くかかってる
          - 分譲住宅即日購入だと気にしたほうがいい

育休中に家購入したときのメリデメ振り返り

スズキスイフトの中古に4年乗ってる。維持費いくらかかってるんだっけ・・・

 - 本体: 50万
 - 乗り出し車検: 10万
 - 修理対応: 15万
 - タイヤ交換: 10万ぐらい。スタッドレス含む。
 - 車検: 10万 x 2回 = 20
 - 自動車税: 3万 * 4年 = 12
 - 保険: 4万 * 4年  = 16
 - 駐車場代: 4万  * 4年  = 16
     - 賃貸のときは月3000円ぐらい
     - 今は持ち家なので駐車場1台5坪で100万ぐらいで買ってるので25年で賃貸とトントン
 - ガソリン代 5000円 * 12ヶ月 * 4年  = 24


4年乗って170万ぐらいか。

わかってる範囲での年間の維持費が、 車検/2 + 自動車税 + 保険 + 駐車場 + ガソリン = 5 + 3 + 4 +  4 +  6 = 22万円。だいたい月間2万。妻も同じぐらいなので、家族で月4万円自動車の維持に使ってる。やっぱ結構でかい。

周り見るとみんな400万ぐらいする新車乗ってるんだけどいったいどこにそんな金が？
10年乗っても車両本体だけで月4万ぐらい取られるし、車両保険つけるともっといくわけだけど。

メリットはもちろんあって、子供がいると家族での移動がマジで楽なのと買い物が楽。
都会の子持ち家庭の人っていったいどうしてるんだろ？

あとは、電車が苦手なのでプライベート空間を維持したまま移動できるのがやっぱ嬉しい。
カラオケ大会できるし。ウイルス怖いしな。

車の維持費

9月から新しい会社（[Leaner Technologies](https://leaner.co.jp/)）に入社して、先日会社のオンボーディングも兼ねて代表と1on1をした。そのときに会社のミッション  "調達のスタンダードを刷新し続ける" を深掘って説明してもらったんだけど、"自分の中のスタンダードを刷新し続けられているか？" という問いに置き換えたときに、ぜんぜんできてねえな！と思って超反省した。

今年で33歳だけど、使う物もそうだし物事に対する考え方が固定化されてきて、新しい技術を学ぶのにも腰が重くなっているのを自覚しつつあった。そこにこの話題がきて、なるほどこれが「老化」でいわゆる「アンラーニング」しろにつながるのかーと認識できた。問題が認識できたので対策ができるようになり、ちょっと気持ちが楽になった。

一時期ペパボが "いるだけで成長できる環境" という言葉を使っていたけどあの言葉わりと好きで、いるだけで考え方をちゃんとアップデートしていけるような文化は大事だなと思ったし、シニア世代には割と刺さるのではと感じた。

どんどん自分の中の固定観念を破壊していこうと思った。

自分の中のスタンダードを刷新し続けること

## やったこと

 - フッター追加
 - ツイートボタン追加
 - 一部Markdownの表示がが崩れている問題修正
 - リンク色を少し明るく

このサイトのレイアウトを修正した

10年ぐらい待った待望のタイトル。ちょうど夏休み期間だったのでエイヤでクリアした。1ルート10時間ちょっとでクリアできるので、FGOの2部6章のほうが長かったように感じた。

全く伏線回収されてない（月姫で回収するつもりがない？）ので完全版が楽しみだけど、完全版出るのにまた10年ぐらい待つのだろうか・・・。息子が中学生になってしまう。

本編の感想としては、シエル先輩最高！以上です。

月姫リメイク 全ルートクリアした

OGPはHTML + CSSでレイアウトしてPuppeteerでスクショをとって生成してる。OGP生成器はDockerイメージを用意して、さくらのクラウドのHacobune（β版）で動かしてる。Next.jsのAPIからOGP生成のAPIを叩いて、Vercel Edge Networkでキャッシュしながら配信。キャッシュは再デプロイでふぁるすのるしがぱーじされる。

動的にOGPを生成できるようにした

連休中にSwiftとSwift UIに入門した。

## チュートリアル

公式のチュートリアルが分かりやすくて良かった。とりあえずこれを流せばいい。
[SwiftUI Tutorials | Apple Developer Documentation](https://developer.apple.com/tutorials/swiftui)

難しい構文は出てこないっぽいので、チュートリアルをやりながら、わからん記法を調べた。backslash-dotとか。

## Voice Recorder

AVFoundation周りを触ってみたかったので、以下の記事を参考にVoice Recorderを実装した。

 - https://blckbirds.com/post/voice-recorder-app-in-swiftui-1/
 - https://blckbirds.com/post/voice-recorder-app-in-swiftui-2/

## 副産物

ちょっとアニメーションが分かるようになったので楽しい。

 - [Swift UIでくるくる回転する録音ボタン](https://zenn.dev/corocn/articles/765d46c5a75a9a)

## 次

子供がいるので、iPadで動くキッズ向けのアプリでも書いてみようかなと

Swift & Swift UIに入門した

はじめてスープからラーメン作った。塩。美味かった。

鶏ガラじゃなくて鶏ミンチと豚ミンチでできちゃうのお手軽で良い。ただ、スープ、タレ、香味油、鶏ハム、麺茹でる 工程があるので、キッチンスペース広くないときついなーと思った。

<img width="1024" alt="PXL_20210505_040418370.MP.jpg (202.3 kB)" src="https://dzpkei5uih1fk.cloudfront.net/uploads/production/attachments/13493/2021/05/05/25374/028be2c4-ab49-4cd6-959b-17bfda2094ba.jpg">

次のYouTubeを参考にした。

<iframe width="560" height="315" src="https://www.youtube.com/embed/cQtMteiEGOs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

最近、動画を見てテンション上がって料理をすることが多くなってきている気がするなあ。

塩ラーメン作った

<img width="1024" alt="PXL_20210503_075346762.MP.jpg (459.5 kB)" src="https://dzpkei5uih1fk.cloudfront.net/uploads/production/attachments/13493/2021/05/03/25374/66a0bdcc-2a54-47d6-ae97-fe2b950fa41a.jpg">

家庭菜園用の畑を作ったので、野菜をいくつか植えた。スーパーで普通に購入できるものを植えても面白くないなーと思い、昨年はプランターでバジルを育てていたのだけど、これが大正解だった。収穫したての生のバジルは香りが抜群に良くて、料理に大活躍だった。乾燥ハーブならどこでも売ってるが、生ハーブはなかなか手に入らないので、香りを楽しむ系の香味野菜やハーブは結構オススメなんじゃないかと思う。以下、植えたもの。

### バジル

**ジェノベーゼ**やカプレーゼにする。採りたてのバジルの香りは本当に良い。冷凍ピザやお肉に乗っけてもいいので使い勝手がいい。

### 大葉

魚系の料理にあわせる。スーパーでもすぐ手に入るけど、すぐしなしなになってしまい、必要な時に必要な量を収穫して食べられるといいなと思ったので植えた。

### パクチー

妻が好きなので。カメムシの味がするので私は食べられない

### しょうが

**自家製ジンジャエール**を作りたいがために。

### パプリカ

国産パプリカがなかなか売られてないので作ってみる。

### 鷹の爪

普段は乾燥しか使わないため。農産直売所に行けば手に入るかも？

### 青唐辛子

採れたての青唐辛子でグリーンカレー作るとめちゃめちゃうまい。実はいままでメルカリで購入していた。

### 香辛子

ハーブペッパー？と書いてあった。ホームセンターの園芸コーナーを物色していたら目に止まったので育ててみることに。

### パセリ

なんとなく。

### トマト

いまトマトって色んな種類あるんだね。なんか作ってみようと思って買った。豊橋のファーストトマトが一番好きでよく箱買いしている。

野菜を植えた

気になってる音声系or音声を使ったプロダクトの会社

## 国内

 - [stand.fm (スタンドエフエム) | 音声配信を気軽にもっと楽しく | stand.fm](https://stand.fm/)
 - [React inc.](https://www.reactcorp.com/)
 - [Radiotalk - ラジオトーク](https://radiotalk.jp/)
 - [同世代でつながる音声と趣味のコミュニティYay!（イェイ）](https://yay.space/)
 - [株式会社RevComm（レブコム） コーポレートサイト – コミュニケーションを再発明し、人が人を想う社会を創る](https://www.revcomm.co.jp/)
 - [りんな](https://www.rinna.jp/)
 - [音声自動文字起こしサービス「スマート書記」](https://smartshoki.jp/)
 - [SmartMeeting｜日本初の会議改善クラウド](https://www.smart-meeting.jp/)
 - [Techno-Speech, Inc. / 株式会社テクノスピーチ](https://www.techno-speech.com/)

## 海外

 - [Discord | 会話や交流が楽しめるプラットフォーム](https://discord.com/)
 - [Biometric Authentication Security Software | Software Development Kit (SDK)](https://www.idrnd.ai/)

音声系の気になってる会社

<img width="2094" alt="Eufzem4VgAU6fLh.jpg (511.2 kB)" src="https://dzpkei5uih1fk.cloudfront.net/uploads/production/attachments/13493/2021/03/17/25374/2262de34-1801-4d63-80f8-5e94a0004af9.jpg">

土地を買って家を建てた。最近、家やマンションを購入した記事をみかけるので経緯を書きたくなった。結果的に土地を決めるまで2ヶ月ぐらいで、探し始めてから1年後に引っ越しして住み始めている。爆速で土地を買った理由は後述。

## 家を買った理由

ライフステージの変化。**子供が生まれて手狭になった**のが大きな要因。私は岐阜からリモートワークしており、書斎用に一部屋専有する。2LDKだと狭いので、子供が大きくなったら遅かれ早かれどこかに引っ越さなきゃいけないと思っていた。

コロナ前から今後はリモート前提の仕事でいいやと思っていたのと、妻も岐阜近郊で楽しく働いており、ある程度は転職先の選択肢があるので、これは岐阜から動かないなーと思って買ってしまった。

当時私は育休中で、時間に余裕があり、子育てのために家を建てるという理由もあって、いい機会なので家探しをはじめた。結果的に平日に行動できるので、空いているモデルルームや展示場を子連れで見て回れて、散歩代わりにもなったしとても良かった。

## 家の大きさ

私のような田舎民は部屋が狭いことに慣れてない。広さが欲しかった。LDK 、寝室、仕事用の書斎 、子供部屋2つを前提として、収納にある程度余裕をもたせると、4LDK・4SLDKあたりがちょうど良さそうという結論に至った。

ちなみに子供は1歳半になるが、もう自分の部屋で一人で寝るのに慣れたみたい。

## マンションか中古リノベか分譲か新築か

どういう経緯で新築という選択肢をしたか書いておく。

まずマンションだが、真っ先に候補から外れた。理由はそもそも岐阜にマンションが少ないので選択肢が少ないのと、**私がエレベーターの待ち時間が耐えられない**のが大きい。また、マンションだと3LDKがほとんどで、ちょっと狭いかなという気持ちになった。マンションは駅近くが多いのだけど、駅近くは混んでるので車での移動は逆に不便になるとも思った。

分譲住宅も3LDKが多く、絶妙に痒いところに手が届かない間取りが多かったのでナシになった。「そこの吹き抜けいらんから部屋にしてくれ！」「和室もいらん！」みたいな。**自分が広めの書斎を求めているせいか、分譲住宅は合わない**んだなと思った。最近はコロナの影響もあるせいか、4LDKの分譲住宅も増えてきているっぽいが。

中古リノベも検討したが、狭い古民家が多かったり、立地条件が微妙だったりして、ほとんど選択肢がなかった。奇跡的によさそうな物件があったので、リノベ業者にお願いして見積もりをとってもらったところ、**理想の家にフルリノベするためには、かなりお金がかかることがわかった**。ぶっちゃけみんなが思ってるほど安くならない。この値段かけるなら新築注文住宅でいいわとなった。

## 土地探し

探し出して2ヶ月ぐらいで土地が決まった。購入した土地も、提案された次の日朝に買付証明書を出したぐらいのスピード感だった。なんでそんな即決できるの？という話だが、**土地勘があった** に尽きる。

買った土地は住んでいた賃貸から徒歩5分ほどの距離にある。結婚して2年住んだ結果、**「このへん絶妙に住みやすくない？」** ということが分かってしまったので、前提として近所で探していた。

賃貸時代含め、今の家はこんな感じ。

 - 名古屋駅までドアツードア30分
 - 東京まで2時間（新幹線使う）
 - 車で30分圏内にデパート5件、コストコ、水族館など色々ある

土地はハウスメーカー経由で探してきてもらって、地元の大手不動産屋と営業さんのコネで、まだオンラインの媒体に掲載される前の土地を安く買った。建築条件付きの土地でもなかったし、地盤改良も不要で神土地だった。

 - 建築条件付き: そのハウスメーカーで建てるという条件がついてくる。ハウスメーカーが整備した土地にありがち。
 - 地盤改良: 地盤が弱いと50万〜数百万かけて改良が必要になる。運ゲー。

できる営業は超絶コネをもっているので、まずは良い営業をつかまえて、コネで探すのが一番だと思った。また、オンラインに掲載されている土地はだいたい売れ残りだと分かった。

お買い得な土地は市場にはでてこないし、出てきても即買われてしまう。このへんはエンジニア採用やってるときの感覚と似ている。よくよく考えると当然なんだけど。

......

ということで、良い土地と出会ってしまったので、家を建てました。やっぱある程度の広さがあると子育てもしやすいです。

ところで、**国が推奨している家の広さは25平米 + 25平米 * 人数なので、例えば4人家族だと125平米がちょうどいいサイズらしいです。**

## まとめ

 - 買う前に近所に住んでみるといい
 - 良い物件は市場に出る前に取引される
 - 中古リノベは意外と金がかかる
 - 営業はガチャ要素強いので紹介してもらうのがいい

ローンの話はまた別途エントリ上げる予定です。

勢いで家を買うまでの話

最近、「リモートOKなんで弊社に転職しませんか？」的なお誘いがチラホラ来るようになったけど、若干辛いメッセージも増えてきている。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">リモート特別に許可しますよって言われても心動かないし、みんなリモートしてますようち来てくださいって言われても、コロナ落ち着いてみんなオフィス戻ったらどうなんねん</p>&mdash; ころちゃん | Takahiro Tsuchiya (@corocn) <a href="https://twitter.com/corocn/status/1369658553250680836?ref_src=twsrc%5Etfw">March 10, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

このツイートの文脈ね。

## つらいケース

全然知らない会社から急に

 - 「リモートOKですよ。面談しませんか。」
 - 「週1集まってるけど、フルリモートでもOKですよ。」
 - 「今はみんなフルリモートで働いていますよ。うちきませんか。」

みたいなメッセージをもらったりする。

OKってことは、特別に許可してあげるよ〜ってことかな。対等な関係だと思うのだけど。
そして、今だけリモート可って話なのかな？

リモート4年以上やってるのでよく分かるのだけど
**一人でもフルリモートワーカーがいたら、会社全体の仕組みがリモート前提にならないとかなり辛い**

## 気にならなかったケース

その会社に知り合いがいたり、前から話してみたいエンジニアがいたりして、ある程度コミュニケーションが取れた後に「方針としてはオフィス前提だけど今は仕方なくリモートしている」ことを聞かされるケース。

この場合は、つらいなあー、とは思わなかった。一緒に働けなくて残念となった。
ちゃんと考え方を伝えてもらってからのアレなので。

## 結局何が辛かったのか

 - 「リモート？しょうがねえな。まあ声かけてやるよ。」と言われているように聞こえた
 - 1回も話したことがないのに、考え方を「決めつけ」られているように感じた

リモート前提かどうかは会社の戦略次第だと思っているので、オフィス前提の会社があっても私は全然かまわないのだけど、採用担当が無理やり母集団を広げてリーチしようとしているのは、あまり共感できないなあと感じた。

ちょっとした言葉遣いに、思想が反映されるなあと。

リモート"OK"ということはどういうことだ？

新居の庭がフルオープンだったのでウッドフェンスをDIYした。

<img width="2438" alt="PXL_20210307_023119655.MP.jpg (1.5 MB)" src="https://dzpkei5uih1fk.cloudfront.net/uploads/production/attachments/13493/2021/03/08/25374/7988ae95-b80c-472f-b15c-e1be00e9101b.jpg">

## まとめ

 - フェンスをDIYした
 - 柱は外構屋さんに建ててもらった
 - 資材の購入もお願いした（ホームセンターの木だと質が微妙なため）
 - 3.5日かかった

## DIYした経緯

 中途半端な高さのフェンスだと外から丸見えになってしまうので、ある程度高さのあるフェンスが欲しかった。

外構屋さんにお願いしたかったのだけど、予算オーバーのため、材料の購入と柱を建てるところまでお願いして、板の塗装と貼り付けを自分で施工することにした。ちなみに外構屋さんの提案だった。（よく提案するらしい）

柱はコンクリ流し込んだりが大変なので、業者さんにやってもらうのは理にかなってる。塗装と貼り付けは素人でもぜんぜんいける。

## 工程

 - 塗装して1週間乾燥
 - 塗装して1週間乾燥（2回目）
 - 穴あけ&カットして等間隔で打ち付け

**2m * 16m**のバカでかフェンスだったので、板の枚数が50枚前後あった。早朝から夕方までひたすら塗り続けてようやく1日で終わる感じ。塗装それぞれ1日ずつ。貼り付けに1.5日で合計3.5日かかった。テキパキ終わったほうな気がする。

塗装は[キシラデコール](https://amzn.to/3t0iYIJ)を使用

### 1回目

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">疲弊しています <a href="https://t.co/KPGK6k5xrW">pic.twitter.com/KPGK6k5xrW</a></p>&mdash; ころちゃん | Takahiro Tsuchiya (@corocn) <a href="https://twitter.com/corocn/status/1362963409696813057?ref_src=twsrc%5Etfw">February 20, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 2回目

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">2度塗りヨシッ！ <a href="https://t.co/yXSyoxdz89">pic.twitter.com/yXSyoxdz89</a></p>&mdash; ころちゃん | Takahiro Tsuchiya (@corocn) <a href="https://twitter.com/corocn/status/1365555781995663362?ref_src=twsrc%5Etfw">February 27, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

2度塗りするとそれっぽくなった

### 板貼り

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">フェンス半分張った！ヨシッ！ <a href="https://t.co/NEqudgElOx">pic.twitter.com/NEqudgElOx</a></p>&mdash; ころちゃん | Takahiro Tsuchiya (@corocn) <a href="https://twitter.com/corocn/status/1368137831919456258?ref_src=twsrc%5Etfw">March 6, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 完成

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ウッドフェンスのDIY完了したぞ！これで無限にバーベキューができる！カーポート付けたから雨でもバーベキューができるヨシッ！ <a href="https://t.co/A0o9cheZlh">pic.twitter.com/A0o9cheZlh</a></p>&mdash; ころちゃん | Takahiro Tsuchiya (@corocn) <a href="https://twitter.com/corocn/status/1368390099512135680?ref_src=twsrc%5Etfw">March 7, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

若干ムラがあるけど、わりと綺麗にできたと思う。
手作りなので愛着も出てよかった。はやくBBQしたい。

ウッドフェンスDIYの記録

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">マイナポータルで児童手当の変更届出そうとしてるんだけど難しすぎる。これちゃんとテストしました？？？ <a href="https://t.co/rqvIkM1FBF">pic.twitter.com/rqvIkM1FBF</a></p>&mdash; ころちゃん | Takahiro Tsuchiya (@corocn) <a href="https://twitter.com/corocn/status/1367265521767387142?ref_src=twsrc%5Etfw">March 4, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

なんかめっちゃ反応があった。

## 何があったの？

 - 新居に引っ越したので児童手当の住所変更手続きをしようとした
 - 調べたところ、紙で提出する方法と、マイナポータルで申請する方法があった
 - 私はマイナンバーカードを保有しているので、マイナポータルで申請しようとした
 - 子供は令和生まれだが、**令和に対応してなかったので申請失敗**

## 申請ページ

ぴったりサービスという、各種手続きを検索できるページがあるので、ここから探した

> ぴったりサービスでは、子育てに関する手続をはじめとして、様々な申請や届出をオンライン上で行うことができます。申請又は届出をする手続を検索してみましょう。

https://app.oss.myna.go.jp/Application/search

<img width="1564" alt="image.png (66.5 kB)" src="https://dzpkei5uih1fk.cloudfront.net/uploads/production/attachments/13493/2021/03/04/25374/b01622b1-5438-4511-8848-fc4d64454061.png">

受付開始日 2017年06月18日　ということなので、平成に作られたサービスである。

## 入力項目

受給者は和暦の選択がある

<img width="2150" alt="image.png (310.4 kB)" src="https://corocn-dot-dev-bucket.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/13493/2021/03/04/25374/743350f8-e505-4430-bb7b-3dabb7254ac2.png">

児童は和暦の選択がない

<img width="2008" alt="image.png (59.0 kB)" src="https://corocn-dot-dev-bucket.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/13493/2021/03/04/25374/303a1f56-de37-44ee-84dd-f97fff9ec581.png">

1からはじまっている

<img width="1976" alt="image.png (628.0 kB)" src="https://corocn-dot-dev-bucket.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/13493/2021/03/04/25374/e00cbf9d-0ba5-4437-a463-e703f4b889cc.png">

100まで

<img width="1504" alt="image.png (242.2 kB)" src="https://corocn-dot-dev-bucket.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/13493/2021/03/04/25374/ba8069ab-46ad-4021-a39a-021179281ee5.png">

ということで冒頭のツイートになる。

## 思ったこと

 - 最初は西暦だと思った
 - 入力項目が1〜100なのでどうやら和暦っぽい
 - 対象となる児童は、平成生まれと令和生まれがいるはずなので、選択肢がないのはおかしい
 - もしかして西暦の下二桁かも？ → 選択肢に100がある
 - 岐阜市の変更届（紙）を見ると、選択肢がある

<img width="1446" alt="image.png (73.2 kB)" src="https://corocn-dot-dev-bucket.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/13493/2021/03/04/25374/444fce64-c36f-418c-8987-e04cf6afac42.png">

面倒になったので結局紙で提出することにした。

## 分かったこと

「申請書を見ながら入力」というのがある

<img width="2038" alt="image.png (134.9 kB)" src="https://corocn-dot-dev-bucket.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/13493/2021/03/04/25374/a1147df9-d341-4f4b-b3c8-744563d4c039.png">

<img width="1886" alt="image.png (830.0 kB)" src="https://corocn-dot-dev-bucket.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/13493/2021/03/04/25374/e94cf6e0-3321-4fc2-ab2a-f0d0dd0e12d9.png">

なるほどここの青色の入力項目がそのままフォームに対応しているのか・・・
**ってあれ、この紙の申請書、令和対応してなくない・・・？**

## 予想

 - 開発当時は和暦の選択が不要だった（給付対象となる児童は平成生まれしかいないため）
 - 開発時に「紙」の申請書を入力仕様として、記入欄をそのままWebフォーム化してしまった
 - 平成→令和の国のシステムの影響確認から漏れた or 知ってたが何らかの理由で直せてない

## まとめ

ツイートには「テストしたんか？」と書いたけど、システムテストというよりは、「実際のユーザーに使ってもらった？」「自分で使ってみた？」というごくごく当たり前のテストことを指していたのだが、やらない人たちが多いんだな〜という学びだった。

## オチ

市役所行ったら移動時間も含めて15分で手続き終わった

マイナポータルで児童手当の変更手続きに失敗した件

<img width="2264" alt="PXL_20210112_043506312.MP.jpg (699.1 kB)" src="https://dzpkei5uih1fk.cloudfront.net/uploads/production/attachments/13493/2021/01/17/25374/c121349f-fbc3-4392-b680-092a257ec390.jpg">

1年ほど前から家の購入を検討しはじめて、結果的に注文住宅を建てることにした。
もうすぐ新居の引き渡しがあるので色々振り返ろうと思ったが、ネタが多すぎるので一旦ここに羅列しておく。

 - 岐阜に建てた経緯と土地探し
 - 新築、マンション、中古リフォーム
 - 育休中の住宅ローン
 - 変動金利と固定金利とがん団信
 - つなぎ融資不要だった話
 - 住友林業どうだったか、坪単価の話
 - 工務店と大工さんの話
 - 延床36坪（120平米） + 4LDK（4SLDK?）+ 総二階
 - リモートワークと書斎とスタンディングデスク 
 - 食洗機: 新型ミーレ（洗剤自動投入）
 - 乾太さんと都市ガス
 - ZEHと太陽光
 - cat5eとインターネットと情報分電盤の話
 - 子供部屋の収納
 - 玄関クローゼットと土間
 - 床: 朝日ウッドテック、ライブナチュラルプレミアム
 - ウッドブラインド: TOSO 桐
 - キッチン: クリナップと便利家電置き場
 - エアコンの隠蔽配管
 - 外構の話
 - 建築中の写真
 - ルームツアー動画

こんなところ？

もうすぐ新居の引き渡しがある

<img width="1024" alt="PXL_20210111_041825185.MP.jpg (172.0 kB)" src="https://dzpkei5uih1fk.cloudfront.net/uploads/production/attachments/13493/2021/01/11/25374/41c96e93-78e9-4d19-8751-45abfcc61631.jpg">

ブログに埋め込んでいるS3のバケットパスがそのまま露出していたので、CloudFrontを使ってCDNで配信するようにした。

画像自体はPixel 5で撮影した写真をそのままアップロードしているためちょっと重く、自動で圧縮させたい。最初はImage Optimizerが使えるFastlyなりCloudflareなりを使ってみようかと思ったが、「営業に問い合わせてね！（ニッコリ）」と書かれていたので諦めた。

実装はesaのbody_mdをキャッシュする際に脳死で置換しているのみ。

ドメインはGoogle DomainsなのでS3とは若干相性が悪く、ACMの検証が終わらないのでとりあえずCloudFrontの生ドメインで置換しておいたので、どっかのタイミングで直す。

※画像は 私のお気に入りスポット、長良側河川敷です。だれもいないからよくまったりしにいく。


CloudFrontで画像をCDN化した

OGPが全ページ同じになっていたので、最初のイメージタグで設定された画像をOGPとして設定するようにしてみた。

以下の画像は年末に食べた雲丹です。
<img width="271" alt="PXL_20201229_110356441.MP.jpg (19.1 kB)" src="https://dzpkei5uih1fk.cloudfront.net/uploads/production/attachments/13493/2021/01/01/25374/4a71838e-9513-40e3-af62-80f525668c5e.jpg">


OGPの個別設定

## 今年やったこと

 - 育休から仕事に復帰
 - 育休本を出して色々と取材を受けた
 - 新規事業の立ち上げに参加
 - 家買った（引き渡しは来年）
 - 副業少し

<img width="2411" alt="PXL_20201226_045249810.MP.jpg (907.9 kB)" src="https://dzpkei5uih1fk.cloudfront.net/uploads/production/attachments/13493/2020/12/31/25374/76ba4b8e-b7de-471d-8b07-0b7256f8d999.jpg">
※もうすぐ完成

## 振り返り

育休復帰して子育てしながら仕事をしていたら、気づいたら2020年が終わっていた。わりと寝付きがよくて、自分の時間はある程度確保できたのでありがたい。

仕事にはスムーズに復帰できたが、あまり対外的なアウトプットまで手が回らなかった。手を動かすのが遅かったなーと感じたので、来年は面白いなと思った領域を、とりあえず手を動かして遊んでみることにしよう。


2020年のふりかえり

Google Pixel 5を購入した。10/15に発送連絡がきて、なぜかその日のうちに届いた。まだ1日も使ってないが、いまのところの感想を書いた。Pixel 3を使っていたので、比較になる。

## Good: サイズ感

ちょうどいい。Pixel 3より若干大きいが、大きすぎないレベル。

## Good: 端末の移行体験

もともとPixel 3を使用しており、Googleアカウントべったりなので、データ移行のチュートリアルでさくっと移行できた。

## Good: 画面のリフレッシュレート

Pixel3の60Hz -> Pixel5で90Hzになったので、ぬるぬる感がすごい。

## Bad: 戻るアクション

戻るが仮想ボタンではなく左スワイプになっている。単純に慣れない。意図せず戻ってしまうことが多々。Pixel 3のように下部にボタンを用意してほしい。一応、ジェスチャーやめて3ボタンに変更できるが、すべてボタンにしたいわけではないので、絶妙に使いづらい。

## Bad: 起動中のアプリ一覧

Pixel 3は画面下部から大きく上にさっとスワイプするだけで、起動中アプリ一覧が表示されたが、スワイプ後に長押しが必要になり動作がワンテンポ遅くなっている。ジェスチャーやめれないのは前述の通り。

## Bad: 電池の持ち

バッテリーが4000mAhに増加しているが、Pixel 3と体感同じぐらいガンガン減っていく。
まあ1.3倍になっただけだし、画面はでかくなってるので、しょうがないね。

## Bad: 液晶が黄色い

Pixel 3と比べて明らかに発色が黄色みががっているのが気になる。使ってたら気にならなくなってきたが、、これが尿液晶ってやつ？

## Bad: Felicaの挙動が不審

iDを設定しているのに反応しない。初期不良か？コンビニで「あれっ、反応しない汗 こっちのカードでお願いします」をやる羽目になったので大変辛かった。電子マネー系は設定確認するのに物を買う必要があるの難しい。

## モバイルSuica

これはPixel 5とは直接関係ないのだが、モバイルSuicaの設定を移行するために、移行前機種で手続きを行う必要があり、この手続にSIMが必要だった。もうすでに差し替えたあとだったので、とても面倒だった。

## まとめ

現時点だとあんまりおすすめできんなーという感じはあるが、FGOもサクサク動いたし、Pixel3ユーザーで電池がもう死にそうッって感じなら買ってOK。

Pixel 5を購入した

新居にいれるソファを検討したくて、冨士ファニチアのAgio（アージオ）というソファを見てきた。岐阜にショールームはないので、名古屋の千種まで行った。

[冨士ファニチア FUJI FURNITURE Co.,Ltd - Agio](https://fuji-furniture.jp/products/category/sofa-stool/sofa/l08670-rl.html)

自分の中の椅子の選定基準は概ね3つで

 * 座面の奥行きが浅め
 * 背もたれが高め
 * カバーが洗濯できる

ソファを探すとき、最初は自分の好みが全然わからず、家具屋を巡って試座するなかで好みに気づいた。新居の家具を検討するときは、最初から特定のブランドのショールームに行くのではなく、インテリアフェアや大きめの家具問屋のショールームへ足を運んで、自分の好みを絞るといいかもしれない。インテリアフェアでは、たくさんのブランドの家具を同時に見ることができ、時間の節約になる。

私の場合、初期はカウチソファのような大型のソファを検討していたが、実際座ってみたら、腰が座面の一番奥までフィットしないのに違和感があった。同時にダイニングチェアの試座もしたのだが、ダイニングチェアには背もたれ部分が低いタイプと高いタイプがあり、低いタイプは座った時に違和感があったので、そこで自分の好みを知った。

色々とソファを見たが、Agioは座り心地が抜群に良かった。そこそこお値段はするが、ソファは予算配分の中でもプライオリティが高めなので、たぶん買うと思う。

ちなみに標準サイズが10万ちょっと x3で30万ぐらいする

ちなみにこのAgioだが、一人がけ用の椅子を連結して使うようになっている。場合によっては、離して使用したり、来客時には1脚だけテーブルの横に移動させて使うなど、使い勝手が良さそうなのも気に入った。移動させる前提なので、非常に軽いのも魅力的だった。

ちょうど代理店のシークレットセールが開催されていたが、HM（ハウスメーカー）経由で購入したほうが値引率もいいみたいなので、家の代金に含める形で買う予定。

冨士ファニチアのAgioというソファを見てきた

CSSがお粗末な感じだったので直した。だいぶ見やすくなったはず。最初はtailwindcssを使って書き始めたのだが、記法を覚えるのが大変面倒になり、最終的に直接書いてしまった :innocent: 

また、OGPも設定した。記事ごとにタイトルからOGPが生成カッコイイと思ったが、プロフィールアイコンを設定しておいた。これはまた今度やろう。

## Reactで複数エレメントを返す

metaタグを詰めたオブジェクトをHTMLに展開する際、ルートのdivが邪魔だなーと思って調べたら ```<React.Fragment>```を使えば、複数のエレメントを直接展開できることが分かった。デザイン崩れ対策に覚えておこう。

short syntaxとして```<>```も使える。

[Fragments – React](https://reactjs.org/docs/fragments.html)

CSS直してOGPを設定した

個人サイトをNext.jsとesaを使って作った。

スタイルが適当だったりmetaとか色々設定してないけど、記事が見れればいいっしょ、ぐらいのノリなので、とりあえず公開している。

[corocn.dev](https://corocn.dev/)

## モチベ

r7kamura氏のエントリを見て作ろうと思った。
 * https://r7kamura.com/articles/2020-09-21-personal-website

概ね理由は同じだが、フィードバックと適切な距離を置いて、アウトプットへのハードルを下げたいのが理由。前から作りたいなと思っていたので、えいやで構築した。

このネタどこで書こう、Qiita? Zenn? note? はてブ? というように選択コストが上がってきたのと、プラットフォームが燃えてると自分の記事まで燃えている気持ちになるのにつらみを感じたので、雑に個人サイトでアウトプットする形に戻した。技術ネタ以外も書きたいし。住宅購入の話とかね。

## スタック

 * [Next.js](https://nextjs.org/) +  [Vercel](https://vercel.com/) +  [esa.io](https://esa.io/)

### Next.js

 * 仕事でVue.jsを書いてるので、Reactが書きたくなった
 * [Incremental Static Regeneration](https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration) がすごい（でも今回は使ってない）
 * ナウくてかっこいい

### Vercel

 * シンプルで便利
 * ISRも対応してるしすごい
 * 個人使用なら無料で使える

### esa.io

 * 個人で契約して使っていた（月500円）
 * Markdownで書いてプレビューできる
 * 画像のアップロード先に独自のS3バケットを設定できる
 * APIで記事が取得できる

## 仕様

次の形で記事が公開される

 * esaの特定のカテゴリ以下に記事を書いてShip It!
 * WebHookがesa -> Vercelに飛んでビルド開始
 * APIでesaから記事を取得して静的ビルドされる

## 構築するときに考えたこと

考えたことをつらつら書いておく

 * Incremental Static Regeneration が必要かどうか
 * APIのリミットとキャッシュ
 * 画像の扱い
 * MarkdownからHTMLへの変換
 * プレビュー
 * デプロイ（WebHook）
 * メタ情報
 * スラッグ

### Incremental Static Regeneration（ISR） が必要かどうか

数百記事までなら正直不要だと考えたので、使ってない。キャッシュの有効期限を短くしすぎると、動的サイトを同じなので、API側に負荷がかかってしまう。長くすると、静的ビルドしたほうが公開が早くなる。また、esa側のAPIにリミットがあるので、ISRを選択する場合、何かしらのキャッシュを行う層を設けなくてはいけなくて、いろいろ大変なのでやらないことに決めた。

正直カッチョイイ機能なので使いたかったが、記事が増えてきたらトライする項目としておく。

### APIのリミットとキャッシュ

[dev/esa/api/v1 #noexpand - docs.esa.io](https://docs.esa.io/posts/102)

> 現時点では、ユーザ毎に15分間に75リクエストまで受け付けます。

なので、75記事以上ある場合、記事単体で取得するコードを雑にループすると死んでしまう。これを回避するために、静的ビルド時に記事の取得方法を工夫している。

esaは記事一覧のAPIを叩くとMarkdown本文まで取得できるので、一覧へリクエストした際に、個別の記事をローカルにキャッシュしている。キャッシュは .next/cache/posts/[id].json という形で保存しておく。個別ページのビルド時にgetPost(id) のような関数を用意しているが、リクエストを発生させずに、このキャッシュを見にいっている。次の内容しか保存していない。

```json
{ id, title, body_md, updated_at, created_at }
```

記事一覧APIの取得上限は1リクエスト100記事なので、7500記事まで対応できる。
個人サイトなら十分すぎると思う。

### 画像の扱い

esaは画像のアップロード先として、独自のS3バケットを設定できる。esaのバケットにアップした画像を直接公開個人サイトで公開するのは明らかに逸脱した使用だと感じているので、Headless CMSとしてesaを使う場合は必ず設定すること。

[help/ファイルアップロード先に独自のS3 Bucketを設定する - docs.esa.io](https://docs.esa.io/posts/81)

### MarkdownからHTMLの変換

正直デファクトが分からない。Next.jsのTutorialでremarkを使っていたので、そのまま使っている。コードハイライティングにhighlight.jsを使用。プラグインもある。

 * https://github.com/remarkjs/remark
 * https://github.com/remarkjs/remark-highlight.js

実はesaのAPIを叩くとHTMLも返してくれるが、Markdown前提で作っておきたかったので、使っていない。

### プレビュー

リアルタイムプレビューみたいなものを考え出すと色々面倒なので、esaのプレビューで十分だと考えている。

### デプロイ

esaの記事更新時のWebHook + VercelのDeploy Hooks を組み合わせて実現している。記事をShipItで作成、更新すると、VercelにWebHookが飛び、自動で静的ビルドが走る。特定のカテゴリ以下のみWebHookされるように設定しているので、他の記事を書いたときに不用意にビルドが走ることもないのが良い。esa、便利です。

<img width="1016" alt="esa-deploy.png (255.2 kB)" src="https://dzpkei5uih1fk.cloudfront.net/uploads/production/attachments/13493/2020/10/01/25374/9594025f-e645-41d2-9009-3b52fe036586.png">

<img width="825" alt="vercel-deploy-hooks.png (101.4 kB)" src="https://corocn-dot-dev-bucket.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/13493/2020/10/01/25374/c214a40f-c1d6-4777-8c97-d0a195e3b7d8.png">

### メタ情報

esaをHeadless CMSにするとメタ情報をどこに記述するかが問題になる。

今回やりたいこと

 * https://corocn.dev/posts/1 のようなIDでの参照をやめる
 *  https://corocn.dev/posts/super-ultra-greate-page のようにページURLに固有の文字列を与えたい

スラッグ（slug）とも言うみたい。これを実現するため、Speaker Deck のような形でやることにした。タイトルに埋め込んでしまう方式。

 * [Speaker Deck で最高の URL を生成する技術 - kakakakakku blog](https://kakakakakku.hatenablog.com/entry/2018/05/07/003042)

esaは スラッシュ"/" がカテゴリの区切り文字として使われているので、 "--" で識別することにした。"-- about-this-site"  と記述すると、公開されるURLが [https://corocn.dev/posts/about-this-site](https://corocn.dev/posts/about-this-site) になる。

<img width="1198" alt="image.png (93.4 kB)" src="https://corocn-dot-dev-bucket.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/13493/2020/10/01/25374/1b0e9d09-6966-4411-b05c-996334f37245.png">

もっと情報をもたせたくなったら、記事内に埋め込むことを検討したい。

## まとめ

 * 個人サイトをNext.jsとesaで作った
 * 1日ぐらいでサクっと作れたのでよかった

Next.jsとesaを使った個人サイト構築

## このサイトなんですか？

 * [@corocn](https://twitter.com/corocn) の雑記です

## 問い合わせ

 * Twitter DMが反応早いです


このサイトについて

# これは何

諸々の表示確認用のページ

以下から拝借
https://github.com/markdown-it/markdown-it/blob/master/support/demo_template/sample.md

# Embed Object

## Sample

This is a tweet.

https://twitter.com/corocn/status/1236196921997287425

This is a youtube video:
 
https://www.youtube.com/watch?v=aoLhACqJCUg
 
This is a photo:
 
https://www.flickr.com/photos/pedrocaetano/27432477888
 
This another photo:
 
http://www.23hq.com/mprove/photo/66422006
 
Check it out 👆

# Syntax Check

## JavaScript

```javascript
function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ` class="${cls}"`;
  } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log('undefined');
  }

  return (
    <div>
      <web-component>{block}</web-component>
    </div>
  )
}

export  $initHighlight;
```

## Ruby

```rb
# The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  end

  def salute
    puts "Hello #{@name}!"
  end
end

g = Greeter.new("world")
g.salute
```



# h1 Heading 8-)
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading


## Horizontal Rules

___

---

***


## Typographic replacements

Enable typographer option to see result.

(c) (C) (r) (R) (tm) (TM) (p) (P) +-

test.. test... test..... test?..... test!....

!!!!!! ???? ,,  -- ---

"Smartypants, double quotes" and 'single quotes'


## Emphasis

**This is bold text**

__This is bold text__

*This is italic text*

_This is italic text_

~~Strikethrough~~


## Blockquotes


> Blockquotes can also be nested...
>> ...by using additional greater-than signs right next to each other...
> > > ...or with spaces between arrows.


## Lists

Unordered

+ Create a list by starting a line with `+`, `-`, or `*`
+ Sub-lists are made by indenting 2 spaces:
  - Marker character change forces new list start:
    * Ac tristique libero volutpat at
    + Facilisis in pretium nisl aliquet
    - Nulla volutpat aliquam velit
+ Very easy!

Ordered

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa


1. You can use sequential numbers...
1. ...or keep all the numbers as `1.`

Start numbering with offset:

57. foo
1. bar


## Code

Inline `code`

Indented code

    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code


Block code "fences"

```
Sample text here...
```

Syntax highlighting

``` js
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```

## Tables

| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

Right aligned columns

| Option | Description |
| ------:| -----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |


## Links

[link text](http://dev.nodeca.com)

[link with title](http://nodeca.github.io/pica/demo/ "title text!")

Autoconverted link https://github.com/nodeca/pica (enable linkify to see)


## Images

![Minion](https://octodex.github.com/images/minion.png)
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

Like links, Images also have a footnote style syntax

![Alt text][id]

With a reference later in the document defining the URL location:

[id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"


## Plugins

The killer feature of `markdown-it` is very effective support of
[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).


### [Emojies](https://github.com/markdown-it/markdown-it-emoji)

> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
>
> Shortcuts (emoticons): :-) :-( 8-) ;)

see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.


### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)

- 19^th^
- H~2~O


### [\<ins>](https://github.com/markdown-it/markdown-it-ins)

++Inserted text++


### [\<mark>](https://github.com/markdown-it/markdown-it-mark)

==Marked text==


### [Footnotes](https://github.com/markdown-it/markdown-it-footnote)

Footnote 1 link[^first].

Footnote 2 link[^second].

Inline footnote^[Text of inline footnote] definition.

Duplicated footnote reference[^second].

[^first]: Footnote **can have markup**

    and multiple paragraphs.

[^second]: Footnote text.


### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)

Term 1

:   Definition 1
with lazy continuation.

Term 2 with *inline markup*

:   Definition 2

        { some code, part of Definition 2 }

    Third paragraph of definition 2.

_Compact style:_

Term 1
  ~ Definition 1

Term 2
  ~ Definition 2a
  ~ Definition 2b


### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)

This is HTML abbreviation example.

It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.

*[HTML]: Hyper Text Markup Language

### [Custom containers](https://github.com/markdown-it/markdown-it-container)

::: warning
*here be dragons*
:::

表示確認用の投稿


<img width="239.99999999999997" alt="corocn_背景なし.png (157.6 kB)" src="https://dzpkei5uih1fk.cloudfront.net/uploads/production/attachments/13493/2020/09/27/25374/b050a9bf-9496-433a-8178-a837c04ce6e3.png">

 * Takahiro Tsuchiya
 * [@corocn](https://twitter.com/home)
 * ころちゃん / ころ / ころさん と呼ばれることが多いです

## 経歴

 * 株式会社Leaner Technologies / 2021-09 - 現在
 * 株式会社キャスター  / bosyu開発チーム / 2019-02 - 2021-08
 * 株式会社Misoca / 2017-04 - 2019-01
 * 株式会社Arc  / 2015-05 - 2017-02
 * 株式会社デンソー / 2013-04 - 2015-04 
 * 国立大学法人 名古屋工業大学 大学院工学研究科 / 2011-04 - 2013-03
 * 国立大学法人 名古屋工業大学 工学部 情報工学科 /  2007-04 - 2011-03

## Links

 * https://corocn.jp/
 * https://github.com/corocn
 * https://www.facebook.com/corocn
 * https://slackemojigen.com/