Difference between revisions of "Jmol JavaScript Object/ja"
(→Jmol Javascript ãªãã¸ã§ã¯ãï¼JSmolï¼: Partially translated from Jmol JavaScript Object ver. 2015-9-29 (Tue) 05:19 (UTC) written by Ppillot, AngelHerraez, Hansonrstolaf, Hansonr and Cudo29.) |
(→JSmolを使わないJmolアップグレード: Removed because this section was already removed from the original English page version 2021-09-30 (Thu) 18:48 (UTC)) |
||
| (10 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | == Jmol JavaScript | + | {{Lang:Jmol JavaScript Object}} |
| − | === | + | ==JSmol - Jmol JavaScript オブジェクト== |
| + | <div style="float:right; margin-left:1em;"> | ||
| + | __TOC__ | ||
| + | </div> | ||
| + | <div style="float:left;"> | ||
| + | [[Image:JSmol_logo13.png]] | ||
| + | </div> | ||
| + | |||
| + | JSmolの中核となるのはJmol JavaScriptオブジェクト（<code>window.Jmol</code>）で、これにはJavaScriptの関数やユーティリティが含まれています。最初のJmolオブジェクトは2012年の初めにボブ・ハンソン（Bob Hanson）とポール・パイロット（Paul Pillot）によって開発されました。そしてこの年の後半には'''JSmol'''に組み込まれました。ライブラリ {{file| JSmol.min.js}} はこのオブジェクトを提供するもので、以前はJmol Javaアプレットとともに排他的に用いられていた Jmol.js JavaScriptライブラリの後継となるものです。これを使えば、よりすっきりとした効率的な方法でウェブページ上のJmolとやりとりをすることができます。また、分子モデルの視覚化を抽象化することにより、JavaアプレットをJavaとは異なるHTML5 canvas要素（これはJmolでさえない場合もある）へとシームレスかつ選択的に置き換えることができます。 | ||
| + | |||
| + | ウェブページ開発者は'''JSmol'''を使うと、もはやJavaアプレットをサポートしなくなったほとんどのウェブブラウザを対象とすることができます。これは'''Jmolアプレットサロゲート'''（Jmol applet surrogate）を使っていて、互換性のある環境下でのJmol Javaアプレットをまだサポートしています。 | ||
| + | |||
| + | '''JSmol'''はまた、画面の背後で[https://rcsb.org RCSB PDBデータベース]、[https://cactus.nci.nih.gov/ 米国国立がん研究センターのCACTVSサーバ]、[https://pubchem.ncbi.nlm.nih.gov/ PubChem]などの公開データベースにアクセスする機能も備えています。 | ||
| + | |||
| + | さらに、'''JSmol'''は以下のオブジェクトと簡単にやりとりすることができます。 | ||
| + | * '''JSpecView HTML5 オブジェクト''': これにより3DモデルをIR、NMR、UV/VIS、GC/MSスペクトルに関連付けることができます（[[Jmol_JavaScript_Object/JSV|より詳しい説明]]参照） | ||
| + | * '''JSME HTML5 オブジェクト''': 簡単な化合物2d描画を使って3Dモデルを生成することができます（[[Jmol_JavaScript_Object/JME|より詳しい説明]]参照） | ||
| + | |||
| + | '''JSmol'''は[http://jquery.com jQuery]1.9や1.10と完全に互換性があります。（jQuery 2.0はサポートしていません。また原則として file:// を使ってローカルで実行するMSIEはサポートしないと報告されています。したがって、ローカル環境のMSIEでページを実行する必要がない場合は問題ありません。その場合、jQueryを少し修正する必要があります）。ライブラリはW3CとXHTMLで検証されています。 | ||
| + | |||
| + | === JSmolの主な機能 === | ||
| + | <table class="wikitable"> | ||
| + | <tr> | ||
| + | <th>非Javaオプション</th><td>HTML5専用のオプションとJavaやHTML5/WebGLでは任意のオプション。これには、ページ上の画像やリンクをクリックするとapplet/canvas上の3Dモデリングを開始する初期「遅延アプレット」モード、初期画像が表示されている間に背後で読み込みを行う「画像＋読み込み」モードなどさまざまなオプションが含まれます。</td> | ||
| + | </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 == | ||
| − | === | + | <div style="float:left;"> |
| − | === | + | [[Image:JSmol_logo13.png]] |
| − | === | + | </div> |
| − | === | + | |
| − | === | + | '''JSmol'''はJmolアップレットのHTML5 canvas版の名称です。'''JSmol'''はPC、Mac、Linuxシステム、タブレットや携帯電話（iOSおよびAndroid）でJavaを必要とすることなく開くことができます。ハードウェアに基づくグラフィック高速化は使っていないので、'''JSmol'''はHTML5の標準機能が使えればどんなブラウザの上でも動作します。JSmolは完全にクライアント環境下で動作しており、ほとんどの操作においてサーバ側のしくみを必要としません。（一部のブラウザでバイナリファイルを読み込む場合、あるいはすべてのブラウザで画像やJmol状態を保存する場合には、サーバ側のPHPスクリプトを必要とします。通常は{{file|php/jsmol.php}}で提供されています。詳しくは以下を参照してください。） |
| − | == | + | |
| − | === | + | '''JSmol'''はBob Hanson、Zhou Renjian、Takanori Nakane（中根 崇智）によって開発されました。 |
| − | === | + | |
| − | ==== | + | '''JSmol'''を使うとJmolと同じように分子モデルを描き、スクリプトによる一括操作を行い、対話的に操作することができます。なぜなら、ソースコードは両者で共有しているからです。JSmolはJmolとは別のプログラムという訳ではないということを留意しておいてください。これは単にJavaではなくJavaScriptへとJmolをコンパイルしただけのものです（[http://java2script.sourceforge.net/ Java2Script]のソフトウェアのおかげです）。 |
| − | ==== | + | === 現在の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様の応答以外は使えません。 |
| − | == Jmol | + | * JSmolにおける[[Jmol_JavaScript_Object/WebGL|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|.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|詳細について記したページ]]を参照してください。 | ||
| + | |||
| + | == インストール == | ||
| + | === ファイルのダウンロード === | ||
| + | === 特定のブラウザに対する配慮 === | ||
| + | ==== ローカルファイルへのアクセス ==== | ||
| + | ==== WindowsのMSIE（Internet Explorer） ==== | ||
| + | ==== WindowsのChrome ==== | ||
| + | == 初期設定 == | ||
| + | === ブラウザに関する問題 === | ||
| + | === ライブラリの読み込み === | ||
| + | ==== 軽量版JSmol ==== | ||
| + | ==== 最適構成 ==== | ||
| + | === パラメータの設定 === | ||
| + | ==== URLによるパラメータの設定 ==== | ||
| + | == Jmol JavaScriptオブジェクトの各機能 == | ||
Latest revision as of 01:59, 25 August 2022
|
|---|
JSmol - Jmol JavaScript オブジェクト
JSmolの中核となるのはJmol JavaScriptオブジェクト（window.Jmol）で、これにはJavaScriptの関数やユーティリティが含まれています。最初のJmolオブジェクトは2012年の初めにボブ・ハンソン（Bob Hanson）とポール・パイロット（Paul Pillot）によって開発されました。そしてこの年の後半にはJSmolに組み込まれました。ライブラリ 
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モデリングを開始する初期「遅延アプレット」モード、初期画像が表示されている間に背後で読み込みを行う「画像＋読み込み」モードなどさまざまなオプションが含まれます。 |
|---|---|
| ライブラリファイル | 最低限 j2sフォルダの中身とJSmol.min.jsファイルは必要。多言語化インタフェースを使うにはidiomaフォルダも必要。またjavaフォルダの中身も場合によって必要。 |
| 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はJmolアップレットのHTML5 canvas版の名称です。JSmolはPC、Mac、Linuxシステム、タブレットや携帯電話（iOSおよびAndroid）でJavaを必要とすることなく開くことができます。ハードウェアに基づくグラフィック高速化は使っていないので、JSmolはHTML5の標準機能が使えればどんなブラウザの上でも動作します。JSmolは完全にクライアント環境下で動作しており、ほとんどの操作においてサーバ側のしくみを必要としません。（一部のブラウザでバイナリファイルを読み込む場合、あるいはすべてのブラウザで画像やJmol状態を保存する場合には、サーバ側のPHPスクリプトを必要とします。通常はphp/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圧縮されたファイル、
pngjファイル）: 読み込むことはでいますが、ファイル種を識別できるようなファイル名にしておく必要があります（下記参照）。 - jpg、png、pngj（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は、ファイル名が以下のいずれかを含む場合はバイナリモードに切り替えます。
.bin
.gz
.zip
.jpg
.png
.jmol
.smol
.spartan
.mrc
.pse
これらの「拡張子」はファイル名のどこにあっても、バイナリ・アクセス・モードに切り替えることができます。つまり、例えば、ファイル名のどこか好きな場所に .bin を含めるようファイル名を変更すれば、JSmolはそのファイルをバイナリファイルと認識して読み込みます。
- 上級者向け: 別の拡張子をバイナリとして読み込む必要があり、バイナリファイルとして認識する既定の拡張子を含むようファイル名を変更することができない場合は、Jmolオブジェクトの初期化後に以下のJavaScriptコードを実行することにより、対象拡張子を追加することができます。
Jmol._binaryTypes.push('.myExtension');
ブラウザのふるまい
バイナリファイルの読み込みを Chrome や MSIE と互換性を持たせるためには、サーバ側でバイナリデータを BASE64 形式に変換する処理が必要になります。これは、Firefoxだけがクリーンな（信頼性の高い）同期バイナリファイル転送ができるからです。（そして、今のところ、Jmolのすべてのファイル読み込みを完全に非同期モードに移行する方法は見つかっていません）。
ページの訪問者がバイナリファイルを読み込む必要がある場合、 JSmol の配布物に含まれている jsmol.php ファイル（下記参照）のコピーをサーバーに置き、Info配列のserverURLを使ってそれを指定します。例として、デモページではこの方法を使っています。
この方法を使うには、サーバーでPHPが使えるようになっている必要があります。そうでない場合は、PHP が動作する別のサーバー上にある jsmol.php ファイルを指定して「拝借」することもできます（そのサーバーの所有者に問い合わせてみてください）。
Chromeなどのブラウザでは、ローカルのバイナリファイルを読み込むときに起こる問題を、ローカルのウェブサーバを経由してページを実行することで解決できる場合があります。
旧式ページからJSmolページへの変換
JmolアップレットとJmol.jsライブラリを使ったページを、HTML5バージョンのJSmolを使ったコードに変換するのは難しくありません。詳しくは詳細について記したページを参照してください。
