はじめに
お疲れ様です。
今回の個人開発では、Qiitaの記事を Markdown / PDF として保存できるツール「Qiita Downloader」 を開発しました。
Node.js をベースに、
Qiita 特有のレイアウトや装飾をできる限り再現した PDF を生成できるようにしています。
開発を通して、
「なぜ Qiita 記事を Markdown から PDF に変換するのが難しいのか」
といった、普段はあまり意識しない技術的な背景まで深く理解することができました。
開発の背景
本アプリの開発は、
「Qiita の記事をまとめてローカルに保存できる仕組みが欲しい」
という相談を受けたことがきっかけでした。
確かに、私自身技術記事を読む際、Qiita を利用することが多い一方で、
- オフラインで読みたい
- あとから見返せるように PDF で保存したい
- Markdown として手元に残したい
と改めて感じました。
既存の Web ページ保存や PDF 化ツールも試しましたが、
- レイアウトが崩れる
- コードブロックの装飾が消える
- YouTube の埋め込みが真っ黒になる
- Qiita 特有の装飾（リスト・引用・アラートなど）が再現されない
といった問題があり、実用的とは言えない状態でした。
そこで、
Qiita の記事構造を理解した上で、専用のダウンロードツールを作ろう
と考え、今回の個人開発に取り組みました。
アプリ概要
Qiita Downloader は、Qiita API を利用して記事一覧・本文・タグ・日付情報を取得し、
Markdown / PDF 形式で一括保存できるバックアップツールです。
Qiita API で記事データを取得し、
markdown-it で Markdown を HTML に変換、
Playwright を使ってブラウザ上で描画した状態を PDF として保存しています。
ユーザー名と API トークンを入力すると、Qiita API から記事を取得し、
一覧画面から必要な記事を選択してまとめてダウンロードできます。
Qiita に標準の一括ダウンロード機能が存在しない課題を解決し、
技術記事の保管や移行をシンプルかつ高速に行えることを目的としています。
設定した MVP
MVP1：記事一覧取得・Markdownダウンロード
- Qiita ID と API トークンを画面で設定
- 記事一覧を表示
- 各記事を個別に
.md形式でダウンロード
MVP2：チェック付き一括ダウンロード
- 記事ごとにチェックボックスを追加
- 選択した記事をまとめてダウンロード
MVP3：PDFダウンロード（Qiita風スタイル）
- Markdown を HTML に変換し PDF を生成
- 見出し、コードブロック、リスト、画像、埋め込みなどを再現
MVP4：最終仕上げ
- UI の整備
-
.md / .pdf両形式での一括ダウンロードを安定動作させる
MVP を段階的に設定することで、
常に「次に何を実装するか」を意識しながら開発を進めることができました。
動作イメージ
- Qiita の記事 URL を入力
- Markdown / PDF を選択して実行
- Qiita の見た目に近い PDF が生成される
コードブロックやリスト、引用なども極力再現し、
あとから読んでも違和感の少ない出力を目指しました。
ホーム画面
アプリデモ画像
Qiita のユーザー名と API トークンを入力すると、そのアカウントの記事が一覧で自動取得されます。記事左側のチェックボックスを選択すれば、複数の記事を Markdown / PDF で一括ダウンロード可能。
使用した技術
| 分類 | 使用技術 / 内容 |
|---|---|
| フロントエンド | Next.js / React |
| 言語 | TypeScript |
| UI / スタイリング | Tailwind CSS / daisyUI |
| 記事取得 | Qiita API |
| Markdown変換 | markdown-it |
| シンタックスハイライト | highlight.js |
| PDF生成 | Playwright / html2pdf |
| ホスティング | Vercel |
| CI/CD | GitHub Actions |
| リポジトリ管理 | GitHub |
アーキテクチャ図
開発で苦労したポイントと解決策
1. Qiita の PR (広告などの)要素が PDF に混ざる問題
Qiita の記事ページには、
初期 HTML には存在せず、JavaScript 実行後に挿入される要素 が存在します。
そのため、ページ読み込み直後に DOM を操作しても、
後から広告やおすすめ枠といった PR 要素が追加され、PDF に混ざってしまう問題が発生しました。
これに対しては、
- Playwright 側で描画完了タイミングを制御
- 特定のセレクタ出現後に DOM 操作を実行
することで対応しました。
2. Qiita 特有の装飾・CSS 再現
Qiita には独自の装飾が多く存在します。
- リストの余白
- コードブロックの背景
- 引用・注意書き風スタイル
これらを再現するために、Qiita の HTML 構造を確認し、
PDF 用に最適化した CSS を作成しました。
Web 表示用と PDF 用で CSS を分けることで、表示崩れを最小限に抑えています。
成長したポイント・学び
1. 外部サービスを扱う難しさを知った
自分の管理外の DOM 構造や仕様変更を前提に設計する重要性を学びました。
2. 挙動を理解した実装の大切さ
「とりあえず動く」ではなく、
なぜ動くのかを理解した上で実装する姿勢が身についたと感じています。
感想・おわりに
最初は単純な PDF 化ツールを想定していましたが、
実際には DOM やレンダリングを深く理解する必要があり、想像以上に奥が深いテーマでした。
今後は、
- Zenn など他サービスへの対応
- Chrome 拡張としての提供
なども検討しています。
最後まで読んでいただき、ありがとうございました。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼
https://projisou.jp