View and Data API チュートリアル ～ その1 ～ Node.js Basic

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

今回から、数回に渡って GitHub で公開されている Autodesk View & Data API – Getting Started Tutorial リポジトリ を使って、View and Data API  の基本的な実装を学んでいきたいと思います。具体的には、Node.js を使って View and Data API  を使った Web ページをローカルな Web サーバーにホストします。若干、手順に違いがありますが、ここで紹介する内容は、リポジトリの Chapter 1  相当の内容となります。

1. GitHub アカウントをお持ちでない場合や、GitHub Desktop と Node.js、Curl をインストールされていない場合には、View and Data API の開発環境  の内容をご確認の上、アカウント取得とインストールを完了させてください。実際の開発に GitHub アカウントや GitHub Desktop は必須ではありませんが、GirHub 上で公開されている View and Data API サンプルを参照する場合に便利です。
   
   
2. View and Data API を利用するために必要な Consumer Key と Consumer Secret を取得していない場合には、View and Data API アプリ登録とキーの入手 の内容に沿って、キーを取得してください。
   
   
3. まず、チュートリアルの環境をセットアップしてきます。 Autodesk View and Data API Node.js Basic Sample リポジトリ ページを表示して、右上の [Sign In] ボタンでから GitHub アカウントでサインインします。
   
   
   
   
4. Git Shell 上の git コマンドを使って素材となるソースコードをクライアント コンピュータにコピーします。まずは、コピー対象の URL をページ上で確認します。
   
   
   
   
5. Git Shell を起動して、確認した URL をパラメータに git clone コマンドでリポジトリをクライアント コンピュータにコピーします。git clone https://github.com/Developer-Autodesk/workflow-node.js-view.and.data.api.git と入力してください。リポジトリのコピーが始まるはずです。
   
   
   
   もし、Git Shell を利用せずにサンプルをダウンロードしたい場合には、隣にある [Download ZIP] ボタンを使って、任意に ZIP 圧縮されたソースコードを入手することも可能です。
   
   
6. コピーされたリポジトリが、C:\Users\<Windows ユーザ名>\Documents\GitHub フォルダ直下の workflow-node.js-view.and.data.api フォルダにあることを確認してください。
   
   
   
   
7. コピー先のフォルダにディレクトリを変更して、コピーしたソースコードをチェックアウトします。最初に cd workflow-node.js-view.and.data.api と入力してディレクトリを変更後、 git checkout v1.0-workshop と入力して、このブランチで作業することを宣言します。
   
   
   
   
8. Node.js を利用した Web サーバーをローカル コンピュータ上に構築していきます。コピーしたリポジトリ内のサンプル コードが利用している Node Package を、npm コマンド（Node Package Manager）を使ってインストールしていきます。Node.js command prompt を起動してローカル リポジトリのディレクトリに移動したら、npm install と入力してください。インストールが開始されて、serve-favicon、express、request、の 3つの Node Package がインストールされるはずです。
   
   
   
   
9. 同じ workflow-node.js-view.and.data.api フォルダ内で、copy コマンドを使って credentials_.js ファイルを credentials.js の名前でコピーします。
   
   
   
   
10. コピーした credentials.js ファイルを Adobe Bracket で開いて、 Developer Portal サイトで取得済の Consumer Key と Consumer Secret の値に置き換えて上書き保存します。<replace with your consumer key> を Consumer Key で、<replace with your consumer secret> を Consumer Secret で書き換えて、ファイルを上書き保存してください。
    
    
    
    
11.  /www/index.js ファイルを開いて、表示させるドキュメントの URN を指定します。URN は、View and Data API ワークフロー ページで紹介した手順で取得した Base64 でエンコードした値か、こちらのテスト サイトから取得することが出来ます。<replace with your encoded urn> を置き換えて、ファイルを上書き保存してください。
    
    
    
    
12. Node.js command prompt で Node.js で作成した Web サーバーを起動します。node server.js と入力して、Server listening on port 3000 と表示されることを確認してください。
    
    
    
    
13. Google Chrome か、他の WebGL がサポートされる Web ブラウザを起動して、URL に localhost:3000 と入力してください。指定したドキュメントが表示されるはずです。
    
    
    
    

 ここまでの手順で、Node.js で Web サーバーを構築して、View and Data API を使ったページを作成することが出来ました。表示される 3D モデルは、あらかじめ別の場所で変換されて URN が取得出来ていることを前提としていますが、A360 Viewer のように、毎回、ファイルをアップロードしてストリーミング配信用に変換して表示させることも可能です。逆に言えば、バケット ポリシーが Persistent であれば、一度、ファイルをアップロード、変換して URN が取得できてしまえば、いつでも、3D モデルを表示できることも出来るということになります。

なお、このチュートリアルでは、 Web サーバーのホストに Node.js を利用していますが、ASP.NET など、他の手法を利用しても問題はありません。

次回 からは、この Web サイトを徐々に拡張してきます。

By Toshiaki Isezaki