Googleサイトにおける
JSmol分子ビューア（１）
JSmolを利用すれば，ウエブ上に表示させる分子構造を閲覧者が回転させて見ることができることを知った．Googleサイト上で使用した例があるかネット検索したが，該当する記事は見当たらなかった．いろいろ試行錯誤しながらもうまくいったので，備忘録としてまとめてみた．
JSmolのサイトから，jsmol_app.zipをダウンロードして解凍すると，28MB程度のライブラリフォルダ，htmlファイル，化合物データなどがあらわれる．その中の js, j2s, idiomaの3個のフォルダを適当な新規フォルダ（mypage）にコピーして，以下の一連の作業を行った．
参考にしたのは以下のサイトである．
記載内容をそのまま以下に示した．
サーバ上のディレクトリ構成は次のようにします。
|-- sample.html
|-- js
|-- j2s
|-- idioma
idiomaには、多言語対応の言語ファイルが入っています。英語のみを使用する場合は不要です。
分子モデルの表示に関しては， 以下のように書かれているので， そのまま使用したが動かない． 変更点は👈で示した．
例１ 分子モデルの表示
同じディレクトリにある Mol ファイルを読み込んで分子モデルを表示させる場合の記述例を示します。
※ 下記のHTMLコードの中の緑色の文字の部分は説明のためのものなので、入力する必要はありません。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Methane</title>
＃ Javascript ライブラリファイルの指定）
<script src="JSmol.min.js" type="text/javascript"></script> 👈 👈要変更
<script src="js/Jmol2.js" type="text/javascript"></script>
</head>
<body>
<SCRIPT type="text/javascript">
jmolApplet(300, "load methane.mol"); # ファイルを読み込んで、300X300のサイズで表示する。
<script type="text/javascript"> 👈👈👈削除
</script>
</body>
</html>
ライブラリの変更が必要
👈👈で示した行を以下の2行に変更した．
<script src="jquery/jquery.min.js" type="text/javascript"></script><!--追加-->
<script type="text/javascript" src="JSmol.min.nojq.js"></script><!--追加-->
その他
👈👈👈は削除した
修正したファイルをindex.html名で保存した．
Googleドライブ側の設定
mypageフォルダをGoogleドライブにアップロードする．
mypageフォルダの共有設定を「リンクを知っている全員」に設定する．
mypageフォルダのリンクを取得する．
DriveToWeb - Host websites on Google Drive and Microsoft ...にアクセスする．
「ドライブからウエブへ， サーバーレスWebホスティング」が表示される．ので， 「Googleドライブでホストする」を選択する．
アカウントの選択を要求されるので， gmailのアカウントを選択する．
「DriveToWebがGoogleアカウントへのアクセスをリクエストしています」と表示されるので， 許可する．
Googleドライブを選択
Gmailアカウントの選択
アクセスを許可する
管理パネルが表示されるので， 「あなたのウェブページ」の下に表示されるアドレスをコピーする．
Admin Panel（管理パネル）が開き， 共有したウエブページが表示位される．
GoogleドライブにHTMLを置いて，Googleサイトとは関係なくウエブページを立ち上げることができるとうになった． しかし， ここではGoogleサイト上で分子ビューアを動かすのが目的であるので， 管理パネルに記載されているウェブページ アドレスをコピーすればよい．
Googleサイト側の埋め込み作業
分子ビュアーを掲載したいWebページの編集モードにおいて, 挿入の「埋め込む」を選択すると， 以下が表示されるので， URLの方を選択， 取得したアドレスをペーストする． 下部に挿入イメージが表示される． 問題がなければ挿入で完了．
編集作業が終了したら， 公開処理を実行する．
以上でGoogleサイトでJSmolビューアが表示される．
ブラウザによっては左側に分子が表示されない場合があります．そのような場合は，キャッシュをクリアする必要があるようです．特にSafari, Firefoxでそのような傾向があります．Chrome, Edgeでは問題なく表示します．
スマホやタブレットの場合は，指でなぞると回転，拡大はピンチアウト（画面の上に2本指を置き、間隔を広げるように指を動かす操作）する．
⬅ 閲覧者へ， 動かしてみて！！
モデル変更， 水素の有無， 回転などの機能追加， 分子軌道の表示等などもGoogleサイトで表示可能である．その詳細については別稿で紹介したい．
参考資料