Web版立体グリグリ

Web版立体グリグリ
開発：近藤昌也（Windows版データ読み込み機能追加：村松浩幸）
開発環境
– HTML5 + CSS3 + JavaScript (Vanilla)
– [Three.js](https://threejs.org/) v0.128
– [OrbitControls](https://threejs.org/docs/#examples/en/controls/OrbitControls)

このアプリケーションは，Three.js を使って構築された「Web版立体グリグリ」です。
以下からリンクしてください

Web版立体グリグリ（こちらをクリックしてください）

「Windows版立体グリグリ」をWebでも再現できたらというコンセプトで，後述のように生成AIを活用し開発されました。
さまざまな立体モデルを回転・表示し，正面図・平面図・側面図・等角図・正投影図などの視点で確認できます。

主な機能
– マウスによる3Dモデルの回転操作
– 複数の視点切り替え（正面図，平面図，右側面図，等角図）
– 正投影図（4分割ビュー：平面・等角・正面・側面）
– 選択できる立体モデル（20種類以上）
– 画面サイズに応じたレスポンシブ対応
– Windwos版立体グリグリのデータを読み込み・表示

ローカル版の使用方法
ZIPを展開し，index.htmlをクリックすると，オフラインでローカルの環境でも使用可能です。
（このプログラムはローカル環境専用です）

Web立体グリグリ（オフライン対応版）

1 ファイル 123.75 KB

ダウンロード

開発コラム

AIと共創する「Web版立体グリグリ」開発プロセス
1. プロジェクト
背景と目的
2022年に登場したChatGPTにより，生成AIが一般化してきています。私はChatGPT，Google Gemini ，Claude，Perplexity，Gensparkなど，様々なAIを日々触る中で，明らかに生成AIが出始めた2023年よりも，そして翌年2024年のモデルよりも2025年現在のAIモデルが劇的に賢くなっていると感じました。特に，月額課金をしなくても使用可能なGeminiのモデルが，あまりにも性能が高く感じたため，「もしかしたらプログラマーとして特殊な訓練を受けていない自分でも，授業で使えるソフトが作れるのでは？」と考えました。
制作の対象とした「立体グリグリ」はこれまでWindows専用アプリケーションとして提供されていましたが，授業中に自分のWindows11ノートパソコンで使用している際に，VBエラーが起きてソフトが落ちる現象が頻発していました。そこで，Chromebookの普及も踏まえ，「OSに依存しないWebブラウザベースの教材」を作ってみようと考えました。Windowsマシンが生徒用機として整備されていない勤務校においても，これにより，場所やデバイスを選ばず，より多くの学習環境で活用できると考えました。

2. AIを活用した開発アプローチ：Geminiとの対話
本プロジェクトでは，Web版開発の試行段階において，GoogleのAIモデル「Gemini（旧称：Bard）」を主要な開発パートナーとして活用しました。従来のソフトウェア開発とは異なり，開発者（私）がAIに対し日本語で直接要件や修正指示を出し，Geminiが即座にHTML/CSS/JavaScriptコードを生成する対話型のアプローチを採用しました。

Gemini Canvasを使用しました。Canvasは，Google の生成AI「Gemini」に追加された新しい機能で，AIと対話しながら，テキストやコードを共同で作成・編集できるインタラクティブな作業スペースです。従来はVSCodeなどのエディタを別途開いておき，AIとやりとりした内容をユーザーがコピーアンドペーストしながら開発を行う必要がありましたが，Chromeのブラウザ内に開発環境が用意されて何も準備しなくても，会話のみでアプリが勝手に完成するようなイメージです。

開発フローの具体例：
1)初期機能の実装: まず，基本的な立方体や球体といった3Dモデルの表示と，マウスドラッグによる回転操作といった「立体グリグリ」の核となる機能をGeminiに指示し，コードのひな形を生成させました。

2)多様なモデルの追加: 汎用的な基本図形に加えて，学習内容に関連する具体的なモデル（例：自動車（SUV），スマートフォン，自動販売機，事務イス，めがね，ドローン，スペースロケット，野球のバットなど）の作成を逐次依頼しました。AIはこれらのモデルをThree.jsの基本図形を組み合わせてワイヤーフレームモデルとして構築し，提示しました。
プログラミングだけで無く，3Dモデリングまでやってくれるのは，嬉しい誤算でした。

3)機能追加と修正の繰り返し: カメラ視点（正面図，平面図，右側面図，等角図）の切り替え機能や，複数の視点を同時に表示する「正投影図モード」の実装なども，Geminiとの対話を通じて実現しました。
○ 例：「ホッチキスモデル」の実装過程例えば，それまで存在していた「トランペット」モデルを削除し，代わりに「ホッチキス」のモデルを追加するという要件に対しても，私はGeminiに「やっぱりトランペットの３Ｄモデル作りは，何回指示を出してもうまくいかないのでトランペットを消してください。代わりにホッチキスを作ってみて下さい」と具体的に指示。Geminiは即座にトランペットモデルのコードを削除し，底板，レバー，ヒンジなどのパーツを組み合わせたホッチキスの3Dワイヤーフレームモデルを生成・実装しました。

