昨日は人工雪の作成の時に使うバクテリアがもつ、雪の結晶形成促進作用があるタンパク質inaZの立体構造をweb pageに埋め込んでみました。
コードを書かかったので、今日はコードと、それをhtmlファイルに書き込んだ後の結果をならべてみることにします。
こちらは、3Dmolのホームページにリンクがあるembed (埋め込み)についてのページにのっているコードです。
http://3dmol.csb.pitt.edu/doc/tutorial-embeddable.html
これを自分のweb pageのhtmlに書き込むと、書きこんだページで立体表示をすることができます。このコードでは、data-pdb=’2POR’でPDBの2PORというエントリを読み込んでいます。この部分をdata-href=’https://alphafold.ebi.ac.uk/files/AF-P06620-F1-model_v4.pdb’にすると、https://以下で指定したサイトにあるpdbファイルを読み込んで表示します。またdata-style=’stick’のstickをline, cross, stick, sphere, cartoonのどれかに変えると立体構造表示が指定した表示に変わります。コードは上が、2PORの表示。その次が、昨日表示したinaZの立体構造の表示です。inaZは横に長いので、800ピクセル四方に表示するようにしてあります。
２PORの表示コード：
<script src=”https://3Dmol.org/build/3Dmol-min.js”></script>
<script src=”https://3Dmol.org/build/3Dmol.ui-min.js”></script>
<div style=”height: 400px; width: 400px; position: relative;” class=’viewer_3Dmoljs’ data-pdb=’2POR’ data-backgroundcolor=’0xffffff’ data-style=’stick’ data-ui=’true’></div>
inaZのAlphaFold2データベースにある予測構造のpdbファイルを指定して表示するコード；
<script src=”https://3Dmol.org/build/3Dmol-min.js”></script>
<script src=”https://3Dmol.org/build/3Dmol.ui-min.js”></script>
<div style=”height: 800px; width: 800px; position: relative;” class=’viewer_3Dmoljs’ data-href=’https://alphafold.ebi.ac.uk/files/AF-P06620-F1-model_v4.pdb’ data-backgroundcolor=’0xffffff’ data-style=’stick’ data-ui=’true’></div>