Tips and Chips

Thu, 24 Dec 2009 06:28:00 +0000

<div class="jmol" id="sample_applet">
<img src="wp-content/uploads/2009/12/ordered.png" onLoad="insertJmol('sample_applet',400,400,'uploads/2009/12/ordered.xyz')"  alt="In/Si(111)4x1-8x2"/>
</div>

The OpenScience projectのサイトを参考にjmolアプレットを仕込んでみた。サンプルはSb吸着Si(111)表面の4×1構造と8×2構造の間の原子位置の変遷をアニメーションにしたもの。ただし、現実には、こんな風に動くことは絶対にありません。リアルなアニメーションはどこかの研究会でお見せできるでしょう。マウスでグリグリ動かしたり、拡大したり、アニメーションしたりできる。是非、いろいろ遊んでみて。（ヒント：マウスの右ボタンとホイール）

!!!警告!!!

• jmolアプレットを使う投稿記事を編集する際には、投稿編集画面で決して「ビジュアル」モードにしてはならない。必ずHTMLモードで編集し保存すること。

1. jmolアプレットJmolApplet.jarに相対パスwp-content/jmol/JmolApplet.jarでアクセスできるようにjmolのアーカイブを解凍し、移動させ、適当にシンボリックリンクを張ったりなんかする。
   
   
2. テーマファイルのheader.phpに

   <script type="text/javascript">
   <!--
   function insertJmol(me,width,height,myMolecule) {
      document.getElementById(me).innerHTML = '<applet width="'
      +width+'" height="'+height+
      '" code="JmolApplet" archive="wp-content/jmol/JmolApplet.jar">'
      +'<param name="progressbar" value="true">'
      +'<param name="load" value="wp-content/'
      +myMolecule+'">';
    }
   //-->
   </script>

   を付け加える。

3. xyzファイルやpdbファイルを画像ファイルや書庫ファイルなどと同じようにアップロードできるようにwp-includes/functions.phpを

   function wp_ext2type( $ext ) {
   ...
   - 'text' => array('txt'),
   + 'text' => array('txt', 'text', 'pdb', 'xyz', 'cube'),
   ...
   function get_allowed_mime_types() {
   ...
   + 'text|pdb|xyz|cube' => 'text/plain',

   のように編集する。

4. ダミーの画像ファイル（ここではordered.png）とjmolに表示させるファイル（ここではordered.xyz）をアップロードしサーバー上での相対パス名を確認する。
   
   
5. 以下のような“jmol” classのdivエレメントを記入する。

   <div id="sample_applet" class="jmol">
   <img src="wp-content/uploads/2009/12/ordered.png" onLoad="insertJmol('sample_applet',400,400,'uploads/2009/12/ordered.xyz')"  alt="In/Si(111)4x1-8x2"/>
   </div>

• srcに指定するパス名とonLoadに指定するinsertJmol関数の引数のパス名のprefixが異なっている。
• imgエレメントは一行で記述しなければならない。

これで、講義資料もwordpressに移せるかな。