Tiptap × Claude APIで「ブロックタイプを保持したまま」選択範囲を置換する
出典: Zenn (Claude topic)
Hiroba による自動要約
note エディタで AI に文章の校正を依頼する際、見出しや引用などのブロック構造が失われる問題を解決した実装事例。Tsumugu という Next.js + Tiptap + Claude API のエディタで、選択範囲のブロック型情報をスナップショット保存し、置換時に元の構造を復元する手法を解説。
出典・元記事
Zenn (Claude topic) の記事を Hiroba が自動要約しました。元記事を読む
読んで良かったら、シェアしてみてください。
同じタグの記事が他に 3962 件あります。
関連する記事
同じタグの記事
Claude APIで毎晩CSSアニメーションが増えていくサイトを作った
Qiitan8n + Claude APIを組み合わせて、毎晩0時に自動生成されるCSSアニメーションを蓄積するギャラリーサイトを実装。Claudeで「テーマ生成」と「アニメーション作成」を2段階実行し、GitHubの JSON に保存して Pages で自動反映させる仕組みを紹介。
Next.js 16 + Supabase + Claude API で AI学習 SaaS を 2 日で作った話
ZennCodeSensei（ユーザーのコードを教材にする AI 学習プラットフォーム）を 2 日間で構築した個人開発事例。Next.js 16、Supabase、Claude API を組み合わせ、15 コース・188 レッスン・95 冊の技術書知識を内蔵し、GitHub リポジトリや手動ペースト したコードを題材に Claude が技術概念を解説。実装スケジュール、技術選定基準、プロンプト階層化によるコスト削減、著作権対応の設計判断を詳細に共有。
「Vibe Coding」はもう卒業！プラグイン「Superpowers」でClaude Codeに開発SOP を導入する
QiitaClaude Code で AI がいきなりコードを書く「Vibe Coding」の問題を解決するオープンソースプラグイン「Superpowers」を紹介。仕様の明確化・設計・テスト駆動開発・レビューを強制する 7 フェーズパイプラインにより、手戻りの削減と品質の安定化を実現する。
