【GAS】画像や3Dデータでメタバースの様なバーチャル展覧会を開いてみよう〔実装編〕実装用のサンプルデータとGASのコード

Googleの無料サービスである、GAS（Google Apps Script）を使って、画像や3Dデータを配置した仮想空間を作り、かんたんなバーチャル展覧会を開くコードを書いてみました。

以下はこの簡単なシステムの解説記事です。

（1）オープンソースのJSライブラリ「A-Frame」をテンプレートに導入する。

（2）A-Frameの立体要素にGドライブ内の画像や3Dデータを反映する

－－－－－－－－－－－－－－－－

今回の記事では、このアプリを実装するための、GASのスクリプトとテンプレートのコード、および記事で使った画像や立体図形のサンプルデータをご紹介します。

本記事では実装コードをご紹介していますが、様々な理由により、この説明通りにいかない場合があり得ます。こうした場合の対応は、申し訳ありませんが、自己責任・自己解決でお進めくださるよう、お願いいたします。　

GASによるプログラムはアクセス数に制約があるなど、個人や小規模なグループ内での利用を想定しており、規模の大きなグループや商用での利用は想定しておりませんのでご注意下さい。

『かんたんバーチャル展覧会』のシステム構成

今回のシステムは、「かんたんバーチャル展覧会」としました。このシステムの内容を改めてご紹介します。

システム概要

このWEBアプリのシステムは、以下の攻勢となっています。
・GASプロジェクトファイル
　　→テンプレートとスクリプト各１
・Gドライブ内のサンプルデータ
　　→画像（JPGファイル）、３D図形（GLBファイル）

３D表示に用いるA-Frameライブラリは、ネット上のURLを記載することで導入しますので、ダウンロード等は不要です。

システムの各構成要素の準備

サンプルデータ保存用のフォルダを用意する

ご自身のGドライブの中に、適当なサブフォルダを作成ください。フォルダ名は何でも結構です。

サブフォルダ

このサブフォルダ内に、以下のサンプルファイルを保存してください。

サンプルファイルを保存する

記事で使った3D図形１つと、画像２つをご用意しました。

以下の圧縮ファイル中に保存しましたので、宜しければご利用ください。

サンプルファイル.zip

645 KB

ファイルダウンロードについて

ダウンロード

上記からダウンロードしたファイルの中にある３つのファイルを、さきほど作成したGドライブ内のサブフォルダに保存しておきます。

サンプル画像などはご自身で用意して結構ですが、サイズはサンプルファイル程度にしてください。BASE64エンコードした文字列があまり長大なものだとプログラムが作動しない恐れがあるためです。

ファイルIDを確認する

ファイルをＧドライブ内に保存したら、プログラム中でファイルにアクセスするためにファイルIDを控えておきます。

ファイルIDは、Gドライブ内で対象ファイルを選択し、そのまま右クリックして、
　[共有]　→　[リンクをコピー]　
により得られるリンク用URLを参照します。

https：//drive.google.com/file/d/★ファイルID★/view?usp=drive_link

参照したURLの文字列で、上記の★～★部分がファイルＩＤとなります。

GASプロジェクトファイルを作成する

Gドライブ内に、プロジェクトファイルを新規作成します。

作成は、Gドライブの新規作成ボタン（＋マークのアイコン）をクリックして、「その他」を選択します。

次いで、Google Apps Script をクリックすると、作成されます。

次いで、プロジェクトファイルを開き、プロジェクト内に、スクリプトファイルを1つ、テンプレートファイルを1つ作成します。

スクリプト：コード.gs　（デフォルトあり）
テンプレート：　INDEX.html　

スクリプトはデフォルトで作成されていますが、テンプレートは以下の手順で作成します。

まずヘッダの「＋」をクリックし、

「HTML」を選択し、

テンプレート名を「INDEX.html」として追加します。

スクリプトのファイル名は何でも結構ですが、テンプレートの名称はスクリプト中で利用していますので、変えないでください。

作成後は、以下の様なファイル構成になるはずです。

プロジェクト内のファイルにコードを記述する

プロジェクト内に作成したスクリプトやテンプレートファイルにコードを記述します。

対象ファイルをクリックすると、以下の様にエディタ画面になりますので、ここに本記事でご紹介するコードをコピー＆ペーストします。

コード.gsのコード

デフォルトで以下の様になっています。

