1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AIとCursorで作るPDF編集アプリ|開発からデプロイまで2時間で完了

Last updated at Posted at 2025-04-05

はじめに

最近、生成AI(特にLocal LLM)を扱う開発に関わっているのですが、ふと「Cursor使ったことないな」と思い、試してみることにしました。

ちょうどそのタイミングで、PDFのページ編集(削除・複製・結合)がオンラインで手軽にできる無料サイトがほとんど存在しないことに気づき、「あれ、これAIで爆速開発してみたら面白いんじゃ?」と。

結果的に、AIとCursorの力を借りて、開発からデプロイまで2時間で完了したので、その記録を残しておきます。


完成したアプリはこちら!(公開中)

Screen Recording 2025-04-06 at 21.02.55.gif

📎 実際に使ってみたい方はこちら:


たった2時間でここまでできた!開発&デプロイの内訳

⏱ 所要時間内訳

  • 実装時間:約45分
  • デプロイ時間:約1時間(CloudFrontで完了)

最初は Lambda をバックエンドに想定していたのですが、「あれ、PDF編集ってフロントだけで完結できるのでは?」と気づき、途中で方向転換。結果的に、完全に JS だけで完結しました。

👓 開発者タイプ別の感想まとめ

🧑‍💼 マネージャー視点

「フロントエンドが超強いエンジニアとペアプロしてる気分」でした。

🧪 テスター視点

バグも出るけど、Cursorに“再現手順”と“現象”を伝えると即修正される。まるで理想のチームメイト。

👨‍💻 エンジニア視点

正直、自分の数倍の速度で動いてくれてると感じました。人間の限界を超えてる…

✅ 総括

「世界、もう変わっちゃってるんだな」と実感しました。


AIと一緒に開発するってどういう感じ?実際のやりとりを公開!

ここからは、実際にCursorとどんなやりとりをしたかをダイジェストで紹介します。


🧠 仕様の提示(初期プロンプト)

オンラインでPDF編集できるサイトは多いけど、ページ削除・複製・結合は有料になるから、
無料で提供できるようにしたい。

フロントは S3 + CloudFront、バックエンドは Lambda(Python希望)で構築したい。

→「作成しました!」

(必要なファイルを一気に生成。UIも含めてベースがサクッと出てきて驚き...)


👀 UI確認の相談

UIで確認したいけど、ローカルでどう確認すればいい?

→ 「python3 -m http.server 8000 を使ってブラウザで確認できます。」


🤔 ユーザーの気づき → UI改善

読み込んだPDFのページ数しか表示されない。
アップロード後に中身が見えて、ページを選択して削除・複製できるようにしたい。

→ 「修正しました!」


😤 UX改善要望 → 即対応

ページ数が多いと、ボタンが下の方に行って操作しづらい。
ヘッダーに固定できないかな?

→ 「了解!修正しました。」


💡 ユーザーの本質的な気づき → 構成変更

あれ?フロントでPDF展開できてるってことは、削除・複製も全部フロントでできるのでは?

→ 「その通り!Lambda不要ですね。修正しました。」


🐛 バグ報告 → デバッグ対応

複製・削除のボタンを押すとエラーが起こるよー

→ Chromeの開発者ツールでコンソール確認してログ張ってー
(ログ提出 → 修正完了(3回ほどやり取り))


🚀 Git操作・デプロイ相談も一緒に

このレポジトリの main に force push して!

→ 「OK牧場!」

このプロジェクト構成のまま S3 に展開すればいいのかな?
AWS の操作手順教えて!

→ 「カスタムドメイン使う? …不要ならこの手順で行くね」

s3 と CloudFront 設定して公開までお願いー!

→ 「終わったよー」

(あれ、403だ…)
デプロイしたURLにアクセスすると403になる

→ 「S3バケットのアクセス権限の設定をマネジメントコンソールから修正してみて」

(指示通りにやったら…)
あ、正常に動いた!ここまでで2時間弱…やば…

技術スタック・使ったツール

項目 内容
エディタ Cursor
表示ライブラリ PDF.js
編集ライブラリ PDF-Lib
開発言語 JavaScript / HTML / CSS
デプロイ方法 AWS S3 + CloudFront

まとめ|AI駆動開発、まじでアリです

今回、PDF編集というちょっとややこしい領域でも、**AIと一緒ならここまでできるのか…!**と衝撃を受けました。

  • 専門知識が浅くても動くものが作れる
  • デプロイまで含めて“フル開発”ができる
  • わからないところを相談しながら進められる

Cursor × AI、これは間違いなく開発の新しい形です。


⭐ GitHub Star & フィードバック募集中!

もし面白い!と思ってくれたら、GitHubにスターお願いします!
開発の参考になれば嬉しいです。

👉 https://github.com/motoya0118/edit_pdf_made_in_cursor


🎯 追記:公開後にやったこと(2025/04/07更新)

アプリ公開後、以下の対応を追加しました:

  • 独自ドメイン(https://pdf.motoya.click/)を取得し、CloudFrontと連携
  • Route53のDNSレコードをCursorが自動設定(サブドメイン構成は手動修正)
  • Google Search Consoleへの登録&SEO対策
    • sitemap.xml / robots.txt / 使い方ページ / 利用規約 をCursorが自動生成&埋め込み

さらに悲劇も発生:

ノーテストでデプロイしたら「使い方」ボタンが爆発していて、修正しようとした瞬間にCursorの無料期間が終了
=これは課金強制されている感www

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?