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

• ブログのデザインがひどくて書く気になれなかった
• ブログカードを実装したかった
  • 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 公式のこの図がわかりやすいです。

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

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 コンポーネントを指定することで、ブログカードを作ることができます。

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

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 でブログ作ってる人は参考にしてみてください。では！

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

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

なんで書く？

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

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

何を書くか

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

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

やっていき

目次

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

構成

Next.js

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

Netlify CMS

静的ホスティングサービスNetlifyが提供している Git ワークフロー用 CMS。サイトに CMS 機能を追加することができる。

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

やったこと

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

Next.js のセットアップ

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

より良い方法として、Creating a Markdown Blog with Next.jsを見ながらすすめることをおすすめします。これに沿ってセットアップすればとりあえず Next.js でブログを作るところまで進められます。

Netlify CMS の設定

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

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 は編集できる変数を追加できます。今自分が指定しているパラメータだと編集画面はこのように表示されます

デプロイ

Publishing to GitHub and Netlifyのとおりに進めればデプロイできるはずです！これでブログの完成！やったね！

つまづいたとこ

date の取得

Creating a Markdown Blog with Next.jsに従ってセットアップをしていましたが、markdown を取得するところでエラーになりました。

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/:embed]

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

これから作りたいもの

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

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

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

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

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

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

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

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

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

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

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

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

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

今回は顔合わせの日までに準備したことを書きました。 事前に以下を決めておきました。

• 地域
• お店
• 服装
• 手土産
• 会計

地域

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

お店

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

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

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

服装

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

手土産

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

会計

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

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

目次

• 実績
• １年前よりできるようになったこと

実績

仕事

仕事では 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 な場になにかを発信するという活動をすることができました。少なくとも去年よりは
• 一つ一つの仕事が丁寧になりつつある
  • テキストコミュニケーションの改善も含めてなのですが、丁寧に一つ一つ進めることの重要性を再認識しました。

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

環境の変化

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

仕事

今は、freee の関西拠点で働いています。関西初の会計エンジニアとして入社して爆速でバリューを出すためにしたこと という記事を入社エントリー代わりに書いたとおり、自分は会計チームの関西拠点一人目として参画しました。

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

個人的には新しい環境でも結構楽しくやれていて、自分のやりたいことができていると感じています。 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]

今年の反省

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

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

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

最後に

おわり！来年もよろしく！

このブログは公開していい雑記帳のように使っていこうと思っています。ゆるりと記事を書きながら、2024年の振り返りや学んだこと、そして2025年の目標について話ししたいと思います。よろしくお願いします。

2024年の大きな記録

1チームのマネージャーを始めた

メンバーとして働いていた頃は、すべてを自分で把握し、コントロールしたいという気持ちが強かったです。しかし、マネージャーとして働き始めて、すべてを把握しようとすると時間も労力もかなり必要だとわかりました。その結果、自分の気持ちも変化し、依存せず、信頼して仕事を任せることが、チーム全体のために最も効果的だと気づきました。これは、メンバーが優秀であることはもちろん、自分の内面の変化も大きかったと感じています。

大阪で Ruby コミュニティを始めた

Kyobashi.rb という Ruby コミュニティを始め、社外の Rubyist と定期的に話す機会を作れたのは大きな成果でした。人と会うことが自分にとってどれだけ大事かを再認識しました。資料の共有や意見交換は、スキルアップにもつながり、自信にもつながりました。

