生成AIが凄い！！！

○３大生成AIについて(テキスト関連の機能です)

※「⇒」は実際に生成されたページへのリンクです。
★AIに指示するプロンプトは「」で括った以下の様に曖昧で、単純なものです：
【1】「3大生成AIはなんですか？」【2】「結果をカラフルで見栄えがするHTMLにまとめてください」⇒
【3】「上記HTMLの結果をGoogleサイトに登録できますか？」
【4】「面倒なので直接WEBに登録してください、Googleサイトでなくてもいいので！」
【5】「了解です。上記のHTMLをタブ形式に変更してくれますか？」⇒
【6】「HTMLインフォグラッフィックス形式にしてください」⇒
【7】「マインドマップ風のHTMLに変換してくれる？」⇒
【8】「ステップ・バイ・ステップ風に変換してください」
【9】「ステップ・バイ・ステップ風に１つずつ確認して、確認したら次の確認となるようなHTMLに変換」⇒
【10】Geminiの「Deepsearch」「Canvas」を使用して

★AIに指示するプロンプトは以下の用に曖昧で、単純なものです：
「インフォグラッフィックス風に！」、「マインドマップ風に！」「アコーディオン風に！」
「タブ風に！」、「学習用にステップバイステップ風に！」

【11】静止画＆動画の作成

★AIに指示するプロンプトは以下の用に曖昧で、単純なものです：
「趣味のカワセミの静止画を作成してください。」
「作成した静止画から動画を作成して見ます。」

【12】簡単なプログラムの作成(WEBページ)⇒

★AIに指示するプロンプトは以下の様に簡単なものです：
・「税引前利息(%)を指定すると、入力された預金金額、預金期間（何ヶ月）に応じて、税引き後利息(%)を表示して、
受け取れる利息金額を計算するJavascriptを作成して！」⇒
・「Gemini2.5にふさわしいイメージ画像(イラスト風に)を作成してください」
・「Gemini2.5のAPIを使用して、Gemini2.5に簡単な質問をするHTMLコードを書いてください⇒
なお、APIキーは内部で自動生成してください」

【13】音声の作成⇒

★AIに指示するプロンプトは以下の様に簡単なものです：
簡単に３大生成AIについて説明してください
生成後、「作成」「音声概要」を選択します。

【14】アプリ連携

・Geminiからアプリ(例えばGmail)を使用する
・「Googleスプレット」連携の例(アプリからGeminiを使用する)
・GoogleChrome連携(これだけはAddOn、ブラウザ拡張機能)

【15】トリニタス社技術コラムを評価しました⇒

プロンプトは以下です：未だ少し「？」の箇所もありますが・・・
「trinitas.jp/columnから最新の30件をリストしてください」・またAIから見た評価も追加してください・またこのなかからBEST３を選んでください」・さらに、抽出した30件の各々について、それぞれのアイキャッチ画像と簡単な説明(5-6行程度)を追加してください。 ※「作成」「インフィグラフィックス」で作成しました、所要時間は30分です！

【16】マインドマップの作成

・これは「NoteBOOK LM」の機能です
・全体構成が、非常に判りやすい！
※Gemini2.5に機能がないのが残念です。

○生成された出力を確認

○生成HTML一覧

【2】「結果をカラフルで見栄えがするHTMLにまとめてください」

【5】「了解です。上記のHTMLをタブ形式に変更してくれますか？」

【6】「HTMLインフォグラッフィックス形式にしてください」

【7】「マインドマップ風のHTMLに変換してくれる？」

【8】「ステップ・バイ・ステップ風に変換してください」

【9】「ステップ・バイ・ステップ風に１つずつ確認して、確認したら次の確認となる

★アニメーション効果⇒

【10】「Deepsearch」「Canvas」を指定して
○普通のWEBページ風に！

○インフォグラッフィックス風に！

○マインドマップ風に！

○アコーディオン風に！

