クラウダブル：AIインテリジェンスを使ったウェブサイトの生成と展開

Claudableはオープンソースのウェブサイトビルダーです。Claude CodeやCursor AgentのようなAIコーディング・インテリジェンスを接続し、ユーザーは簡単なコマンドを発行するだけでウェブ・アプリケーションを作成、開発、デプロイできる。ユーザーは、「ダークモード付きのタスク管理アプリが欲しい」など、欲しいものを自然言語で記述するだけで、ClaudableはAIインテリジェンスを使って適切なコードを生成し、ライブプレビューを提供する。このツールはNext.jsフレームワークをベースにしており、ワンクリックでデプロイできるVercel、データベース管理のSupabase、バージョン管理のGitHubを統合している。このプロジェクトは、ユーザーが複雑な環境設定やAPIキーの問題に対処することなく、プロフェッショナルなウェブアプリケーションを無料で構築・公開できるようにすることで、開発プロセスを簡素化することを目標に設計されている。

機能一覧

• AIインテリジェント・ボディ・ドライバー開発: AIコーディング・インテリジェンスとしてClaude CodeとCursor CLIの接続をサポートし、ユーザーの自然言語指示に基づいて本番環境で利用可能なNext.jsコードを生成します。
• インスタント・プレビューAIがアプリケーションを構築する際、ユーザーはホット・リロード機能により、コード変更の効果をリアルタイムで確認することができます。
• ワンクリック配備VercelはVercelと統合されており、ユーザーは複雑なデプロイ設定をすることなく、ワンクリックで開発したアプリケーションをオンラインで公開することができます。
• データベース統合Supabaseへの接続をサポートし、プロダクショングレードのPostgreSQLデータベースや、アプリケーションのユーザー認証機能を迅速に設定できます。
• 自動バージョン管理GitHubとの統合により、プロジェクトのバージョン管理と継続的デプロイメントを自動的に設定。
• ゼロ・コンフィギュレーション・スタートアップサンドボックス環境、APIキー、データベースを手動で設定する必要がないため、初期設定プロセスが簡素化され、ユーザーはアプリケーション開発に専念できます。
• 自動バグ修正このシステムは、アプリケーションのエラーを自動的に検出し、AIインテリジェンスを使って修正しようとする。
• モダンUIの生成Tailwind CSSやshadcn/uiのような人気のあるフロントエンドライブラリを使用して、美しいユーザーインターフェースを生成します。

ヘルプの使用

Claudableは、AIプログラミング・インテリジェンスのパワーと直感的なアプリ構築体験を組み合わせることで、開発者もカジュアルユーザーも簡単に使い始めることができます。以下では、Claudableのインストール方法と使用方法について詳しく説明します。

事前準備

Claudableのインストールを開始する前に、以下のソフトウェアとツールがコンピュータにインストールされていることを確認してください：

• Node.jsバージョンは18以上。
• パイソンバージョンは3.10以上。
• ギットプロジェクトのコードリポジトリをクローンします。
• AIにコード化された知能Claude CodeまたはCursor CLIをインストールしてログインすることを強くお勧めします。Claude Code最高の体験のために。

AIコード化された知能のインストール

お好みに合わせてインストールすることができる：

1.クロード・コード
Node.jsのパッケージマネージャであるnpm経由でグローバルにインストールする：

npm install -g @anthropic-ai/claude-code

インストールが完了したら、ターミナルでクロードアカウントにログインします：

claude

次に、プロンプトに従ってコマンドを入力する。 /login ログインを完了する。

2.カーソルCLI
クロード・コードより若干遅いが、複雑なコーディング作業を扱う場合にはより強力だ。
インストールにはcurlコマンドを使用する：

curl https://cursor.com/install -fsS | bash

インストール後、同じログインが必要です。
カーソル・エージェント・ログイン

