🦄
Bolt.newを使って半日でOSSのグラフィックレコーディング共有プラットフォーム「GRAPHIA」を作った話

2025/03/11に公開
自然言語処理
こんにちは！今回は、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に伝え、初期のプロジェクト構造を設定しました。

 ステップ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

 開発の成果と感想たった半日という短時間で、フル機能を備えたグラフィックレコーディング共有プラットフォーム「GRAPHIA」を開発することができました。Bolt.newを使用することで、以下のメリットを実感しました：

開発時間の大幅な短縮：プログラミングの知識がなくても、自然言語での指示だけで短時間での開発が可能

エラー処理の自動化：Boltが自動的にエラーを検出し、修正案を提案

デプロイの簡素化：ワンクリックでNetlifyにデプロイ可能

柔軟なカスタマイズ：開発中に要件が変更されても、簡単に対応可能
特に印象的だったのは、エラーが発生した際のBoltの対応です。エラーメッセージを解析し、適切な修正案を提案してくれることで、開発プロセスが大幅にスムーズになりました。

 まとめBolt.newを使用することで、プログラミングの知識がなくても、短時間で実用的なWebアプリケーションを開発することができます。今回の「GRAPHIA」開発を通じて、AIがプログラミングの世界をどれだけ変革しているかを実感しました。
今後は、グラフィックレコーディングの表示機能の強化やユーザーエンゲージメントの向上など、さらに機能を拡張していきたいと考えています。Bolt.newのようなAIツールがますます進化することで、アプリ開発がより身近なものになることに期待しています。
プログラミングの知識がなくても、アイデアを形にすることができる時代が来ています。ぜひみなさんもBolt.newを使って、自分のアイデアをカタチにしてみてください！
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Bolt.newとは？

「GRAPHIA」開発の流れ

ステップ1：要件の定義と初期設定

ステップ2：データベースの設定

ステップ3：認証システムの実装

ステップ4：UI コンポーネントの作成

ステップ5：エラー処理とバグ修正

ステップ6：デプロイ

開発の成果と感想

まとめ

Discussion
