この記事は、noteで公開している記事の無料部分を掲載しています。プロンプト全文と導入手順は、noteの有料部分（500円）でお読みいただけます。
ギターを弾いていると、画面をスクロールするために手を止めたくない場面があります。U-FRETでコードを見ながら練習するときも、自分のペースで画面が動いてくれたら便利だと思っていました。
そこで、自分の練習用に、U-FRETの表示とスクロールを調整するChrome拡張機能「U-FRET Customizer」を作りました。制作に使ったのはChatGPTのCodex、モデルはGPT-6 Astraです。
この記事は、その作り方を残しておくための個人的な備忘録です。前半では、どんなツールで、操作するとどうなるのかを紹介します。後半の有料部分（500円）には、再生成に使った最終プロンプト全文と導入手順をまとめています。
【悪用厳禁】個人の練習用として扱ってください
この記事は、U-FRETの運営とは関係のない、非公式の個人制作の記録です。U-FRETが提供している楽譜や歌詞そのものを販売・配布する記事ではありません。
楽譜・歌詞の無断転載や再販売、大量取得、第三者への再配布、サービスに負荷をかける使い方、認証や有料機能の回避を目的にした利用はしないでください。作成したツールは、自分が利用できるページを自分の端末で扱う、個人の練習の範囲にとどめてほしいと思っています。
「個人利用」と書けば何でも許される、という趣旨ではありません。利用にあたってはサービスの利用条件を確認し、U-FRETや権利者の方々への配慮をお願いします。
どんなツールなのか
ChromeでU-FRETの曲ページを開くと、自作の小さな「演奏サポート」パネルを表示します。主な機能は、自動スクロール、速度調節、表示の整理、そして読み込み済みの内容を専用の画面へ再構成することです。
操作は次のようなイメージです。
- U-FRETで練習したい曲のページを開く。
- 「スクロール開始」を押すか、楽譜や余白の通常の場所をクリックする。
- 画面が下へ少しずつ動く。もう一度クリックすると停止する。
- 途中で手動スクロールしても自動スクロールは止まらず、移動した位置から続く。
- 速度スライダーで、自分が弾きやすい速さに調整する。
ボタンやリンク、入力欄などの操作は、ページクリックによる開始・停止の対象から外しています。文字を選択しているときも切り替えません。Escキーや別タブへの切り替えでも停止できます。
J-POPの練習を想定して、1倍を約5分に
私が普段弾くJ-POPの練習を想定し、基準の1倍では、ページ全体のスクロール可能な距離を約5分で進むようにしました。
速度は0.0～4.0倍、0.1刻みです。0はその場で一時停止。正の値へ戻すと続きます。逆スクロールはしません。画面構成が変わらず、途中で止めない場合の目安は、0.5倍なら約10分、1倍なら約5分、2倍なら約2分30秒です。
ここは作る途中で修正したポイントでもあります。「いまいる位置から残りを5分で進む」のではなく、あくまでページ全体の移動距離が基準です。たとえば半分の位置から1倍で始めれば、残りの移動時間はおおよそ2分30秒になります。
曲の長さやBPMを解析して、音源に自動で同期する機能ではありません。最初は1倍で動かし、曲や演奏のペースに合わせて自分で調整する、という使い方です。
「このページを再レンダリング」で、練習用の別画面へ
Chromeの拡張機能アイコンを押すと、「このページを再レンダリング」というボタンが出ます。これを実行すると、表示中の楽譜から必要な内容を取り出し、専用タブに組み直します。元の曲ページは残ります。
専用画面では、コードと歌詞のまとまりを横に並べ、幅に合わせて折り返します。自動スクロールと速度調節に加え、印刷・PDF保存、データ消去の操作もできます。印刷用のレイアウトはA4を想定し、行間や余白を詰めています。
処理の中心は、すでにブラウザーが読み込んだ内容です。拡張機能が楽譜を追加で取得したり、外部へ送信したりする仕組みにはしていません。読み込み済み画像も、変換できるものだけをローカル表示に使います。未読込の画像やブラウザーの制約で変換できない画像は、取得し直さず省略します。
ただし、元ページ自身の通信まで止めるものではありません。広告表示の整理は、広告通信の全面遮断や「アクセスログが残らないこと」とは別です。また、固定の条件で要素を除外するため、楽譜内の一部の広告文字などが残る場合があります。
楽譜をため込むためのツールにはしなかった
専用タブに受け渡した内容は、受け取り後には表示中のページ内だけに保持する設計です。専用タブを再読み込みすると楽譜は消え、「データを消去」ボタンでも消せます。もう一度表示するには、元の曲ページから再レンダリングします。
単に「localStorageだから再読み込みで消える」という話ではありません。受け渡しに使った一時保存データを明示的に削除する仕組みです。受け渡しが完了しなかったデータなど、例外時の制約は残っています。元ページ側の表示・速度設定は、楽譜とは別に保存します。
なぜ、500円の有料記事にするのか
理由は二つあります。一つは、私自身の記録を一か所だけに置かず、分散して残しておきたいからです。手元のファイルや自分用のリポジトリに加え、作り方を文章でも残しておけば、後から作り直すときの手がかりになります。
もう一つは、広まり方を少し抑えたいからです。U-FRETには日頃お世話になっています。自分には便利でも、同じ方法が急激に広まれば、サービスの運営に影響する可能性があります。
そこで、作成に使ったプロンプトは500円の有料部分に置くことにしました。必要な人が内容と前提を読んだうえで手に取るための、小さな調整弁にしたいと考えています。有料化で拡散を完全に防げるわけではありませんが、広く無条件に配る形は避けたい、という私の意図です。
CDの話にたとえるなら、私が残したいのは「自分で扱うための作り方の記録」であって、「コピーしたCDを売ること」ではありません。このたとえは法律上の同一性を主張するものではなく、この記事でも楽譜や歌詞そのものを商品にしない、という線引きの説明です。
本当にこのプロンプトから作れるのか、10回確かめた
一度うまく作れただけでは、後から同じプロンプトを使って再現できるのか不安が残りました。そこで、現在の自分用ツールを比較基準にして、スクラッチから作り直す検証を行いました。
各回で新しい実装用エージェントを起動し、元の会話を引き継がせず、同じ仕様プロンプトを渡しました。元コードや過去の生成物、採点用テストを参照しないよう指示し、別々のフォルダーにコードと自作テストを作らせました。完成後に、共通のテストで元のツールと答え合わせしています。
最初から10回全部成功したわけではありません。ボタンの文言、CSSの優先順位、設定の保存方法、説明文とボタンの並び順などに差が出ました。その原因をプロンプトへ反映し、版を変えるたびに検証をやり直しました。
3回の修正を経た最終版では、同じプロンプトによる10回の独立生成が、10回とも合格しました。機能・設定・例外条件の共通テストに加え、アイコンメニュー、専用ビューアー、元ページパネルの3画面を比較し、10回分、計30組の画像が一致しています。採点後にコードを手直しして合格扱いにしたものではありません。
ここでの「1回」は、一つのプロンプトを受けたエージェントが、実装と自己テストを行う一連の作業です。AIが一切の確認なしに、一発の回答だけで必ず完成品を出すという意味ではありません。
また、同じ環境のテスト用の架空楽譜と、ブラウザーの保存機能を模した仕組みを使った検証です。全曲・全広告・すべての画面幅や、実際の権限設定画面での動作を保証するものではありません。別のモデルや将来の生成でも必ず10回成功する、という保証でもありません。
購入前に知っておいてほしいこと
有料部分は、完成済みの拡張機能をそのまま販売するものではありません。私が作成・再生成に使ったプロンプト全文と、自分で導入・確認するための手順です。Codexの利用環境と、PC版Chromeを使って自分で作業する前提になります。AIの利用料金は記事代に含みません。
私用の現行版を再現するため、既知の制約も残しています。一部の広告文字が残る場合、設定の読み書き失敗を十分に処理できない場合、エラー後の処理まで失敗すると実行ボタンが無効のままになる場合があります。一時データの日時チェックにも弱いところがあります。10回の合格は「元の版と一致した」という意味で、不具合がゼロという意味ではありません。
U-FRETの画面構成やChrome、AIモデルの変更によって、将来は調整が必要になる可能性もあります。これらを含めて、自分用ツールを作る過程の記録として読んでいただければと思います。
ここまでで、ツールの概要・使い方・検証結果・制約を紹介しました。以下の有料部分に、実際に使ったプロンプトと導入手順を置きます。
続きはnoteでお読みいただけます
実際に使った最終プロンプト全文と導入手順は、noteの有料部分（500円）に掲載しています。購入前に、上記の利用上の前提と制約をご確認ください。
購入・決済・有料部分の閲覧はnoteで行います。
コメント