4)UI/UXの改善: シンプルな操作性という要件に基づき，ボタン配置や情報メッセージの表示など，ユーザーインターフェースに関する調整もAIに相談しながら進めました。最初は，Windows版の立体グリグリと同じで作ろうと思っていましたが，左下の図には「正面図」右下には「右側面図」左上には「平面図」とタイトルを付けてもらうように依頼しました。

3. 得られた所感と教育的意義
AIとの共創によって，短期間でWeb版の「立体グリグリ」の仮公開までこぎつけることができました。（実際は３０分程度）このプロセスを通じて，以下の教育的意義を強く感じています。
● 「欲しい教材は作れる」時代の到来: 欲しい教材が市販されていない場合でも，プログラミング知識とAIを組み合わせることで，自ら創造し，形にできる可能性が広がりました。
● 基礎知識の重要性: AIがコードを生成する一方で，そのコードを理解し，意図通りに動いているかを確認し，さらに詳細な指示や修正を行うためには，プログラミングや3D処理に関する基礎的な技術科の知識が不可欠です。技術が進化した今だからこそ，その「基礎を学ぶ」ことの重要性が増しています。
● 「創造する力」と「課題解決」の育成: このような教材開発のプロセス自体が，子どもたちに「創造する力」や「技術を用いて身近な課題を解決する視点」を伝える貴重な機会となると考えます。

4. 今後の展望
今後もフィードバックを元にUIや機能改善を継続し，より使いやすい教材となるようにしていくだけでなく，ここまで実用的なソフトを作れるのであれば，立体グリグリ以外にもどんどんアイディアを出すことが大切になってくると感じています。
これまでは，「プログラムの知識が無いから諦めよう」どころか，そもそも「自分には実用的なアプリを作る事は一生できない」と思っていたのに，そうでは無いことがはっきりしました。これからは，今まで動画で見せていた物をリアルタイムシミュレーターを作って見せるなどができるようになったので，いろいろな授業毎にアプリを作る事が当たり前になりそうです。

投稿者：近藤　昌也（石川県）

Windows版立体グリグリデータの読み込み・表示機能追加
近藤先生の教材投稿を受け，生成AIによる教材アプリ開発の有効性を再認識しました。
そこで公開にあたり，オリジナルの立体データだけではなく，Windows版立体グリグリのデータも表示できないかと考え，ChatGPTに支援を受けながら，投稿教材を改良させていただきました。

１．オリジナルデータの表示
まずローカル環境で読み込み，表示をする機能を追加。しかしなかなかすべてのデータがオリジナルと同じように表示できず，何度か試行錯誤しました。ChatGPTにすべて直してもらうと，想定部分以外も修正されていまうというようなことも起きたため，表示に相当する該当のJavaScriptのコード部分に絞り，ChatGPTと対話しながら最適値を設定していきました（まだオリジナルを完全に再現できてはいませんが）。主に以下の部分で，読み込み時のデータの回転角を調整（ローカル版では調整して試せます）。
// STEP.1 スケール＆回転
group.scale.setScalar(scale);
group.rotation.x = THREE.Math.degToRad(-90);
group.rotation.y = THREE.Math.degToRad(0);
group.rotation.z = THREE.Math.degToRad(180);

２．オリジナルデータの読み込み
次に技術ドットコムのサイト上でそのまま読み込めるように，プログラムとともにデータも置き，ブラウザ上からすべて操作できるように改良をしました。
オリジナルデータはShift JISコードかつ日本語ファイル名でした。これを変換する方法もあったのですが，オリジナルデータには手を付けず，プログラム側でエンコードするように処理を指定し，提示された読み込み部分のコードを組み込み，テストしながら修正をしていきました。
中身がある程度把握できてれば，全部AIに任せるよりも，部分に絞って修正した方が効率的でした。今後さらにAIのコード生成力も上がってくるでしょうが，現状では，ある程度以上の大きさのプログラムを意図通りにエラーなく生成してくれるには，まだ距離がありそうです。

３．技術リテラシーはやはり重要
生成AIはコードを生成してくれるとはいえ，今回のケースだと，JavaScriptやCSS,Webサーバーや文字コード等の基礎的な理解がなければ，途中で壁にあたってしまったことでしょう。近藤先生が書かれた「技術が進化した今だからこそ，その『基礎を学ぶ』ことの重要性が増しています。」はその通りです。もっと言えば，「技術リテラシー」を身につけた子どもたちが，AIを適切に活用すれば驚くような成果が得られると考えます。この話に関連し，以下の書籍の一読をお勧めします。

大塚あみ(2025)＃100日チャレンジ毎日連続100本アプリを作ったら人生が変わった，日経BP

生成AIが広がれば，プログラミングの学びが不要になるのではなく，むしろ体験を通してプログラミングをすること＝体験的に技術を学ぶことがより重要になってくるでしょう。そして技術リテラシーを活用した子たちが生成AIを活用することで，従来より格段に高い問題解決力を身につけられる可能性が広がると考えます。

４．新しい教材開発の可能性
今回の近藤先生のトライは，授業力や技術の理解を持った先生であれば，これまでハードルが高かったWebアプリなどの開発のハードルを一気に下げることを実証してくれたことに大きな意味があります。格段に教材開発の可能性が広がったのではないでしょうか。
ぜひ多くの先生方にトライいただくとともに，新たな投稿をお待ちしております。

投稿者：村松　浩幸（信州大）