最新の高性能AIモデル「Gemini 3」を試してみる

最新の高性能AIモデルが続々とリリース
「Gemini 3」を使ってみる
まとめ

「Gemini 3」を使ってみる

「Gemini 3 Pro」を試したいところですが、ブラウザから無料で使える「Gemini 3」を使ってみました。

アイキャッチ画像の生成

「Gemini 3」は、マルチモーダルの機能が向上したということで、アイキャッチ画像を生成してみることにします。

以下のプロンプトで画像を生成してもらいました。

「Gemini 3」と「Claude Opus 4.5」と「GPT-5」が競合しているアイキャッチ画像を作って。

アイソメトリックのイラストにして。

背景の色は、白を基調にして。
カラフルな、ポスターカラーの色使いにして。

10秒ちょっとで以下の画像を生成してくれました。

この画像をこの記事のアイキャッチ画像として使っています。

「THE AI RACE」というタイトルもキャッチーだし、「Gemini 3」が先頭を走っているところも手前味噌でしたたかですね。

リアルな画像も生成できる

もっとリアルな画像も生成できます。

夕日に染まる富士山を背景に、キャンピングカー「TOY'S BOX 470H」で、海辺でキャンプをしている画像を作って。

とお願いしましたが、私の「TOY'S BOX 470H」と違うバンコンのキャンピングカーだったので、次のように画像をアップして、

「TOY'S BOX 470H」の画像はこれです。
キャンピングカーの画像を差し替えて。

と修正をお願いしました。

すると、以下のような完璧な画像を作ってくれました。

夕暮れ時なので、焚き火だけでなく、「TOY'S BOX 470H」のルームライトが灯っているところなんか、最高じゃないですか？
ちょっと驚きです。

世界地図

次に、世界地図を描くプログラムコードを作ってもらいます。
数回のプロンプトで自分の要望を伝えていきます。

こちらの要望に対し、プログラムコードをどのように変更するかも提示してくれるので安心です。
不具合に対する修正能力も高いです。

ミラー図法の世界地図（白地図）をJavaScriptで描くプログラムを作って。
地図データはNatural Earthから取得して。

Miller Cylindrical Projection（ミラー図法）を用いて、Natural Earthのデータから世界地図を描画するJavaScriptプログラムを作成します。

このプログラムでは、軽量で扱いやすい D3.js ライブラリを使用します。D3.jsは地図投影法の計算に非常に優れており、Natural Earthのデータを変換して描画するのに最適です。

地図の中央を日本の経度に合わせて。

海岸線の解像度を上げるには、Natural Earthのデータセットを 110m（低解像度）から 50m（中解像度）または 10m（高解像度）に変更します。

ウェブブラウザでの動作速度と見た目のバランスが良い 50m 解像度を使用したコードを提示します。また、解像度が上がるとデータ量が増えるため、読み込み完了までキャンバスをクリアにする処理を含めています。

国境線を入れて欲しい。

国境線を追加するには、Natural Earthの「Admin 0 Countries（国の境界線）」データセットを使用します。

以前使用した land（陸地）データは地形のみですが、admin_0_countries データを使用することで、各国の境界線を個別に描画できるようになります。

Vue3を使ったコードに変更して。

Vue 3 (Composition API) を使って、これまでの Miller図法の世界地図をコンポーネント化します。

Vue 3 で地図を描画する場合、onMounted フックを使用して、DOM（Canvas）が確実に生成された後に D3.js の描画ロジックを走らせるのが一般的です。

特定の国がホバーされたときにツールチップを出すような機能を追加して。

Canvasでのホバー検知（Tooltip）は、SVGとは異なり、マウスの座標からどのポリゴン（国）の上にいるかをD3の投影法を使って逆算する必要があります。

以下のコードでは、mousemove イベントを監視し、d3.geoContains を使って現在マウスの下にある国を特定し、その名前を表示する機能を追加しました。

ツールチップの国名は日本語にして。

国名を日本語にするには、Natural EarthのGeoJSONデータに含まれる日本語プロパティ NAME_JA を参照するようにコードを修正します。

