5.1さらうどん

@giginetの技術ブログ。ゲーム開発、iOS開発、その他いろいろ

Claude Code Plugin Marketplaceのカタログを公開できるcc-plugin-catalogを作った

cc-plugin-catalog作った!

業務でメンテしているClaude CodeのPlugin Marketplaceの数が増えてきて、GitHub上のファイルツリーだけでは一覧性が悪くなってきた。また、タグやキーワードを設定する機能もあるが、横断的に閲覧できずに表記が揺れたり、あまり意味を成していないという課題感もあった。

というわけで簡単にカタログを生成・GitHub Pagesに公開できるツールを思いついて作ってみた。

公式Marketplaceで生成するとにぎやか

プラグインごとの詳細ページも綺麗に読める

動作例としてはこんな感じになる。

使い方

自分のMarketplaceでプレビューする

Plugin Marketplaceのリポジトリでuvx cc-plugin-catalog preview .を実行するだけ。

GitHub Pagesへのデプロイ

手元で動かすだけだと意味が薄いので、GitHub Pagesへの公開に重点を置いて設計されている。デプロイには、事前にリポジトリのGitHub Pagesの設定をGitHub Actionsにしておく必要がある。

Settings > Pagesから変更できる

その後、以下のようなGitHub ActionsのWorkflowを作るだけ。

name: Deploy Plugin Catalog

on:
  push:
    branches: [main]

permissions:
  pages: write
  id-token: write

jobs:
  deploy:
    uses: giginet/cc-plugin-catalog/.github/workflows/build-pages.yml@v1
    # Optional: customize with inputs
    # with:
    #   base-url: "https://example.github.io/my-marketplace"  # Enables OGP meta tags
    #   logo: "assets/logo.png"                                # Header logo image

このDeployのしやすさという部分はこだわった。もちろんGitHub Enterpriseでも使えます。

なお、これでも面倒な人は、plugin marketplaceのリポジトリで「giginet/cc-plugin-catalogを使ってGitHub Actions作って」と言えばREADMEを読んで生成してくれる。

社内のMarketplaceにぜひ!

思いついてから完成まで1〜2時間でパッとできてしまった。PyPIへのリリースも10年ぶりぐらいだけど、AIに頼んだら特に追加調査なく実現できた。

個人であまり大きなMarketplaceを保守している例は少ないだろうから、使いどころが限られるけど、In-HouseのMarketplaceには最適だと思う。

どうぞご利用ください。

WezTermの組み込みMultiplexerでClaude CodeのAgent Teamsを起動する

WezTermでTeamが動いた!!!

開発環境現状確認にも書いたとおり、MultiplexerとしてtmuxではなくWezTerm + 標準のMultiplexerを使っている。

良い感じに動いているが、唯一の弱点として、Claude CodeのTeam機能がPaneを開いてくれない問題がある。解決できたので記事にしておく。

tmuxのshimsを作る

Claude Code自身に解決を頼んだところ試行錯誤して作ってくれた。結論としては簡単で、WezTerm内でtmuxコマンドを叩いたときにwezterm cliを代わりに実行する薄いshimsを書くだけだった。

github.com

最後に忘れずに.claude/settings.jsonteammateModetmuxにする(標準はauto)。

{
  "teammateMode": "tmux"
}

メチャクチャニッチだけど、同じ環境の人はぜひ参考にしてみてください。これZellijユーザーとかにも応用利きそう。

追記: PATHの優先順位に注意

上記のコミットに加え、単に.zshrcでPATHを書き換えてもWEZTERM_PANEが読めず、本物のtmuxが優先されてしまうことがあった。

おそらく実行順序の問題なので、.zshenvに以下を追加して、shimsが確実に優先されるようにしたら直った。

export PATH="$HOME/.bin:$PATH"

AIエージェントでポートフォリオを作ろう!

前から登壇やメディアでの露出、会社のブログ記事の執筆などの情報をまとめたペライチのページを作りたかった。 また、技術顧問などのポジションの募集は常にしているため、レジュメ的なものが欲しかったのもある。

作ろうと思いつつ、残念ながらWebデザインは大昔に諦め、最近のWebフロントの技術全般にも疎いため腰が重く、なかなか手を付けられずにいた。世の中に無数にあるStatic Site Generatorのうち、どれがいいんだろうなあ〜などと技術選択で悩んでたりしていたら、世はAI時代になり、そんなことを考える必要がなくなった。

結局、寝付けない日におもむろにプロンプトを打ち込んだら情報収集含めて2時間ぐらいでできた。破壊的イノベーションだ。

できたもの

ポップな感じにしてと言ったらアイコンから配色してくれた

というわけでこういうページができた。以前から押さえていて使っていなかったgiginet.meのドメインを活用できてよかった。

AI Agentを使った情報収集

今回、ポートフォリオを実装するに当たって、以下のような情報ソースをAI Agentに収集させている。

  • GitHub
  • はてなブログ(このブログ)のRSS
  • Speaker Deck / SlideShare
  • connpass
  • YouTube上の登壇動画
  • 会社の技術ブログ
  • 執筆した書籍
  • メディア掲載、イベント出演など(技術記事に載ったり、ラジオに出たり!)

後半の網羅性のない情報は、片っ端からURLを思い出して引っ張ってきて、テキストファイルに羅列した。

Perplexity MCPでエゴサする

僕は普段からPerplexity MCPを常用しており、常にuserスコープで繋いで少額突っ込んでいるのだが、今回エゴサに力を発揮した。

これによって自分が忘れていた登壇情報や、掲載記事などを引っ張ってくることができた。

昔の執筆記事もすぐに探せた

connpass APIを使った登壇情報の収集

上記の情報ソースのうち、connpassだけはWebスクレイピングを禁止しているようで、AI経由で一切情報が取得できなかった。というわけでconnpass APIを使い過去のイベント情報を一括で取得することにした。

connpassのAPI利用は、個人での使用は申請すれば数日待てばキーが発行される。あとはAPIリファレンスをSkill化したら過去の登壇情報を取得してくれた。

connpassのAPI利用について — connpassご利用ガイド ドキュメント

キーとAPIドキュメントを渡しただけ

Speaker Deckに掲載されているスライドと、上記のPerplexityによる検索と、connpass APIによるイベント情報を突き合わせることで、半自動で過去の登壇情報が完成した。

登壇の度にSpeaker Deckに上げてたのが綺麗に整理された

デザインの微調整

デザインセンスはないので、ほとんどAIにおまかせして、ガッと出してもらい、細かい点に注文を付けた。その時にPlaywright MCPを繋いでおくだけで自動でCSSを良い感じにしてくれて特にやることはなかった。これはWebデザイナーは大変な時代だ・・・・・・。

デプロイとGitHub Actionによる動的コンテンツの自動化

デプロイはGitHub Pages。DNSの設定方法も聞いたら教えてくれたので、その通りレコードを張っただけ。

ポートフォリオには、ブログの最新エントリや、GitHubのスター数が載るようになっている。ページ自体はペライチだが、GitHub Actionsで定期的にブログのRSSやGitHub APIを監視し、更新があったら自動更新するようになっている(というか特に頼んでないのにしてくれた)。この記事も一覧に載ることだろう。

ポートフォリオを作ろう!

省力化してできたので、ブログも軽く書いてみた。ぜひお試しください。