【GASでサイエンス】身の回りの物質の「分子」の立体モデルを一覧で鑑賞する（4）～スプレッドシートの記載情報をテンプレートに埋め込む　＆　任意の分子式を指定して表示させる～

Particlemethod

2022年4月3日 11:37

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

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

先回の記事では、GASテのンプレートでWEBページを作るまでをご説明しました。

今回は、テンプレート中で使う変数にスプレッドシートの情報を埋め込む部分で、スクリプト側の解説です。

スクリプトで指定のセル範囲を取得し、テンプレートに埋め込むまで

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

このシート上のデータを、テンプレートに埋め込むまでを説明します。内容は、テンプレートではなく、スクリプトのコードになります。

WEBページとして宣言する

GASにおけるテンプレートは、そのままではWEBページとして表示されません。表示させるには、対象のテンプレートを「WEBページ」として宣言する事が必要です。

これは、次のコードによります。なお、使用するテンプレート名は「INDEX．html」とします。

 //対象のテンプレート'INDEX'を「WEBページ」として宣言する
 var myHTML = HtmlService.createTemplateFromFile('INDEX');

これを、「WEBページのインスタンスを作成する」といいますが、これだけで、上記の変数　myHTML　を、WEBページとみなして、色々な操作が可能です。

最終的には、この　myHTML　は、以下のコードを記載する事で、アクセスしたユーザからWEBページとして見られる様になります。

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

WEBページ（テンプレート）内に変数を埋め込む

WEBページ、すなわちテンプレート内には、以下のコードにより簡単に変数を埋め込めます。

WEBページ．任意の変数名　＝　値；

これだけで、「WEBページ」として利用するテンプレート内では、上記の　”任意の変数名”　を、宣言済みの変数として扱えます。

更にその変数には、初期値として「＝値」で示した内容が代入された状態となっています。

特定セル範囲の取得

一方スクリプト内で、スプレッドシートの特定セル範囲の値を取得するには、以下の様にします。

スプレッドシート ＝ SpreadsheetApp.openById('シートID')
シート ＝ スプレッドシート.getSheetByName('シート名')
特定範囲＝シート.getRange(開始行, 開始列, 行数, 列数).getValue()

上記のコードにより、変数　特定範囲　に、特定範囲のセルの値が配列として代入されます。

WEBページに特定セル範囲を埋め込む

以上を組み合わせるた以下の様なコードで、スプレッドシートにある上記のセル範囲を取得して、WEBページ（テンプレート）に埋め込む事ができます。

//アプリケーションを取得｜★スプレッドシート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(),
 ];

以上で、GASプログラムの概要はおしまいですが、もう少し機能を欲張って、ユーザ側から任意の分子を表示できる機能を付加してみます。

任意の分子式を入力すると、その分子モデルが読み込まれた『MolView』が起動する様にする

『MolView』起動時のオプション指定

MolViewには、アクセスのURLに続けて「？＝・・・・」を打ち込む事により、起動時の様子を、ユーザ側で操作できます。

この機能を利用して、WEBページに任意の分子を打ち込むと、その分子を読み込んだMolViewが立ち上がる様にできます。

具体的には以下の様な機能です。
・テンプレートの入力ボックスに化学式を入力する（この例は二酸化炭素です）

・「MolViewの起動」ボタンをクリックする

・指定の分子が読み込まれた状態でMolViewが起動する

現れた分子は、MolView内で様々な形で表示できます。

『MolView』のオプション指定　SMILES化学式とは

ここで、入力ボックスに入れた化学式は、SMILES形式といいます。

SMILES形式は、コンピュータ上で表示可能な文字を利用して、曖昧さの無い化学構造を表現する形式で、

Simplified Molecular Input Line Entry System（簡単化した分子式の線形表記法）

の頭文字をとって、SMILES　としたものです。

詳細はこちらのページが参考になります。

『MolView』では、アクセスURLに続けて、

？smiles＝・・・・

の・・・の部分にSMILES化学式を指定する事で、起動時にそれを読み込ませる事ができます。いくつか例をあげましょう。

プロパン：CCC

プロパンガスなどでおなじみのガス分子で、炭素が３つつながっています。SMILESでは、炭素のみを表現するので、表記はCCCとなります。

https://molview.org/?smiles=CCC

シクロヘキサン：C1CCCCC1

シクロヘキサンは環状の分子で、炭素が６つ輪になっています。揮発しやすいので、薄め液などに使います。

SMILESでは、最初と最後の炭素にC1と番号を振っておくことで、これらがつながっている＝輪になって閉じている意味になります。

https://molview.org/?smiles=C1CCCCC1

ベンゼン：C1=CC=CC=C1

ベンゼンも炭素６つが環状になった分子ですが、このまま使われるよりも、さまざまな化学製品の原料として利用されます。ところどころ二重結合が入っています。

SMILESでは、二重結合は「＝」で表示します。

https://molview.org/?smiles=C1=CC=CC=C1

すべての表示ができる訳ではない様だ

なかなか便利な機能ですが『MolView』では、すべてのSMILESが表示できる訳でなく、比較的簡易な物質に限定される様です。認識されない場合は、デフォルトの画面で立ち上がります。

コードはテンプレートに　window.open（）　文で表記する（リンク文字<A>タグは機能しない）

上記のコードはテンプレートで実装できます。

コードを実装する際には、リンク文字などを使いたくなりますが、リンク文字＜A＞タグを利用したところ、うまく機能しませんでした。（GASの”リンクが効かない”現象と思われます）

そこで、Javascript文で、window.open（）関数を利用します。この関数は、新しいブラウザで別なウィンドウを開いて指定のリンク先を読み込む関数です。

コードは以下の様になります。

BODYセクションに入力フォームを記載

<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>
</body>


SCRIPTセクションにボタンクリック時の挙動を記載

<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による分子の３DモデルカタログのWEBアプリご紹介でした。

次回は、利用したスプレッドシートやＧＡＳのコードをご紹介の予定です。

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

【GASでサイエンス】身の回りの物質の「分子」の立体モデルを一覧で鑑賞する（4）～スプレッドシートの記載情報をテンプレートに埋め込む ＆ 任意の分子式を指定して表示させる～