CSSやレスポンシブ対応で地図のサイズを変更したときに、マウスのホバー位置を補正するようにして欲しい。

地図のサイズを変更（CSSでリサイズしたり、レスポンシブ対応したり）すると、ブラウザ上の表示サイズとCanvasの内部解像度にズレが生じます。マウスの座標をそのまま invert に渡すと位置がズレるため、**「Canvasの内部サイズと実際の表示サイズの比率」**を使って座標を補正する必要があります。

以下のコードでは、マウス座標を計算する際に scaleX と scaleY を導入し、表示サイズに関わらず正しく国を特定できるように修正しました。

国名の文字数の表示に必要なツールチップの幅が確保されてないので、文字が重なってしまいます。

原因が完全に特定できました。ツールチップの幅が固定されているか、改行の制御がなされていないために、HTML要素内で文字が溢れて（Wrapして）重なってしまっている状態です。

CSSに white-space: nowrap;（自動改行の禁止）を追加し、さらに width: auto;（コンテンツに合わせる）を明示することで、国名がどれだけ長くても（例：「グレートブリテン及び北アイルランド連合王国」など）一行でクッキリと表示されるように修正します。

地図の陸地部分は、カラーコード#f5f5dcで塗りつぶして。
地図の海は、カラーコード#e0f7fa で塗りつぶして。
マウスでホバーした国は、カラーコード#ffa500で塗りつぶして。

以下の要件に従い、コードを修正します。

陸地色: #f5f5dc (ベージュ / Beigewood)
海色: #e0f7fa (非常に薄い青 / Pale cyan)
ホバー色: #ffa500 (オレンジ / Orange)

ホバーした国を塗りつぶすには、handleMouseMove 関数内でホバーされた国を特定した後、その国をCanvasに再描画するロジックを drawMap 関数に追加する必要があります。合王国」など）一行でクッキリと表示されるように修正します。

地図の緯度線/経度線は消して。

地図の描画ロジックから緯度線/経度線（Graticule）の描画処理を削除します。

このVue3のコンポーネントをブラウザで直接実行できるにhtmlファイルにして欲しい。

Vue 3のコンポーネント構造を維持しつつ、ビルド環境（npm等）なしでブラウザで直接実行できるように、CDNを利用した単一のHTMLファイルに書き換えます。

Vue 3はグローバル変数版を使用し、setup関数内で地図の描画ロジックを実装します。

