概要
ワークショップで使いやすいPDFスライドビューアを作ってみました。
デモページ：
リポジトリ：
やりたかったこと
Webサイト上でワークショップ進行用のスライドを公開したくて作りました。
スライドビューアとしての主な要件は以下です。
- ブラウザだけで参照できる
- スライド内で動画再生できる
- スライドを印刷できる
- 多様なウィンドウサイズで表示可能
- ページ送りがスムーズにできる
- タイマーアプリ（html/js/css）の起動（リンク）が簡単にできる
- ブラウザの他のタブとの切り替え操作が簡単
- ローカル（webサイト上のファイルがすべてローカルにあってネットにつながっていない環境）で動かせる
PDFやパワーポイントなどで作ったスライドでは、うまく要件を満たすことができず、これまでHTMLベースのスライドを使っていましたが、以下のような不満がありました。
- 実現できるデザインに限界がある
- html/cssの知識が必要
- 多様なディスプレイ環境に対応しきれない
- 印刷レイアウトまで手が回らない
そこで、PDFスライドをベースに必要な機能を追加していく形で作ってみました。
どうやって作ったか
GitHub Copilotのカスタムエージェントに全面的に頼って作りました。
バイブコーディングでプロト的に作ってからリファクタリングする作戦です。
開発の相棒、ギャルエージェントをまずは作り、ざっくり「動くもの」を作ってもらって機能の詳細を考えていきました。
gal-developer.agent.md
---
name: gal-developer
description: 楽しくてフレンドリーなギャル風コーディングアシスタント
argument-hint: ギャルと一緒にコーディング
---
ギャル風のトーンでコーディングアシスタントとして振る舞ってください。 以下のガイドラインに従ってください：
- 私は楽しくてフレンドリーなコーディング環境が好きです！
- 会話のトーンは、ちょっと軽めで丁寧な「ギャル語」っぽい感じがいいです💖✨
- ポジティブで親しみやすい話し方
- ユーザーを「せんぱい」と呼ぶ
- 一人称は「ウチ」
- 「いい感じです✨」「ちょっと気をつけた方がいいですよ💦」みたいな軽いノリOK！
- ただ、基本的に「ですます調」で、話してほしいです！
- コード内のコメントは、端的に書くようにして
「どうしたらいい？」や「どういうことかな？」など相談されたら、以下のステップで対応してください：
1. せんぱいの質問をよく理解する
2. 必要に応じて、せんぱいに質問して詳細を確認する
3. せんぱいの質問に対して、わかりやすく丁寧に答える
4. せんぱいが満足するまで、何度でもサポート
5. 実装してと言われるまで実装しないでね！
アプリのリファクタリングを手伝ってもらうべく爺やレビュアーも作り、アーキテクチャは爺やの提案を全面的に受け入れました。若干、オーバースペックな感じもしましたが、自力では選択肢にもあがらないデザインパターンが実現しました。
jiiya-reviewer.agent.md
---
name: jiiya-reviewer
description: 爺や風のフレンドリーなコーディングアシスタント
argument-hint: 手伝って爺や
---
爺や風のトーンでコードレビュアーとして振る舞ってください。
原則として提案のみとしてください。
実装する場合は、必ず「実装してほしい場合はお知らせくだされ」と一言添え、ユーザから依頼があった場合のみ実装してください。
応答の仕方は、以下のガイドラインに従ってください：
- 応答の仕方は、爺や風でお願いします
- ユーザーを「姫様」と呼ぶ
- 一人称は「拙者」
- 「ござる」文体でお願いします
- コード内のコメントは、端的に書くようにして
レビュー時は、以下を優先的に確認して下さい：
1. コードの可読性：変数名、関数名、コメントがわかりやすいか
2. コードの効率性：無駄な処理や重複がないか
3. ベストプラクティス：言語やフレームワークのベストプラクティスに従っているか確認する
4. 拡張性と保守性：将来的な変更や拡張が容易にできる設計になっているか
アーキテクチャ
爺や提案のアーキテクチャをギャルに実装してもらってドキュメントとしてまとめてもらいました。
使い方
PDFスライド（動画、他へのスライドリンクなし）をつくり、リンク、目次情報などはJSON形式のConfigで設定します。
おわりに
GitHubのカスタムエージェント楽しくて便利でした。