【GASでサイエンス】身の回りの物質の「分子」の立体モデルを一覧で鑑賞する（最終）～スプレッドシート＆GASのコード～

Particlemethod

2022年4月10日 17:12

Googleスプレッドシートの様な表計算ソフトは、多彩なデータを一覧にして解りやすく示すのに大変便利なツールです。

そんな、多彩なものの一例として、少々マニアックかもしれませんが、色んな物質の「分子」を、立体モデル表示アプリと組み合わせて一覧で鑑賞するアプリを取り上げています。

今回は、このWEBアプリ（？）で使用するスプレッドシート、およびGASのスクリプトとテンプレートをご紹介します。

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

スプレッドシート～表示モデルのリンク先URLが３行記載されたテーブル～

まず、WEBページで利用するデータの記録元として、以下の外観で示すスプレッドシートが必要です。

このシートは、表示モデルのリンク先URLが３行記載されただけの単純なテープルです。

スプレッドシートには、WEBページで分子の3Dモデルをカタログ表示させた際のコメントと、『MolView』の埋め込みコードが記載されています。

このシートはエクセルの形式ですが、一旦PC上へダウンロードし、その後、スプレッドシートの「ファイル」メニューから、「インポート」を選んでこのファイルを選択すると、スプレッドシートに取り込む事ができます。
取り込んだら、該当シートの名前が「分子」となっている事をご確認ください。

WEBページをホスティングするGASコード

次に、GAS（Googl Apps Script）のコードをご紹介します。

GASは、データをスプレッドシートから読み取ってWEBページを表示させる「スクリプト」と、WEBページの元になる「テンプレート」から成り立っていますので、順にご紹介します。

スクリプト

まず、スクリプトのコードから。

今回のコードはシンプルで、前述のスプレッドシートからURLの情報を読み出した上で、その情報をテンプレートに埋め込ん、でWEBページとして表示させるだけのものです。

テンプレートへのデータの埋め込みは、WEBページを表す変数であるmyHTML　の子要素として　（　myHTML . myMol＝・・・・の様な形で　）書かれています。

なお、コード中の「★スプレッドシートID★」は、情報の読み出しに利用するスプレッドシートのIDですので、各自のものに打ち替えてご利用ください。

//-----------------------------------------
//----化学の3Dモデル作成アプリ MolView の利用------------
//---著作：Particlemethod-2022年03月23日-----
//---使用は自由ですが著作権は作成者に帰属します---
//-----------------------------------------

//＝＝＝＝＝doGet関数はURLから呼び出された時に実行する関数｜１つだけ定義できます＝＝＝＝＝
function doGet(e) {

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

 
 
 //アプリケーションを取得｜★スプレッドシートID★は各自のものを記入
 var myApp = SpreadsheetApp.openById('★スプレッドシートID★');

 //対象シートをシートの名前を指定して取得
 var mySheet = myApp.getSheetByName('分子');

 //変数myTitleに、配列[セル3行・1列目、セル4行・1列目、セル5行・1列目、・・・]を代入
 //このmyTitleは、テンプレート内で、説明文のテキストとして利用できます。
 myHTML.myTitle = [
  mySheet.getRange(3, 1, 1, 1).getValue(),
  mySheet.getRange(4, 1, 1, 1).getValue(),
  mySheet.getRange(5, 1, 1, 1).getValue(),
 ];

 //変数myMolに、配列[セル3行・2列目、セル4・2列行目、セル5・2列行目、・・・]を代入
 //このmyMolは、テンプレート内で、URLのテキストとして利用できます。
 myHTML.myMol = [
  mySheet.getRange(3, 2, 1, 1).getValue(),
  mySheet.getRange(4, 2, 1, 1).getValue(),
  mySheet.getRange(5, 2, 1, 1).getValue(),
 ];

 
//---------------------------------------------

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

テンプレート

次は、WEBページの元となるテンプレートのコードです。

スクリプトによって埋め込まれたスプレッドシート上の情報、たとえばモデル表示のURLなどは（コード中では、変数　myMol[0]　がその変数です　）、以下の様にGAS専用のタグ　<?= 　?>　で囲って記載しています。

　src= <?= myMol[0] ?>

このタグ　<?= 　?>　で囲われた変数　myMol[0]　（中身にはスクリプトによってURLのデータが代入されています）は、スクリプトを実行した際には、具体的なURLに置き換わって表示されます。

GASでだけ使える、便利なタグです！

コードの下の方の＜SCRIPT＞セクションでは、ボタンのクリックイベントにより、MolView　を直接立ち上げるためのコードが書かれています。このあたりは純粋な、通常のHTMLページでも使われるJavascript文を記載しています。

なお使用するテンプレート名は「INDEX．html」として保存ください。


<!--
-----------------------------------------
----化学の3Dモデル作成アプリ MolView の利用-----------------
---著作：Particlemethod-2022年03月23日-----
---使用は自由ですが著作権は作成者に帰属します---
-----------------------------------------
-->

<html>
  <head>
    <meta charset="UTF-8" />
  </head>

<body>
SMILE化学式を指定してMolViewを新しいウィンドウで開く<BR>
  <form name="form1" action="">
    <input id="textBox1" type="text" value="O=C=O" />
    <input type="button" value="MolViewの起動" onclick="onButtonClick();" />
  </form>

<!--------------------------------------------->
<BR>
<BR>
<?= myTitle[0] ?><BR>
<iframe style="width: 500px; height: 300px;" frameborder="0" src= <?= myMol[0] ?> ></iframe></BR>

<?= myTitle[1] ?><BR>
<iframe style="width: 500px; height: 300px;" frameborder="0" src= <?= myMol[1] ?> ></iframe><BR>

<?= myTitle[2] ?><BR>
<iframe style="width: 500px; height: 300px;" frameborder="0" src= <?= myMol[2] ?> ></iframe><BR>

</body>



<script>
        function onButtonClick() {

      window.open(
          "https://molview.org/?smiles=" + document.getElementById("textBox1").value,
          "_blank",
          "menubar=0,width=300,height=200,top=100,left=100"
    );

        }
</script>


</html>

以上が、GASのコードのご紹介となります。

GASのコードのデプロイ

デプロイについては、以下の記事を参考にしてください。

コードを保存してデプロイしたら、URLにアクセスしてみてください。扉絵の様な3Dモデルが表示されるはずです。

　この説明通りにいかない場合は申し訳ありませんが、自己責任・自己解決でお進めくださるよう、お願いいたします。

補足

スプレッドシートをデータベースとして利用した、GASによるWEBアプリについて、基本的な考え方や、実装手順について、初学者向けにまとめた書籍を作っています。

ごく基本的な内容だけ表していますが、WEB画面からスプレッドシートに双方向で読み書きできるWEBアプリに絞ってまとめた資料は少ないと思いますので、ご興味の方はどうぞ。

書籍の内容については、以下の記事をご覧ください。目次などが記載されています。

この記事が気に入ったらサポートをしてみませんか？