気軽にサンプル提示できると良いと思っていたので、クライアントサイドスクリプトのみでpogoplugのapiを利用するサンプルを作成してみた。
実際にはhtmlとjqueryを利用して実装している。
jqueryのgetメソッドに対するエラー処理は記述しておらず、本当に簡単なサンプルで、
ログインして、
デバイスリスト取得して、
サービスリスト取得して、
ルートにあるファイルへのリンクを表示して、
ダウンロードできる。
というだけのものだ、
次のリンクを表示することで、確認することが可能だ。
サンプルを表示
また、１ページのhtmlの中にjqueryを利用した実装も全て記述してあるので、リンク先をダウンロードしてブラウザで表示すれば簡単に確認できると思うし、テキストエディタで何をやっているかを見ることができると思う。
[amazon asin=”B0048KR1KU” /]
*この記事はjquery mobile のバージョンalpha 3に基づいて書いています。
2009年頃にGoogle App Engineを利用して個人的に使うために作ったライフログ「なにした？」
Archive for the ‘Google App Engine’ Category
http://blog.nal-6295.biz/?cat=128
をjquery mobile対応すべくやり始めていたのだが、後から挿し込むデータのレンダリングではまった。
基本、HTMLだけ書いとけばいいよ的なjQuery mobileはレンダリングはどうも$(document).ready()なタイミングで行う仕様らしく、しかも後から任意のタイミングでレンダリングしなおすためのメソッドも提供されていないらしく、ちょっと考え方を変える必要がありそうだ。
さいわい、djangoのテンプレートの部分とPythonのロジックの部分が分離されているので、urlマッピングとテンプレートの部分を新しく書きなおすだけで良さそう。
ま、そのうちやりましょう。
jQueryは前からかなり便利に利用させていただいている。
jQueryを使うようになってからJavaScriptの見通しがよくなったし、本当に簡単なコードでいろいろできるようになった。
また、JQueryにはいろんなプラグインがあり、それぞれがかなり便利に活用できるようになっている。そんなJQueryプラグインからモバイルアプリケーション用のライブラリであるjQuery Mobileというスマートフォン向けのWebアプリケーションを構築するためのプラグインが登場したようだ。
jQuery Mobileとは、jQueryのプラグインとして利用するモバイルアプリケーション用のライブラリです。そしてその驚異的なまでの簡単さは、これから業務用のモバイルアプリケーションの作り方を一変させてしまう可能性を感じさせます。
上記のページをざっと読んだ感じだと、ルックアンドフィールもシンプルで統一感があり、触って気持よさそうなデザインとなっている。
jQueryの強力なライブラリにプラグインすることで、あらゆるスマートフォン向けのアプリケーション構築が加速するのでは無いだろうか。
ちょっと、これは導入しないわけにはいかないですね。
JQueryを利用した入力がMaxLengthに達した時に次のフォーカスに移動するサンプルです。
一応、Opera,FireFox,safari,chrome,IEで動作するつもりです。
function NextFocusByMaxLength(event) { var eventObject = event; if(window.event) { eventObject = window.event; } if(eventObject.keyCode < 48) { return; } if(eventObject.keyCode > 111 && eventObject.keyCode < 188) { return; } if(eventObject.keyCode > 223) { return; } if($(this).val().length == $(this).attr("maxlength")) { textlist = $(":text:enabled"); thisindex = textlist.index($(this)); if(thisindex < textlist.length -1) { thisindex += 1; $(this).blur(); $(":text:enabled:eq(" + thisindex + ")").focus(); } return; } } $(document).ready( function () { $(":text").keyup(NextFocusByMaxLength); });
今回はBasic認証が必要なTwitterのfriends_timeline（今回は自分のタイムライン）を表示するサンプルです。
ポイントは、$.getだとBasic認証するために必要な情報を送信できないので、より柔軟な$.ajaxを利用している事と、usernameとpasswordを指定しているという事です。
その他の部分は前回のサンプルそのままです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="jquery.js"></script> <script> function getTimeLine() { $.ajax({url:"http://twitter.com/statuses/friends_timeline.xml", username : "username", password : "password", success : function(data) { var value = "<ul>"; result = $(data).find("status").each(function(){ value += "<li><span style='font-weight:bold'>" + $(this).find("user").find("screen_name").text() + "</span>" + $(this).find("text").text() + "</li>"; }); value += "</ul>"; $("#timeline").html(value); }, error : function(XMLHttpRequest, textStatus, errorThrown) { alert(textStatus); } }); } </script> </head> <body> <input type="button" onclick="getTimeLine();" value="Get!TL" /> <div id="timeline"> </div> </body> </html>
認証とかめんどくさいんで、とりあえずpublic_timelineを表示するサンプルです。
解釈している部分はfunction getTimeLine()内の
result = $(data).find("status").each(function(){ value += "<li><span style='font-weight:bold'>" + $(this).find("user").find("screen_name").text() + "</span>" + $(this).find("text").text() + "</li>"; });
だけですので結構お手軽です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="jquery.js"></script> <script> function getTimeLine() { $.get("http://twitter.com/statuses/public_timeline.xml",{}, function(data) { var value = "<ul>"; result = $(data).find("status").each(function(){ value += "<li><span style='font-weight:bold'>" + $(this).find("user").find("screen_name").text() + "</span>" + $(this).find("text").text() + "</li>"; }); value += "</ul>"; $("#timeline").html(value); } ); } </script> </head> <body> <input type="button" onclick="getTimeLine();" value="Get!TL" /> <div id="timeline"> </div> </body> </html>
前回のWCFでRESTなサービスを例にあげて、レスポンスをJQueryで解釈してみたいと思います。
レスポンスからエレメントID=UserListなSelectタグの選択肢として展開するサンプルです。
レスポンスは以下のようなxmlを想定しています。
<ArrayOfUser xmlns="http://schemas.datacontract.org/2004/07/sample" xmlns:i="http://www.w3.org/2001/XMLSchema-instance"> <User> <Id>0001</Id> <Name>テスト太郎</Name> </User> <User> <Id>0002</Id> <Name>テスト花子</Name> </User> </ArrayOfUser>
例によってコメントで説明します。
function ユーザリスト設定() { $.get( "/sample/Service1.svc/User/", {}, function(data){ var value = ""; //レスポンスの解釈をしているのはこの部分だけです。 //レスポンスとして帰ってきたdataの中の //Userというタグをfindで検索し、 //見つかったら都度each内に定義してある無名関数を実行しています。 //無名関数の中では、それぞれUserタグの中にあるIdとNameという要素を検索し、 //それぞれの要素に定義されている値を利用してselectタグに設定するoption要素を生成しています。 result = $(data).find("User").each(function(){ value += "<option value='"+ $(this).find("Id").text() + "'>" + $(this).find("Name").text() + "</option>"; }); //Selectタグに生成したoption要素を設定。 $("#UserList").html(value); }); }
このようにJQueryを利用して比較的簡単にXMLとして返ってきたレスポンスを解釈して展開することが可能だという事がわかります。
FireFoxやwebkitではkeyCodeの変更ができないので、強引にフォーカス移動するようにしています。
最初に掲載したパターンでは全てのエレメントをいちいちeachでまわしながら対象を探していて、あまり良くなかったので、新しく書き直した。
$(document).ready( function () { $(":input").keydown(function (event) { var eventObject = event; if(window.event) { eventObject = window.event; } if(eventObject.keyCode == 13) { inputlist = $(":input:enabled"); currentindex = inputlist.index($(this)); if(eventObject.shiftKey) { if(currentindex > 0) { currentindex -= 1; } } else { if(currentindex < inputlist.length -1) { currentindex += 1; } } $(":input:enabled:eq(" + currentindex + ")").focus(); return; } }); }
