「生成ai」タグの記事が5件件あります

こんにちは。開発 2 部の箕浦です。
以前、「v0」という WEB アプリの UI を生成 AI を使って作成するサービスを紹介しましたが、
今回は「bolt.new」という生成 AI を使って、フルスタックのアプリケーションが作成できる驚きのサービスが登場したので、試してみました。
無料でも利用可能ですが、現時点では、無料プランでは 1 日あたり 15 万トークン、1 か月あたり 100 万トークンに制限があり、
無料枠では意外とすぐに使い切ってしまうので、注意が必要です。

bolt.new の概要​

bolt.new は、フルスタック Web アプリケーション開発を劇的に簡素化する AI 駆動型の開発ツールです。
ChatGPT のように、ユーザーが自然言語で指示を出すだけで、ブラウザ上でアプリの作成からデプロイ、管理までをシームレスに実現できるのが特徴です。
特に、プロトタイピングに時間をかけられないプロジェクトには、非常に便利です。

主な特徴​

1. AI による自動コード生成: ユーザーの指示に基づき、AI が自動でコードを生成してくれるため、手作業でのコーディング時間を大幅に削減できます。

2. ブラウザ内でのフルスタック開発: StackBlitz の WebContainers を統合し、ブラウザ上で完結した開発環境を提供することで、ローカル環境の構築が不要です。

3. 多様なフレームワークに対応: Vite や Next.js など、幅広いフレームワークをサポートしているため、様々な開発ニーズに応じた選択が可能です。

4. 開発環境の完全制御: AI モデルがファイルシステム、Node サーバー、パッケージマネージャーなど開発環境全体を制御でき、開発作業がスムーズに進みます。

5. 迅速なデプロイ: チャットインターフェースから直接プロダクションにデプロイ可能で、短時間でのリリースが実現します。

bolt.new の機能​

1. プロンプトベースの開発: ユーザーが自然言語で要望を伝えると、AI がその指示に基づいてアプリケーションを構築します。

2. リアルタイムの機能追加・修正: 開発中のアプリに対して、プロンプトで追加の機能や変更を指示できるため、迅速に対応が可能です。

3. フレームワーク指定開発: 特定のフレームワークを指定して Web サイトやアプリを生成できるため、技術スタックに応じた最適な設定が行えます。

4. 統合開発環境: StackBlitz との連携により、オンラインのコードエディタでプロジェクトの編集やデプロイが簡単に行える点も便利です。

bolt.new で社内ポータルサイトを作成してみた​

試しに社内向けのポータルサイトを作成しました。
今回はデザインに関しては大きくこだわらず、シンプルな構成で短時間に作り上げることを目指しました。

ポータルサイトの概要​

作成した社内ポータルサイトには以下の主要機能を実装しました：

• ダッシュボード: 各機能へのアクセスや通知の要約を確認できるページ

• お知らせ掲示板: 社内全体への重要な情報の告知やイベント通知

• 月例会ルール・議事録: 定例会議でのルールや議事録を共有する機能

開発プロセス​

1. bolt.new にアクセスし、新規プロジェクトを開始

   アプリの作成手順は非常にシンプルで、ChatGPTのようにプロンプトから作成したいアプリの内容を指示するだけです。

   

2. AI への指示

   今回は以下のように指示しました。\

   

3. 動作確認

   指示を送ると、boltがアプリを頑張って作成してくれています。
   ファイルの構成はデフォルトではVite+React+typeScriptで作成されるようです。

   

   作成完了すると、画面左に作成したアプリの機能の概要を説明してくれています

   

   プレビューを確認するとログイン画面ができています。

   

   早速、説明欄の一般ユーザーでログインしてみます。 ダッシュボードに、お知らせや議事録が一覧できる画面ができています。

   

   今後は、ログアウトして、登録できる管理画面を確認します。

画面上部に「Admin」ボタンが増えています。

適当に投稿してみます。

投稿が反映されていませんでした。

4. AI に追加指示

   そこで、さらに追加で以下の指示をしてみました\

   

   要求通り実装してくれたようです\

   

   再度、同じ投稿をして確認すると、今度は正しく投稿が反映されました。

5. デプロイ

   bolt.new の画面の右上にある「Deploy」ボタンからデプロイすることも可能です。デプロイ手順は非常にシンプルで、短時間でリリースが完了しました。
   

   デプロイ先はNetlifyにデプロイされるようです。

   今回作成したものと全く同じではないですが、boltで作成したサイトを以下へデプロイしています。
   https://chimerical-pithivier-8ab33b.netlify.app

6. プロジェクトのダウンロード

   「open the StackBlitz」というボタンを押すと、StackBlitz でプロジェクトが開き、こちらでソースコードを直接編集することも、ローカルにダウンロードすることも可能です。

開発の所感​

