JSmolを利用した簡単なWebページの作り方
■ Jmol2.jsを利用して、JSmolによるWebページをとりあえず作成してみる
はじめに
既にある(Javaを使用した)Jmolによるページの記法を変えることなく動作させるため、アダプターLibraryとして提供されているJmol2.jsを利用します。 最小限の修正で、既存のJmol用のHTMLファイルをJSmolで利用することができます。 ただし、JSmolのすべての機能を利用できる訳ではない点に注意してください。
HTMLファイルの文字コードのエンコーディングはUTF-8にする必要があります。
サーバ上のファイル構成
サーバ上のディレクトリ構成は次のようにします。
|-- 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>
※ JQueryを使用している場合は、JSmol.min.jsの代わりにJSmol.min.nojq.jsを使用します。
例2 分子軌道の表示
同じディレクトリにあるMOPAC の mgf ファイルを読み込んで、分子モデルと分子軌道を表示させる場合の記述例を示します。
※ 下記のHTMLコードの中の緑色の文字の部分は説明のためのものなので、入力する必要はありません。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Display Wavefunction</title>
＃ Javascript ライブラリファイルの指定）
<script src="JSmol.min.js" type="text/javascript"></script>
<script src="js/Jmol2.js" type="text/javascript"></script>
</head>
<body>
<form>
<script type="text/javascript">
# ファイルを読み込み、最初に表示する分子軌道としてHOMOを指定し、透明な面塗りモードで表示する。
jmolApplet(300, "load acetoaldehyde.mgf;mo homo;mo fill nomesh;mo translucent");
</script>
</form>
</body>
</html>
例3 コントロールの表示
同じディレクトリにある PDBファイルを読み込んで分子モデルを表示させ、下部に簡単なコントロールを表示する場合の記述例を示します。
ラジオボタンにより分子モデルの種類を変更することができます。Offが"Sticks" 、20%が "Ball and Stick"、100%が "CPK Spacefill"に相当します。
「水素」のチェックを外すと水素原子は表示されません。「回転」をチェックすると分子は自動的に回転します。「コンソール」ボタンをクリックすると、Script Editorのウィンドウが開かれます。
※ 下記のHTMLコードの中の緑色の文字の部分は説明のためのものなので、入力する必要はありません。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>acetic acid</title>
＃ Javascript ライブラリファイルの指定）
<script src="JSmol.min.js" type="text/javascript"></script>
<script src="js/Jmol2.js" type="text/javascript"></script>
</head>
<body>
<h1>Benzene</h1>
<script type="text/javascript">
// jmolInitialize(".");
# ファイルを読み込み、表示する。
jmolApplet(300, "load benzene.pdb");
# 改行タグの挿入
jmolBr();jmolBr();
# ラジオボタンのグループの設置
jmolRadioGroup([
["spacefill off", 'オフ'], # Jmol スクリプトとボタンの表記
["spacefill 20%", "20%", "checked"], # デフォルトの選択の指定
["spacefill 100%", "100%"]
]);
jmolHtml(" ");
# チェックボックスの設置
jmolCheckbox("set showHydrogens on", "set showHydrogens off", '水素', "checked");
jmolHtml(" "); # 空白の挿入
# チェックボックスの設置
jmolCheckbox("spin on", "spin off", '回転');
jmolHtml(" ");
# ボタンの設置jmolButton('console', 'コンソール', 'jmol_cont_cnsl');
jmolHtml(" ");
</script>
</body>
</html>
例4 分子振動の表示
同じディレクトリにあるMOPAC の out ファイルを読み込んで分子モデルと分子振動を表示させる場合の記述例を示します。
※ 下記のHTMLコードの中の緑色の文字の部分は説明のためのものなので、入力する必要はありません。
<!doctype html>jmolCheckbox("Vibration on", "Vibration off", 'Vibration');
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Molecular Vibration of Ethylene</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(400, 'load "freq_c2h4-mop.out"; center {0,0,0}; frame last');
jmolBr();jmolBr();
# 振動アニメーションを行うか否かのチェックボックスの表示
jmolHtml(" ");
jmolHtml("Frame: ");
# 波数を低波数側に移動するボタンの表示
jmolButton('frame previous', 'Lower');
jmolHtml(" ");
# 波数を高波数側に移動するボタンの表示
jmolButton('frame next', 'Higher');
jmolHtml(" ");
# 波数を最高波数に戻すボタンの表示
jmolButton('frame LAST', 'Last');
</script>
</body>
</html>
