top of page
MSL

【Gemini 3.5】CanvasとVibe Codingでプログラミングが劇的進化!Google Colabとの最強連携を徹底解説


こんにちは。

近年、AI技術の進化は目覚ましいものがありますが、皆さんは日々の業務や学習でAIを十分に活用できているでしょうか。


今回は、最新の「Gemini 3.5」(および基盤となるGemini 3ファミリー)の登場によってもたらされた、驚くべき機能についてご紹介します。


これまでのAIツールは、単に「質問に対して精度の高い回答を返す」というものでした。


しかし、Gemini 3.5では、これらのクリエイティブ・調査ツールが単に「精度が上がった」という次元にとどまらず、「AIが自律して動き、よりインタラクティブに人間と協働する」というレベルへと劇的に強化されています。


特に注目すべきは「Canvas(キャンバス)」と、そこで行われる「Vibe Coding(バイブコーディング)」という新しい開発体験です。


本記事では、プログラミング経験がない社会人の方にも分かりやすく、これらのエキサイティングな機能の詳細と、Google Colabを使った具体的な実践例を徹底解説します。

Gemini 3.5の新機能CanvasとVibe Codingを活用してシームレスにプログラミングを行う
Gemini 3.5の新機能CanvasとVibe Codingを活用してシームレスにプログラミングを行う

1. これまでの常識を覆す!Geminiの新機能「Canvas」とは?


私たちがこれまでAIにプログラムのコードや文章の作成を依頼するとき、チャット欄に結果がズラッと返ってくるのが一般的でした。


しかし、長いコードをコピー&ペーストして別のエディタに貼り付けたり、一部だけを修正してもらうために何度もやり取りをするのは、少し手間がかかりましたよね。


Geminiの新機能である「Canvas(キャンバス)」は、この「AIにコードを書いてもらう」という体験を根本から変える画期的な作業スペースです。


画面が左右に分割されるシームレスな体験


Canvasが起動すると、通常のチャット画面とは別に、画面の右側に「ドキュメント・コード・アプリ専用の作業スペース」が現れます。


画面が左右に分割(サイドバイサイド)されるため、左側のチャット欄でAIと会話を続けながら、右側のCanvas内にあるコードを直接確認することができます。


これにより、「ここをもう少し修正して」といった指示出しが、圧倒的にスムーズになり、プログラムが実際に動く様子を確認しながら修正や実行をシームレスに行えます。


過去のバージョンへの巻き戻しも自由自在


AIとやり取りを重ねる中で、「やっぱり2回前のコードの方が良かったな」と思うことはありませんか。


Canvasにはバージョン履歴機能が備わっており、過去の状態にいつでも簡単に巻き戻すことが可能です。


エラーを恐れることなく、様々なアイデアを試行錯誤できるのは、ビジネスパーソンにとって大きなメリットと言えるでしょう。


2. 専門知識不要!「Vibe Coding」がもたらす開発革命


Canvasという素晴らしい作業スペースを手に入れたことで、新たなプログラミング手法「Vibe Coding(バイブコーディング)」が可能になりました。


Vibe Codingとは、プログラミングの専門知識(文法や構文)がなくても、作ってほしいものの「要件や雰囲気(バイブス)」を言葉で伝えるだけで開発できるスタイルです。


言葉の指示だけでAIが爆速コーディング


「ここをもうちょっとポップなデザインにして」

「このボタンを押したら、下のグラフが動くようにして」


あなたがAIに伝えるのは、このような日常的な言葉だけで十分です。


AIが裏側で複雑なコードを自動的に書き換え、Canvas内で即座にアプリがアップデートされていきます。


動作するWebページやツールがその場で完成


Vibe Codingを使えば、単なるテキストのコードではなく、実際に動作するWebページ、便利な社内ツール、さらにはミニゲーム(One Shot Arcadeなど)まで、爆速で作り上げることができます。


「自分にはプログラミングスキルがないから…」と諦めていた方でも、アイデアさえあれば、それを形にするエンジニアを専属で雇ったような体験ができるのです。


3. 環境構築ゼロ!Google Colabとの最強の連携


Geminiが生成した素晴らしいPythonプログラムがあっても、「どうやって自分のパソコンで動かせばいいの?」と悩む方は多いはずです。


Pythonを動かすための環境構築は、初心者にとって最初の大きな壁になります。


しかし、Googleのエコシステムを活用すれば、この壁は一瞬で消え去ります。


ワンクリックでColabへエクスポート


GeminiのCanvas内で作成したPythonプログラムは、画面上のボタンからワンクリックで「Google Colab」にエクスポートできます。


Google Colab(Google Colaboratory)は、ブラウザ上で直接Pythonを無料実行できるGoogleの環境です。


面倒なインストール作業や環境設定は一切不要で、作成したプログラムをそのまま動かすことができます。


4. 【実践】Google Colabで実際に動くプログラムを作ってみよう


それでは、Vibe Codingの威力とGoogle Colabの連携を実際に体験してみましょう。


Google環境の強みである「データの視覚化」と「インタラクティブな操作」を体感できるサンプルをご用意しました。


Geminiのチャット欄に、以下のプロンプトを入力してCanvasを起動させてみてください。


Gemini(Canvas)に入力するプロンプト例


