View and Data API チュートリアル ～ その3 ～ Basic Extension

ご注意：View and Data API は2016年6月に Viewer と  Model Derivative API に分離、及び、名称変更されました。

前回 まで作成した Node.js を使ったチュートリアルに、Extension（エクステンション）を追加していきます。ここで紹介する内容は、Autodesk View & Data API – Getting Started Tutorial リポジトリ の Chapter 3 の Step 1 ～ Step 4 に該当するものです。

Extension とは ?

ご存知のとおり、AutoCAD や Revit、Inventor のようなデスクトップ製品では、その API を使ってアドイン アプリケーションを開発して製品にロードすることで、製品自体の機能を拡張することが出来ます。ここでいう Extension とは、View and Data API で作成した実行中ビューアに、JavaScript で記述したファイルをロードして、機能拡張するモジュールを指しています。

つまり、View and Data API も、アドインと同じようなメカニズムを持っています。もちろん、利用する必要がなくなれば、ビューアから Extension をロード解除することも出来ます。

Extension を利用することで、管理者権限を持つメンバだけに Extension をロードして機能を利用させたり、権限のないユーザの利用時に Extension をロード解除して特定の機能を無効にするといった制御も可能になります。

まず、Extension の基本メカニズムを理解するために、簡単な Extension のロードとロード解除を実装していきます。

1. Adobe Brackets などの適切なテキスト エディタを使って、”Viewing.Extension.Workshop.js” 名で JavaScript ファイルを作成して、次の内容のスケルトン コードを貼り付けて www フォルダに保存します。

///////////////////////////////////////////////////////////////////////////////
// Demo Workshop Viewer Extension
// by Philippe Leefsma, April 2015
//
///////////////////////////////////////////////////////////////////////////////
AutodeskNamespace("Viewing.Extension");
Viewing.Extension.Workshop = function (viewer, options) {
    /////////////////////////////////////////////////////////////////
    //  base class constructor
    //
    /////////////////////////////////////////////////////////////////
    Autodesk.Viewing.Extension.call(this, viewer, options);
    var _self = this;
    var _viewer = viewer;
    /////////////////////////////////////////////////////////////////
    // load callback: invoked when viewer.loadExtension is called
    //
    /////////////////////////////////////////////////////////////////
    _self.load = function () {
        alert('Viewing.Extension.Workshop loaded');
        console.log('Viewing.Extension.Workshop loaded');
        return true;
    };
    /////////////////////////////////////////////////////////////////
    // unload callback: invoked when viewer.unloadExtension is called
    //
    /////////////////////////////////////////////////////////////////
    _self.unload = function () {
        console.log('Viewing.Extension.Workshop unloaded');
        return true;
    };
};
/////////////////////////////////////////////////////////////////
// sets up inheritance for extension and register
//
/////////////////////////////////////////////////////////////////
Viewing.Extension.Workshop.prototype =
    Object.create(Autodesk.Viewing.Extension.prototype);
Viewing.Extension.Workshop.prototype.constructor =
    Viewing.Extension.Workshop;
Autodesk.Viewing.theExtensionManager.registerExtension(
    'Viewing.Extension.Workshop',
    Viewing.Extension.Workshop);

2. index.html ファイルを開いて、</head> タグの一行前に 1. で作成した Extension ファイルを参照するコードを追記します。

<script src="/Viewing.Extension.Workshop.js"></script>

3. index.js に Extension ファイルをロードするコードを追記します。ビューアがジオメトリをロードした際に生成される GEOMETRY_LOADED_EVENT イベントを待って、Extension をロードさせるため、index.js ファイルの既存コードに、次の太字の部分を追記します。このコードで、イベント発生時に loadExtension() が呼び出されます。

viewer.addEventListener(
    Autodesk.Viewing.GEOMETRY_LOADED_EVENT,
    function (event) {
        loadExtensions(viewer);
    });
viewer.load(pathInfoCollection.path3d[0].path);
}, onError);
});

4. loadExtension() を実装します。index.js ファイルの OnError() の前に、次の太字部分を追記します。

function loadExtensions(viewer) {
    viewer.loadExtension('Viewing.Extension.Workshop');
}

function onError(error) {
    console.log('Error: ' + error);
};

5. 実装したExtension をテストしてみます。Node.js でクライアント上の Web サーバーを起動して、WebGL 対応ブラウザで http://localhost:3000/ を開き、3D モデルを表示してみてください。ジオメトリが表示された直後に、次のようなメッセージ ボックスが表示されれば、Extension が正しくロードされたことになります。

なお、ここで表示されたのは、Viewing.Extension.Workshop.js 内の alert(‘Viewing.Extension.Workshop loaded’); の部分となります。

次回 は、Extension の内容を変更して、オブジェクトの選択処理を実装していきます。

By Toshiaki Isezaki