Difference between revisions of "Jmol JavaScript Object/ja"

From Jmol
Jump to navigation Jump to search
(The heading part was added by translating the English page Rev. 10:33, 20 November 2019‎ (UTC).)
(→‎JSmolを使わないJmolアップグレード: Removed because this section was already removed from the original English page version 2021-09-30 (Thu) 18:48‎ (UTC))
 
(6 intermediate revisions by the same user not shown)
Line 18: Line 18:
 
* '''JSME HTML5 オブジェクト''': 簡単な化合物2d描画を使って3Dモデルを生成することができます（[[Jmol_JavaScript_Object/JME|より詳しい説明]]参照）
 
* '''JSME HTML5 オブジェクト''': 簡単な化合物2d描画を使って3Dモデルを生成することができます（[[Jmol_JavaScript_Object/JME|より詳しい説明]]参照）
  
−
'''JSmol'''は[http://jquery.com jQuery]1.9や1.10と完全に互換性があります。（ｊQuery 2.0はサポートしていません。また原則として file:// を使ってローカルで実行するMSIEはサポートしないと報告されています。したがって、ローカル環境のMSIEでページを実行する必要がない場合は問題ありません。その場合、jQueryを少し修正する必要があります）。ライブラリはW3CとXHTMLで検証されています。
+
'''JSmol'''は[http://jquery.com jQuery]1.9や1.10と完全に互換性があります。（jQuery 2.0はサポートしていません。また原則として file:// を使ってローカルで実行するMSIEはサポートしないと報告されています。したがって、ローカル環境のMSIEでページを実行する必要がない場合は問題ありません。その場合、jQueryを少し修正する必要があります）。ライブラリはW3CとXHTMLで検証されています。
  
 
=== JSmolの主な機能 ===
 
=== JSmolの主な機能 ===
−
JSmolの中心となるのはJmol JavaScriptオブジェクト（<code>window.Jmol</code>）で、一連のJavaScript関数やユーティリティを含んでいます。
+
<table class="wikitable">
−
最初のJmolオブジェクトは2012年の初期にボブ・ハンソン（Bob Hanson）とポール・ピロット（Paul Pillot）によって開発されました。
+
<tr>
−
そしてその年の後ほど、縮めた'''JSmol'''という名前になりました。
+
<th>非Javaオプション</th><td>HTML5専用のオプションとJavaやHTML5/WebGLでは任意のオプション。これには、ページ上の画像やリンクをクリックするとapplet/canvas上の3Dモデリングを開始する初期「遅延アプレット」モード、初期画像が表示されている間に背後で読み込みを行う「画像＋読み込み」モードなどさまざまなオプションが含まれます。</td>
−
JSmolの機能を提供するライブラリ {{file| JSmol.min.js}} は、Jmol Javaアップレットとは同時には使えなかった<!--[{{Website}}jslibrary/ Jmol.js JavaScriptライブラリ]-->JavaScriptライブラリJmol.jsの後継となるものです。よりすっきりとした効率的な方法でウェブページ上のJmolを操作でき、JavaアプレットとJavaを使わないHTML5 canvas要素とを簡単に切り替えて分子を視覚化することができます。
+
</tr>
 +
<tr>
 +
<th>ライブラリファイル</th>
 +
<td>最低限{{folder|j2s}}フォルダの中身と{{file|JSmol.min.js}}ファイルは必要。多言語化インタフェースを使うには{{folder|idioma}}フォルダも必要。また{{folder|java}}フォルダの中身も場合によって必要。</td>
 +
</tr>
 +
<tr>
 +
<th>JavaScriptオブジェクト</th>
 +
<td>JavaScriptオブジェクト <code>Jmol</code> を一つつくる。これには<code>Jmol._Applet</code>、<code>Jmol._Image</code>、<code>Jmol.controls</code>などの関数や内部オブジェクトのセットが含まれています。</td>
 +
</tr>
 +
<tr>
 +
<th>JavaScriptプロトタイプ</th>
 +
<td><code>Jmol.getApplet()</code> または <code>Jmol.getAppletHtml()</code> を使って作成したオブジェクトは、<code>Jmol._Applet</code> のサブクラスとなるJavaScriptオブジェクトです。<code>Jmol.getApplet()</code> を使うと、applet/canvasそのものではなく、JavaScriptオブジェクトへの参照が得られます。appletやcanvasは <code>div</code> 要素群で囲み、より多様なオプションを使えるようにしています。</td>
 +
</tr>
 +
<tr>
 +
<th>AJAX</th>
 +
<td>JSmolは、jQueryで提供されるAJAXを使ってクロスプラットフォームリソースへ簡単にアクセスする方法を実装しています。</td>
 +
</tr>
 +
<tr>
 +
<th>RESTサービス</th>
 +
<td>JSmolはRCSBのキーワード検索結果にアクセスすることができます。例:''caffeine''（カフェイン）を参照する構造一覧。</td>
 +
</tr>
 +
<tr>
 +
<th>スクリプト</th>
 +
<td>JSmolは、Jmolが提供していたのと同じスクリプト機能を提供します。JSmolは、applet/canvasがページを作成する前、または作成中にスクリプトコマンドをすぐに受け入れ、受け入れる準備ができるまでその内容をキャッシュします。</td>
 +
</tr>
 +
</table>
  
−
ウェブページ開発者は'''JSmol'''を使うことにより、
+
== JSmol ==
−
これまでのJmol Javaアップレットによる実装を維持しつつ
+
<div style="float:left;">
−
Javaを扱うことが難しい環境（iPad、iPhone）やアップレットを扱うのに支障がある環境（Android）に'''Jmolアップレットに代わる方法'''を提供することができます。
+
[[Image:JSmol_logo13.png]]
−
これにより、様々な環境でJmolが利用できるようになるだけでなく、
+
</div>
−
「申し訳ありません。あなたの環境にはJavaがインストールされていません...」というメッセージを見なくても済みます。
 
  
−
また、'''JSmol'''には、
+
'''JSmol'''はJmolアップレットのHTML5 canvas版の名称です。'''JSmol'''はPC、Mac、Linuxシステム、タブレットや携帯電話（iOSおよびAndroid）でJavaを必要とすることなく開くことができます。ハードウェアに基づくグラフィック高速化は使っていないので、'''JSmol'''はHTML5の標準機能が使えればどんなブラウザの上でも動作します。JSmolは完全にクライアント環境下で動作しており、ほとんどの操作においてサーバ側のしくみを必要としません。（一部のブラウザでバイナリファイルを読み込む場合、あるいはすべてのブラウザで画像やJmol状態を保存する場合には、サーバ側のPHPスクリプトを必要とします。通常は{{file|php/jsmol.php}}で提供されています。詳しくは以下を参照してください。）
−
<!--[http://rcsb.org/ RCSB PDBデータベース]-->RCSB PDBデータベース、<!--[http://cactus.nci.nih.gov/ 米国国立癌研究所（NCI）CACTVSサーバ]-->米国国立癌研究所（NCI）CACTVSサーバ、<!--[http://pubchem.ncbi.nlm.nih.gov/ PubChem]-->PubChemといった公共データベースにバックグランドで直接アクセスする機能も統合されています。
 
−
RCSB PDBデータベース、米国がん研究所CACTVSサーバ、PubChemといった公共データベースにバックグランドで直接アクセスする機能も統合されています。
 
−
しかもJmol Javaアップレットが使えないユーザ環境からも利用できます。
 
  
−
更に '''JSmol''' により、以下のような関連情報も簡単に利用することができます。
+
'''JSmol'''はBob Hanson、Zhou Renjian、Takanori Nakane（中根 崇智）によって開発されました。
−
* '''JSpecView JavaアップレットまたはHTML5オブジェクト'''により、立体モデルをIR、NMR、UV/VIS、GC、GC/MSのスペクトルを関連づけることができます（詳しくは [[Jmol_JavaScript_Object/JSV|こちら]]をご覧下さい）。
 
−
* '''JME JavaアップレットまたはJSME HTML5オブジェクト'''により、簡単な二次元描画を使って立体モデルを生成することができます（詳しくは [[Jmol_JavaScript_Object/JME|こちら]]をご覧下さい）。
 
  
−
'''JSmol'''は、<!--[http://jquery.com jQuery]-->jQuery 1.9 または 1.10と完全な互換性があります
+
'''JSmol'''を使うとJmolと同じように分子モデルを描き、スクリプトによる一括操作を行い、対話的に操作することができます。なぜなら、ソースコードは両者で共有しているからです。JSmolはJmolとは別のプログラムという訳ではないということを留意しておいてください。これは単にJavaではなくJavaScriptへとJmolをコンパイルしただけのものです（[http://java2script.sourceforge.net/ Java2Script]のソフトウェアのおかげです）。
−
（MSIEにおいて、file:// を使って開いたローカルファイルの動作は原則として保証しないものとされているため、jQuery 2.0についての互換性は保証しません。MSIE環境でローカルファイルを開く必要がないのであれば、問題なく動作するでしょう。その必要があるなら、jQueryを少し調整する必要があります）。ライブラリはW3CとXHTMLで検証されています。
+
=== 現在のJSmolの制限事項 ===
 +
* 一部のブラウザでは、セキュリティポリシー上の理由からローカルファイル（ウェブブラウザ内ないファイル）を利用することはできません。
 +
** Operaではローカルファイルにアクセスできません。
 +
** MSIEではバイナリファイルでない場合に限りローカルファイルにアクセスできます。
 +
** Chromeでは特別なコマンドラインフラグを指定して起動した場合に限りローカルファイルにアクセスできます（<code>chrome.exe --allow-file-access-from-files</code>）。
 +
** Firefoxでは<code>about:config</code>に「<code>security.fileuri.strict_origin_policy = false</code>」の設定を行うことによりローカルファイルにアクセスできるようになります。
 +
* バイナリファイルの読み込み（例：Spartanファイル、gzip圧縮されたファイル、{{file|pngj}}ファイル）: 読み込むことはでいますが、ファイル種を識別できるようなファイル名にしておく必要があります（下記参照）。
 +
* {{file|jpg}}、{{file|png}}、{{file|pngj}}（png+zip）データへの書き込みは特に制限なく行うことができますが、ユーザがダウンロードできるようにするにはサーバ側での設定が必要です（あるいは、 [[Recycling_Corner#Exporting_an_image_from_the_applet|画像をエクスポートする]]に記載している別の方法を参照してください）。
 +
* Jmol <code>prompt</code> コマンドは、HTML5バージョンの場合、単純なJavaScript様の応答以外は使えません。
 +
* JSmolにおける[[Jmol_JavaScript_Object/WebGL|WebGLの実装]]はまだ完全ではなく、機能は限られてます。
  
−
== JSmol ==
 
−
=== 現在あるJSmolの制限事項 ===
 
 
=== バイナリファイルの読み込み ===
 
=== バイナリファイルの読み込み ===
−
=== JmolページからJSmolページへの変換 ===
+
 
−
=== 「アダプタ」ライブラリJmol2.jsを用いた変換 ===
+
Jmol（Java）はファイルを開いてから、そのファイルがバイナリファイルなのかどうかを判断することができます。JSmol（JavaScript）の場合、そうではありません。なぜならAJAX転送のしくみがバイナリファイルとそうでないファイルでは違うからです。そのため、JSmolはよみこむ''前に''そのファイルがバイナリなのかそうでないのかを判断しなければならないのです。
−
=== JSmolを使わないJmolアップグレード ===
+
 
 +
==== ファイル名 ====
 +
JSmolは''ファイルを読み込む前に''、ファイル名を調べてそのファイルがバイナルなのかそうでないのかを判断します。
 +
 
 +
JSmol will switch to binary mode for files with any of the following in their file name:
 +
JSmolは、ファイル名が以下のいずれかを含む場合はバイナリモードに切り替えます。
 +
{{file|.bin}}
 +
{{file|.gz}}
 +
{{file|.zip}}
 +
{{file|.jpg}}
 +
{{file|.png}}
 +
{{file|.jmol}}
 +
{{file|.smol}}
 +
{{file|.spartan}}
 +
{{file|.mrc}}
 +
{{file|.pse}}
 +
 
 +
これらの「拡張子」はファイル名のどこにあっても、バイナリ・アクセス・モードに切り替えることができます。つまり、例えば、ファイル名のどこか好きな場所に <code>.bin</code> を含めるようファイル名を変更すれば、JSmolはそのファイルをバイナリファイルと認識して読み込みます。
 +
 
 +
:''上級者向け'': 別の拡張子をバイナリとして読み込む必要があり、バイナリファイルとして認識する既定の拡張子を含むようファイル名を変更することができない場合は、Jmolオブジェクトの初期化後に以下のJavaScriptコードを実行することにより、対象拡張子を追加することができます。
 +
<code>Jmol._binaryTypes.push('.myExtension');</code>
 +
 
 +
==== ブラウザのふるまい ====
 +
バイナリファイルの読み込みを Chrome や MSIE と互換性を持たせるためには、サーバ側でバイナリデータを <code>BASE64</code> 形式に変換する処理が必要になります。これは、Firefoxだけがクリーンな（信頼性の高い）同期バイナリファイル転送ができるからです。（そして、今のところ、Jmolのすべてのファイル読み込みを完全に非同期モードに移行する方法は見つかっていません）。
 +
 
 +
ページの訪問者がバイナリファイルを読み込む必要がある場合、 JSmol の配布物に含まれている {{file|jsmol.php}} ファイル（下記参照）のコピーをサーバーに置き、[[Jmol_JavaScript_Object/Info#Files_and_paths|Info配列の'''serverURL''']]を使ってそれを指定します。例として、[{{StOlaf}}jsmol/jsmol.htm デモページ]ではこの方法を使っています。
 +
 
 +
 
 +
この方法を使うには、サーバーでPHPが使えるようになっている必要があります。そうでない場合は、PHP が動作する別のサーバー上にある {{file|jsmol.php}} ファイルを指定して「拝借」することもできます（そのサーバーの所有者に問い合わせてみてください）。
 +
 
 +
Chromeなどのブラウザでは、'''''ローカル'''''のバイナリファイルを読み込むときに起こる問題を、ローカルのウェブサーバを経由してページを実行することで解決できる場合があります。
 +
 
 +
=== 旧式ページからJSmolページへの変換 ===
 +
Jmolアップレットと<code>Jmol.js</code>ライブラリを使ったページを、HTML5バージョンのJSmolを使ったコードに変換するのは難しくありません。詳しくは[[Jmol JavaScript Object/Legacy|詳細について記したページ]]を参照してください。
 +
 
 
== インストール ==
 
== インストール ==
 
=== ファイルのダウンロード ===
 
=== ファイルのダウンロード ===

Latest revision as of 01:59, 25 August 2022

Geographylogo.png

Reference: English – Other: 日本語 ·

JSmol - Jmol JavaScript オブジェクト

JSmol logo13.png

JSmolの中核となるのはJmol JavaScriptオブジェクト（window.Jmol）で、これにはJavaScriptの関数やユーティリティが含まれています。最初のJmolオブジェクトは2012年の初めにボブ・ハンソン（Bob Hanson）とポール・パイロット（Paul Pillot）によって開発されました。そしてこの年の後半にはJSmolに組み込まれました。ライブラリ File icon.gif JSmol.min.js はこのオブジェクトを提供するもので、以前はJmol Javaアプレットとともに排他的に用いられていた Jmol.js JavaScriptライブラリの後継となるものです。これを使えば、よりすっきりとした効率的な方法でウェブページ上のJmolとやりとりをすることができます。また、分子モデルの視覚化を抽象化することにより、JavaアプレットをJavaとは異なるHTML5 canvas要素（これはJmolでさえない場合もある）へとシームレスかつ選択的に置き換えることができます。

ウェブページ開発者はJSmolを使うと、もはやJavaアプレットをサポートしなくなったほとんどのウェブブラウザを対象とすることができます。これはJmolアプレットサロゲート（Jmol applet surrogate）を使っていて、互換性のある環境下でのJmol Javaアプレットをまだサポートしています。

JSmolはまた、画面の背後でRCSB PDBデータベース、米国国立がん研究センターのCACTVSサーバ、PubChemなどの公開データベースにアクセスする機能も備えています。

さらに、JSmolは以下のオブジェクトと簡単にやりとりすることができます。

  • JSpecView HTML5 オブジェクト: これにより3DモデルをIR、NMR、UV/VIS、GC/MSスペクトルに関連付けることができます（より詳しい説明参照）
  • JSME HTML5 オブジェクト: 簡単な化合物2d描画を使って3Dモデルを生成することができます（より詳しい説明参照）

JSmolはjQuery1.9や1.10と完全に互換性があります。（jQuery 2.0はサポートしていません。また原則として file:// を使ってローカルで実行するMSIEはサポートしないと報告されています。したがって、ローカル環境のMSIEでページを実行する必要がない場合は問題ありません。その場合、jQueryを少し修正する必要があります）。ライブラリはW3CとXHTMLで検証されています。

JSmolの主な機能

非JavaオプションHTML5専用のオプションとJavaやHTML5/WebGLでは任意のオプション。これには、ページ上の画像やリンクをクリックするとapplet/canvas上の3Dモデリングを開始する初期「遅延アプレット」モード、初期画像が表示されている間に背後で読み込みを行う「画像＋読み込み」モードなどさまざまなオプションが含まれます。
ライブラリファイル 最低限Folder icon.gifj2sフォルダの中身とFile icon.gifJSmol.min.jsファイルは必要。多言語化インタフェースを使うにはFolder icon.gifidiomaフォルダも必要。またFolder icon.gifjavaフォルダの中身も場合によって必要。
JavaScriptオブジェクト JavaScriptオブジェクト Jmol を一つつくる。これにはJmol._Applet、Jmol._Image、Jmol.controlsなどの関数や内部オブジェクトのセットが含まれています。
JavaScriptプロトタイプ Jmol.getApplet() または Jmol.getAppletHtml() を使って作成したオブジェクトは、Jmol._Applet のサブクラスとなるJavaScriptオブジェクトです。Jmol.getApplet() を使うと、applet/canvasそのものではなく、JavaScriptオブジェクトへの参照が得られます。appletやcanvasは div 要素群で囲み、より多様なオプションを使えるようにしています。
AJAX JSmolは、jQueryで提供されるAJAXを使ってクロスプラットフォームリソースへ簡単にアクセスする方法を実装しています。
RESTサービス JSmolはRCSBのキーワード検索結果にアクセスすることができます。例:caffeine（カフェイン）を参照する構造一覧。
スクリプト JSmolは、Jmolが提供していたのと同じスクリプト機能を提供します。JSmolは、applet/canvasがページを作成する前、または作成中にスクリプトコマンドをすぐに受け入れ、受け入れる準備ができるまでその内容をキャッシュします。

JSmol

JSmol logo13.png

JSmolはJmolアップレットのHTML5 canvas版の名称です。JSmolはPC、Mac、Linuxシステム、タブレットや携帯電話（iOSおよびAndroid）でJavaを必要とすることなく開くことができます。ハードウェアに基づくグラフィック高速化は使っていないので、JSmolはHTML5の標準機能が使えればどんなブラウザの上でも動作します。JSmolは完全にクライアント環境下で動作しており、ほとんどの操作においてサーバ側のしくみを必要としません。（一部のブラウザでバイナリファイルを読み込む場合、あるいはすべてのブラウザで画像やJmol状態を保存する場合には、サーバ側のPHPスクリプトを必要とします。通常はFile icon.gifphp/jsmol.phpで提供されています。詳しくは以下を参照してください。）

JSmolはBob Hanson、Zhou Renjian、Takanori Nakane（中根 崇智）によって開発されました。

JSmolを使うとJmolと同じように分子モデルを描き、スクリプトによる一括操作を行い、対話的に操作することができます。なぜなら、ソースコードは両者で共有しているからです。JSmolはJmolとは別のプログラムという訳ではないということを留意しておいてください。これは単にJavaではなくJavaScriptへとJmolをコンパイルしただけのものです（Java2Scriptのソフトウェアのおかげです）。

現在のJSmolの制限事項

  • 一部のブラウザでは、セキュリティポリシー上の理由からローカルファイル（ウェブブラウザ内ないファイル）を利用することはできません。
    • Operaではローカルファイルにアクセスできません。
    • MSIEではバイナリファイルでない場合に限りローカルファイルにアクセスできます。
    • Chromeでは特別なコマンドラインフラグを指定して起動した場合に限りローカルファイルにアクセスできます（chrome.exe --allow-file-access-from-files）。
    • Firefoxではabout:configに「security.fileuri.strict_origin_policy = false」の設定を行うことによりローカルファイルにアクセスできるようになります。
  • バイナリファイルの読み込み（例：Spartanファイル、gzip圧縮されたファイル、File icon.gifpngjファイル）: 読み込むことはでいますが、ファイル種を識別できるようなファイル名にしておく必要があります（下記参照）。
  • File icon.gifjpg、File icon.gifpng、File icon.gifpngj（png+zip）データへの書き込みは特に制限なく行うことができますが、ユーザがダウンロードできるようにするにはサーバ側での設定が必要です（あるいは、 画像をエクスポートするに記載している別の方法を参照してください）。
  • Jmol prompt コマンドは、HTML5バージョンの場合、単純なJavaScript様の応答以外は使えません。
  • JSmolにおけるWebGLの実装はまだ完全ではなく、機能は限られてます。

バイナリファイルの読み込み

Jmol（Java）はファイルを開いてから、そのファイルがバイナリファイルなのかどうかを判断することができます。JSmol（JavaScript）の場合、そうではありません。なぜならAJAX転送のしくみがバイナリファイルとそうでないファイルでは違うからです。そのため、JSmolはよみこむ前にそのファイルがバイナリなのかそうでないのかを判断しなければならないのです。

ファイル名

JSmolはファイルを読み込む前に、ファイル名を調べてそのファイルがバイナルなのかそうでないのかを判断します。

JSmol will switch to binary mode for files with any of the following in their file name: JSmolは、ファイル名が以下のいずれかを含む場合はバイナリモードに切り替えます。 File icon.gif.bin File icon.gif.gz File icon.gif.zip File icon.gif.jpg File icon.gif.png File icon.gif.jmol File icon.gif.smol File icon.gif.spartan File icon.gif.mrc File icon.gif.pse

これらの「拡張子」はファイル名のどこにあっても、バイナリ・アクセス・モードに切り替えることができます。つまり、例えば、ファイル名のどこか好きな場所に .bin を含めるようファイル名を変更すれば、JSmolはそのファイルをバイナリファイルと認識して読み込みます。

上級者向け: 別の拡張子をバイナリとして読み込む必要があり、バイナリファイルとして認識する既定の拡張子を含むようファイル名を変更することができない場合は、Jmolオブジェクトの初期化後に以下のJavaScriptコードを実行することにより、対象拡張子を追加することができます。
Jmol._binaryTypes.push('.myExtension');

ブラウザのふるまい

バイナリファイルの読み込みを Chrome や MSIE と互換性を持たせるためには、サーバ側でバイナリデータを BASE64 形式に変換する処理が必要になります。これは、Firefoxだけがクリーンな（信頼性の高い）同期バイナリファイル転送ができるからです。（そして、今のところ、Jmolのすべてのファイル読み込みを完全に非同期モードに移行する方法は見つかっていません）。

ページの訪問者がバイナリファイルを読み込む必要がある場合、 JSmol の配布物に含まれている File icon.gifjsmol.php ファイル（下記参照）のコピーをサーバーに置き、Info配列のserverURLを使ってそれを指定します。例として、デモページではこの方法を使っています。


この方法を使うには、サーバーでPHPが使えるようになっている必要があります。そうでない場合は、PHP が動作する別のサーバー上にある File icon.gifjsmol.php ファイルを指定して「拝借」することもできます（そのサーバーの所有者に問い合わせてみてください）。

Chromeなどのブラウザでは、ローカルのバイナリファイルを読み込むときに起こる問題を、ローカルのウェブサーバを経由してページを実行することで解決できる場合があります。

旧式ページからJSmolページへの変換

JmolアップレットとJmol.jsライブラリを使ったページを、HTML5バージョンのJSmolを使ったコードに変換するのは難しくありません。詳しくは詳細について記したページを参照してください。

インストール

ファイルのダウンロード

特定のブラウザに対する配慮

ローカルファイルへのアクセス

WindowsのMSIE（Internet Explorer）

WindowsのChrome

初期設定

ブラウザに関する問題

ライブラリの読み込み

軽量版JSmol

最適構成

パラメータの設定

URLによるパラメータの設定

Jmol JavaScriptオブジェクトの各機能

Contributors

Cudo29, AngelHerraez

Retrieved from "https://wiki.jmol.org/index.php?title=Jmol_JavaScript_Object/ja&oldid=10148"