JSmolで結晶をブラウザで表示する

CODで結晶構造をブラウザで表示できるのが面白いと思ったので、やり方を調べた。

JSmol

  1. https://sourceforge.net/projects/jmol/files/から最新版のJmolを取ってくる

  2. zipを解凍してjmol-14.29.46みたいなディレクトリを得る(以下このバージョンのjmolを使うとする)。

  3. 以下のようなディレクトリ構成にする

.
+-- data.cif             // 表示したいcifファイル
+-- JSmol.min.js    // jmol-14.29.46/jsmol/JSmol.min.js をコピーしてくる
+-- idioma              // jmol-14.29.46/jsmol/idioma をコピーしてくる(英語のみ使用する場合は要らないらしい)
+-- j2s                    //  jmol-14.29.46/jsmol/j2s をコピーしてくる 
+-- index.html

index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="JSmol.min.js"></script>
</head>
<body>
    <h1>JSmol Test</h1>
    <script type="text/javascript">
        const Info = {
            color: "#FFFFFF", // white background (note this changes legacy default which was black)
            height: 400,      // pixels (but it may be in percent, like "100%")
            width: 400,
            use: "HTML5",     // "HTML5" or "Java" (case-insensitive)
            j2sPath: "./j2s",          // only used in the HTML5 modality
            script: "load ASYNC data.cif {1, 1, 1}",       // script to run
            defaultModel: "",   // name or id of a model to be retrieved from a database
            addSelectionOptions: false,  // to interface with databases
            disableInitialConsole: false, // shows a bunch of messages while the object is being built
            debug: true
        };
        Jmol.getApplet("myJmol", Info);
    </script>
</body>

動作例

↑のindex.htmlで表示される例 f:id:lan496:20190728172520p:plain

Materials projectのMaterials Explorerみたいに配位多面体を表示できるとよりよいけどJ(S)molの範囲で実現できるのか分からない。

できてないこと

index.html中のJSのコードをindex.jsみたいなファイルに分離しようとすると

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

と怒られる。

↓とかが関連しそうだけど解決できてない。 lucybain.com

参考サイト

wiki.jmol.org

katakago.sakura.ne.jp