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ご利用ガイドドキュメント

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

デザインの微調整

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

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

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

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