ご注意：View and Data API は2016年6月に Viewer と Model Derivative API に分離、及び、名称変更されました。
前回の内容 を拡張して、ファイルのアップロード処理とストリーミング配信用の変換処理を実装していきます。なお、ここで紹介する内容は、Autodesk View & Data API – Getting Started Tutorial リポジトリ の Chapter 2 に該当するものです。Chapter 2 では、ファイルをアップロードしてストリーミング配信用に変換する処理には、クライアント側処理 - Translating from the client とサーバー側処理 - Translating from the server の 2 通りのオプションが用意されていますが、ここでは手順の少ないクライアント側処理を実装していきます。セキュリティを考慮すると、すべてサーバー側処理で実装するのが 望ましい点に留意してください。
- Adobe Brackets を使って新規に upload.html と upload.js の 2 つのファイルを作成して www フォルダに保存してください。各ファイルの内容は、次のとおりです。
upload.html：
<html> <head> <title>ADN Viewer Demo (client upload)</title> <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" /> <!-- jquery --> <script src="https://code.jquery.com/jquery-2.1.2.min.js"></script> <!-- Bootstrap CSS --> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> <!-- Autodesk.ADN.Toolkit.Viewer --> <script src=" https://rawgit.com/Developer-Autodesk/library-javascript-view.and.data.api/master/js/Autodesk.ADN.Toolkit.ViewData.js"></script> <script src="/upload.js"></script> </head> <body> </body> </html>
var oViewDataClient =null ; $(document).ready (function () { oViewDataClient =new Autodesk.ADN.Toolkit.ViewData.AdnViewDataClient ( 'https://developer.api.autodesk.com', 'http://' + window.location.host + '/api/token' ) ; }) ; - 作成した upload.html は、まだブランク ページです。ここで、ストリーミング配信するファイルをアップロードするため、各種のコントロールを追記します。upload.html の <body> ～ </body> タグの間に、次のコードを追記してください。
<div class="container"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Upload and translate a file</h3> </div> <div class="panel-body"> <input class="form-control" type="file" id="files" name="files" multiple /> <br /> <div style="text-align: center;"> <a class="btn btn-primary" id="btnTranslateThisOne">Translate this one for me</a> </div> <br /> <div id="msg"></div> </div> </div> </div> <div class="container"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">My URNs</h3> </div> <div class="panel-body"> <div class="row"> <div class="col-md-8"> <input class="form-control" type="text" id="urn" name="urn" value="" /> </div> <div class="col-md-4"> <a class="btn btn-primary" id="btnAddThisOne">Add to the list</a> </div> </div> <br /> <legend>My URN list</legend> <div>Click on a urn below to launch the viewer</div> <div id="list"></div> </div> </div> </div> - upload.html 追記したコントロールの振る舞いを定義する処理を、upload.js に太字部分を追記します。追記する位置に分かりにくいので、1. で記入した部分をグレー背景で色分けをしています。また、青字で書かれた <my_consumer_key> の部分は、一意なバケット名を作成するための変数代入の設定です。この部分は、お手持ちの Consumer Key の値で置き換えてみてください（Consumer Secret ではなく）。
var oViewDataClient =null ; $(document).ready (function () { oViewDataClient =new Autodesk.ADN.Toolkit.ViewData.AdnViewDataClient ( 'https://developer.api.autodesk.com', 'http://' + window.location.host + '/api/token' ) ; $('#btnTranslateThisOne').click (function (evt) { var files =document.getElementById('files').files ; if ( files.length == 0 ) return ; var bucket = 'model' + new Date ().toISOString ().replace (/T/, '-').replace (/:+/g, '-').replace (/\..+/, '') + '-' + '<my_consumer_key>'.toLowerCase ().replace (/\W+/g, '') ; createBucket (bucket, files) }) ; $('#btnAddThisOne').click (function (evt) { var urn =$('#urn').val ().trim () ; if ( urn == '' ) return ; AddThisOne (urn) ; }) ; }) ; function AddThisOne (urn) { var id =urn.replace (/=+/g, '') ; $('#list').append ('<div class="list-group-item row">' + '<button id="' + id + '" type="text" class="form-control">' + urn + '</button>' + '</div>' ) ; $('#' + id).click (function (evt) { window.open ('/?urn=' + $(this).text (), '_blank') ; }) ; } function createBucket (bucket, files) { var bucketData ={ bucketKey: bucket, servicesAllowed: {}, policy: 'transient' } ; oViewDataClient.createBucketAsync ( bucketData, //onSuccess function (response) { console.log ('Bucket creation successful:') ; console.log (response) ; $('#msg').text ('Bucket creation successful') ; uploadFiles (response.key, files) ; }, //onError function (error) { console.log ('Bucket creation failed:'); console.log (error) ; $('#msg').text ('Bucket creation failed!') ; } ) ; } function uploadFiles (bucket, files) { for ( var i =0 ; i < files.length ; i++ ) { var file =files [i] ; //var filename =file.replace (/^.*[\\\/]/, '') ; console.log ('Uploading file: ' + file.name + ' ...') ; $('#msg').text ('Uploading file: ' + file.name + ' ...') ; oViewDataClient.uploadFileAsync ( file, bucket, file.name, //onSuccess function (response) { console.log ('File was uploaded successfully:') ; console.log (response) ; $('#msg').text ('File was uploaded successfully') ; var fileId =response.objects [0].id ; var registerResponse =oViewDataClient.register (fileId) ; if ( registerResponse.Result === "Success" || registerResponse.Result === "Created" ) { console.log ("Registration result: " + registerResponse.Result) ; console.log ('Starting translation: ' + fileId) ; $('#msg').text ('Your model was uploaded successfully. Translation starting...') ; checkTranslationStatus ( fileId, 1000 * 60 * 5, // 5 mins timeout //onSuccess function (viewable) { console.log ("Translation was successful: " + response.file.name) ; console.log ("Viewable: ") ; console.log (viewable) ; $('#msg').text ('Translation was successful: ' + response.file.name + '.') ; //var fileId =oViewDataClient.fromBase64 (viewable.urn) ; AddThisOne (viewable.urn) ; } ) ; } }, //onError function (error) { console.log ('File upload failed:') ; console.log (error) ; $('#msg').text ('File upload failed!') ; } ) ; } } function checkTranslationStatus (fileId, timeout, onSuccess) { var startTime =new Date ().getTime () ; var timer =setInterval (function () { var dt =(new Date ().getTime () - startTime) / timeout ; if ( dt >= 1.0 ) { clearInterval (timer) ; } else { oViewDataClient.getViewableAsync ( fileId, function (response) { var msg ='Translation Progress ' + fileId + ': ' + response.progress ; console.log (msg) ; $('#msg').text (msg) ; if ( response.progress === 'complete' ) { clearInterval (timer) ; onSuccess (response) ; } }, function (error) { } ) ; } }, 2000 ) ; } - 前回作成した credentials.js の grant_type: 'client_credentials' の下に、バケットの作成とデータの書き込みをサポートする Scope に 'bucket:create data:read data:write bucket:read' と追記します。
var credentials ={
credentials: {
// Replace placeholder below by the Consumer Key and Consumer Secret you got from
// http://developer.autodesk.com/ for the production server
client_id: process.env.CONSUMERKEY || 'Consumer Key',
client_secret: process.env.CONSUMERSECRET || 'Consumer Secret',
grant_type: 'client_credentials',
scope: 'bucket:create bucket:read data:read data:write'
},
// If you which to use the Autodesk View & Data API on the staging server, change this url
BaseUrl: 'https://developer.api.autodesk.com',
Version: 'v1'
} ;
credentials.Authentication =credentials.BaseUrl + '/authentication/' + credentials.Version + '/authenticate'
module.exports =credentials ; - アップロードと変換処理の実装が完了しましたので、Node.js command prompt で Node.js で作成した Web サーバーを起動します。node server.js と入力して、Server listening on port 3000 と表示されることを確認してください。
- Google Chrome 等 WebGL 対応ブラウザで、URL に http://localhost:3000/upload.html と指定して実装を確認してください。次の画面が表示されるはずです。[ファイル選択] ボタンをクリックして任意のデザイン ファイルを選択したら、[Translate this one for me] ボタンをクリックしてください。ファイルのアップロード後に変換ステータスを 2000 ミリセカンド毎にチェックし、変換処理が完了すると、My URN list の欄に Base64 で変換された URN が表示されます。
なお、ここで表示される URN をクリックすると、前回作成した index.js にパラメータとして URN を渡す、3D モデルを表示します。
次回 は、View and Data API で作成したビューアを、Extension と呼ばれるメカニズムを利用して拡張する方法をご案内します。
By Toshiaki Isezaki
Subscribe
コメント