前回までに作ったサンプルを元に、jquery mobileを利用して、iPhoneアプリっぽい見栄えのものを作ってみた。
後から追加した要素にスタイルを適用するところで戸惑ったが、なんとかかたちになった。
あとは、ローディング中の表示等を行ったりとまだいろいろと遊ぶ予定。
追記：ローディング中の表示もできるようになった。
追記２：ダウンロードとは別に右端のボタンでストリーミングできるようにした。
作者別: NAL-6295
クライアントスクリプトでpogoplug apiを操作する その４ ログイン時にファイルリストを表示するようにした。そして難点。 #pogoplug
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;
}
クライアントスクリプトでpogoplug apiを操作する その３ 改ページ操作 #pogoplug
前回に引き続きサンプルに機能を追加した。
ひとつのディレクトリに大量のファイルがある時、一定数のファイルリストしか戻してこないので、
listFilesリクエストにpageoffsetを与えて改ページして、表示しきれないファイルリストを表示できるようにした。
今回から、さすがに長くなってきたので、htmlとjavascirptを別ファイルにした。
動作するサンプルはこちら
htmlとjsをまとめたzipファイルはこちら
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html 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 api サンプル</h1>
<form id="loginForm" action="GET">
Step1:ログインします。
<div>
<ul>
<li>
mail: <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="deviceLists" action="GET">
Step2:登録されているpogoplugのリストを取得します。<input type="button" id="getdevices" value="getDevices" />
</form>
<form id="serviceLists" action="GET">
Step2:選択したdeviceにぶらさがっているサービス(ストレージ等）のリストを取得します。
<div id="devicedata">
</div>
<input type="button" id="getservices" value="getServices" />
</form>
<form id="fileLists" action="GET">
Step3:選択したserviceのルートにあるファイルの一覧を取得します。
<div id="servicedata">
</div>
<input type="button" id="getfiles" value="getFiles" />
</form>
<form id="downloadform" action="GET">
Step4:リンクをクリックするとダウンロードできます。<br />
ボタンを押すと、そのディレクトリに移動します。<br />
下の方向ボタンで、ページを切り替えて表示しきれなかったファイルリストを表示します。<br />
<input type="button" id="previousPage" value="<<" />
<input type="button" id="nextPage" value=">>" />
<div id="filedata">
</div>
</form>
</body>
</html>
main.js
$(document).ready(function(){
var valtoken = "";
$("#deviceLists").hide();
$("#serviceLists").hide();
$("#fileLists").hide();
$("#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 ;
$("#loginForm").hide();
$("#deviceLists").show();
});
});
//getDevicesボタンをクリックしたときに発行されます。
//ぶら下がっているpogoplugのリストをセレクトボックスに表示し、、次以降のステップで選択できるようにします。
$("#getdevices").click(function(){
$.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);
$("#deviceLists").hide();
$("#serviceLists").show();
});
});
//getServicesボタンをクリックしたときに発行されます。
//選択したpogoplugにぶら下がっているストレージ等のリストをセレクトボックスに表示し、、次以降のステップで選択できるようにします。
$("#getservices").click(function(){
$.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);
$("#serviceLists").hide();
$("#fileLists").show();
});
});
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],pageIndex);
}
}
function createQueryForPreviousPage()
{
if(pageIndex > 0){
pageIndex--;
}
if(parentList.length == 0)
{
return createQueryForListFiles(null,pageIndex);
}else{
return createQueryForListFiles(parentList[parentList.length -1],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);
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]), 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;
$('<li />').append(
$('<input type="button" />').click(function(){
$.get(createQueryForMoveDirectory( fileid), function(data){parentList.push(fileid);createfileLink(data);});
}).val(this.name)).appendTo($ul);
}
});
$('#filedata').html($ul);
$("#fileLists").hide();
$("#downloadform").show();
}
//getFilesボタンをクリックしたときに発行されます。
//選択したストレージのルートに存在するファイルをダウンロードするためのリンクをはります。
$("#getfiles").click(function(){
$.get(createQueryForMoveDirectory(), function(data){createfileLink(data);});
});
$("#nextPage").click(function(){
$.get(createQueryForNextPage(), function(data){createfileLink(data);});
});
$("#previousPage").click(function(){
$.get(createQueryForPreviousPage(), function(data){createfileLink(data);});
});
});
クライアントサイドスクリプトでpogoplugのapiを利用するサンプルその２ #pogoplug
先ほどポストしたサンプルは、ファイルもディレクトリも一緒くたに表示していたので、ディレクトリをクリックすると中身ゼロのzipファイルがダウンロードされる状況でした。
気軽にサンプル提示できると良いと思っていたので、クライアントサイドスクリプトのみでpogoplugのapiを利用するサンプルを作成してみた。
実際にはhtmlとjqueryを利用して実装している。
引用元: クライアントサイドスクリプトでpogoplugのapiを利用するサンプル #pogoplug at NAL-6295の舌先三寸.
今回のサンプルでは、ファイルとディレクトリを区別し、ディレクトリの場合はそのディレクトリに移動できるようにしました。
また、親ディレクトリにも戻れるようにしました。
クライアントサイドスクリプトでpogoplugのapiを利用するサンプル #pogoplug
気軽にサンプル提示できると良いと思っていたので、クライアントサイドスクリプトのみでpogoplugのapiを利用するサンプルを作成してみた。
実際にはhtmlとjqueryを利用して実装している。
jqueryのgetメソッドに対するエラー処理は記述しておらず、本当に簡単なサンプルで、
ログインして、
デバイスリスト取得して、
サービスリスト取得して、
ルートにあるファイルへのリンクを表示して、
ダウンロードできる。
というだけのものだ、
次のリンクを表示することで、確認することが可能だ。
サンプルを表示
また、１ページのhtmlの中にjqueryを利用した実装も全て記述してあるので、リンク先をダウンロードしてブラウザで表示すれば簡単に確認できると思うし、テキストエディタで何をやっているかを見ることができると思う。
[amazon asin=”B0048KR1KU” /]
pogoplugのLAN内でのipの調べ方 #pogoplug
MyPogoplugでSSHでのアクセスを許可したものの、IPアドレスってどうやって調べるんだっけ。というところで止まっていましたが、
前回の記事
pogoplugにはweb apiが提供されていて、それを利用する事で、カスタムアプリを作成する事ができる。
というわけで、とりあえずブラウザ上で叩いて遊んでみた。
ブラウザ上でpogoplug web apiをたたいて遊んでみた。 #pogoplug
を書いた結果、pogoplugと同じLAN内でまず、ログインするapi
https://service.pogoplug.com/svc/api/loginUser?email=test@pogoplug.com&password=test
をたたき、その後デバイスリストを取得するapi
http://service.pogoplug.com/svc/api/listDevices?valtoken=<ログインで取得したvaltokenを指定>
を叩いて戻ってきたレスポンスの内容の中にapiurlというものがあり、そこにLAN内でのIPアドレスが書いてある。
実際に、このIPでsshにつなぐ事が出来るようになる。
ブラウザ上でpogoplug web apiをたたいて遊んでみた。 #pogoplug
pogoplugにはweb apiが提供されていて、それを利用する事で、カスタムアプリを作成する事ができる。
というわけで、とりあえずブラウザ上で叩いて遊んでみた。
では、早速、とりあえずログインしてトークンをもらうために
https://service.pogoplug.com/svc/api/loginUser?email=test@pogoplug.com&password=test
を叩くとレスポンスにvaltokenが入っているのでそれを保持しておく。その後、
デバイスリストを取得するために、
http://service.pogoplug.com/svc/api/listDevices?valtoken=<先ほど取得したvaltokenを指定>
を叩くと、レスポンスにdeviceidが入っているのでそれを保持しておく。その後、
サービスリストを取得するために、
http://service.pogoplug.com/svc/api/listServices?valtoken=<先ほど取得したvaltokenを指定>&deviceid=<先ほど取得したdeviceidを指定>
を叩くと、レスポンスにserviceidが入っているのでそれを保持しておく。その後、
ファイルリストの取得するために
http://service.pogoplug.com/svc/api/listFiles?valtoken=<先ほど取得したvaltokenを指定>&deviceid=<先ほど取得したdeviceidを指定>&serviceid=<先ほど取得したserviceidを指定>
を叩くと、レスポンスにファイルリストとfileidが入っているのでそれを保持しておく。その後、
ファイル情報を取得したい時は、
http://service.pogoplug.com/svc/api/getFile?valtoken=<先ほど取得したvaltokenを指定>&deviceid=<先ほど取得したdeviceidを指定>&serviceid=<先ほど取得したserviceidを指定>&fileid=<先ほど取得したfileidを指定>
ファイルをダウンロードしたい時は
http://service.pogoplug.com/svc/files/<先ほど取得したvaltoken>/<先ほど取得したdeviceid>/<先ほど取得したserviceid>/<先ほど取得したfileid>/dl/
ファイルをストリーミングしたい時は、
http://service.pogoplug.com/svc/files/<先ほど取得したvaltoken>/<先ほど取得したdeviceid>/<先ほど取得したserviceid>/<先ほど取得したfileid>/stream/
で取得できる。
とりあえず、ブラウザで叩いて動作確認できたので、そのうち気が向いたら何かアプリでも作ってみたいな。
宅麺.comから届いた「くるり」の味噌ラーメンを食べた
あと、くるりの味噌ラーメンも買ってあるので、週末にでも食べようかな。
というわけで、くるりの味噌ラーメンを食べました。
一度も食べたことが無かったのでどんな味噌ラーメンなのか想像がつかなかったのですが、
- スープはとろっとした比較的濃厚なもの
- 麺は思ったより太麺
- チャーシューも肉感がありおいしく、メンマも太め
だったので、食べ応えがありましたが、とても美味しくいただくことができました。
宅麺.comのかなりなリピーターになっていますが、新しい店も増えていますし、当分飽きることはなさそうですね。
Cent OSをインストールしてyumが403エラーでうまく動作しないとき
memo:Hyper-Vのlinux用の統合コンポーネント
ここからダウンロード。
Linux Integration Services v2.1 for Windows Server 2008 Hyper-V R2
簡単な説明
A set of drivers that enable synthetic device support in supported Linux virtual machines under Hyper-V.