pogoplugの web apiをhtml+jqueryで操作するサンプル第４弾。
今までの操作を踏まえて、ログイン時に、デフォルトのデバイスのルートディレクトリのファイルリストを最初から表示するようにした。
まぁ、APIのレスポンスが返ってきたら、次のAPIを叩いているだけなので、単に自分が欲しかっただけというのもある。
また、APIの結果がエラーだったときに一律でメッセージを表示する処理を追加した。
これは、jqueryの$.getをオーバライドして中で$.ajaxを呼ぶことで共通の簡易的な対応とした。
実際に動作するサンプルはこちら
htmlとjsファイルをまとめたzipはこちら
本当は、ファイルアップロードに対応したかったのだが、難点が一つあり実現出来ていない。
pogoplugにファイルアップロードを行うには次の二つのAPIを利用する必要がある。
- craeteFile を呼んで、新しいファイルのためのIDを用意する。
- datastream APIをPUTで利用する
最初のcreateFileはうまく行くのだが、どうもjqueryからPUTでファイルをアップロードするのがうまくいかないので、成功していない。
これは、今後の課題。
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html manifest="pogoplug.manifest" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pogoplugTest</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js">
</script>
<script type="text/javascript" src="main.js">
</script>
</head>
<body>
<h1>pogoplug Web API サンプル </h1>
<div id="page">
<form id="loginForm" action="GET">
<div>
<ul>
<li>
mail Address: <input type="text" id="mailAddress" />
</li>
<li>
password: <input type="password" id="password" />
</li>
</ul>
</div><input type="button" id="login" value="Login" />
</form>
<form id="downloadform" action="GET">
<div id="devicedata">
</div>
<div id="servicedata">
</div>
リンクをクリックするとダウンロードできます。
<br/>
ボタンを押すと、そのディレクトリに移動します。
<br/>
下の方向ボタンで、ページを切り替えて表示しきれなかったファイルリストを表示します。
<br/>
<input type="button" id="previousPage" value="<<" /><input type="button" id="nextPage" value=">>" />
<div id="breadclumbs">
</div>
<div id="filedata">
</div>
</form>
</div>
</body>
</html>
main.js
//$.getに共通のエラー処理を追加するために、オーバライドする。
$.get = function(sendurl, successfunc){
$("#page").fadeOut();
$.ajax(
{
type:"GET",
url:sendurl,
success: function(data){
successfunc(data);$("#page").fadeIn();
},
error :function(request,textmessage,errorThrown){$("#page").fadeIn();alert(errorThrown);}
}
);
}
var valtoken = "";
$(document).ready(function(){
$("#downloadform").hide();
//Loginボタンをクリックしたときに発行されます。
//valtokenを取得することで、次以降のステップのサービスが利用できるようにします。
$("#login").click(function(){
$.get("https://service.pogoplug.com/svc/api/loginUser?email="
+ $("#mailAddress").val() +
"&password=" + $("#password").val(),
function(data){
jsondata = jQuery.parseJSON(data);
valtoken = jsondata.valtoken ;
getListDevices();
});
$("#nextPage").click(function(){
$.get(createQueryForNextPage(), function(data){createfileLink(data);});
});
$("#previousPage").click(function(){
$.get(createQueryForPreviousPage(), function(data){createfileLink(data);});
});
});
});
function getListDevices()
{
$.get("https://service.pogoplug.com/svc/api/listDevices?valtoken=" + valtoken,
function(data){
jsondata = jQuery.parseJSON(data);
var $select = $('<select id="devices" />');
$.each(jsondata.devices, function() {
$('<option value='+ this.deviceid +' />').append(
this.name
).appendTo($select);
});
$('#devicedata').empty().append($select);
getListServices();
});
}
function getListServices()
{
$.get("https://service.pogoplug.com/svc/api/listServices?valtoken="
+ valtoken + "&deviceid=" + $("#devices").val(),
function(data){
jsondata = jQuery.parseJSON(data);
var $select = $('<select id="services" />');
$.each(jsondata.services,
function() {
$('<option value='+ this.serviceid +' />').append(
this.name
).appendTo($select);
});
$('#servicedata').empty().append($select);
$.get(createQueryForMoveDirectory(), function(data){createfileLink(data);});
$('#loginForm').hide();
$('#downloadForm').show();
$("#devices").change(function(){ getListServices();});
$("#services").change(
function(){
$.get(createQueryForMoveDirectory(),
function(data){
createfileLink(data);
}
);
}
);
});
}
var pageIndex = 0;
function createQueryForMoveDirectory(targetId)
{
pageIndex = 0;
return createQueryForListFiles(targetId);
}
function createQueryForNextPage()
{
pageIndex++;
if(parentList.length == 0)
{
return createQueryForListFiles(null,pageIndex);
}else{
return createQueryForListFiles(parentList[parentList.length -1].id,pageIndex);
}
}
function createQueryForPreviousPage()
{
if(pageIndex > 0){
pageIndex--;
}
if(parentList.length == 0)
{
return createQueryForListFiles(null,pageIndex);
}else{
return createQueryForListFiles(parentList[parentList.length -1].id,pageIndex);
}
}
function createQueryForListFiles(parentId,pageIndex)
{
var listFilesUrl = "https://service.pogoplug.com/svc/api/listFiles?valtoken=" +
valtoken +
"&deviceid=" +
$("#devices").val() +
"&serviceid=" +
$("#services").val();
if(parentId){
listFilesUrl += "&parentid=" + parentId;
}
if(pageIndex){
listFilesUrl += "&pageoffset=" + pageIndex;
}
return listFilesUrl;
}
var parentList = [];
//ファイルリストのリンクを作成します。ディレクトリの時はディレクトリ移動のボタンが作成されます。
function createfileLink(data)
{
jsondata = jQuery.parseJSON(data);
if(jsondata.count == 0)
{
return;
}
var $ul = $('<ul />');
//親ディレクトリに戻るボタンを作成
if (parentList.length == 1) {
$('<li />').append($('<input type="button" />').click(function(){
$.get(createQueryForMoveDirectory(), function(data){
parentList.pop();createfileLink(data);
});
}).val("..")).appendTo($ul);
}else if(parentList.length > 1)
{
$('<li />').append($('<input type="button" />').click(function(){
$.get(createQueryForMoveDirectory(parentList[parentList.length-2].id), function(data){
parentList.pop();createfileLink(data);
});
}).val("..")).appendTo($ul);
}
$.each(jsondata.files, function()
{
//ファイルタイプがファイルだったらリンクを、ディレクトリだったらサブディレクトリのファイルリスト取得のリンクを作成
if(this.type == 0)
{
$('<li />').append(
$('<a href="https://service.pogoplug.com/svc/files/'
+ valtoken + '/'
+ $("#devices").val() + '/' +
$("#services").val() + '/' + this.fileid
+ '/dl/" />').text(this.name)).appendTo($ul);
}else
{
var fileid=this.fileid;
var filename = this.name;
$('<li />').append(
$('<input type="button" />').click(function(){
$.get(createQueryForMoveDirectory( fileid), function(data){parentList.push({id:fileid,name:filename});createfileLink(data);});
}).val(this.name)).appendTo($ul);
}
});
$('#filedata').html($ul);
$('#breadclumbs').html(createBreadCrumbs());
$('#fileLists').hide();
$('#downloadform').show();
}
function createBreadCrumbs()
{
var crumbs = "";
$.each(parentList,function()
{
crumbs += this.name + "&gt;&gt;";
})
return crumbs;
}