bolt.new を使用した開発プロセスは予想以上に迅速で、従来のコーディング方法と比較して以下のようなメリットを感じました：

• 開発時間の大幅な短縮：指示を与えるだけで基本的なコードが自動生成されるため、短時間でプロトタイプが完成します。

• シンプルな指示で実装可能：複雑なコードを書くことなく、機能を実装できます。

• コードの品質：自動生成されるコードの品質が一定レベル以上であるため、開発初期段階から安定したコードが提供されます。

• 統合開発：フロントエンドとバックエンドを統合的に開発でき、StackBlitz を通してコードをダウンロード可能で、自身のプロジェクトとしても管理がしやすいです。

課題と改善点​

一方で、以下の課題も見つかりました：

• 細かいカスタマイズには従来のスキルが必要：bolt.new が自動生成するコードは基本的な構成に限られ、細かい UI やビジネスロジックの調整には手動の編集が必要です。

• 大規模なアプリケーションには不向きな点：特に大規模なアプリケーションを構築する際、全体のコードの構造を理解するのが難しくなる場合があります。

まとめ​

bolt.new を使用して社内ポータルサイトを開発してみて、AI による開発支援の大きな可能性を感じました。
特に、短時間でプロトタイプを作成する場面や、迅速な開発が求められる小規模プロジェクトにおいては非常に有効なツールであると感じます。
今回はデザインに関する指示は特に行いませんでしたが、もう少し細かく指示を与えれば、ある程度のデザインも実装されると考えられます。
デプロイまで行えますが、本格的な運用にはもう少し調整が必要です。
しかし、プロジェクトのひな型として利用し、ダウンロードして自身の環境で微調整を行う使い方は非常に便利です。
今後のアップデートでさらに機能が充実すれば、より複雑なプロジェクトや商用アプリケーションにも適用できるようになるかもしれません。

こんにちは。開発 2 部の箕浦です。

生成AI業界は日々急速に進化しており、毎週新たなニュースが発表されています。

数週間前、Claude 3.5 Sonnetがリリースされました。
Claudeは、Anthropic社が開発した大規模言語モデルであり、
ClaudeシリーズにはHaiku、Sonnet、Opusの3つのモデルがあります。
今回は中間モデルであるSonnetのバージョンアップとなります。
これにより、以前の最上位モデルであったClaude 3 Opusを一時的に超える位置づけとなります。

Claude 3.5 Sonnetの特徴の一つは「Artifact」という機能で、
画面の左側でAIに指示を入力しながら、右側で生成されたコードや実行結果を確認できる仕組みです。
この機能により、ユーザーはAIが生成したコンテンツをリアルタイムで確認しながら、新たな指示を入力することが可能になります。
この操作感は現時点のChatGPTにはなく、プログラマにとっては使いやすいものとなっています。

また、Claude 3.5 Sonnetは無料でも利用可能です。
ChatGPT同様、有料のProプランがあり、使用制限はあるようですが、お試しで使う分には無料プランでいいかと思います。

では、さっそく触ってみます。
プロンプトの入力画面は以下のようになっており、ChatGPTを使ったことある人なら馴染みあるUIとなっています。

今回は手っ取り早く、皆さんがよく知っているテトリスというパズルゲームをClaudeに作成してもらいました。

プロンプトに以下を入力します。

ブラウザで動くテトリスを作ってください

ものすごく雑に依頼してみましたw

頑張ってSonnetがコーディングしてくれています。
体感ですが、生成スピードはめちゃめちゃ早いです。

ソースコードを見るとHTML、CSS、JavaScriptで生成されています。

そのままプレビューで実行可能です。
ここまでわずか20秒ほどしかかかっていません。
普通に遊べます。
まじで凄すぎです。

さらに 画面右下の「Publish」というボタンを押すと、 URLが発行されて、生成されたものを共有できます。

今回作成したテトリスを以下に共有しておきましたので 皆さん遊んでみてください。

キーボード操作で移動と回転ができます（左右矢印キーで移動、上矢印キーで回転、下矢印キーで高速落下）

https://claude.site/artifacts/32dbe599-315e-48de-b743-55dc6f6f6fc1

ソースはここからダウンロードできます（拡張子をhtmlに変更して実行してみてください）

今回はゲームを作成してみましたが、 他にもいろいろな言語に対応しておりますので、活用できる場面は多いかと思います。

3大LLMといえば、
OpenAIのChatGPT-4o、AnthropicのClaude 3.5 Sonnet、GoogleのGemini1.5 が抜きつ抜かれつのデッドヒート状態ですが、
現時点でいえば、Claude 3.5 Sonnetが少し抜けてるかなといった印象です。
ただ、他のモデルもすぐに似たような機能を搭載してくる可能性は有りますので、
これからも目が離せない状態だと言えます。

