Cloud9 仮想環境で View and Data API チュートリアル

Cloud9 - https://c9.io/ というサービスをご存じでしょうか？

Cloud9 は、クラウドを使って開発環境をクラウド上で提供するサービスです。View and Data API など、Forge Platform API の開発では、View and Data API の開発環境 のブログ記事でご案内したような開発環境の準備や環境設定が必要になります。ただ、一部の企業では、プロキシ設定による制限やツールのインストールに制限が存在するため、自由に開発環境を準備することが難しい場合もあるかと思います。

また、本格開発に入る前の試験開発の段階では、今後も使い続けるかわからないツールなどはインストールしなくない、また、単純に、コンピュータをクリーンな状態にしておきたい、といった理由もあるかも知れません。

そのような場合には、クラウド上の環境で仮想化された開発環境を提供してくれる Cloud9 は便利です。GitHub アカウントをお持ちなら、そのアカウントでログインして GitHub 上に公開されたリポジトリを、そのままシームレスに利用することが出来ます。例えば、View and Data API チュートリアル で紹介してきた内容を、Cloud9 を使って習得していくことも出来ます。今回は、View and Data API チュートリアル～その1 ～ Node.js Basic の内容を Cloud9 を使って実現する手順をご紹介したいと思います。前提となるのは、GiuHub アカウントの取得のみです。

Cloud9 - https://c9.io/ のホームページを表示したら、画面右上の GitHub アイコンをクリックします。
ログイン画面が表示されたら、お手持ちの GitHub アカウントでログインしてください。
Cloud9 上にワークスペースを作成します。画面中央にある Create a new workspace と書かれた領域をクリックします。
下図の①から⑤について、作成するワークスペースの詳細を指定していきます。①は半角英数字のみでスペースは使用できません。

ここで重要なのは、④ で Autodesk View and Data API Node.js Basic Sample リポジトリ の URL を、⑤ で Node.js 環境をそれぞれ指定出来る点です。④ で指定する URL は、GitHub リポジトリ上の赤枠に記載されてものを使用してください。

①から⑤の指定が完了したら、ページ下部の Create workspace ボタンをクリックしてください。GitHub リポジトリから必要なコードをコピーすると同時に、Node.js 環境が構築されます。
ワークスペースの作成が完了すると、Web ブラウザ上に次のような画面が表示されるはずです。ページ下部にワークスペースをコントロールするための bash が表示されていることが分かります。
bash 上に npm install と入力して、Autodesk View and Data API Node.js Basic Sample リポジトリのコードで Web サーバー構築に必要な Noe Package をインストールしてください。この手順は、View and Data API チュートリアル～その1 ～ Node.js Basic の 8. に相当するものです。
Cloud9 に作成されたワークスペースは、いわば統合開発環境（IDE）です。Adobe Brackets のようなエディタを別途インストールする必要はありません。ここでは、チュートリアルで実装したのと同じ手順を踏襲して、次に、credentials_.js ファイルを credentials.js の名前でコピーします。この操作は、次のようにファイルを選択して貼り付け、名前変更の順序で実行できます。
続いて、コピーした credentials.js ファイルをダブルクリックで直接開いて、 Developer Portal サイトで取得済の Consumer Key と Consumer Secret の値に置き換えて上書き保存します。<replace with your consumer key> を Consumer Key で、<replace with your consumer secret> を Consumer Secret で書き換えて、ファイルを上書き保存します。
/www/index.js ファイルをダブルクリックで開いて、表示させるドキュメントの URN を指定します。URN は、View and Data API ワークフロー ページで紹介した手順で取得した Base64 でエンコードした値か、こちらのテストサイトから取得することが出来ます。<replace with your encoded urn> を置き換えて、ファイルを上書き保存してください。
Web サーバーを起動します。server.js をダブルクリックで開いたら、ページ上部にある Run ボタンをクリックしてみてください。

ページ下部には、bash と同じコンソール領域の [server.js - Running] タブに、この Web サーバーの URL が表示されるはずです。
表示される URL は、https となっていますが、このチュートリアルでは SSL 認証を設定していないので、http として、別のブラウザインスタンスで URL を入力してみてください。ここでは、http://test-project-toshiakiisezaki.c9users.io/ とすると、指定した URN ドキュメントを表示するはずです。

Cloud9 で構築した Web サーバーは、localhost としてコンピュータ内でのみで参照するのではなく、インターネット上に接続されていれば、別のコンピュータやデバイスでも参照できます。つまり、開発用のコンピュータに、物理的な開発環境を用意しなくてもいいことになります。企業内プロキシの制限も、ある程度、緩和されるはずです。

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

By Toshiaki Isezaki