[https://kyobashirb.connpass.com/:embed]

本を書いた

[https://techbookfest.org/product/sk10P621i0Sbk5tDn2dXrp?productVariantID=aMRrTkuTu4xjD8uB0ywQhi:embed]

PicoRuby でラジコンを作る本を書きました。PicoRubyはすごく楽しく開発できるので今後もどんどん勧めていきたいです。

また、この本をRuby on Rails チュートリアルで紹介いただき、とても嬉しかったです。

RubyKaigiでLTをした

LTでラジコンを動かすデモを行い、大いに盛り上がりました。多くの方に覚えてもらい、素晴らしい経験になりました。

[https://rubykaigi.org/2024/presentations/lt/:embed]

発信が自分をドライブすることに気付きました

freee Developers Hub にもブログ記事として書きました。発信を通じて履歴をつなげていくことの重要性を実感した1年でした。

[https://developers.freee.co.jp/entry/presentation-driven-development:embed]

2024年にできなかったこと

読書量やインプットが不足していました。これは2025年に取り組むべき課題です。また、発信登壇が自分をドライブしてくれるので、どんどん増やしていきたいと思っています。

2025年の目標

2025年は、もっとたくさんのインプットとアウトプットを増やしていこうと決めています。やりたいことが溢れているこの状態を楽しみながら、どんどん挑戦していきます。

2025年もやっていきます！

ネット上にも Corne Cherry V3 のケースのデータはありそうだったんですが、自分で作る練習も兼ねて 3D データの作成から発注までやってみました。

3D モデルを作る

Corne Cherry V3 はサンドイッチマウントで作られていて、ボトムのプレートのデータの SVG ファイルが公開されているのでまずはこれをダウンロードしました。

foostan san には大変お世話になっております。このような素晴らしいキーボードを開発してくださりありがとうございます！

[https://github.com/foostan/crkbd/blob/v3-final/plates/common/top-bottom.svg:embed]

この SVG ファイルを Inkscape で開いて、ボトムのプレートのデータだけを取り出しました。このとき、パスが細かく別れていて閉じたパスになっていなかったため、パス同士をつなぎ合わせて閉じたパスに編集しました。

この SVG ファイルを Autodesk Fusion(Fusion 360) にインポートして、3D モデルに変換します。

Autodesk Fusion は個人利用であれば無料で使える 3D CAD ソフトです。今回は個人利用だったのでありがたく使わせていただきます。

SVG を挿入でスケッチとして取り込んで、オフセットでケース底面の遊びとケースの側面の厚みを作成、押し出しでケースの形にソリッドを作成。

ソリッドとサーフェスがあってどっちを使ったらいいか迷った。

Chat GPT に聞いたらソリッドは体積があって実体になるもの、サーフェスは表面だけのデザインできるようになっているっぽい。キーボードケースはプリントするのでソリッドで作成する。

ソリッドに USB-C と TRRS ケーブル用の穴を開ける。これもスケッチを作ってそれを押し出して穴を開けられる。楽ちん。

USB-C 用の穴は四角い穴を開けたうえでフィレットという機能を使って丸くしたら簡単にできた。

反対側はミラーを使うと反転してコピーできた。

JLCPCB に発注

最初、.obj file を作成して、JLC3DP にアップロードしたら、変なサイズで認識された。どうしてこれが起きたのかわからない。

そのため、.step file で書き出してアップロードした。そしたらうまく行った。

以下の設定値で依頼した。

見積もりしたら激安だった。初回クーポンも相まって送料含めて300円程度で済みそう。

ということで発注。ただ、発注して結構時間が経っているがファイルレビューが終わらない……

じっと待ってみる。また送られてきたらブログ書こうかな。

サマリ

最高の RubyKaigi だった！というと月並みすぎるんだけど最高だったなぁ

個人的には本売って LT やって DJ やってというどれもちょっと背伸びした挑戦ではあったんだが やっぱり背伸びするって大事だなと思った RubyKaigi でもありました。来年も背伸びポイントを作りたいですね（本編登壇ですかね）

このブログはとりあえず本とかLTとかについて書いたあとに全体で良かったこととか書こうかな

DJ については一個前のブログで書いたのでこちらでは割愛しますがめっちゃ楽しかったです。

同人誌を売ってました

@.bookstore という笹田さんが技術イベントでやっている本屋さんに 今回は同人誌を置かせてもらえるというイベントがあったので、そちらに「Rubyではじめる電子工作」を置かせていただいていました

[https://techbookfest.org/product/sk10P621i0Sbk5tDn2dXrp?productVariantID=aMRrTkuTu4xjD8uB0ywQhi:embed]

そして今回無謀にも40冊も会場に持っていきました。最初60冊持っていこうとしていたんですが、 スーツケースの重さが飛行機に載せられる重量を超えたので40冊にしました。 （あと yuuu さんが10冊って言ってたので自分多すぎるのでは？とビビったのもあります）

40冊持って行くのマジ重かった…

もし次があるなら次は何らかの形で郵送したいと思います

そして売り切る

1日目12冊、2日目10冊、3日目18冊と、あれよあれよと売れて全部なくなりました。

高橋会長が本の紹介をしてくれるコーナーで紹介していただいたり

はすみさんが登壇のセッション内で紹介してくれたりと多大な支援をしていただきました。（紹介時の画像は嬉しすぎて撮るの忘れちゃった）

また、@.bookstore を企画していただいた笹田さん、運営に関わった皆さんの力がなければ本は売れませんでした。 本当にありがとうございます。とても楽しかったです。

買ってくださった皆さんにサインもしました。なんかもうちょっと RubyKaigi 2025 とか書けばよかったなって思っています。

あとサインといえば Binary Hacks Reboot を買って、帯を書いた小崎さんにサインを頂きました。 Kyobashi.rb にたまに来てくれる小崎さんにサインもらえたのすごい嬉しかったです。

LT をしました

昨年に引き続き今年も LT をしました。今年は Fiber Scheduler vs. General-Purpose Parallel Client という題で話しました。

[https://speakerdeck.com/hayaokimura/fiber-scheduler-vs-general-purpose-parallel-client:embed]

去年よりは緊張せずに喋れた気がします（去年はデモの時間が若干読めなかったので全部話せるかが怪しくて緊張してた気がする）

今年も練習は5分若干超えてたのでドキドキしてたんですが、なんか本番はちょっと巻いてしまってましたね。 割と自分は本番ちょっと巻いちゃうくせがあるので次からはちょっとオーバーしててもいいかなって思うようにします。

tkskkd さんからLTの歴史の話と5分に収まってほしくないって話がありましたが、 個人的には熱量が感じられれば最高って話だと理解したので次回以降も熱量込めたLTをしていこうと思います。

あと、LTは Day2 の最後でしたが、寝て起きてDay3の朝、Fiber Scheduler の実装である async gem の開発者で Ruby Commiter の Samuel から、「grpc gem に Fiber Scheduler で grpc gem も平行に動かせる PR 出したよ」というメッセージが来てて飛び起きました。

自分が LT で言ったことでまさかそれが可能になるとは夢にも思ってなかったのでまじでこれは夢なのか？と思いました。

RubyKaigi と Ruby Commiter の力をめちゃめちゃ感じました。これを自分でできるようになりたいですね。

所属企業メンバーとしての活動

自分の所属しているフリー株式会社は Gold Sponsor です。弊社からは10人ほど参加していました。

フリーからは初参加のメンバーが多かったので自分が事前に座談会を企画して実施して、事前情報のインプットをしたりもしました。

[https://developers.freee.co.jp/entry/ruby-kaigi-2025-zadankai:embed]

また、Drinkup Sponsor だったので、2日目の夜には Drinkup を企画、実施しました。

ここらへん詳しくは会社の方のブログで誰か書くと思うので割愛しますが結構いい Drinkup だったんじゃなかろうかと思っています。 自分も多少お手伝いできたかなと思うので来年も頑張りたいですね。

本編感想

本編で自分が聴いて自分に次やりたいアクションが浮かんだトークのメモです

State of Namespace

もりすさんのトークです。 experimental ではあるが 4.0 に入ると Matz が言っていたので入ったら軽くでもいいから触ってみたいですね。 トークとしては Namespace のデバッグが大変という話で、めっちゃ大変そうだという感想でした。

TRICK 2025: Episode I

とりあえず「あなたの知らない超絶技巧プログラミングの世界」は読みたいなという気持ちになりました。

毎度会場が沸いていてすごくいいなと思います。楽しい。

Performance Bugs and Low-level Ruby Observability APIs

lowlevel-toolkit という gem の話でした。 この gem 試しに使ってみたいですね。

Demystifying Ruby Debuggers: A Deep Dive into Internals

RubyMine のデバッガーの話でした。デバッガーは debug gem でいいかなと思いつつ、 debug gem の内部実装とかもうちょっと読んでみたいなと思う話でした。社内でやってる gem を読む会、つぎは debug gem にしようかな。

MicroRuby: True Microcontroller Ruby

われらが PicoRuby 作者のはすみさんのトーク

MicroRuby は動かしてみたい。

Porting PicoRuby to Another Microcontroller: ESP32

yuuu さんが ESP32 に PicoRuby をポーティングした話

ESP32 持ってるのにまだ動かしてないので早く動かしたいですね。

その他写真とともに振り返り

Day 0 で伊丹空港と松山空港で ydah, ogom のお二人に会ってお昼一緒に食べに行ったの RubyKaigi の滑り出しとしてとても良かったです

そして一緒に食べたもとやまさんの鯛めしめっちゃ美味しかった

DD4D、結局 RubyMusicMixin があった Day3 以外、松山にいた日は毎日飲んでた。まじうま。Don Jalapeño 最高。

やんちゃハウスでの写真が一つもないことに気づいたんですがやんちゃハウスのひとときもめっちゃ楽しかったです。

ハウスは道後温泉に足湯、本館、別館と何度も温泉入れてめっちゃ良かった

ハウス近くのラーメン屋 nori で食べた裏メニュー（焦がしガーリック塩チャーシューメン）はまじで美味かった。 もう一回ぐらい行っておけばよかった…

会社の同僚がパーカー着た後ろ姿撮ってくれてました

Day 3 のお昼に行った roro coffee stand もすごい雰囲気がよく、店主の方がいろいろ周辺の飲食店情報を教えてくださってとても良かったです。 飲食店は夜やってる店が多かったので今回は行けずじまいでしたが、次また松山来たときは絶対行きたいと思います。

松山城は天守閣だけじゃなくて周りのところも歩けたので結構楽しいお城でした。

まとめ

ということで最高の RubyKaigi 2025 でした。

個人的に RubyKaigi はまずモチベーションを持ち帰ってくるものだと思っていて今回も十分来年へのモチベーションをいただきました。

また1年 RubyKaigi まで仕事やコードに邁進したいと思います。

来年までの意気込みとしては、本編登壇、DJもっとうまくなる、英語もっとできるようになる、ですかね。

また1年やっていくぞ！来年また函館でお会いしましょう！

結果めっちゃ楽しかったので感想などを書いておこうと思います。今回 RubyMusicMixin 参加してDJ始めようかなみたいな人にも参考になりますように

[https://conference.pixiv.co.jp/2025/rubymusicmixin:embed]

hachiのレベル感

会社の音楽部とか家でたまーにDJして遊ぶレベルでまあ初心者です。freee の関西オフィスには音楽部があり、DJ機材とスピーカーもあります。家には同僚にいただいた DDJ-RB があるのでそれで練習してました。

関西で DJ して遊びたいなって人はぜひ自分に言ってくれたら freee の関西オフィスで一緒にできます。むしろ一緒にやって色々教えて下さい。

RubyMusicMixin 経験でいうと RubyMusicMixin は初開催の津から参加していて、RubyKaigi のイベントで開催されたものは全部参加してます。 Kaigi on Rails のイベントで開催されているやつは Organizer をしていて昨年は参加できなかったですね。

応募、当選

なんか落ちることもあるって聞いてたので応募フォームをちゃんと入力するために自分の好きなジャンルとか曲とかを軽くリサーチしました。

Yunomi とか Neko Hacker とか好きで、Kawaii Future Bass って言うらしいということがわかったのでとりあえず、そういう音楽をかけますということを書いて応募締切日にフォームを送信しました。（まじでこのレベルなので初心者丸出しである）

しばらくして通ったと言われたので喜びと緊張が一緒に来たものの、連絡きたのが4月頭だったので残り2週間もなく、頑張るしかないかと腹を括りました。

当選〜RubyKaigi Day -1

曲選びと練習、検索を毎日した

曲選び

とりあえず好きな曲を集めた。が、うまくつなげられる気がしない…とまずは途方に暮れた。そのあとそういえば BPM を揃えたほうがいいんだっけという初歩の初歩を忘れていたことに気づいて意識を取り戻すというのをやってました。

意識を戻したあと、集めた曲を BPM 順に並べて厳選していき、 とりあえず絶対かけたい曲を見ると128あたりの曲と170あたりの曲が多かったのでそこに絞りました。 128 -> 170 はカットインでも echo で切ってもなんでもいいやと思っていましたね。

練習

次の曲のここから聴いてほしいなぁみたいなポイントにちゃんと繋がるように Memory Cue を打った。（ちなみに Memory Cue という便利なものがあるらしいと知ったのは Ruby Kaigi day -7 ぐらいである。まじの初心者である。）

そこがうまくいくように練習した。そもそも操作にあんま慣れてなかったのでなれるようにした

検索

とりあえず入門動画を見まくった。DJ Koo はじめ、入門動画を出してくださっているDJの皆さんありがとうございます。さっき言及した Memory Cue というものがあるらしいというのはもちろん YouTube で見つけました。

あと、あんな最新の CDJ 機材を触ったことはなかったので本番パニクらないように何がどこにあるのかをしっかり予習しました。余談だが当日に Beat FX の場所がわからなくなって当日も YouTube に助けられていたのでまじ YouTube のある時代に生まれてよかったです。

当日~出番まで

自分の出番が始まるまではめっちゃ緊張して他の人のプレイをあまり楽しめなかったのが辛いポイントでしたね。出番が 12:30 だったが 11:00 ぐらいに緊張しすぎて疲れて体調が悪くなってました。12:00 にビール一杯飲んだり緊張していることを他の DJ に伝えたりして緊張と付き合っていた気がします。

プレイ中

@barometrica san が「緊張するのは最初の曲の再生ボタン押すまでですよ」と言ってくれたがマジだった。

自分の好きな曲でみんながすごい楽しそうに踊ってるの、楽しくないわけないよね！

あと、DJが楽しそうにしているのが一番楽しいよなと思っていつもの2倍ぐらい踊った。結果半分ぐらいで酸欠気味になってたし、空調ガンガンだったのに汗だくだった。

とりあえず初心者で技術は無いので好きな曲を全力でかけて全力で楽しんでもらおうという作戦で挑んだがそこは 120% 達成できたんじゃないかなと思うぐらい良かった

これはこたつさんが撮ってくれた全力の様子です

プレイ後

炬燵（kotatsu） san にコークハイ奢ってもらった。ごちそうさまでした。

みんなに楽しかった、よかった、と言ってもらえてすごく嬉しかったですね。X もめっちゃ見た。

そして緊張はもう無いので全力で残りの音楽を楽しみました。最後の sylph & いかるが の音楽を聴きながらこれで RubyKaigi が、RubyMusicMixin が終わってしまうと一人で震えていましたね……

今

X 徘徊してたら炬燵（kotatsu） san にフィードバック頂きました。

初心者であることはみんなわかってると思うのでよかった！楽しかった！はみんなすごく言ってくれてそれ自体はすごく嬉しいんだけど、こたつさんはここが未熟やったでというのを言葉を選びつつちゃんと伝えてくれるのでとても、とてもありがたかった。自己評価とも近かったのでこれからもっと頑張ろうと思えたのでがんばります！

当日の選曲

恋愛サーキュレーション (Yunomi "Kawaii EDM" Remix)
ハッピーライフ (feat. nicamoq)
Yunomi & nicamoq - インドア系ならトラックメーカー(Jun Kuroda remix)
ロボティックガール (feat. nicamoq)
Catch A Fire (jersey wakaran girl mix)
One by One (feat. KMNZ LIZ)
Chocolate Adventure (feat. ななひら)
I SAY YES(denshino J-core bootleg)
livetune feat. Hatsune Miku - Tell Your World(HiroHiro Bootleg)

これから

もっとDJやろうと思ったし他の人のDJ聴きたいと思いました！

来年も絶対 RubyMusicMixin 応募するぞ！

聴いてくれた皆さんほんとうにありがとうございました！拙いDJでしたが楽しんでいただけてよかったです！また函館でお会いしましょう！

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

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

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

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

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

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

参加よもやま

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:embed]

そーだい さんがコミュニティでの活動を通してキャリアを前に進めてきたお話でした。 最初から最後までそーだいさん自身の人生が変わった言葉、出来事がちりばめられていて、計画的偶発性理論によるキャリアの成長を完全に体現していることをありありと感じられたセッションでした。

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

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

余談ですが、自分の所属するフリー株式会社が去年開催した「freee 技術の日」で、自分も仕事がしやすくなる社内発信のすすめという題で登壇していました。 このときの登壇を YAPC::Hiroshima の SmartHR のスポンサーブースの方が聴いていて、覚えてくださっていました。そーだいさんの登壇と相まってとても嬉しかったです。今後も良いコンテンツを作りたいと思いました。

Blogを作り、育み、慈しむ ~ Blog Hacks 2024

[https://junkyard.song.mu/slides/yapc-hiroshima-2024:embed]

soungmuさんの、Blog を中心としたエンジニアの発信についての登壇でした。 特に個人サイト、個人ブログの良さについて多く語られていました。

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

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

杜甫々さんキーノート

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

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

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

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

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

YAPC 以外

初の広島だったので色々行きました！

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

まとめ

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