今回から 2 回、GitHub で公開されている viewer-javascript-tutorial リポジトリ を使って、Forge Viewer の基本的な実装を学んでいきたいと思います。具体的には、Node.js 上に Forge Viewer を使った Web サーバーをローカルに作成してテストしていきます。若干、手順に違いがありますが、ここで紹介する内容は、リポジトリの Chapter 1 の後半部分の内容となります。
- GitHub アカウントをお持ちでない場合や、GitHub Desktop と Node.js、Postman をインストールされていない場合には、Forge の開発環境 の内容をご確認の上、アカウント取得とインストールを完了させてください。実際の開発に GitHub アカウントや GitHub Desktop は必須ではありませんが、GirHub 上で公開されている Forge サンプルを参照する場合に便利です。
- Forge を利用するために必要な Client ID と Client Secret(別名 Consumer Key と Consumer Secret)を取得していない場合には、Forge API を利用するアプリの登録とキーの取得 の内容に沿って、キーを取得してください。
- まず、チュートリアルの環境をセットアップしてきます。 Autodesk View and Data API Node.js Basic Sample リポジトリ ページを表示して、右上の [Sign In] ボタンでから GitHub アカウントでサインインします。
- Git Shell 上の git コマンドを使って素材となるソースコード一式をクライアント コンピュータにコピーします。まずは、コピー対象の URL をページ上で確認します。
- Git Shell を起動して、git clone コマンドで確認した URL をパラメータに指定して、リポジトリ をクライアント コンピュータにコピーします。具体的には、git clone https://github.com/Developer-Autodesk/workflow-node.js-view.and.data.api.git と入力してください。リポジトリのコピーが始まるはずです。もし、Git Shell を利用せずにサンプルをダウンロードしたい場合には、隣にある [Download ZIP] ボタンを使って、任意に ZIP 圧縮されたソースコードを入手することも可能です。
- コピーされたリポジトリが、C:\Users\<Windows ユーザ名>\Documents\GitHub フォルダ直下の workflow-node.js-view.and.data.api フォルダにあることを確認してください。
- コピー先のフォルダにディレクトリを変更して、コピーしたソースコードをチェックアウトします。最初に cd workflow-node.js-view.and.data.api と入力してディレクトリを変更後に、 git checkout -b v1.0-workshop と入力して、このブランチで作業することを宣言します。
- Node.js を利用した Web サーバーをローカル コンピュータ上に構築していきます。コピーしたリポジトリ内のサンプル コードが利用している Node Package を、npm コマンド(Node Package Manager)を使ってインストールしていきます。Node.js command prompt を起動してローカル リポジトリのディレクトリに移動したら、npm install と入力してください。インストールが開始されて、serve-favicon、express、request、の 3つの Node Package がインストールされるはずです。
- 同じ workflow-node.js-view.and.data.api フォルダ内で、copy コマンドを使って credentials_.js ファイルを credentials.js の名前でコピーします。
- コピーした credentials.js ファイルを Adobe Brackets で開いて、 Developer Portal サイトで取得済の Client ID と Client Secret の値に置き換えて上書き保存します。<replace with your consumer key> を Client ID で、<replace with your consumer secret> を Client Secret で書き換えて、ファイルを上書き保存してください。
- /www/index.js ファイルを Adobe Brackets で開き、表示させるドキュメントの URN を指定します。URN は、Postman による Viewer 利用手順の理解 - 2 legged 認証 で紹介した手順で取得した Base64 エンコード済みの値か、こちらのテスト サイトから取得することが出来ます。<replace with your encoded urn> を置き換えて、ファイルを上書き保存してください。
- Node.js command prompt で Node.js で作成した Web サーバーを起動します。node server.js と入力して、Server listening on port 3000 と表示されることを確認してください。
- Google Chrome か、他の WebGL がサポートされる Web ブラウザを起動して、URL に localhost:3000 と入力してください。指定したドキュメントが表示されるはずです。
ここまでの手順で、Node.js で Web サーバーを構築して、Forge Viewer を使ったページを作成することが出来ました。表示される 3D モデルは、あらかじめ別の場所で変換されて URN が取得出来ていることを前提としていますが、A360 Viewer のように、毎回、ファイルをアップロードしてストリーミング配信用に変換して表示させることも可能です。逆に言えば、バケット ポリシーが Persistent であれば、一度、ファイルをアップロード、変換して URN が取得できてしまえば、いつでも、3D モデルを表示できることも出来るということになります。
なお、このチュートリアルでは、 Web サーバーのホストに Node.js を利用していますが、Apache や ASP.NET などの手法を利用しても問題はありません。
By Toshiaki Isezaki
コメント
コメントフィードを購読すればディスカッションを追いかけることができます。