🌻

Zennの記事にぴったりの絵文字を提案するChrome拡張を作った話

に公開
個人開発
Chrome拡張
絵文字
AIエージェント
Claude Code
tech

Zennで書いた記事に適した絵文字を提案してくれる拡張機能を作りました

Zennで記事を書く際、見出しにどんな絵文字を使おうか迷うことはありませんか？🤔「この記事にはどんな絵文字が合うだろう？」と考えたり、「いつも同じ絵文字ばかり使ってしまうな…」と感じたり。些細なことですが、毎回考えるのが少し面倒に感じていました。

そこで、AIエージェントの力を借りて、記事の内容に合った絵文字をAIが提案してくれるChrome拡張機能「zenn-emoji-picker」を開発しました。

この拡張機能は、私の初めての自作ツールです。開発にはClaude Codeのサポートを借りました。コードはGitHubで公開しているので、興味のある方は使ってみてください。

→ https://github.com/nabe-kurage/zenn-emoji-picker

できること

  • Zennの編集画面にボタンが追加されます
  • ボタンを押すと、記事内容をざっと解析して、それに合いそうな絵文字をいくつか提案してくれます
  • 絵文字横にあるコピーボタンをクリックするとクリップボードにコピーされ、そのまま見出しなどに貼り付けられます

実際の画面

Zennの編集ページで拡張機能のアイコンを押すと以下のような小さなWindowが表示されます

ここで「絵文字を提案」ボタンを押すと３つ絵文字を提案してくれます（理由がかなり厳しい…笑）。
気に入らなければ再度提案ボタンを押すと別の３つの絵文字を提案してくれます。

APIキーは設定ページで設定します。この設定ページは、アプリをクリックした際に表示されるウィンドウの「設定」リンクからアクセスできます。

技術的なこと

  • Claude Codeで書いています
  • 普通のChrome拡張（manifest v3）です
  • 記事の中身を取得して、OpenAI / Claude / Gemini のいずれかに投げて、返ってきた絵文字を表示しています
  • どのAPIを使うかは設定画面で切り替えられます。APIキーの設定もそこから行います
  • 記事の内容は、編集画面内の textarea から取得しています

使い方

  1. リポジトリをクローンします
  2. Chromeの「拡張機能」ページで「パッケージ化されていない拡張機能を読み込む」を選びます
  3. クローンしたディレクトリを指定して読み込みます
  4. Zennで記事の編集画面を開くと、右上にボタンが表示されます
  5. 設定で任意のLLM APIキーを入力すれば動くようになります

課題

候補に出る絵文字の偏りとランダム性の低さが一番の課題です。
Zennの記事は「学習」や「プログラミング」系が多いため、どうしても関連する絵文字ばかりになってしまいます。

そこで候補を3つ出すようにして、少しでも偏りを減らし、自分では思いつかない絵文字を混ぜるようにしました。
さらに改善のため、JavaScript側であらかじめ渡したプールからランダムにいくつかの候補を抽出し、そのサブセットをAIに渡して選んでもらうようにしています。
こうすることで、全く同じテーマの記事でも、出てくる絵文字にバリエーションが生まれやすくなりました。

ただ、このように無理やりランダム性を加えた結果、提案された絵文字の理由が文脈からずれるケースが増えた気がします…。
この“ランダム性との戦い”は予想以上に難しく、まだまだ調整の余地があると感じています🫠

おわりに

「記事内容に合った絵文字を出してくれる」ただそれだけの小さな拡張ですが、自分にとっては欲しいと思っていた機能でした。
ずっと「こういうの欲しいな」と思っていたものを、自分の手で（しかもAIと一緒に）形にできたのは、とてもワクワクする体験でした。

実際に使ってみると、見出しにサッと絵文字を添えられるようになって、（思い通りに良い絵文字候補が出ないことも含めて）記事作成が少しだけ楽しく、軽やかになりました。

この記事で使っている絵文字も、この拡張の提案から選んだものです。もし同じように「最後の絵文字選び」で悩んでいる方がいたら、ぜひ試してみてください。

また、AIエージェントが便利だけど自分用に何を作ったら良いかわからないという人には、これくらい小さなことでもいいんだなと思ってもらえたら幸いです。
では👋

Discussion