Google Colabでそのまま実行できるPythonプログラムをCanvasに作成してください。内容は、日本の主要3都市(東京、大阪、札幌)の「模擬的な年間気温の変化」を折れ線グラフで比較するものです。
以下の要件を満たしてください:
・データ分析ライブラリ(pandas、matplotlib)を使用する。
・ipywidgets を使って、画面上でユーザーが「特定の都市」をドロップダウンメニューから選択すると、その都市のグラフが強調表示されるインタラクティブな仕組みにする。
・Google Colabで日本語が文字化けしないように、フォントの設定(japanize-matplotlibのインストールと設定)も含めてください。

Gemini(Canvas)のイメージ
Gemini(Canvas)のイメージ

Canvas上に生成されるコード(サンプル)


プロンプトを入力すると、画面右側のCanvasに以下のようなPythonコードが自動的に記述されます。


# 1. 必要なライブラリのインストール(Colabでの日本語文字化け対策含む)
!pip install japanize-matplotlib -q

import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
import japanize_matplotlib  # 日本語化の適用
import ipywidgets as widgets
from IPython.display import display, clear_output

# 2. 模擬データの作成(1月から12月の平均気温)
months = [f"{i}月" for i in range(1, 13)]
data = {
    "月": months,
    "東京": [5.4, 6.1, 9.4, 14.3, 18.8, 22.1, 25.7, 27.4, 23.8, 18.5, 13.0, 7.8],
    "大阪": [6.0, 6.3, 9.4, 15.1, 20.1, 24.4, 28.5, 29.7, 25.7, 19.7, 13.7, 8.4],
    "札幌": [-3.2, -2.7, 1.1, 7.1, 12.9, 16.7, 20.7, 22.3, 18.6, 12.1, 5.2, -0.9]
}
df = pd.DataFrame(data)

# 3. グラフ描画用の関数
def plot_temperatures(selected_city):
    clear_output(wait=True) # グラフの重複を防ぐ
    plt.figure(figsize=(10, 6))
    
    # 各都市のデータをプロット(選択された都市を太線にする)
    for city in ["東京", "大阪", "札幌"]:
        if city == selected_city:
            plt.plot(df["月"], df[city], marker='o', linewidth=3.5, label=f"{city} (選択中)", color='crimson')
        else:
            plt.plot(df["月"], df[city], marker='x', linewidth=1.5, linestyle='--', label=city, color='gray')
            
    plt.title("主要都市の月別平均気温比較(模擬データ)", fontsize=16)
    plt.xlabel("月", fontsize=12)
    plt.ylabel("気温 (℃)", fontsize=12)
    plt.grid(True, linestyle=':', alpha=0.6)
    plt.legend(loc="upper left")
    plt.show()

# 4. インタラクティブなドロップダウンメニュー(ipywidgets)の作成
dropdown = widgets.Dropdown(
    options=["東京", "大阪", "札幌"],
    value="東京",
    description="都市選択:",
    disabled=False,
)

# メニュー変更時にグラフを再描画する設定
widgets.interactive(plot_temperatures, selected_city=dropdown)


5. 超簡単!Google Colabでの実行手順


Canvasにこの見事なコードが表示されたら、あとは動かすだけです。


以下の3つのステップを踏むだけで、すぐにプログラムを実行できます。


ステップ1:Colabへエクスポート


Canvasの右上にある「Google Colabで開く」または「エクスポート」のアイコンをクリックします。


ステップ2:自動でタブが開く


あなたのGoogleドライブ内に、新しいColabノートブック(.ipynb)が自動生成され、ブラウザの別タブで開きます。


特別な設定は一切必要ありません。


Google Colabのコード入力画面
Google Colabのコード入力画面

ステップ3:プログラムの実行


Colab画面が開いたら、キーボードで「Ctrl + F9」を押すか、上部メニューの「ランタイム」から「すべてのセルを実行」を選択します。


実行結果の感動を体験しよう


プログラムが実行されると、Colabの画面上にドロップダウンメニューが出現します。


メニューから「大阪」や「札幌」に切り替えてみてください。


その場でグラフの赤い太線がシュッと切り替わる、美しくインタラクティブなグラフが目の前に完成します。


Google Colabの実行画面
Google Colabの実行画面

まとめ:社会人こそGeminiとVibe Codingを活用しよう


いかがでしたでしょうか。あなたがコードを1行も書かなくても、Google環境でバッチリ動く高度なプログラムがあっという間に手に入りました。


これこそが、Gemini 3.5の「Canvas」と「Vibe Coding」がもたらす最大の威力です。


データの可視化や日々のルーチンワークの自動化など、社会人が抱える多くの課題は、この新しいAIの力で劇的に改善できるはずです。

Google Colab上でGeminiが生成したPythonプログラムを実行し、インタラクティブなグラフを表示可能に
Google Colab上でGeminiが生成したPythonプログラムを実行し、インタラクティブなグラフを表示可能に

専門知識の壁はすでに取り払われました。まずは「こんなツールがあったらいいな」というあなたのバイブス(想い)を、Geminiにぶつけてみてください。


きっと、あなたのビジネスを加速させる強力なパートナーとなってくれるはずです。


次回の記事でも、AIを活用した最新の業務効率化テクニックをご紹介しますので、お楽しみに!

コメント


(C) 株式会社マーケティングサイエンスラボ

(C) MSL,2020-2025

bottom of page