元のコードを全て削除した上で以下のコードを貼り付けてください。

//-----------------------------------------
//----A-FrameでGドライブのファイルを表示-------
//---著作：Particlemethod-2024年07月28日-----
//---使用は自由ですが著作権は作成者に帰属します---
//-----------------------------------------

//=====アクセス時に実行する関数======
function doGet() {

//HTMLファイルのテンプレートをファイル名を指定して取得
 var myHTML = HtmlService.createTemplateFromFile('INDEX');

 //HTMLファイルをホスティング｜メタタグを指定してスマホ表示に対応
 return myHTML.evaluate().addMetaTag("viewport", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0");
}

//=====Base64エンコードする関数======
　function getBae64DATA(id) {

 //Gドライブから、ファイルIDでファイルを取得
  const file = DriveApp.getFileById(id);
  
 //バイナリデータを取得
  const data = file.getBlob().getBytes();
 
 //BASE64エンコードで文字列に変換
   return Utilities.base64Encode(data);
}

作業が済んだら保存します。

INDEX.htmlのコード

デフォルトでは以下の様になっています。

元のコードを全て削除した上で、記事の最後にある有料部分のコードを貼り付けます。

テンプレートのコードを記事の最後の有料部分から参照ください。

コード中、ご自身でサンプルデータのファイルIDを打ち込む部分が、３か所あります。

const fileId1 = '★画像ファイルのID★';//北斎
const fileId2 = '★画像ファイルのID★';//広重（裏）
const fileId3 = '★3D図形ファイルのID★';//3Dモデル（GLB）

この部分は、各自で打ち替えてからデプロイしてください。

作業が済んだら保存します。

デプロイし、作動させてみる

ここまでできたら、デプロイして作動させてみましょう。デプロイとは、プロジェクトファイルを専用の実行用URLと紐づけすることです。

デプロイについて

以下に手順のあらましを表記しますが、詳細はネットなどで確認ください。

エディタの上にある「デプロイ」ボタンをクリックし・・・

「新しいデプロイ」をクリックし・・・

ウェブアプリとしてのデプロイを選択します。

アクセス者が「自分」、アクセスできるのは「全員」にします。（Googleへログインしていない場合でも使える設定です）

ここで「デプロイ」をクリックした後、誰がデプロイしているのか（自分のユーザ名をクリック）、デプロイを許可するか（許可、またはArrowをクリック）に対応すると完了です。

最後に以下の様にアクセス用URLが表示されるので、控えておきましょう。

ブラウザで閲覧してみる

ブラウザから、デプロイしたURLにアクセスしてみます。

端末とブラウザの組み合わせによっては、表示のスケールが良い割合で表示されないケースがあります。この場合は別のブラウザ（Yhoo！検索など）を使ってみてください

画像が掲示された壁パネルと３D図形が、ゆっくり回転するオブジェクトとして表示されているはずです。

背景に見えている画像と文字は、BASE64エンコードの動作確認用で、エンコードした画像と結果の文字列です。

ゆっくり回転するオブジェクトはマウスでドラッグでき、好きな角度で鑑賞できます。

マウスホイールにより、近寄って鑑賞することもできます。

以上、実装コードのご紹介でした。

←前の記事

---

テンプレートのコードは以下の有料部分から参照ください。

・コードは実装して稼働することを手元環境で確認しておりますが、環境によっては稼働しない場合もあるかもしれません。こうしたトラブル等をフォローできないため、申し訳ありませんが、不具合時に自己責任・自己解決で対応する事をご了承くださる方だけご利用ください。


・表示させたWEBページからボタンをクリックしても反応しない場合があります。そんな場合は「yahoo！検索」など先にブラウザを開いて、デプロイしたURLを改めて読み込む様にすると、稼働する場合があります。

・個人や小規模なグループ内での利用を想定しており、規模の大きなグループや商用での利用は想定しておりませんのでご注意下さい。

テンプレートのコードからは、以下のノウハウが得られます。

■A-Frameライブラリの実装方法
■WEBページからスクリプト内の関数を操作する、GAS専用のJavaScript関数google.script.runの実装例
■上記関数でスクリプト内の関数と連携して、BASE64エンコードを行う実装例

万一うまく稼働しなかった場合は、上のノウハウが参照できることでご容赦願いますm(_ _)m。（多くの行に説明をコメントしているので、意味するところは判ると思います）