千葉工業大学 / 応用化学科 / 山本研究室
計算化学で生命・物質・環境・教育の問題解決
投稿:22-04-21 / 更新:22-04-28

ブラウザーで分子を立体表示する

HTML に埋め込んで分子を立体表示するツール(分子ビュアー)について、いくつか試してみています。良さそうなものを見つけたら、順次追加する予定。

3Dmol

3Dmol は、分子を立体表示する JavaScript プログラム。Pittsburgh 大学の David Koes さんが開発しています。

HTML に埋め込むときは、div 要素に viewer_3Dmoljs という名前のクラスを割り当てて、あとで説明する data- タグを使って表示方法などを設定します。

<script
  src='https://cdnjs.cloudflare.com/ajax/libs/3Dmol/1.4.0/3Dmol-min.js'
/></script>

<div
  class='viewer_3Dmoljs'
  style='height:350px; width:350px;'
  data-href='https://raw.githubusercontent.com/yamnor/molecule/main/caffeine.xyz'
  data-type='xyz'
  data-backgroundcolor='#fff'
  data-style='stick'
/></div>

表示方法などは、div 要素のなかで data- タグを用いて、次のようにいろいろと指定することができます。

複合体などで、分子ごとに色や表示を変えたいときは、data-selectdata-style の末尾に数字(1, 2, 3)やアルファベット(A, B, C)を付けて1、それぞれ表示方法を指定します。

<script
  src='https://cdnjs.cloudflare.com/ajax/libs/3Dmol/1.4.0/3Dmol-min.js'
/></script>

<div
  class='viewer_3Dmoljs'
  style='height:350px; width:350px;'
  data-pdb='1hxw'
  data-backgroundcolor='#fff'
  data-selectA='chain:A'
  data-styleA='cartoon:color=#EC407A'
  data-selectB='chain:B'
  data-styleB='cartoon:color=#29B6F6'
  data-selectC='resn:RIT'
  data-styleC='sphere:color=#FF9800'
  data-labelresC=''
/></div>

この例では、HIV プロテアーゼ(PDB ID: 1HXW)の A 鎖を pink 色、B 鎖を cyan 色の cartoon で表示。HIV プロテアーゼに結合する阻害剤リトナビルを orange 色の sphere で表示しています。

3Dmol は、導入が簡単、小さな化合物からタンパク質まで表示できる、動作が軽快である、などなどが特徴。

Molmil

Molmil は、分子を立体表示する WebGL (JavaScript) プログラム。Protein Data Bank Japan(PDBj) で開発されています。原著論文は こちら

Molmil を HTML に埋め込むとき、お手軽なのは、iframe 要素を使う方法です。src 内で molmil のコマンド を指定することで、表示方法などをいろいろと設定することができます。

<iframe
  src="https://pdbj.org/molmil2#
       fetch 1hxw;
       cartoon_color group, all;
       orient;"
  height="400px"
  width="500px" 
  style="border: 1px solid #ccc;"
/></iframe>

Molmil は、導入が簡単、動作が軽快、コントロールパネルからいろいろ操作できる、などなどが特徴。


  1. 数字とアルファベットのどちらでも良さそうですが、数字とアルファベットが混在するとダメっぽい?↩︎

この記事をシェアする