Jmol アプレットを利用した簡単なWebページの作り方　(署名付きアプレットの利用)

Jmol Java アプレットを利用するための設定　｜　Jmol.js Javascriptライブラリの利用 　｜　とりあえずWebページを作成してみる

例1　分子モデルの表示　｜　例2　分子軌道の表示　｜　例3　コントロールの表示　｜　例4　分子振動の表示

■　Jmol Java アプレットを利用するための設定

JmolAppletSigned0で始まる jar ファイルすべてと Javascript ライブラリのファイル Jmol.jsを、サーバの適切なディレクトリまたはＰＣの適当なフォルダにコピーします。

分子構造ファイルは、ディレクトリ・ツリー構造のレベルとして、Jmolディレクトリと同じレベルかまたは下位のレベルに置く必要があります。

※　WebページをPC上で直接開く場合は、分子構造ファイルはJmolフォルダまたはその直下の下位レベルのフォルダに置く必要があります。

■　Jmol.js Javascriptライブラリの利用

Jmolのパッケージに含まれるJavascriptライブラリ Jmol.jsを利用することにより、JmolアプレットのWebページへの挿入、アプレットのHTMLやCSSレイアウトの制御及び下図に示すようなJmolアプレットをWebページ上で対話的に操作するためのコントロール（ボタン、ラジオボタン、チェックボックス等）の作成などを行うことができます。
コントロール

■　とりあえずWebページを作成してみる

はじめに

下記のHTMLコードの中の緑色の文字の部分は説明のためのものなので、入力する必要はありません。

例１　分子モデルの表示

同じディレクトリにある Mol ファイルを読み込んで分子モデルを表示させる場合の記述例を示します。

<HTML>
<HEAD>
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<TITLE>Methane</TITLE>
＃ Javascript ライブラリファイルの指定　（同じディレクトリにある場合）
<SCRIPT src="Jmol.js" type="text/javascript"></SCRIPT>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
jmolInitialize(".", "JmolAppletSigned0.jar");　　#J avaアプレットファイルがあるディレクトリの指定（同じディレクトリにある場合）
jmolApplet(300, "load methane.mol"); 　　# ファイルを読み込んで、300X300のサイズで表示する。
</SCRIPT>
</BODY>
</HTML>

実際の表示を見るにはこちらをクリック

例2　分子軌道の表示

同じディレクトリにあるMopac の mgf ファイルを読み込んで分子モデルと分子軌道を表示させる場合の記述例を示します。

<HTML>
<HEAD>
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<TITLE>Acetoaldehyde</TITLE>
＃ Javascript ライブラリファイルの指定　（同じディレクトリにある場合）
<SCRIPT src="Jmol.js" type="text/javascript"></SCRIPT>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
jmolInitialize(".", "JmolAppletSigned0.jar");　　# Javaアプレットファイルがあるディレクトリの指定（同じディレクトリにある場合）
# POVRay出力用に、縦横比 3 : 4 のウィンドウで表示する。（サイズはPOVRayの出力に影響しない）
# ファイルを読み込み、HOMOを指定し、透明な面塗りモードで表示する。
jmolApplet([512,384], "load acetoaldehyde.mgf;mo homo;mo fill nomesh;mo translucent");
</SCRIPT>
</BODY>
</HTML>

実際の表示を見るにはこちらをクリック

例3　コントロールの表示

同じディレクトリにある PDBファイルを読み込んで分子モデルを表示させ、下部に簡単なコントロールを表示する場合の記述例を示します。

ラジオボタンにより分子モデルの種類を変更することができます。　Offが"Sticks" 、20%が "Ball and Stick"、100%が "CPK Spacefill"に相当します。
「水素」のチェックを外すと水素原子は表示されません。「回転」をチェックすると分子は自動的に回転します。「コンソール」ボタンをクリックすると、Script Editorのウィンドウが開かれます。

<HTML>
<HEAD>
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<TITLE>Benzene</TITLE>
<SCRIPT src="Jmol.js" type="text/javascript"></SCRIPT>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
jmolInitialize(".", "JmolAppletSigned0.jar");       # Javaアプレットファイルがあるディレクトリの指定（同じディレクトリにある場合）
jmolApplet(300, "load benzene.pdb");
# 改行タグの挿入
jmolBr();jmolBr();
# ラジオボタンのグループの設置
jmolRadioGroup([
    ["spacefill off", 'オフ'],　　　# Jmol スクリプトとボタンの表記
   ["spacefill 20%", "20%", "checked"],　　　# デフォルトの選択の指定
   ["spacefill 100%", "100%"]
]);
jmolHtml("&nbsp; &nbsp;");　　　# 空白の挿入
# チェックボックスの設置
jmolCheckbox("set showHydrogens on", "set showHydrogens off", '水素', "checked");
jmolHtml("&nbsp; &nbsp;");
# チェックボックスの設置
jmolCheckbox("spin on", "spin off", '回転');
jmolHtml("&nbsp; &nbsp;");
# ボタンの設置
jmolButton('console', 'コンソール', 'jmol_cont_cnsl');
</SCRIPT>
</BODY>
</HTML>

実際の表示を見るにはこちらをクリック

例4　分子振動の表示

同じディレクトリにあるMopac の out ファイルを読み込んで分子モデルと分子振動を表示させる場合の記述例を示します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<title>Molecular Vibration of Ethylene</title>
＃ Javascript ライブラリファイルの指定　（同じディレクトリにある場合）
<script src="Jmol.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
jmolInitialize(".", "JmolAppletSigned0.jar");　　# Javaアプレットファイルがあるディレクトリの指定（同じディレクトリにある場合）
# ファイルを読み込み、最高波数を指定する。
jmolApplet(400, 'load "freq_c2h4-mop.out"; center {0,0,0}; frame last');
jmolBr();jmolBr();

# 振動アニメーションを行うか否かのチェックボックスの表示
jmolCheckbox("Vibration on", "Vibration off", 'Vibration');
jmolHtml("&nbsp; &nbsp;");
jmolHtml("Frame: ");
# 波数を低波数側に移動するボタンの表示
jmolButton('frame previous', 'Lower');
jmolHtml("&nbsp;&nbsp;");
# 波数を高波数側に移動するボタンの表示
jmolButton('frame next', 'Higher');
jmolHtml("&nbsp;&nbsp;");
# 波数を最高波数に戻すボタンの表示
jmolButton('frame LAST', 'Last');
</script>
</body>
</html>

実際の表示を見るにはこちらをクリック

/A>