2025-07-11 20:26

初心者でもできた!!Geminiを使った「バイブコーディング体験」で野球スタメン記録アプリ開発チャレンジ!Gemini Canvas機能でバイブコーディング体験✨️日ハム優遇版

この件で最新・追加情報があれば X (Twitter)で発信します!▶ ———————————————————— 目次 バイブコーディングとは Gemini Canvas機能でバイブコーディング体験 プロ野球選手スタメン起用記録アプリを作ろう 月額2900円が1ヶ月無料で使用可能 【実践】バイブコーディングでアプリ制作\今回の成果物・使ってみて下さい/プロ野球選手スタメン起用記録アプリhttps://g.co/gemini/share/3fa66c7ae9ffGemini 2.5 pro始め方動画https://youtu.be/BgSop87-NPk————————————————————この動画音声に関するご質問・お問い合わせはちあきLINE公式アカウントまで→ https://lin.ee/3FOzRKa———————————————————— または\本動画の質問対応やAI時短情報など発信✨️/LINEオープンチャットちあき https://x.gd/7Zl0l*匿名参加OK\他の動画も紹介/ 【完全攻略】AIで4コママンガを作ってみた!ChatGPTとCanvaを駆使✨️制作テクニックを大公開 https://youtu.be/J7b_EXwJ2mg↓同内容をnoteにも書いていますちあきのnotehttps://note.com/chiakioku———————————————————— #pr #バイブコーディング #gemini ————————————————電気代割引8000円🎁私も使用している電力会社のオクトパスエナジーで友達招待キャンペーン「増額決定」♪✓25/3/17-いままで5000円でしたが今後は「8000円」に増額決定のようです🎁*2回目の請求の際に割引(満たない分は翌月も割引)契約期間のしばりなし!!⚠紹介者、被紹介者それぞれのお名前(登録された姓名のうち「名」で登録された部分のみ)が共有される旨ご同意の上ご利用願います紹介URLhttps://octopusenergy.co.jp/friend/metal-ditch-81過去動画ですので期間等は変換https://youtu.be/y2t6OH_vrLY?si=pwR04mrQyZd-hAtC——————————————————— 楽天銀行第一生命紹介プログラムで+1,500円🎁↓紹介コード↓D79922376を、申込フォームの「紹介コード」入力欄に入力 ▼お申し込みはこちらから(ネットで最短3分~)https://www.rakuten-bank.co.jp/rd/app/dl/introduction_code/s001.html——————————————————— Yahoo!フリマ友達紹介キャンペーン500円分のPayPay🎁コード入力後、即時でもらえる✅毎月末日の まで紹介コード QCMJROお友達の方:Yahoo!フリマアプリを初めてインストールhttps://paypayfleamarket.yahoo.co.jp/topics/20250530/0002/ログイン、PayPay連携、紹介コード(または、公式コード)を入力完了すると500円相当のPayPayポイントを付与(お一人につき1回まで)初めてのお買い物で使える最大半額クーポンhttps://paypayfleamarket.yahoo.co.jp/campaign/promo/new_buyer/——————————————————— \私も耳読中!!/Amazon 耳で聴く読書Audible(オーディブル)30日間無料https://amzn.to/3Q75vg0——————————————————— メルカリで500円分お得にお買い物できる🎁招待コードBMTCPGアプリをインストールして登録https://merc.li/dDedmNWRa登録完了14日後までに付与———————————————————第一生命ネオバンク紹介プログラム経由で1500円🎁 アプリをダウンロードhttps://netbk.jp/4boAv30口座開設画面の最後で ↓紹介コードを入力↓ oFfsVVt 紹介プログラム詳細ページ https://neobank.netbk.co.jp/contents/cmp/20240628_002620/———————————————————\IDAREの出口などに最適/ワンバンク(旧B43) プリペイドカード紹介リンクから登録または登録時に紹介コードの入力を行い 「初めて1,000円以上を入金」で「300円分の残高」🎁◆ワンバンクhttps://b43.jp/news/entry/service-update-onebank◆サービス紹介 https://b43.jp/ 紹介コードYO7K9R ◆紹介リンクhttps://b43.page.link/wcDnzjfASrcJBPMn7?openExternalBrowser=1———————————————————\VISAプリペイドカード/バンドルカード作ると200円🎁招待コード72u8zz◯メルカード8のつく日8%還元のチャージ先としても対象(24/11現在)———————————————————ちあき自己紹介【毎日子どもにおかえりと言いたい!】と、離婚した時に決意、起業、経営🍀外に働きに出ず、主に自宅で収益をアップする方法🍀日々恩恵を受けながら暮らす情報を発信中♪🍀上智大学教育学科にて教育学・生涯教育専攻済み🍀アイコンは CNPJのNFT動画550本以上・登録者1775人程のYoutubeチャンネルが垢バンされ復旧の見込み無しと判断🥲2023年12月21日から第2章「ちあき2」始めました。 12月21日 は奇しくもわたくし誕生日です。 という事でチャンネルも 新しく生まれ変わりますのでどうぞ、チャンネル登録のお恵みを😍————————————————各ポイントサイトの無料登録URL集めました!特典などもありますので良ければお使いください。◎ポイントインカム新規登録🔰で150円🎁&3ヶ月後の月末までに㌽交換(㌽交換は 5000pt=500円 から)で+100円🎁 https://pointi.jp/p/?a=rbf881030458◎モッピー入会の翌々月末までに5,000P以上獲得で2,000P🎁 https://pc.moppy.jp/entry/invite.php?invite=Pe5ce17d◎ハピタス新規登録🔰&条件達成で+1000円🎁 https://hapitas.jp/register?i=22321603&route=pcText◎Powl新規登録🔰https://go.onelink.me/kwez/invite 招待コード:PDPKKSJ4DU5 ※招待コードは登録後3日以内しか入力不可 紹介経由で新規登録後翌々月末までに25,000P(2,500円相当)以上獲得で10,000P(1,000円相当)の🎁◎Warau(ワラウ)新規登録🔰+初めての方限定キャンペーン参加&条件達成で500P🎁https://bit.ly/3CHCxvU◎ポイントタウン新規登録🔰&条件達成で+2000円🎁新規登録時には🎁無いが登録の翌々月末までに5000P獲得で2000P🎁https://pointtown.com/invite?id=DvgsdsVhx9rnU◎ECナビ新規登録🔰登録月の翌月末までに㌽交換(3000P~)すると1000円分のAmazonギフト券🎁https://ecnavi.jp/invite/?id=egz4b&ref=2◎ちょびリッチ新規登録🔰で300㌽(150円)🎁https://www.chobirich.com/cm/ad/?p=8224777069&i=3970867◎アメフリ新規登録🔰https://www.amefri.net/register?inv=f248492 ◯登録ボーナス最大1,000pt(100円)のボーナスP🎁◯新規案件利用ボーナス🎁登録月の翌々月までに案件利用で10,000円分(100,000pt)を貯めると5,000円分pt◎ニフティポイントクラブ新規登録🔰で100P🎁(即時)登録月の翌々月7日までにポイント交換申込完了で400P🎁https://lifemedia.jp/entry/3627585/welcome

