RDKit.jsの使い方

はじめに

RDKit.jsを使ったwebサイト上への構造式の表示方法について解説します。

RDKit.jsとは

本家RDKitをjavascriptに移行したものです。
CDNからincludeしてweb上で簡単に使うことができますが、本家RDKitのような高度な機能はありません。
(rdMolDraw2D, 3D描画機能など)

読み込み～window関数化

RDKit.jsはwindow関数として扱われることが前提となっています。

// HTML
<script src="https://unpkg.com/@rdkit/rdkit/dist/RDKit_minimal.js"></script>
<script>
    window
    .initRDKitModule()
    .then(function (RDKit) {
        console.log("RDKit version: " + RDKit.version());
        window.RDKit = RDKit;
    })
    .catch(() => {
    });
</script>

これでwindow.RDKitからモジュールを呼び出せます。

化合物の表示

python版のRDKitとは関数名が大きく異なっています。

<script>
    var smiles = "c1ccccc1C";
    var mol = window.RDKit.get_mol(smiles);
    var svg = window.RDKit.get_svg(mol);
</script>

これでsvgに画像が格納されたので、htmlから呼び出して表示します。
smilesやmolが無効な場合、RDKitはnullを返す (エラーを吐かない) ので値のチェックを入れた方が良いです。

また、canvasに描くこともできます。

<script>
    var smiles = "c1ccccc1C";
    var mol = window.RDKit.get_mol(smiles);
    var canvas = document.getElementById("exmpale_canvas");
    mol.draw_to_canvas(canvas, -1, -1);
</script>

こちらのinterfacesが役に立ちます
https://docs.rdkitjs.com/interfaces/RDKitModule.html