要件：グラフィカルな文書をAIに作成させたい。
なお、AIが出力したレポートをそのまま提出するのではなく
修正する必要がある。完成したらPDFで納品する。
推奨AI：Claude 4 Sonnet
非推奨AI：
○Gemini 2.5 proは出力レポートに参照したファイル名が頻繁に
出てきて読者に優しくない。
（プロンプトでファイル名を出さないよう指定する必要がある）
○ChatGPT 4o（今回は無課金）
分析できなかった。
どういう形で出力したほうがいいか、検討しました。
まずは、グラフが表示できて、編集できるもの。
PDF：基本的に編集できない
WORDやGoogleドキュメント：綺麗なフォーマットの文書がでない。グラフィカルでない素の文書が出力された。
MarkDown＋SVG画像：現時点（2025/05/24）最強のClaude 4 Sonnetでも正確なSVG画像が生成できない。
MarkDown＋QuickChart.io：Notionで表示すると要件をクリアした。なお、QuickChart.ioの短縮URL出力を有効にした場合、URLは2、3日で無効になるので注意。元の長いURLはグラフの構成情報を持っているので呼び出す都度生成される。
HTML＋CSS：グラフィカルなレポートができあがるが、グラフィカルすぎて提出する文書としては不適格。
HTML＋Chart.js：なぜかChart.jsで生成されるグラフが表示されない
React + Recharts：出力されたレポートは見栄えが良かったが、PDFと同じく編集不可
HTMLの出力はWYSIWYGで編集したかったので、調べました。webアプリはどこも.htmlのファイルを読み込む機能がなかったです。import機能もありませんでした。みな新規作成から作るようになっていたので断念。
NotionでHTMLをimportできますがCSSが対応してません。
SeaMonkeyのcomposerというHTMLエディタもCSSには対応してません。
Visual Studio Codeの拡張機能Live previewを入れて、プレビュー画面を見ながら、タグを手打ちする方法もありますが、HTML知らないと敷居が高いです。それに、全くWYSIWYGでない。
いろいろ検討した結果、以下の方法が一番要望に叶っていると判断しました。
Claude 4 Sonnetで、分析したいファイルを添付し、プロンプトに「MarkDown＋QuickChart.ioで出力してください」と入れる。なお、アーティファクトで出力して貰うがClaude 4で自動でアーティファクトになるので気にしなくて良い。出力が完了したら「MarkDown形式でダウンロード」する。mdファイルをNotion（デスクトップアプリとWebアプリ両方がある）にimportする。これで、グラフを表示しながらテキストが編集できるようなる。
編集終わったら、PDFにエクスポートして提出。
はい、これでOKです。いろいろ調べたので2日ほと掛かりました。
ご参考まで。
コメント