APS チュートリアル：Simple Viewer

APS 学習サイト、Learn APS Tutorials（https://tutorials.autodesk.io/）になって使用するサンプルが更新されていますので、Simple Viewer（Node.js）用の GitHub リポジトリ – GitHub – autodesk-platform-services/aps-simple-viewer-nodejs: Simple Viewer (Node.js) を題材に、ローカル環境（Windows）にクローンして実行する手順を記しておきたいと思います。

1. Web ブラウザで GitHub 上の Simple Viewer (Node.js)  リポジトリ ページを開きます。
2. 画面右側の [Code] ボタンをクリックして、クローン元のリポジトリ URL https://github.com/autodesk-platform-services/aps-simple-viewer-nodejs.git をクリップボードにコピーしておきます。
   
3. リポジトリの内容をクライアント コンピュータにクローン（コピー）します。コマンド プロンプトを起動して、リポジトリ内容をコピーしたいフォルダ（ディレクトリ）に CD コマンドで移動し、git clone  https://github.com/autodesk-platform-services/aps-simple-viewer-nodejs.git （クリップボード内の URL）と入力します。aps-simple-viewer-nodejs フォルダが作成されて、GitHub リポジトリからソースコードがコピーされます。
   
4. クローンされたプロジェクトに Node.js の実行で必要となるパッケージ（ミドルウェア）をインストールします。CD コマンドで現在のフォルダを aps-simple-viewer-nodejs フォルダに移動してから、npm install と入力します。
   
5. 作成するアプリは、システム環境変数、APS_CLIENT_ID（使用する Client ID）、APS_CLIENT_SECRET（使用する Client Secret）、APS_BUCKET（使用する Bucket 名）を取得して利用します。メモ帳などのテキスト エディタとクリップボードを交互に使用（コピー＆ペースト）しながら SET コマンドを実行してみてください。
   APS_BUCKET を指定しない場合は、Client ID に ”-basic-app” が付加された Bucket 名で Bucket が作成されます。いずれの場合も、適用される Bucket ポリシーは temporary です。
   
   

   set APS_CLIENT_ID=<<YOUR CLIENT ID>>
   set APS_CLIENT_SECRET=<<YOUR CLIENT SECRET>>
   set APS_BUCKET=<<YOUR BUCKET NAME>>

6. ここまでの手順で実行の準備は完了です。カレント フォルダが aps-simple-viewer-nodejs フォルダであることを確認したら、npm start と入力して Node.js サーバーを起動します。
   
7. Web ブラウザを起動して、URL の localhost:8080 と入力してリターンすると、ページが表示されるはずです。まだ Bucket がない場合には、Viewer 画面上には何も表示されませんが問題ありません。
   
8. 右上の [Upload] ボタンをクリックして、Viewer に表示したいデザイン ファイルをアップロードします。ファイル ダイアログでファイルを選択して [OK] ボタンをクリックすると、Data Management API によるファイルのアップロードが始まります。
   
9. ファイルのアップロードが完了すると、右上のドロップダウン リストボックスにアップロードしたファイル名が表示されて、同時に Model Derivative API による SVF 変換が始まります。
   
10. SVF 変換が完了すると、アップロードしたファイルの内容が Viewer に表示されるはずです。
    
    複数のファイルを Bucket にアップロード、SVF 変換すると、ドロップダウン リストボックスで表示を切り替えることが出来ます。ドロップダウン リストボックスに Bucket 内のファイルがリストされた場合でも、SVF がない場合（SVF 変換されていない場合）には、切り替え操作をしても Viewer に表示はされません。
    

このサンプルは、2-Legged OAuth で Bucket データを表示するサンプルでご紹介した learn.forge.viewmodels サンプル の内容とは少し異なりますが、2-legged OAuth を使ってアクセストークンを取得後、Bucket へのデザイン ファイルのアップロードと SVF 変換、Viewer への表示の手順を理解する上では同じシナリオを持ちます。

2-legged OAuth を使った Viewer への表示プロセスは、Postman による Viewer 利用手順の理解 – 2 legged 認証 や VS Code Forge Extension を使った Viewer ワークフローの確認 でも把握いただけます。

By Toshiaki Isezaki