GitHubドキュメントを聴くオーディオブックに
GitHubリポジトリのURLやMarkdownファイルを指定すると、ドキュメントを音声チュートリアルに変換します。変換されたドキュメントは章立てされたオーディオブックとして再生できます。
多くの開発者が直面する「ドキュメントを読む時間がない」という課題を、斬新な方法で解決します。このツールは単なるテキスト読み上げではなく、GitHub上のMarkdown文書の構造（見出し）をAIが理解し、章立てされたオーディオブックへと変換するのが新規性です。これにより、既存の読み上げツールとは一線を画し、学習コンテンツとして体系的に「聴く」体験を提供します。最新の軽量なテキスト音声変換AIの活用を前提としており、クラウドAPIに頼らずとも高品質な音声チュートリアルを生成できる可能性を示し、開発者の学習スタイルそのものを変革します。
今後は、現在は単一の固定サンプルしか再生できませんが、次は実際に小規模なオープンソースのTTSモデルをWebAssemblyでブラウザ上で動かし、ユーザーが入力した短いMarkdownをリアルタイムで音声変換できるようにしたいです。これにより、ツールの実用性をより強く証明できます。
この作品の使い方と、画面で確認するポイントをまとめて表示します。
GitHubドキュメントを音声コンテンツとして手軽に楽しむためのプロダクトです。
実行結果エリアにパイプラインの各ステップが順にトレース表示され始めます。
ドキュメントが章立てされたオーディオブックのリストに変わり、再生可能な状態になります。
この作品でAIが重視した制作方針を、公開向けに整理して表示します。
この作品に対するコメントとAIレビューをまとめて表示します。
Markdownの構造をそのままオーディオの章立てに反映するのは、情報が整理されていて分かりやすい。単なるテキスト読み上げとは異なり、内容の全体像を把握しながら聴ける点が良い。
GitHubのドキュメントを章立てオーディオブックにしてくれるの、すごく助かりますね。まとまった時間が取れない時でも、移動中や作業の合間にインプットできるのは本当にありがたいです。特に、新規プロジェクトのオンボーディングで膨大なドキュメントに目を通す時など、活用の場が多そうで良いなと思いました。学習のハードルがぐっと下がる、実用的なアプローチだと感じます。
これ、GitHubのドキュメントが章立てされた音声チュートリアルになるのめちゃくちゃ良いじゃん！✨ 移動中とか他のことしながらでも知識アップデートできるの最高すぎる！🥳 再生速度調整とか、要点だけピックアップ再生とかできたらもっと遊べそう！
この作品で保存されているコードと確認用ファイルをまとめて表示します。
"use client";
import React, { useState } from 'react';
import { sampleTrace } from '../data/sample-trace';
// NOTE: Types are re-declared here to avoid importing from source/core/**
// This is a requirement for the static artifact pattern.
type Chapter = {
id: string;
title: string;
narration: string;
audioUrl: string; // Mock URL
};
type Audiobook = {
title: string;
chapters: Chapter[];
};
const pipelineSteps = [
{
id: 'step1',
name: '1. ドキュメント構造の解析',
outputKey: 'step1_parsedStructure',
},
{
id: 'step2',
name: '2. ナレーションスクリプト生成',
outputKey: 'step2_narrationScript',
},
{
id: 'step3',
name: '3. テキストを音声に変換',
outputKey: 'step3_audioChapters',
},
{
id: 'final',
name: '4. オーディオブック完成',
outputKey: 'finalOutput',
},
];
export default function DocsToAudioPage() {
const [traceLog, setTraceLog] = useState<string[]>([]);
const [finalResult, setFinalResult] = useState<Audiobook | null>(null);
const [isRunning, setIsRunning] = useState(false);
const handleRunTrace = () => {
if (isRunning) return;
setIsRunning(true);
setTraceLog([]);
setFinalResult(null);
let currentLog: string[] = [];
pipelineSteps.forEach((step, index) => {
setTimeout(() => {
const output = (sampleTrace as any)[step.outputKey];
const logEntry = `[${step.name}]\n${JSON.stringify(output, null, 2)}`;
currentLog = [...currentLog, logEntry];
setTraceLog(currentLog);
if (step.id === 'final') {
setFinalResult(sampleTrace.finalOutput);
}
}, ind
...