新しい Forge Viewer チュートリアル改定版～その1

以前ご案内した 新しい Forge Viewer チュートリアル～その1 の手順が改定されていますので、改めて、更新された内容を記しておきたいと思います。Forge Viewer の評価等でお使いいただければと思います。なお、この記事では Windows 上での利用を想定し、https://github.com/Autodesk-Forge/viewer-nodejs-tutorial リポジトリに記載された手順を踏襲していきます。

git for Windows と Node.js、Postman をインストールされていない場合には、Forge の開発環境 の内容をご確認の上、アカウント取得とインストールを完了させてください。
Forge を利用するために必要な Client ID と Client Secret（別名 Consumer Key と Consumer Secret）を取得していない場合には、Forge API を利用するアプリの登録とキーの取得 の内容に沿って、キーを取得してください。
チュートリアルの環境をセットアップしてきます。 https://github.com/Autodesk-Forge/viewer-nodejs-tutorial リポジトリページを表示します。
コマンドプロンプから git コマンドを使って素材となるソースコード一式をクライアントコンピュータにコピーします。まずは、コピー対象の URL をページ上でクリップボードにコピーします。
コマンドプロンプト を起動後、cd documents と入力してカレントフォルダを Documents フォルダに変更します。
git clone コマンドで確認した URL をパラメータに指定して、リポジトリ の内容をクライアントコンピュータにコピーします。具体的には、git clone https://github.com/Autodesk-Forge/viewer-nodejs-tutorial.git と入力してください。リポジトリのコピーが始まります。
C:\Users\<Windows ログインユーザ名>\Documents フォルダ（ドキュメントフォルダ）直下に viewer-nodejs-tutorial フォルダが作成されていることを確認の上、コマンドプロンプトで cd viewer-nodejs-tutorial と入力してカレントフォルダを変更してください。
続いて、ノードパッケージマネージャ（npm）を利用し、package.json 内に記載された依存関係に沿って、Node.js 機能を拡張するパッケージ（ミドルウェア）をインストールしていきます。 npm install と入力してください。
Node パッケージは viewer-nodejs-tutorial フォルダ直下に新しく作られた node_modules フォルダにインストールされます。念のため、同フォルダが作成されていることを確認してください。
このサンプルでは、Web サーバーを構築する目的で Node.js を利用します。Web ブラウザを介して Forge サイトを閲覧する際には、Web サーバー側のコードは隠蔽されて閲覧できない点に注意してください。逆に、ユーザが Web ブラウザ側（クライアント）で閲覧、実行可能なのは、 Viewer 制御などで利用する JavaScitpt コードになります。本サンプル実装では、 viewer-nodejs-tutorial フォルダ直下の server フォルダ内のコードがサーバー側で実行されるコード、www フォルダ内のコードがクライアント側で実行されるコードになります。ここでは、server フォルダ内の config.js を Adobe Brackets で開いて、下記の青字部分を 2. で取得済の Client ID と Client Secret で置き換えます。リポジトリにある説明では、環境変数 FORGE_CLIENT_ID と FORGE_CLIENT_SECRET を設定するようになっていますが、今回は、直接 config.js に書き込みをします。
```
'use strict'; // http://www.w3schools.com/js/js_strict.asp

module.exports = {

  // Autodesk Forge configuration

  // this this callback URL when creating your client ID and secret
  callbackURL: process.env.FORGE_CALLBACK_URL || 'YOURCALLBACKURL',

  // set environment variables or hard-code here
  credentials: {
    client_id: process.env.FORGE_CLIENT_ID || 'YOUR CLIENT ID',
    client_secret: process.env.FORGE_CLIENT_SECRET || 'YOUR CLIENT SECRET'
  },

  // Required scopes for your application on server-side
  scopeInternal: ['data:read','data:write','data:create','data:search'],
  // Required scope of the token sent to the client
  scopePublic: ['viewables:read']
};
```
- server フォルダ内には、Client ID と Client Secret を設定した config.js 以外にも、Forge SDK を使ってクライアントに Access Token を返すルーティング（/user/token）を定義する oauth.js、Access Token をセッションに保存する server.js、Token プロトタイプを定義する token.js がインストールされています。
- www フォルダ内には、このチュートリアルが Web サーバーにホストしてクライアントに表示する HTML 定義である index.html と、同ファイルが参照する \www\js\index.js や CSS 定義などのファイルがフォルダ毎にインストールされてます。
Postman による Viewer 利用手順の理解 - 2 legged 認証 などで、Viewer に表示させるドキュメント ID（URN）を取得してください。

