Googleサイトにおける
JSmol分子ビューア（2）
前のブログ（2024.2）で， JSmol分子ビューアをGoogleサイト上で動かすことを紹介した． 今回はその機能追加について紹介したい．
機能追加
次図はJSmolの解説記事（JSmolを利用した簡単なWebページの作り方）の3例目や関連記事を参考に改変したものである．分子表示の様式， 水素表示， 回転などのコントロールを追加した．
モデルはStick, Ball&Stick, VDWの３種類， 水素の脱着， y軸回転．
実際に操作してみてほしい．
閲覧者による操作可能な分子ビューア
化合物名 ビタミンC （アスコルビン酸）
スマホ， タブレットによっては下部の操作メニューが隠れることがある．
筆者が使用しているアンドロイドスマホの場合， ブラウザ（Chrome）の右上にある「︙」で設定を開き，「PC版サイト表示」に切り替えると問題なく表示できた．
PCの環境によっては読込みに時間が必要．
変更箇所は以下のとおりである．表示量を減らすため「化合物名」は非表示，改行は非実行にした．
i<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>VC</title>
<!--ライブラリ JQueryを使用する場合，JSmol.min.jsの代わりにJSmol.min.nojq.jsを使用-->
<script src="jquery/jquery.min.js" type="text/javascript"></script><!--変更個所->
<script type="text/javascript" src="JSmol.min.nojq.js"></script><!--変更個所-->
<script src="js/Jmol2.js" type="text/javascript"></script>
</head>
<body>
<!--<h2>Vitamin C</h2> 非表示-->
<script type="text/javascript">
// jmolInitialize(".");
// read file
jmolApplet(300, "load VC.pdb");
//改行タグ（表示面積縮小のため）
//jmolBr();jmolBr();
//ラジオボタングループ 縦に展開させる
//-jmolRadioGroup([ 横に表示させる場合
jmolHtml("モデル ");
jmolMenu ([
["spacefill off", 'オフ'],<!--Stick->
["spacefill 20%", "20%", "checked"],<!--Ball&Stick初期設定->
["spacefill 100%", "100%"]<!--Spacefilling->
]);
jmolHtml(" ");
//チェックボックス
jmolCheckbox("set showHydrogens on", "set showHydrogens off", '水素', "checked"); <!--初期設定->
jmolHtml(" ");
//チェックボックス
jmolCheckbox("spin on", "spin off", '回転');
jmolHtml(" ");
</script>
</body>
</html>
ダウンロードしたjsmol_appフォルダには以下のhtmlファイルが用意されている．
jsmol_viewer.html 以下の目次と選択機能
model.html 分子の表示様式
vibration.html 振動計算計算結果
mo.html 分子軌道計算結果
local.html 静電ポテンシャル
jmol-format.html サポートしている分子フォーマット
これらの見本を参考ににて， 目的に応じたビューア（HTMLファイル）をつくることが可能である．