こんにちは。開発 2 部の箕浦です。
GPT-4oがリリースされてから3週間程たちますが、
今まで有料ユーザーしか使えなかった機能が、制限付きで無料ユーザーにも解放されており、より便利になっています。
無料ユーザーでも利用可能になっているいくつかの機能のうち、今回はデータ分析機能を試してみました。

試しにAWSの毎月のサービス利用料の内訳のcsvファイルをAWSのCost Explorerコンソールからダウンロードします。
csvファイルの中身は以下のようになっています。

こちらをChatGPTにアップロードしてみます。
ファイルをアップロードするには、プロンプトを入力するボックスの左のアイコンをクリックし、 「コンピューターからアップロードする」を選択します。

csvファイルをアップロードすると読み込んでくれました。

では、ChatGPTに分析をお願いしてみます。

このデータについて分析してください

ざっくりお願いしたのですが、もう少し細かく指示を出せば、詳細な分析もしてくれそうです。

しっかり分析してくれて、考察まで出してくれています。

今度はグラフを作成してもらいます。

月々の各サービスのコストの変化をグラフにしてください

日本語のフォントは文字化けしていますがこちらは、 Google Fonts( https://fonts.google.com/) などで日本語のTTFファイルをダウンロードしてChatGPTにアップロードすれば解消できるようです(今回は試してません)

別のグラフもお願いしてみます。

5月におけるサービスの利用料の内訳を円グラフにしてください

こちらも文字が潰れてしまっているところもあるみたいです。

指示の仕方を工夫すれば、そこそこ使えるグラフも作ってくれそうです。
画像もダウンロードできるようなので、資料作成の際は検討してみてもいいかもしれません。

ChatGPTが4o(omni)になってから、かなり高性能になっており、無料ユーザーでも利用できる範囲が広がりました。
利用回数に制限があるので、限度に達したら、数時間おく必要がありますが、非常に便利なツールとなっています。
他にも便利な使い方あれば、紹介していきたいと思います。

こんにちは。開発 2 部の箕浦です。
皆さんはエディタに何をお使いでしょうか？
Visual Studio Code（以下、VSCode）をお使いの方も多いと思います。

もし VSCode をお使いの方は、今すぐ Cursor に乗り換えましょう！
Cursor は、ご存じの方もいるかもしれませんが、VSCode の操作性そのままに、ChatGPT などの AI が搭載されたエディタです。
無料版では AI 機能を利用するためのクレジットに制限がありますが、その便利さに一度慣れると VSCode には戻れなくなります。

VSCode から Cursor に乗り換える際、拡張機能もそのまま引き継げるので、使い慣れた設定を維持しながら移行が可能です。
Cursor を起動すると以下のように VSCode とほぼ同じ UI となっています。

Cursor の特徴を簡単に説明しますと、AI がコード生成やコード補完を行い、コーディング中にチャットでアドバイスを受けることができます。
また、エラーの修正方法も教えてくれるため、コーディングの効率化に大きく貢献し、開発作業がスムーズに進みます。

現時点で選択可能なモデルは、先日登場したばかリの話題の GPT-4o の他に Anthropic の Claude 3 opus や GPT-4 turbo、GPT-3.5 等が選択可能なうえ、追加することも可能なようです。

ちなみに 無料版では、GPT-4 なら 50/月、GPT-3.5 なら 200/月 のクレジットが提供されています。
以下の管理画面から、現在使用したクレジットが確認可能です。

機能に関しては、 GitHub Copilot も同様の機能を持っていますが、現時点で Cursor にしかない特に便利な機能をご紹介します。

それは、 Docs と呼ばれる、外部 URL 参照機能です。 サンプルコードや、公式ドキュメントなどがネット上にある場合、それらを参照して回答させることができます。

高性能の AI といえど、最新の情報は持っていないため、補完するための機能が必要です。 これは一般的に RAG(Retrieval Augmented Generation。検索拡張生成) と呼ばれ、新しい情報を取り込むことで AI の回答精度を高める仕組みです。

開発を進める中で、利用経験のないライブラリやフレームワークの実装が必要な局面があります。
また、利用中のライブラリであっても、バージョンアップ等によって、使い方を再度調べる必要がある場合もあります。
そのたびに、膨大な量の公式ドキュメントや関連サイトを調べて実装するのはなかなかしんどい作業かと思います。

そんなときにこの機能を利用すれば、AI がドキュメントを取り込んでくれて、それを元に回答をしてくれたり
コードも生成してくれます。

この機能を利用するには、 チャットの欄に@を入力すると以下の画面になります。

Docs を選択します。
デフォルトでいくつかの公式ドキュメントがあるようです。

一番下の「Add new doc」を押下すると以下の画面になります。
ここで、取り込みたいサンプルコードやドキュメントの URL を入力します。
試しに FastAPI の公式サイトを入力しています。

取り込みが完了すると、以下のように取り込んだページのリンクの一覧が表示されています。

これで、チャットウィンドウ上で @ ＋ドキュメント名 を入力し、今までどうりAIに質問してみましょう。
取り込んだドキュメントを参照して、回答を返してくれることかと思います。

GitHub Copilotも同じように 「Copilot for docs」(https://githubnext.com/projects/copilot-for-docs/) という機能がありますが、こちらは現時点では、プレビュー終了しており、今後のアップデートで 実装される可能性はあります。

今回はCursorの便利機能のほんの一部を紹介しましたが、まだまだ便利な機能はありますので、これからも紹介していきたいと思います。
皆さんも一度試してみてください。

こんにちは。開発 2 部 箕浦です。
今回はWebのUIデザインを生成AIが自動で作成してくれる「v0」(https://v0.dev/ )という画期的なサービスについて紹介します。

我々システム開発を行うデベロッパーにとって、どのような画面デザインにすればいいかという課題は頭を悩ませる要因となっています。
大規模なプロジェクトであれば、通常デザイナーに依頼してデザインを作成しますが、小規模なプロジェクトではデザイナーに頼れない場合もあります。
そのような場合、開発者自身が優れたUIデザインを考える必要があります。

そんなときは今流行りの生成AIにUIデザインをしてもらおうという試みになります。

この「v0」というサービスは、チャットのようにテキストで指示をすることで、自動的にWebページのUIを作成してくれて、さらに細かい修正も追加で指示することで行ってくれます。

生成されたUIはコードとして出力されますので、 それをそのままコピーもしくはCLIのコマンドでプロジェクトに取り込むことが可能です。

なお、生成されたUIのコードは、 React(Next.js)とhtmlのどちらでも可能で Tailwind CSSやshadcn/uiを利用していますので、こちらをプロジェクトで利用していることが前提となっています。

利用するには、Vercel のアカウント(無料)が必要になります。
無料のFreeプランと有料のPremiumプラン(月20$)があり、利用できるクレジット数や、ハイクオリティやUIが生成可能等の差があるようです。 プランの比較はこちら

今回は無料のFreeプランでやってみます。

ログインすると、以下の画面になります。

非常にシンプルでこのプロンプトから指示を送信することでAIがUIを提案してくれます。

画面の下の方に行くと、 Exploreの欄に指示したテキストと、実際に生成されたUIの例がいくつかあります。
この中から、イメージに近いものを選んで採用する方法もあります。

今回は試しにYouTube風のUIを作ってもらうことにします。
プロンプトには、日本語で指示することも可能です。
試しに「YouTubeのようなUIを作って」 と指示してみます。

すると、AIが3つの提案をしてくれます。 まず一つ目。

次に2つ目

最後に3つ目

結構それらしいUIを作ってくれました。
提案してもらったUIを選んでさらに追加の指示を行うことも可能です。

ここでは3つ目のUIを採用することとして、
追加で日本語のUIにしてもらいます。

すると、ちゃんと指示通りに日本語化してくれました！

右上にあるテーマアイコンから、フォント等を変更することが可能です。

タブレットや、スマートフォンで確認した際の表示のされ方もここで確認可能です。
以下はタブレットの場合。

codeをクリックすると、Reactとhtmlのコードが確認できます。
ここで直接コードを編集して微調整することも可能です。

こちらはhtmlの場合。

こちらのコードを今回はNext.jsのプロジェクトに取り込んでみることにします。
取り込み方法は、CLIコマンドによる方法と、手動でコードをコピペする方法がありますが、 コマンドの方が楽なので今回はそちらでやってみます。
(現在CLIによる取り込みはNext.jsのみサポートされているようです)

コードの上の方にある 「npx v0 add ・・・」 とあるコマンドをコピーします。

Next.jsのプロジェクトを作成し、プロジェクトフォルダ直下で以下のコマンドを実行します。
Tailwind CSSを利用していますので、Tailwind CSSも組み込んでおきます。

npx v0@latest init

次に先ほどコピーしたコマンドを実行します。

npx v0 add 7ulmWSS039r

コードを確認すると、先ほどのコードがプロジェクトにコピーされています。

そして、起動して確認してみます。

すばらしい！YouTube風のUIが一発で作成できました。
ここまで3分ほどしかかかってません。

さらに、このサービスのすごいところは、画像をアップロードすることでその画像に近いUIも作成してくれます。
こちらは無料では1回のみしか試すことができなかったので、いずれ紹介してみたいと思います。

今回は無料プランで試しましたが、いずれは有料プランのハイクオリティ出力も試してみたいと思います。

このサービスをうまく使えば、デザイナーさんに頼れない状況でも、開発者側でUIの生産性の向上が見込めると思います。