○タブ風に！

○学習用にステップバイステップ風に！

【11】静止画＆動画の作成
○カワセミのイラストを４件作成しました。
※「GENINI2.5」で作成しました。

1枚目：プロンプト画面です。 2枚目：生成されたHTMLコードです。
3枚目：生成されたHTMLコードのプレビュー画面です。
4枚目：実際に作成されたWEBページです。

○色々なかわいいカワセミのイラスト画です。
最後のイラストは、「ゆりの花」を指定したのですが、「ハスの花」になっていました
また、魚を捕まえるではなく、捕まえる前にイラストです。

○作成したカワセミのイラストから動画を作成しました。
※「Google AI STUDIO」で作成しました。無料版のGemini2.5では動画は作成できませんでした(~_~;)

・まず動画にする前のイラスト画です。

・動画作成指示画面です
「Generate Media」、「Generate VIDEO」「VEO」と指定します。

・作成したカワセミ動画です

【12】コード生成
定期預金利息計算。

Geminiイラスト画像生成：Geminiイメージ画像生成。

VS CODEに「Gemini Code assistant」を組込み

AIを活用して、Vibeコーディングが可能になります。
※Vibeコーディングの特徴:


自然言語での指示:
プログラマーは、詳細なコードを書く代わりに、AIに「こういうアプリが作りたい」「この機能が欲しい」といった自然言語で要望を伝えます。
AIによるコード生成:
AIがプログラマーの指示に基づいて、コードを自動的に生成します。
プログラマーの役割:
プログラマーは、AIが生成したコードをレビューし、必要に応じて修正や調整を行います。
スピード開発:
自然言語での指示とAIによる自動生成により、開発スピードを大幅に向上させることが期待できます。
初心者でも開発可能:
プログラミング初心者でも、AIの力を借りることで、比較的簡単にアプリケーション開発を始められます。
Vibeコーディングのメリット:
開発スピードの向上:
自然言語での指示とAIによる自動生成により、開発スピードを大幅に向上させることが期待できます。
開発コストの削減:
コードを自分で書く必要がないため、開発コストを削減できます。
開発の敷居を下げる:
プログラミング初心者でも、AIの力を借りることで、比較的簡単にアプリケーション開発を始められます。
新しい発想の実現:
従来の開発手法では思いつかなかったような、新しいアイデアや機能を実現できる可能性があります。
Vibeコーディングの注意点:
AI任せにならない:
AIが生成したコードは、必ずレビューし、必要に応じて修正や調整を行う必要があります。
セキュリティリスク:
生成されたコードのセキュリティリスクを考慮する必要があります。
プロンプト設計力:
AIに正確な指示を出すための、プロンプト設計力が重要になります。
コードの品質:
AIが生成したコードの品質は、AIの性能やプロンプトの内容に左右されます。
Vibeコーディングは、AI技術の進化によって生まれた、新しいプログラミングのスタイルです。従来の開発手法に比べて、開発スピードの向上や開発コストの削減、開発の敷居を下げるなどのメリットがありますが、注意点も存在します。AIとプログラマーが協力することで、より効率的で革新的なソフトウェア開発が可能になるでしょう。

Gemini2.5機能を利用してプログラム開発ができます
Python言語でGemimiAPIを呼び出します

「GoogleAI STUDIO」でpythonコード実行をシミュレートします

これも便利な機能ですね！環境構築等なしで動作確認できます

Gemini2.5API使用例：Geminiクローンの作成

○参考までにJavascriptからGemini2.5 APIを呼び出すコードの一部を載せます※
URLは以下です：`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`
※${apiKey}には取得したAPIキーを指定します。

プロローグ

３大生成AIについて

３大生成AIについて

静止画＆動画生成

コード生成

音声生成

アプリ連携

トリニタス社技術コラムの評価

マインドマップの作成

おまけ：LLMか？SLMか？

エピローグ