pogoplugにアクセスするサンプルをjquery mobileを使ってiPhone対応っぽくしてみた #pogoplug

前回までに作ったサンプルを元に、jquery mobileを利用して、iPhoneアプリっぽい見栄えのものを作ってみた。
後から追加した要素にスタイルを適用するところで戸惑ったが、なんとかかたちになった。
あとは、ローディング中の表示等を行ったりとまだいろいろと遊ぶ予定。

動作させるサンプルはこちら
まとめたzipファイルはこちら

追記:ローディング中の表示もできるようになった。
追記2:ダウンロードとは別に右端のボタンでストリーミングできるようにした。

Share

クライアントスクリプトでpogoplug apiを操作する その4 ログイン時にファイルリストを表示するようにした。そして難点。 #pogoplug

pogoplugの web apiをhtml+jqueryで操作するサンプル第4弾。
今までの操作を踏まえて、ログイン時に、デフォルトのデバイスのルートディレクトリのファイルリストを最初から表示するようにした。
まぁ、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() + 
                    "&amp;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 + "&amp;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 +
                            "&amp;deviceid=" +
                            $("#devices").val() +
                            "&amp;serviceid=" +
                            $("#services").val();
        if(parentId){
            listFilesUrl += "&amp;parentid=" + parentId;  
        }
        if(pageIndex){
            listFilesUrl += "&amp;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 + "&amp;gt;&amp;gt;";
        })
        return crumbs;
    }


Share

クライアントスクリプトでpogoplug apiを操作する その3 改ページ操作 #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() + 
                    "&amp;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 + "&amp;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 +
                            "&amp;deviceid=" +
                            $("#devices").val() +
                            "&amp;serviceid=" +
                            $("#services").val();
        if(parentId){
            listFilesUrl += "&amp;parentid=" + parentId;  
        }
        if(pageIndex){
            listFilesUrl += "&amp;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);});
    });

});
Share

クライアントサイドスクリプトでpogoplugのapiを利用するサンプルその2 #pogoplug

先ほどポストしたサンプルは、ファイルもディレクトリも一緒くたに表示していたので、ディレクトリをクリックすると中身ゼロのzipファイルがダウンロードされる状況でした。

気軽にサンプル提示できると良いと思っていたので、クライアントサイドスクリプトのみでpogoplugのapiを利用するサンプルを作成してみた。

実際にはhtmlとjqueryを利用して実装している。

引用元: クライアントサイドスクリプトでpogoplugのapiを利用するサンプル #pogoplug at NAL-6295の舌先三寸.

今回のサンプルでは、ファイルとディレクトリを区別し、ディレクトリの場合はそのディレクトリに移動できるようにしました。
また、親ディレクトリにも戻れるようにしました。

ディレクトリのアップダウンにも対応したサンプル

Share

クライアントサイドスクリプトでpogoplugのapiを利用するサンプル #pogoplug

気軽にサンプル提示できると良いと思っていたので、クライアントサイドスクリプトのみでpogoplugのapiを利用するサンプルを作成してみた。
実際にはhtmlとjqueryを利用して実装している。
jqueryのgetメソッドに対するエラー処理は記述しておらず、本当に簡単なサンプルで、

ログインして、
デバイスリスト取得して、
サービスリスト取得して、
ルートにあるファイルへのリンクを表示して、
ダウンロードできる。

というだけのものだ、
次のリンクを表示することで、確認することが可能だ。
サンプルを表示
また、1ページのhtmlの中にjqueryを利用した実装も全て記述してあるので、リンク先をダウンロードしてブラウザで表示すれば簡単に確認できると思うし、テキストエディタで何をやっているかを見ることができると思う。
[amazon asin=”B0048KR1KU” /]

Share

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につなぐ事が出来るようになる。

Share

ブラウザ上でpogoplug web apiをたたいて遊んでみた。 #pogoplug

pogoplugにはweb apiが提供されていて、それを利用する事で、カスタムアプリを作成する事ができる。

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/

で取得できる。

とりあえず、ブラウザで叩いて動作確認できたので、そのうち気が向いたら何かアプリでも作ってみたいな。

Share
カテゴリー: Tool

宅麺.comから届いた「くるり」の味噌ラーメンを食べた

あと、くるりの味噌ラーメンも買ってあるので、週末にでも食べようかな。

引用元: 宅麺.comから届いたので「しおの風 特製しおらーめん」を食べる at NAL-6295の舌先三寸.

というわけで、くるりの味噌ラーメンを食べました。
一度も食べたことが無かったのでどんな味噌ラーメンなのか想像がつかなかったのですが、

  • スープはとろっとした比較的濃厚なもの
  • 麺は思ったより太麺
  • チャーシューも肉感がありおいしく、メンマも太め

だったので、食べ応えがありましたが、とても美味しくいただくことができました。

宅麺.comのかなりなリピーターになっていますが、新しい店も増えていますし、当分飽きることはなさそうですね。

Share

Cent OSをインストールしてyumが403エラーでうまく動作しないとき

Cent OSをHyper-Vにインストールして、統合コンポーネントをインストールするために、yumを使って各種インストールをしようとしたんだけど、yumを使うたびに

403:Forbidden

と出て、うまく動作しない場合、属しているネットワークがプロキシサーバを利用していますので、プロキシサーバのアドレス等を聞いて、

/etc/yum.conf

proxy=http://サーバのアドレスとポート

を設定しましょう。

wget等も同様に設定がありますので、/etc/wgetrc等を設定しましょう。

Share