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

こんにちは。開発 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の生産性の向上が見込めると思います。