### **快速启动**
按照以下步骤，你可以在几分钟内在你本地电脑上运行Claudable。
**第一步：克隆代码仓库**
打开终端，使用`git`命令将Claudable的源代码克隆到本地：
```shell
git clone https://github.com/opactorai/Claudable.git

ステップ2：プロジェクト・カタログの入力

cd Claudable

ステップ 3: 依存関係のインストール
プロジェクトのルート・ディレクトリで実行するnpm installコマンドを実行します。このコマンドは、以下のような必要な設定をすべて自動化する：

• フロントエンドとバックエンドのNode.js依存パッケージをインストールします。
• バックエンドAPIディレクトリ apps/api/ の下にPython仮想環境を作成する。 .venv.
• 利用するuvもしかしたらpipPythonの依存関係をすべてインストールする。
• 利用可能なポートを自動的に検出し.env環境プロファイル。
• 1本目は data/ ディレクトリにSQLiteデータベースファイルを自動作成する cc.db.

npm install

ステップ4：開発サーバーの起動
インストールが完了したらdevコマンドでフロントエンドとバックエンドの両サーバーを起動する：

npm run dev

起動に成功すると、ターミナルにアプリケーションが起動していることを示す以下のメッセージが表示されます：

• フロントエンドアプリケーション: http://localhost:3000
• バックエンドAPIサーバー: http://localhost:8080
• APIドキュメント: http://localhost:8080/docs

注：デフォルトのポート（3000と8080）がすでに使用されている場合、システムは自動的に検出し、次に使用可能なポートを割り当てます。

使用方法

Claudableを立ち上げて実行すれば、アプリの構築を開始する準備が整います。

1. AIインテリゲンチアをつなぐClaude Code または Cursor CLI をインストールし、ログインしていることを確認してください。
2. プロジェクトについてClaudableのユーザーインターフェイスでは、作りたいアプリケーションを自然言語で明確に表現してください。例えば、"ユーザーが記事を投稿したりコメントしたりできるブログプラットフォームを作る"。
3. AIがコードを生成するのを見る説明を送信すると、AIインテリジェンスが要件の分析を開始し、プロジェクト構造とコードを自動的に生成します。
4. リアルタイムのプレビューと反復AIが動作している間、ブラウザはhttp://localhost:3000アプリケーション構築の進捗状況をリアルタイムで確認できます。結果に満足できない場合は、いつでも新しい指示を提案し、修正と反復を行うことができます。
5. 配備開始アプリに満足したら、統合されたVercel機能を使ってワンクリックでオンラインにデプロイできます。

サービス統合

デプロイとデータベース機能については、GitHub、Vercel、Supabaseに接続する必要がある。

• GitHubとの統合::
  1. GitHubの個人設定ページに移動し、新しい個人アクセスを作成する。 トークン (クラシック）。
  2. ダニ repo 権限の範囲
  3. クローダブルの设置 -> 服务集成 -> GitHub生成したトークンを入力し、コードリポジトリを作成または接続します。
• ヴェルセル統合::
  1. Vercelのアカウント設定ページでTokenを作成する。
  2. クローダブルの设置 -> 服务集成 -> Vercelトークンを入力し、デプロイ用の新規プロジェクトを作成する。
• スーパベースの統合::
  1. Supabaseのダッシュボードに移動し、プロジェクト設定のAPI認証情報を見つけてください。
  2. 以下のものをご用意ください。项目URLそしてAnon Key(クライアントの公開鍵）とService Role Key(サーバー側の秘密鍵の場合）。
  3. この情報をClaudableのSupabase統合設定に入力してください。

アプリケーションシナリオ

1. ラピッドプロトタイピング
   製品アイデアを素早く検証したい起業家やプロダクトマネージャーにとって、Claudableは、デモや初期のユーザーフィードバックを収集するための簡単なテキスト記述で、インタラクティブなアプリのプロトタイプを数分で生成するために使用することができます。
2. フロントエンド開発の自動化
   フロントエンド開発者はClaudableを使って、プロジェクトフレームワークの構築、UIコンポーネントの生成、基本的なページの作成などの反復的な開発作業を自動化することができます。これにより、複雑なビジネスロジックやユーザーエクスペリエンスの最適化により多くの労力を割くことができます。
3. ウェブ開発を学ぶ
   プログラミング初心者にとって、Claudableは素晴らしい学習ツールだ。AIが自然言語の要件を実際のコードに変換する様子を観察することで、初心者は最新のウェブアプリケーションのアーキテクチャと開発プロセスをより直感的に理解することができる。
4. ノーコード／ローコード開発
   デザイナーやマーケティング担当者など、深いプログラミングの知識がないユーザーでも、Claudableを使えば、個人のポートフォリオサイトやイベントのランディングページなど、簡単なウェブサイトやアプリケーションを独自に構築することができます。

品質保証

1. クラウダブルは無料ですか？
   はい、Claudableプロジェクト自体はオープンソースで無料です。ただし、使用するAIインテリジェンス（Claude CodeやCursor）、Vercelのデプロイメントサービス、Supabaseのデータベースサービスなど、使用用途や選択するパッケージによってはコストが発生するサードパーティのサービスに依存しています。
2. Claudableを使うのにプログラミングの経験は必要ですか？
   Claudableの基本的な設計思想は、ユーザーが自然言語を通じてアプリケーションを構築できるようにすることです。しかし、ウェブ開発の基本的な知識（HTML、CSS、JavaScriptなど）があれば、より正確に要件を記述し、AIが生成したコードを微調整するのに役立ちます。
3. AIが生成するコードの品質とは？
   Claudableは高度なAIコーディングインテリジェンスを活用し、一般的に高品質で、本番環境で「そのまま」使用できるコードを生成します。生成されるコードは、Next.jsのような業界標準のフレームワークに基づいており、ベストプラクティスに従っています。ただし、複雑なアプリケーションの場合は、プロの開発者によるコードレビューと最適化が推奨される。
4. パーミッションエラーが出た場合はどうすればよいですか？
   macOS、Linux、Windows上のWSL環境では、ファイル・パーミッションの問題が発生することがあります。解決策はsudoクロードコードを実行するには、プロジェクトフォルダが現在のユーザーによって所有されていることを確認する必要があります。プロジェクトREADME.mdドキュメントの "トラブルシューティング "セクションには、さまざまなオペレーティング・システムに対する詳細な解決策が記載されています。