サマリー

初心者でも簡単に使えるGeminiを活用し、プロ野球のスタメン記録アプリを開発する体験が紹介されています。AIとの対話を通じて、効率的にプログラミングを行う「バイブコーディング」の実際の使用感が伝えられています。今回のエピソードでは、Geminiを活用したバイブコーディング体験を通じて、プロ野球のスタメン記録アプリの開発過程が紹介されており、アプリの機能や選手データの登録、エラー修正の様子などが語られ、実際の運用についても触れられています。

バイブコーディングの概要
ご視聴いただき、ありがとうございます。ちあきです。
今日は、Hiveコーディングを使って、プロ野球のスタメン記録アプリというのを作ってみようという回になります。
最近、毎日このHiveコーディングという言葉を聞かない日、見ない日はないぐらい、私の環境ではよく聞くのですが、
YouTubeの検索窓でも検索してみますと、検索ボリュームも結構あるなぁという印象です。
視聴回数順にYouTubeのバイブコーディングについての動画を調べていたところなんですが
このバイブコーディングって何かというのをとても簡単に小学生でもわかるように
AIに聞いてみたところをちょっと読み上げていきます
AIにお願いしてノリノリでプログラミング
みんなコンピューターのゲームやアプリってどうやって作られているか知っているかな?
実はプログラミングっていうコンピューターへの命令文をたくさん書いて作られているんだ
これまではその命令文を一つ一つ人間が考えて打ち込んでいたからとても大変だった
でも最近すごく賢いAIが登場してプログラミングのやり方がガラッと変わってきたんだよ
その新しいやり方の一つがバイブコーディング
バイブスでAIにお願い
バイブスというのは雰囲気とかノリという意味の言葉
バイブコーディングはまるで魔法のランプの精霊ジーニーに願い事をするみたいに
AIにお願いしてプログラムを作ってもらう方法
今までのやり方だと右に3歩進んで次にジャンプ
それから右を向いてみたいにものすごく細かく一つ一つ命令をしていた
しかしバイブコーディングのやり方は
ねえAIこのキャラクターをあそこの宝箱までいい感じに動かしてみたいに
こんな感じにしてほしいなあっていう雰囲気つまりバイブスを言葉で伝えるだけ
そうすると賢いAIがそのいい感じを汲み取って必要なプログラムを全部自動で作ってくれる
AIはスーパースケット
バイブコーディングでは人間は難しい命令文をたくさん書かなくてもよくなり
人間の役割はAIにお願い事をしたり
AIが作ってくれたものがちゃんと動くかチェックしたりすることに変わっていく
こんなアプリが欲しいなってお願いをしてAIがすごい速さでアプリを作ってくれて
出来上がったものを触ってみてもうちょっとここをこうしてとお願いをする
こんな風にAIと会話しながらノリノリで開発を進めていくスタイルがバイブコーディングとのことで
ジェミナイのキャンバス機能
私はこの説明ですごくわかったのですが皆様はいかがでしょうか
ちなみに試しに無料で使える方法あるかと聞いてみたのですが
ここはですねバイブコーディングの情報が古いと言いますが
私がイメージしていたのはジェミナイのCLIとかクロードコードの話が出てくるかなと思ったのですが
というのもこのバイブコーディングのところを調べていきますと
サジェストで出てくるんでこっちも結構なボリュームで調べられているんですが
ジェミナイのCLIというのとクロードコードの比較の話題も結構皆さん調べられていまして
これらの名前が出てくるかなと思いきや出てこなかったのでちょっと振ってみました
バイブコーディングといえばジェミナイのCLIとかクロードコードじゃないのと聞いてみたところ
とてもわかりやすく回答してくれたのですがおっしゃる通りです
前回は誰でもすぐに無料で試せる方法としてウェブサイトで使えるAI
つまりChatGPTや今私が使っているこのジェミナイとかクロードのお話が紹介されていたのですが
しかしあなたが挙げてくれたジェミナイのCLIやクロードコードこそがまさにバイブコーディングの最前線にいる
より本格的なツールじゃあ通常のChatGPTとかだとバイブコーディングできないのかなという疑問が湧いたのですが
それに関してはウェブサイトでAIとチャットするのは例えるなら図書室の司書さんに質問しに行くようなものです
わからないことを聞きに行く答えを教えてもらう自分の席に戻って教えてもらったことをノートに書く
これでも十分便利ですよねこれが今我々が通常をAIを使うというと
ChatGPTに質問して回答を得るみたいなことをこれが従来のAIの使い方かと思うのですが
一方でジェミナイCLIやクロードコードを使うのは自分の机のすぐ隣にスーパーAIアシスタントが座っているような状態
席を立たなくていいつまりパソコンのターミナルという黒い画面プロが使う命令画面から直接AIを呼び出せます
作業を中断しなくてよいプログラムを作っているその場所でねえAIこの続き作ってすぐにお願いができる分身の術が使える
特にクロードコードは一番最初のウェブアプリ開発の話で出てきたようにちょっとこれは触れてもいないのですが
この前にちょっとやりとりをしていたことを言ってるんですけどAIアシスタントを何人も同時に呼び出して別々の作業を同時進行させること
つまり並行コーディングが得意例えばA君はボタンのデザインを作ってB君は記事を保存する仕組みを作って
C君はログイン画面をお願いというように複数のAIに同時に別々の仕事をお願いできます
みんなで一斉に作業するからとてつもないスピードで開発が進みまさしくバイブスでチームを動かしている感じ
今日私が今やろうとしているのは今出てきた話でもなくこのジェミナイのキャンバスという機能がありまして
そこでもクロードコードとプレビューが行ったり来たりできてある程度はワイブコーディングを体験できるということで
今日はこれでちょっと使ってみたいなと思いましたので引き続き質問をしてみました
ジェミナイのキャンバスはどういう位置づけということを聞きまして検索してもらいました
ちなみにこのGoogle AI Studioを通してジェミナイ2.5 Proのモデルを無料で使えているわけですが
これに関しましての詳細は私の過去動画でこのジェミナイ2.5 Pro始め方という動画もあります
説明欄に貼っておきますのでジェミナイ2.5 Pro無料でまだ使っていないという方がいらっしゃいましたら
ぜひこちらを参照していただきたいのですが
ここの下に検索オンオフが選べます
新しいチャットをクリックすると毎回オフになってしまう仕様なので
これを毎回忘れないうちにオンにしておくと今回のように最新情報について来れていなかったので
検索すれば出てくるよという風に言ったのですが
これオンにしていても検索してこなかったのでそういう風に検索も同時にしてくれているので
より確かな情報を持ってくることができております
このジェミナイキャンバスというのは一言で言うと
AIと一緒に文章やプログラムを自由に作れる魔法のノートみたいなものでできることの中に
文章作りをAIがお手伝いプログラムをその場で作って試せる
そして最後にViveコーディングを体験できる
まさにこんな感じのゲームが作りたいなという曖昧な雰囲気を伝えるだけで
AIがそれを形にしてくれるViveコーディングを体験できる場所
スタメン記録アプリの開発
これ出来上がったものをURLで共有することもできるので
お持ちのブラウザー例えばスマートフォンでのブラウザー
パソコンのブラウザーで開いてできましたら
この野球スタミナ記録アプリを使っていただくことも可能となります
最終的にまとめてくれたのがウェブサイトのAI
つまり通常のチャットGPTとかジェミナイクロードと呼ばれている者たちは
AIとチャットでお話しする基本的な場所を指します
ジェミナイとCLIやクロードコードと呼ばれているもの
ここの検索したこの話題このツールに関しても
プロが使う黒い画面ターミナルからAIを呼び出す魔法の呪文や分身の術
そしてジェミナイキャンバス
今日を今から使おうとしています
場面でいうとこれですねジェミナイのキャンバス
ウェブサイトのジェミナイの中にあるAIと共同作業スペースのことと
AIが分かれているようです
先に触れておくとこのクロードコードというのが有料になっておりまして
このジェミナイCLIというのは無料でも使えるそうです
WindowsでもMacでも使える
クロードコードのほうはWindowsで使うには
ちょっとひとつ手間をかませる必要があるようです
これも後々使っていこうかなと思っているのですが
今日に関しましてはまだここには手を出さずに
ウェブコーディングのもっと手前の入り口のところで遊んでみようと思い
ジェミナイのキャンバスでちょっとバイブコーディングの
浅い体験をしてみようかなと思います
最初なんですがこのGoogle AI Studioからではなく
ジェミナイの公式開いていただきまして
このキャンバスというのをクリックしておいて青い文字にしておきましょう
これでプロ野球選手のスタミナ域を記録アプリを作りたい
選手は自動登録するようにしていて
これ後ほど一緒に作ろうと思ってこのままで止めているんですが
さっき私このアカウントではなく別のアカウントで作っていた際に
ここまではできたんですが
まだこの先いろいろと内容を詰める段階だったんですが
私は無料プランなので
トライナウこれアップグレードしてっていうお話が出てきまして
これより先に進むにはアップグレードしてよということなんですが
ここクリックするとこの画面になります
この画面を見た時に思い出したことがありまして
今この月額2900円が1ヶ月無料で0円で体験できる期間になっておりまして
私このアカウントではないアカウントで
そういえば今無料期間中だったというのを思い出しました
このBio3でやりたいことがありまして
これ作っていたんです
今こういうの作れるじゃないですか
このポーチをできて音が鳴るっていう
今こういうのが無料で試せるということで
次に私アップグレードしてて
0円で無料で今アップグレード中だったのを思い出しまして
じゃあこっちのアカウントでログインすればいいなということで
通常のGemini Eに戻ってきまして
これで今から作ろうかなと思っております
でCanvas
そうするとアップグレードしてということが出てくることもなく
おそらく最後までできるのではないかなと
踏んでいるのですがちょっとやってみましょう
早速この解説プラス同時にコードも作って出ております
このコードの右側にプレビュー
今は今作っている最中は押せないのか
押せないのですが
ここをちょっとその間に読んでみようかなと思います
プロ野球選手ちょっとバグっているのかな
これはちょっとバグっているようなんですが
プロ野球選手のスタメン記録ができるアプリですね
承知いたしました
選手データをあらかじめ登録しておき
日付や球団を選んで手軽にスタメンを記録
閲覧できるアプリケーションを作成
データベースにはファイアストアを利用し
記録したプラスエラーが発生したと出ていたので
ちょっと一個ずつ見ていきますと
データベースにはファイアストアを利用し
記録したデータが永続的に保存され
リアルタイムで更新が反映されるようにします
他のユーザーが記録したスタメンも
閲覧できるように共有可能な設計にします
やはりアプリケーションのプレビューと
コードを生成します
ここ今プレビューを押せるようになったんですが
ちょっとエラーが発生しているので真っ白です
アプリの機能紹介
このアプリについての説明が出ています
主な機能がスタメン登録
選手データの自動登録
記録の履歴表示 リアルタイム更新
技術的なポイント
さらに機能を追加していくことも可能で
例えば以下のような改善が考えられますと
提案もしてくれています
エラーが発生しました
エラー修正を押せそうなので押してみまして
ちょっと待ちます
エラーの原因の説明も出してくれておりまして
今作業中となっております
ここは作業をしているとき
ぐるぐる回っているときは
その前の文字見たいなと思っているんですけど
なかなか行かせてくれない仕様になっているのでしょうか
ちょっと見にくいですね
コードを修正しましたとのことで
プレビューで更新されて
見れてますね
スタメン登録
7月10日
今日はちょうど試合はない日なのですが
私はファイターズが好きなので
ファイターズが
すごい
リーグセリーグ全部入ってるってことですね
ちょっとじゃあ機能の情報で入れてみましょうか
例えば7月9日の情報で
1番がイソバタです
全然いない
全然足りないですね
リクエストしてみましょうか
今は操作できないんですね
何か依頼してぐるぐる中なので
指摘ありがとうございます
確かに初期登録されている選手が少なすぎました
より実用的に使えるファイターズの選手データを
大幅に追加しました
他の主要球団の選手データも充実させましたので
まだぐるぐるなのでちょっと押せないですが
更新されたようなので
昨日の試合は7月9日
選択できたらいいですね
対戦アイテムを選択したい
選手は目隣とかいない
なんか選手が今一部にいる選手だけ乗せて
でもその情報ちょっと分からなさそうですけどね
あと1から9はピッチャーを外して
ここに例えば加藤伊藤とかサチアとか
ピッチャー選択肢にすらいらないですよね
これでリクエストしてみます
どうなるのかな
何回かやり取りしたので
ちょっとかいつまんでご説明しますと
ここに反映されていたデータがちょっと古かったので
この公式ページをこのURLを貼って
ここ見てっていう風にリクエストしたところ
見てはくれたようなのですが
ここに反映されていなくてスクショを送りましたら
コードの方が動きがあって変わってきて
今はこの情報そのままですね
2025年7月9日現在の一軍の選手の情報が出ていて
Viveコーディング体験と共有
反映されています
実際にやってみると
昨日の試合でやってみると
9弾はサムで
対戦相手がシバロッテマリーンズ
先発が昨日は山崎幸也なんで
ここですね
昨日の1番はイーソーバータ
守備がセンター
2番が水谷シュン
レフトです
3番が真ん中ライト
4番がレイエスでDH
5番がマンジでファースト
6番が水野でショット
7番がサード清宮
8番がしーちゃんでミルイ
9番がユーパーで
ということで
これで登録を押してみましょうか
されたのかな
なんか不思議な画面の切り替わりになりました
されたんですかね
その後なのですが
コードが更新されていないことが続いたので
何度かやり取りをしまして
こういうパネル作ったよって言ってくれるんですが
そういうものなどはないとなっていたので
その状況をスクショで説明したりして
そうするうちにコードが書き換えられたようで
今エラーも1回直して
現在は登録の画面
登録したものが履歴にも反映されるようになりまして
データとクリックすると
今この7月9日の履歴を参照に
1回起用されてますよという情報が見れるようになりました
これを共有で
キャンバスを共有
リンクが出てくるので
リンクコピーして
別のブラウザで見れるかどうかやってみます
これでうまく機能しているか
これはもう別の人が使えるような状態ということですね
これで一般の方も使える状況になっておりますので
このURL下の説明欄に貼っておきますので
遊びがてら使いがてなども見てみてください
ということで
今日はプロ野球スタメン記録のアプリを
Geminiのキャンバスという機能を使って
Viveコーディングらしきものを体験してみた動画となっております
また改めて本格的に
ViveコーディングのこのGeminiのCLI
ちょっと有料になるのでやるかどうかは分からないですが
クロードコードなども挑戦していきたいなと思っております
では今日はViveコーディングをGeminiのキャンバスの機能で
体験してみましたというお話でした
本日の内容が良ければGoodボタン嬉しいです
またYouTubeのチャンネル登録
各音声メディアXのフォロー等もお待ちしています
ここからは紹介コード等のご案内となります
電気代割引8000円また始まりました
私も使用しております電力会社のオクトパスエナジーで
友達招待キャンペーン増額中です
2025年の3月17日から2回目の請求の際に割引になります
契約期間の縛りもございません
ただし紹介者の私も非紹介者の皆様も
それぞれのお名前生命のうちの名前で登録された部分のみ
共有されてしまうためご同意の上利用お願いします
紹介URLこちらになっております
過去動画ですが手順などの案内動画も貼ってあります
ヤフーフリマ友達紹介キャンペーン500円分のペインペイポイントもらえます
毎月月末日の午前11時59分まで紹介コードここに載せてあります
ただし私が確認できた限り1回だけ開催されなかった月もありましたので
必ずお取り組み前にこのURLをクリックしていただきまして
期間の日付が該当するものかどうか確認してからお取り組みください
このページ下にスクロールしますがペインペイフリマとありますが
これは旧ペインペイフリマ現在はヤフーフリマになっております
アプリダウンロードのページに飛びますのでここからダウンロードしていただきまして
ログインペインペイ連携紹介コード入力完了すると
500円相当のペインペイポイントが即時でもらえます
また初めてのお買い物で使える最大半額クーポンもよく出ております
たまにこの期間内じゃない時もあるのでこのページも必ず確認してみてください
売り引き上限額1000円となっておりまして
2000円のものを半額の1000円で買えるクーポンも提供していただきますと
さらに恩恵高くお買い物ができます
Amazon耳で聞く読書オーディブル30日間無料体験できます
私も愛用して2年ほど経ちます
本を読む時間のない方家事をしている最中などでも耳で読書ができますので
ぜひお試ししてみてはいかがでしょうか
メルカリで500円分お得にお買い物ができます
招待コードを貼ってあります
アプリインストールして登録
登録完了14日後までに進展されます
第一声明ネオバンク紹介プログラム経由で1500円もらえます
紹介コードこちらです
QB43現在はワンバンクプリペイドカードで紹介リンクから登録いただきますと
初めて1000円以上入金すると300円分の残高がもらえます
最後ビザプリペイドカードのバンドルカードを作ると200円です
バンドルカードを招待コード経由で作りますと200円もらえます
今日ご紹介した内容はこの動画音声ご視聴のタイミングによっては
期間が異なる場合もありますので
必ずURLで詳細を確認願います
今私のLINE公式アカウントでは
毎日子どもにお帰りと言いたい
自宅で収益を上げる方法をご案内しています
動画や音声ではお伝えしていない内容などもお話ししていますので
ぜひLINEもご登録ください
下の説明欄からお勧めいただけます
最後までご視聴いただきありがとうございました
ちあきでした
20:26

コメント

スクロール