ChemDoodle Web Components libraryによる分子の描画
ChemDoodle Web Components libraryは、Javascriptを使った化学構造を取り扱うためのライブラリです。今回は、ライブラリのインストールと分子の描画を行ってみます。
1. ライブラリのダウンロード
以下のページの"Download ChemDoodle Web Components v3.5.0"をクリックし、ChemDoodleWeb-3.5.0.zipをダウンロードします。
http://web.chemdoodle.com/installation.php
2.サーバーへのアップロード
ChemDoodleWeb-3.5.0.zipを解凍し、以下のファイルをサーバーにアップロードします。
ChemDoodleWeb.css
ChemDoodleWeb-libs.js
ChemDoodleWeb.js
これで、ライブラリを使う準備は完了です。
今回は、サーバーにあるmolファイルを取得するために以下のphpのファイルとmolファイルをアップロードします。
CDWfile2js.php
input.mol (自分で用意する)
3. 実際の分子描画は以下のように行いました。
index.php:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Molecule</title>
<link ref="stylesheet" href="ChemDoodleWeb.css" type="text/css">
<script type="text/javascript" src="ChemDoodleWeb-libs.js"></script>
<script type="text/javascript" src="ChemDoodleWeb.js"></script>
</head>
<body>
<h2>Molecule</h2>
<script>
<?php require_once("CDWfile2js.php");?>;
var mol = <?php file2js('./input.mol');?>;
var view1 = new ViewerCanvas('view1', 200, 200);
view1.specs.atoms_color = '#000000';
view1.specs.bonds_color = '#000000';
view1.loadMolecule(readMOL(mol));
</script>
</body>
</html>
こんな感じで、かなりきれいに描画されます。
最近、JavaScriptやHTML5などの技術は、本当におもしろいなと思ってます。
前: AvogadroのAutoOptimization
