0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[初めてのWebアプリ開発] 無料でもかなり使えたGeminiのCanvas機能

Posted at

はじめに

普段はUnityでゲーム開発をしているのですが、これだけAIが発展してきているならお金をかけずにAIだけでWebアプリを開発できるのではと思い、じゃあ開発してみようと思ったのが今回の開発のきっかけです。

作ったもの

シンプルなWebタイマー
集中タイマーを作りました。

一応オリジナル要素として時間を設定するときに、作業内容も設定して
タイマーを使っている間、画面に作業内容を表示するようにすることでユーザーにプレッシャーを与えるようにしています。

開発について

自分自身ではほぼコードを書いていません。最後にcssの色を少しいじったくらいで、その他はすべてGoogleのAIであるGeminiのCanvas機能を使い開発しました。

Canvas機能はChatGPTやClaudeでも提供されていますが、無料版だと何回かコードの修正を指示するとすぐに上限にぶつかってしまいます。

そういったこともあり、あまり期待していなかったのですがGoogle AI Studioで大量にチャットできるGoogleならもしかしたらと思い、使ってみたら一度も上限に引っかかることなく完成までもっていくことが出来ました。

プロンプトもかなりシンプルで最初に
「作業内容を入力 → タイマー開始 → 作業内容が中央に大きく表示される」
これらの機能が付いたタイマーウェブアプリを作ろうと思っている。コードを書いて

と入力してから、あとは色やレイアウトなど修正・追加してほしいところを伝えるだけで済みました。

最後に

Canvas機能が出てすぐに少し触って、「こんなもんか」と思ってから使わなかったのですが、今使ってみると「え、そこまで作れるんだ」とかなり進歩を感じました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?