f:id:patcore:20210401143621p:plain

Patcore, Inc.

化学構造式を描画するツールとして、技術ブログ第一回でデスクトップアプリケーションであるMarvinSketchを紹介しました。今回はWebブラウザで動くMarvin JSについての記事となります。

Webブラウザ上で動くMarvin JSは、多くのウェブアプリケーションで採用されています。公的化学データベース、ELN等にも採用されていますが、皆さまが目にする機会が多いのは試薬会社の商品検索ページでしょうか。国内ですとTCI様、関東化学様、ナミキ商事様などに採用されていますし、海外ですとEnamine社やChemSpace社などで採用されています。

Marvin JSはJavaScriptで動くツールです。かつてはJavaアプレット技術を使ったMarvin Appletというツールもありましたが、現在はMarvin JSに一本化されています。API（ユティリティ）が公開されているため、入出力や機能のカスタマイズを簡単に行うことができます。構造式からQRコード（！）を作成する、ということもできます。

インストール

Marvin JSの公式ページ¹からzipファイルをダウンロードします。中身をTomcatなどのサーバーに設置すると完了です。通常は以下のようにiframeによりエディタをロードします。簡単ですね。JavaScriptが動き、HTML5に対応したブラウザであれば表示されているはずです。

Marvin JSは各サイトで表示内容や使える機能がカスタマイズされています。今回ロードしているエディタも機能を制限しています。

ちなみに、スマートフォンなどのモバイル機器でアクセスしても、一応構造式は描けます（ぜひ試してみてください）。将来的にどうなるのかわかりませんが、様々状況下でも使ってもらえるように、ChemAxon社により意欲的な実験が行われていることは噂で聞いています。

使い方

MarvinJSの操作性はMarvin Sketchと異なる部分が多々あります。また、各サイトによる使えるボタン・機能などが異なることに注意して下さい。

一般的な使い方の説明は、公式ユーザーガイドや、Youtubeにある「Did you know... ?」シリーズ²などを参照してください。また、非公式ではありますが、NITE様が大変わかりやすい日本語版説明資料と動画を用意していただいています。決してパトコアがさぼっているわけでは無いのですが、結果的にいたらない所が多いですね。。。

カスタマイズ

ブラウザのSame Origin Policyに注意することで、APIを利用したカスタマイズを行うことができます。描画した構造からmol形式などの構造文字列情報を取得するボタンを作ってみます。

まず、イベント/オブジェクトをハンドリングするために以下のスクリプトを<head> </head>内で指定し、marvinJSのユティリティと共にpromiseやjQueryを読み込みます。

<script src="./marvinjs/gui/lib/promise-1.0.0.min.js"></script>
<script src="./marvinjs/js/marvinjslauncher.js"></script>
<script src="./marvinjs/js/lib/jquery-1.9.1.min.js"></script>

そして、Marvin JSが正しく読み込まれていることを確認する処理を記述し、エラーにならなかった場合にinitControl()の関数を読み込むように指定します。

var marvinSketcherInstance;
$(document).ready(function handleDocumentReady (e) {
    var p = MarvinJSUtil.getEditor("#sketch");
    p.then(function (sketcherInstance) {
        marvinSketcherInstance = sketcherInstance;
        initControl();
    }, function (error) {
        alert("iframeから sketcherインスタンスの取得に失敗：\n"+error);
    });
});

この関数の中には構造の文字列を取得する処理を記述します。「getStr」のIDのクリックイベントに対して処理を開始するようにしています。

function initControl () {
    $("#getStr").on("click", function (e) {
        marvinSketcherInstance.exportStructure( $("#format").val())
            .then(function(source) {
            $("#sMolString").text(source);
        }, function(error) {
            alert("構造文字列取得に失敗：\n"+error);   
        });
    });
}