www/js/index.js を Adobe Brackets で開いて、下記の青字部分を取得済のドキュメント ID（URN）で置き換えてください。

var viewer;
var options = {
    env: 'AutodeskProduction',
    getAccessToken: getForgeToken
}

var documentId = 'urn:YOUR-URN';

Autodesk.Viewing.Initializer(options, function onInitialized() {
    Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
});

/**
 * Autodesk.Viewing.Document.load() success callback.
 * Proceeds with model initialization.
 */
function onDocumentLoadSuccess(doc) {

    // A document contains references to 3D and 2D viewables.
    var viewable = Autodesk.Viewing.Document.getSubItemsWithProperties(doc.getRootItem(), {
        'type': 'geometry',
        'role': '3d'
    }, true);
    if (viewable.length === 0) {
        console.error('Document contains no viewables.');
        return;
    }

    // Choose any of the available viewable
    var initialViewable = viewable[0]; // You can check for other available views in your model,
    var svfUrl = doc.getViewablePath(initialViewable);
    var modelOptions = {
        sharedPropertyDbPath: doc.getPropertyDbPath()
    };

    var viewerDiv = document.getElementById('viewerDiv');

    ///////////////USE ONLY ONE OPTION AT A TIME/////////////////////////

    /////////////////////// Headless Viewer /////////////////////////////
    // viewer = new Autodesk.Viewing.Viewer3D(viewerDiv);
    //////////////////////////////////////////////////////////////////////

    //////////////////Viewer with Autodesk Toolbar///////////////////////
    viewer = new Autodesk.Viewing.Private.GuiViewer3D(viewerDiv);
    //////////////////////////////////////////////////////////////////////

    viewer.start(svfUrl, modelOptions, onLoadModelSuccess, onLoadModelError);
}


/**
 * Autodesk.Viewing.Document.load() failure callback.
 */
function onDocumentLoadFailure(viewerErrorCode) {
    console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
}

/**
 * viewer.loadModel() success callback.
 * Invoked after the model's SVF has been initially loaded.
 * It may trigger before any geometry has been downloaded and displayed on-screen.
 */
function onLoadModelSuccess(model) {
    console.log('onLoadModelSuccess()!');
    console.log('Validate model loaded: ' + (viewer.model === model));
    console.log(model);
}

/**
 * viewer.loadModel() failure callback.
 * Invoked when there's an error fetching the SVF file.
 */
function onLoadModelError(viewerErrorCode) {
    console.error('onLoadModelError() - errorCode:' + viewerErrorCode);
}

ここまで用意してきた Web サーバーコードを開発環境上（お使いのコンピュータ）で実行して確認します。コマンドプロンプト上で npm run dev と入力してください。Node start.js と入力しても Web サーバーを起動することが出来ます。
エラーなく Node.js サーバー実装が稼働したら、クライアント側の動作を確認をします。Google Chrome などの WebGL 互換 Web ブラウザを起動して、URL 欄に http://localhost:3000 と入力、実行してみてください。
正しくモデルが表示されたら成功です。Web ブラウザを表示した状態で F12 キーを押下するとデベロッパーツール(開発者ツール) 画面が表示され、クライアント実装となる 12. で編集した index.js の内容が確認出来るはずです。サーバー実装した Client ID や Client Secret は表示されない点に注意してください。