プレビュー扱いだった AutoCAD 2014 の JavaScript API が、AutoCAD 2015 で JavaScript API が一新され、このバージョンから正式な API となりました。新しい API という意味では、Version 1 ですが、昨年からの通し番号を継承して、一応 Version 2 扱いとなっています。
今回、最も分かり易い更新点は、AutoCAD 内から HTML にホストされた(HTML ファイル内に埋め込まれた) JavaScript コードをデバッグできるようになった点です。AutoCAD はHTML ファイルをレンダリング(表示)するために WebKit を利用していますが、AutoCAD 2015 で利用できるようになったデバッグツールは、WebKit に含まれる WebInspector というツールです。
WebInspector は英語のユーザ インタフェースのみの提供ですが、AutoCAD プロセスで動作する JavaScript コードを直接デバッグできる環境を提供することで、AutoCAD 2014 よりも JavaScript プログラム作成の生産性を向上することが出来るはずです。具体的な操作方法は、この記事の後半でご紹介します。
ここからは、AutoCAD 2014 からの変更点を紹介していきましょう。AutoCAD の JavaScript API の概要や、AutoCAD 2014 時に紹介したサンプル コードを参照する場合には、次のブログ記事を参照してみてください。AutoCAD 2015 との違いを把握していただくためにも、簡単に目を通していただくことをお勧めします。
AutoCAD JavaScript API の使い方 ~ その 1
AutoCAD JavaScript API の使い方 ~ その 2
AutoCAD JavaScript API の使い方 ~ その 3
ドキュメント関連
こちらも英語版のみの提供ですが、このバージョンでは、リファレンス マニュアルに加えて、Getting Startted(はじめましょう) ドキュメントが加わりました。初めて AutoCAD の JavaScript API に挑戦する場合には、このドキュメントが参考になるはずです。
AutoCAD 2015 JavaScript API ガイド(英語)
AutoCAD 2015 JavaScript API リファレンス(英語)
ライブラリ
ライブラリという表現が正しいのかわかりませんが、HTML にホスティングする場合に <script> タグに記述する参照は、AutoCAD 2014 時の http://www.autocadws.com/jsapi/v1/Autodesk.AutoCAD.js から、http://app.autocad360.com/jsapi/v2/Autodesk.AutoCAD.js に変更されています。AutoCAD 2014 で作成した JavaScript API を埋め込んだ HTML は、参照先を新しいものに置き換える必要があります。
また、このブログでは詳細をご案内していませんでしたが、http://app.autocad360.com/jsapi/v2/XMLSchema/index.html でスキーマも用意されています。
内部動作の仕組み
AutoCAD 2014 時には、AutoCAD プロセス内で 1 つの Web ブラウザ インスタンスを使って JavaScript コードをで実行させていました。その結果、実行中の JavaScript コードがハングしてしまうと、すべてのコードがフリーズしてしまう問題が存在していました。
AutoCAD 2015 では、JavaScript コードの実行に異なる Web ブラウザ インスタンスを利用するようになったため、ロード中の JavaScript コードの干渉を低減して安定性が向上しています。この手法にために、オープン ソースの Chromium Embedded Framework (CEF) を利用しています。
コード上の仕様変更
AutoCAD 2014 で作成した JavaScript コードを AutoCAD 2015 で実行させようとすると、コードが正しく動作しない問題に直面するはずです。具体的には、ユーザ入力を促す GetXXX 系の関数が返す JSON 形式の戻り値をライブラリ側で parse するようになったため、クライアント側で parse する必要がなくなりました。例えば、下記は、AutoCAD 2014 で動作していた getPoint() の Promise Pattern を利用したコード抜粋です。
function myCircle() {
try {
var ppo = new Acad.PromptPointOptions();
ppo.useBasePoint = false;
ppo.allowNone = false;
ppo.setMessageAndKeywords("\n中心点を入力", "");
Acad.Editor.getPoint(ppo).then(onCompleteCpt, onError);
}
catch(ex) {
write(ex.message);
}
}
function onCompleteCpt(jsonPromptResult) {
try {
var resultObj = JSON.parse(jsonPromptResult);
if (resultObj && resultObj.status == 5100) {
try {
m_cpt = resultObj.value;
var pdo = new Acad.PromptDistanceOptions("\n半径を入力");
pdo.useBasePoint = true;
pdo.allowNone = false;
pdo.basePoint = new Acad.Point3d(m_cpt.x, m_cpt.y, m_cpt.z);
Acad.Editor.getDistance(pdo).then(onCompleteRad, onError);
}
catch(ex) {
write(ex.message);
}
}
}
catch(ex) {
write(ex.message);
}
}
AutoCAD 2014 で動作するこのコードは AutoCAD 2015 では青字の部分で例外エラーが発生してしまいます。 AutoCAD 2015 で動作させるためには、次のようなコードを変更する必要があります。
function myCircle() {
try {
var ppo = new Acad.PromptPointOptions();
ppo.useBasePoint = false;
ppo.allowNone = false;
ppo.setMessageAndKeywords("\n中心点を入力", "");
Acad.Editor.getPoint(ppo).then(onCompleteCpt, onError);
}
catch(ex) {
write(ex.message);
}
}
function onCompleteCpt(jsonPromptResult) {
try {
var resultObj =jsonPromptResult;
if (resultObj) {
try {
m_cpt = resultObj.value;
var pdo = new Acad.PromptDistanceOptions("\n半径を入力");
pdo.useBasePoint = true;
pdo.allowNone = false;
pdo.basePoint = new Acad.Point3d(m_cpt.x, m_cpt.y, m_cpt.z);
Acad.Editor.getDistance(pdo).then(onCompleteRad, onError);
}
catch(ex) {
write(ex.message);
}
}
}
catch(ex) {
write(ex.message);
}
}
AutoCAD JavaScript API の使い方 ~ その 3 で紹介した円の作図コマンド MyCircle について、この仕様変更を反映した .js ファイルを次のリンクからダウンロードで出来るようにしました。AutoCAD へ WEBLOAD コマンドでロードする方法と実行方法は、従来と変更ありません。もちろん、Web サーバーにホストした場合には、事前に TRUSTEDPATHS システム変数にドメインを指定する必要があります。
円の作図処理に HTML のユーザ インタフェースを実装したファイル(JavaScript を HTML に埋め込み)は、下記からダウンロードできます。
Createcircle-2015.html をダウンロード
この HTML を Web サーバー上からロードしてパレットに表示する機能を、次の Visual Studio 2012 プロジェクトで AutoCAD .NET API で実装しています。
注意:
このプロジェクトをダウンロードして、bin フォルダ直下の JSPalette.dll アセンブリを直接、NETLOAD コマンドでロードしようとすると、「アセンブリをロードできません。エラーの詳細: System.IO.FileLoadException: ファイルまたはアセンブリ 'file:///C:\Users\isezakt\Desktop\JSPalette\JSPalette\bin\Debug\JSPalette.dll'、またはその依存関係の 1 つが読み込めませんでした。操作はサポートされません。 (HRESULT からの例外: 0x80131515)」エラーが発生する場合があります。この場合には、Windows エクスプローラから JSPalette.dll アセンブリを右クリックして、[ブロックの解除(K)] ボタンをクリックしてセキュリティ ブロックを解除してください。
WebInspector を使ったデバッグ
MyCircle コマンドを実装した Mycircle-2015.js のロードと実行、また、JsPalette.dll を NETLOAD コマンドでロードしてから、JSPALETTE コマンドを呼び出して利用する方法、さらに、Webinspector を使った簡単なデバッグ方法を、次の動画でご案内しましょう。
WebInspector は、HTML コンテンツがアクティブなときに、[F12] キーを押すことでいつでも表示させることが出来ます。上記の例のように、HTML コンテンツをパレット インタフェース上に表示した場合だけでなく、モーダル/モードレス ダイアログボックスや、AutoCAD 2015 で登場した [新しいタブ] をアクティブにしている場合でも表示させることが出来ます。
JavaScript でカスタマイズした内容は、サーバー上で一括管理することで、常に最新の状態をユーザに配信することが出来ます。別の言い方をするなら、サーバーから直接最新の JavaScript コードを直接ロードすることが出来るので、カスタマイズしたファイルをクライアント コンピュータに個別にインストールするインストーラの作成も必要ありません。クラウド上に Web サーバーをホストすることも容易な時代です。そろそろ、クラウドを利用した新しいカスタマイズを試す時期なのかも知れません。
By Toshiaki Isezaki
コメント
コメントフィードを購読すればディスカッションを追いかけることができます。