こんにちは！今回は、AIコーディングツール「Bolt.new」を使って、たった半日でグラフィックレコーディング共有プラットフォーム「GRAPHIA」を開発した過程をご紹介します。プログラミング知識がなくても、自然言語でAIに指示を出すだけでWebアプリを構築できるBolt.newの威力を実感いただける事例です。
Bolt.newとは？
まず最初に、Bolt.newについて簡単に説明します。Bolt.newはStackBlitz社が開発したAIを活用したアプリ開発ツールです。自然言語での指示だけでウェブアプリケーションを構築できる革新的なプラットフォームです。
主な特徴は以下の通りです：
- 自然言語だけでフルスタック開発が可能：プログラミング知識がなくても、言葉で指示するだけでコードを生成
- デプロイもワンクリックで簡単：開発したアプリをすぐにインターネット上に公開可能
- 多種多様なフレームワークをサポート：React、Vue、Angularなど人気のフレームワークに対応
- バグの自動修正機能：AIがコード内のバグを検出し修正してくれる
- 参考画像の入力にも対応：画像を使った指示も可能
料金体系は個人利用向けの無料プランから、本格的な開発向けの有料プランまであります。今回の開発では無料プランを使用しました。
「GRAPHIA」開発の流れ
それでは、実際の開発過程を見ていきましょう。Boltのログから、開発の流れを追ってみます。
ステップ1：要件の定義と初期設定
最初に、グラフィックレコーディング共有プラットフォーム「GRAPHIA」の要件を定義しました。主な要件は以下の通りです：
- ユーザー認証システム（登録・ログイン・プロフィール管理）
- HTMLファイルの管理（アップロード、プレビュー、検証）
- ギャラリー機能（グリッド表示、検索、フィルタリング）
- ビューカウンターとランキング機能
- データベース（ユーザー、ファイル、ビュー、ランキング）
- タグ/カテゴリ機能、ソーシャル機能（いいね、コメント）
これらの要件をBolt.newに伝え、初期のプロジェクト構造を設定しました。
Create a web application for sharing HTML files with the following requirements:
User Authentication System:
Implement user registration with email and password
Include password reset functionality via email
Secure login/logout system
User profile management
HTML File Management:
Allow users to upload HTML files with titles and descriptions
Support preview functionality for uploaded HTML files
Implement file validation to ensure only valid HTML files are uploaded
Store files securely with proper access controls
Gallery Features:
Display uploaded HTML files in a grid/gallery layout
Include thumbnails or previews of HTML content
Add search and filter functionality
Implement pagination for better performance
Allow sorting by date, popularity, and title
View Counter and Rankings:
Track view counts for each HTML file
Display real-time view statistics
Create a ranking system based on views
Show trending/popular HTML files
Implement daily/weekly/monthly ranking boards
Database Requirements:
Use SQLite as the database
Create necessary tables for users, files, views, and rankings
Implement proper indexing for performance
Ensure data integrity and relationships
Additional Features:
Add tags/categories for HTML files
Include social features (likes, comments)
Implement sharing functionality
Add responsive design for mobile devices
Technical Stack:
Backend: Your preferred language with SQLite support
Frontend: HTML, CSS, JavaScript
Database: SQLite
Authentication: Session-based or JWT
Please implement proper security measures and error handling throughout the application.ステップ2：データベースの設定
最初はSQLiteをデータベースとして選択しましたが、ブラウザ環境での互換性の問題が発生したため、Supabaseに切り替えることにしました。
-- Create tables
create table html_files (
id uuid primary key default gen_random_uuid(),
title text not null,
description text,
content text not null,
user_id uuid not null references auth.users(id),
views integer default 0,
tags text[],
created_at timestamp with time zone default now()
);
create table comments (
id uuid primary key default gen_random_uuid(),
html_file_id uuid not null references html_files(id) on delete cascade,
user_id uuid not null references auth.users(id),
content text not null,
created_at timestamp with time zone default now()
);
create table likes (
id uuid primary key default gen_random_uuid(),
html_file_id uuid not null references html_files(id) on delete cascade,
user_id uuid not null references auth.users(id),
created_at timestamp with time zone default now(),
unique(html_file_id, user_id)
);また、ビューカウンターを増加させる関数やRow Level Security (RLS) ポリシーも設定して、セキュリティを確保しました。
ステップ3：認証システムの実装
次に、ユーザー認証システムを実装しました。Supabaseの認証機能を利用して、ユーザー登録、ログイン、プロフィール管理の機能を追加しました。
途中でエラーが発生しましたが、Boltが自動的に修正案を提案してくれたため、スムーズに進めることができました。例えば、ユーザー登録時にプロフィールが自動的に作成されるようにトリガー関数を設定する必要がありました：
CREATE OR REPLACE FUNCTION public.handle_new_user()
RETURNS TRIGGER AS $$
BEGIN
INSERT INTO public.profiles (id, username)
VALUES (NEW.id, COALESCE(NEW.email, 'user' || NEW.id));
RETURN NEW;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;
CREATE TRIGGER on_auth_user_created
AFTER INSERT ON auth.users
FOR EACH ROW EXECUTE FUNCTION public.handle_new_user();ステップ4：UI コンポーネントの作成
認証システムとデータベースが設定できたら、次にUIコンポーネントを作成しました。Reactを使用して、以下の主要なコンポーネントを作成しました：
- ホームページ
- ナビゲーションバー
- 認証フォーム（登録・ログイン）
- ファイルアップロードフォーム
- ギャラリービュー
- ファイル詳細ページ
- プロフィールページ
特に、ホームページのデザインはシンプルながらも魅力的なものになるようBoltに指示しました。また、GRAPHIAのアイコンとファビコンは太陽のデザインに変更し、ナビゲーションバーにはゆっくりと回転するアニメーションを追加しました。
ステップ5：エラー処理とバグ修正
開発中にいくつかのエラーが発生しましたが、Boltが自動的に問題を特定し修正案を提案してくれました。主なエラーは以下の通りでした：
- CORSエラー（異なるオリジンからのリクエスト制限）
- フェッチエラー（ネットワーク接続の問題）
- 認証初期化エラー
- データベース接続エラー
Boltはこれらのエラーに対して、リトライロジックの改善、エラーハンドリングの強化、適切なCORSヘッダーの設定などの修正を提案してくれました。
ステップ6：デプロイ
最後に、完成したアプリケーションをNetlifyにデプロイしました。Boltのワンクリック機能を使用することで、複雑な設定なしでデプロイを完了させることができました。
デプロイされたアプリケーションは以下のURLで公開されています：
https://jade-hotteok-322356.netlify.app
グラレコプロンプトで作成した大量のHTMLを管理するアプリをBoltで作成しました！！！
デモURLはこちら：https://t.co/6PcrrrsyXG https://t.co/QCCysJZtYT pic.twitter.com/DeoQ6y23cF— Maki@Sunwood AI Labs. (@hAru_mAki_ch) March 8, 2025
開発の成果と感想
たった半日という短時間で、フル機能を備えたグラフィックレコーディング共有プラットフォーム「GRAPHIA」を開発することができました。Bolt.newを使用することで、以下のメリットを実感しました：
- 開発時間の大幅な短縮：プログラミングの知識がなくても、自然言語での指示だけで短時間での開発が可能
- エラー処理の自動化：Boltが自動的にエラーを検出し、修正案を提案
- デプロイの簡素化：ワンクリックでNetlifyにデプロイ可能
- 柔軟なカスタマイズ：開発中に要件が変更されても、簡単に対応可能
特に印象的だったのは、エラーが発生した際のBoltの対応です。エラーメッセージを解析し、適切な修正案を提案してくれることで、開発プロセスが大幅にスムーズになりました。
まとめ
Bolt.newを使用することで、プログラミングの知識がなくても、短時間で実用的なWebアプリケーションを開発することができます。今回の「GRAPHIA」開発を通じて、AIがプログラミングの世界をどれだけ変革しているかを実感しました。
今後は、グラフィックレコーディングの表示機能の強化やユーザーエンゲージメントの向上など、さらに機能を拡張していきたいと考えています。Bolt.newのようなAIツールがますます進化することで、アプリ開発がより身近なものになることに期待しています。
プログラミングの知識がなくても、アイデアを形にすることができる時代が来ています。ぜひみなさんもBolt.newを使って、自分のアイデアをカタチにしてみてください！
コメント