「Gemini 3」が最終的に提示したプログラムコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Miller Projection - No Graticules</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://d3js.org/d3-geo-projection.v4.min.js"></script>
    <style>
        body { margin: 0; background-color: #f1f5f9; font-family: 'Hiragino Sans', Meiryo, sans-serif; }
        #app { display: flex; flex-direction: column; align-items: center; padding: 20px; }
        .map-container { position: relative; background: #ffffff; box-shadow: 0 10px 25px rgba(0,0,0,0.1); border-radius: 8px; cursor: crosshair; }
        canvas { display: block; width: 100%; height: auto; max-width: 1000px; }
        
        /* ツールチップのスタイル */
        .tooltip {
            position: absolute; pointer-events: none; background: #1e293b; color: white; padding: 8px 16px; 
            border-radius: 6px; font-size: 15px; font-weight: bold; box-shadow: 0 4px 12px rgba(0,0,0,0.3); 
            z-index: 1000; white-space: nowrap; width: auto; min-width: fit-content;
            transform: translate(15px, 15px);
        }
    </style>
</head>
<body>

<div id="app">
    <strong>世界白地図 (ミラー図法 / 国名表示対応)</strong>
    <div class="map-container" @mousemove="handleMouseMove" @mouseleave="handleMouseLeave">
        <canvas ref="mapCanvas" :width="internalWidth" :height="internalHeight"></canvas>
        <div v-if="hoveredCountry" class="tooltip" :style="tooltipStyle">
            {{ hoveredCountry }}
        </div>
        <div v-if="loading" style="position:absolute; inset:0; display:flex; justify-content:center; align-items:center; background:rgba(255,255,255,0.7);">読み込み中...</div>
    </div>
</div>

<script>
    const { createApp, ref, onMounted, computed } = Vue;

    createApp({
        setup() {
            const mapCanvas = ref(null);
            const internalWidth = 1600;
            const internalHeight = 1000;
            const loading = ref(true);
            const hoveredCountry = ref(null);
            const mousePos = ref({ x: 0, y: 0 });
            
            let geoData = null;
            let projection = null;
            let path = null;
            let context = null;

            // カラーコード定義
            const SEA_COLOR = "#e0f7fa";
            const LAND_COLOR = "#f5f5dc";
            const HOVER_COLOR = "#ffa500";
            const BORDER_COLOR = "#8b4513";

            onMounted(async () => {
                context = mapCanvas.value.getContext('2d');
                
                projection = d3.geoMiller().scale(260).translate([internalWidth / 2, internalHeight / 2]).rotate([-135, 0]);
                path = d3.geoPath(projection, context);

                // データURL（110m解像度）
                const geoDataUrl = "https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_110m_admin_0_countries.geojson";

                try {
                    geoData = await d3.json(geoDataUrl);
                    loading.value = false;
                    drawMap(null);
                } catch (error) { console.error(error); }
            });

            const drawMap = (hoverFeature) => {
                // 1. 海の塗りつぶし
                context.fillStyle = SEA_COLOR;
                context.fillRect(0, 0, internalWidth, internalHeight);

                // 2. 経緯度線の描画ロジックを削除しました (以前のコード: const graticule = d3.geoGraticule(); ...)

                // 3. 全ての国を通常色で塗りつぶし＆境界線を描画
                context.beginPath(); 
                path(geoData);
                context.fillStyle = LAND_COLOR;
                context.fill();
                context.strokeStyle = BORDER_COLOR;
                context.lineWidth = 1.0;
                context.stroke();
                
                // 4. ホバー中の国を強調描画 (上書き)
                if (hoverFeature) {
                    context.beginPath();
                    path(hoverFeature);
                    context.fillStyle = HOVER_COLOR;
                    context.fill();
                    
                    // 境界線を再度描画
                    context.strokeStyle = BORDER_COLOR;
                    context.lineWidth = 1.2; 
                    context.stroke();
                }
            };

            const handleMouseMove = (event) => {
                if (!geoData || !projection) return;
                const rect = mapCanvas.value.getBoundingClientRect();
                const scaleX = internalWidth / rect.width;
                const scaleY = internalHeight / rect.height;
                const canvasX = (event.clientX - rect.left) * scaleX;
                const canvasY = (event.clientY - rect.top) * scaleY;

                mousePos.value = { x: event.clientX - rect.left, y: event.clientY - rect.top };
                
                const coords = projection.invert([canvasX, canvasY]);
                while (coords[0] > 180) coords[0] -= 360;
                while (coords[0] < -180) coords[0] += 360;

                const feature = geoData.features.find(f => d3.geoContains(f, coords));
                const currentCountryName = feature ? (feature.properties.NAME_JA || feature.properties.NAME) : null;
                
                if (hoveredCountry.value !== currentCountryName) {
                    hoveredCountry.value = currentCountryName;
                    drawMap(feature); 
                }
            };

            const handleMouseLeave = () => { 
                if (hoveredCountry.value !== null) {
                    hoveredCountry.value = null;
                    drawMap(null);
                }
            };

            const tooltipStyle = computed(() => ({
                left: `${mousePos.value.x}px`,
                top: `${mousePos.value.y}px`
            }));

            return { mapCanvas, internalWidth, internalHeight, loading, hoveredCountry, handleMouseMove, handleMouseLeave, tooltipStyle };
        }
    }).mount('#app');
</script>

</body>
</html>

この投稿にWordPressのブロックエディタで「カスタムHTML」ブロックを配置し、上記のHTMLのコードを貼り付けてみます。

世界地図が表示され、地図の上をマウスでホバーすると国名が表示されるはずです。

Miller Projection - No Graticules

世界白地図 (ミラー図法 / 国名表示対応)

読み込み中...