Pages

2012年1月31日火曜日

jQuery Mobile 最初の一歩か

Railsがらみで、jQueryを少しだけ使っていたら、世の中はjQueryだらけ、そしてモバイルもjQueryが最有力という。
すこし、まとめて jQueryと jQuery Mobileについての記事を読んでみた。
最初の一歩なので、基本の"き"を羅列してみる。

jQueryのポイント

  • java Scriptの言語拡張は、おこなっていない
  • 繰り返し記述がない
  • 返値は、jQueryオブジェクト
  • ドキュメントへのアクセスは $()で
  • CSSへのアクセスは css() で
  • ドキュメント読み込み完了イベントは、$(function(){処理})
  • エレメント読み込み完了イベントは、$(エレメント).ready(function(){処理})
なんか、おまじないみたいになってきた。

jQuery Mobileの初歩

  • ひとつのhtmlに記述する
  • html5のカスタム属性 data-* を使う
  • ページ遷移はページ内リンク
jQueryのcss, ajax機能を基礎にあらゆるモバイル端末向けのドキュメントをSPIで記載するのだな。

サンプル・ソース

以下のサイトから、サンプルソースを拝借しました。
http://www.amitpatil.me/getting-started-with-jquery-mobile-twitter-app/

jQeury Mobile + java scriptで作成したシンプルなTwitter閲覧ソフトだ。
jQueryMobileで書かれたhtml (index.html)と、実際の動作を受け持つ javascript (app.js)の2本のファイルで構成されている。
ユーザIDを検索すると、最近の10ツイートを表示する。
サンプル

index.html


view plainprint?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  6.  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />  
  7.  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>  
  8.  <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>  
  9.  <script src="js/app.js"></script>  
  10. </head>  
  11. <body>    
  12.     <div data-role="header" data-position="inline">  
  13.         <h1>jQueryMobile Twitter</h1>  
  14.     </div>  
  15.     <div style="padding-left:1%;">  
  16.         <input type="search" name="tuser" id="tuser" value="" width="3"/>  
  17.   <a data-inline="true" data-role="button" href="#" data-theme="c" class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-c" onClick="javascript:getTweets()">  
  18.    <span aria-hidden="true" class="ui-btn-inner ui-btn-corner-all">  
  19.     <span class="ui-btn-text">Get Tweets</span>  
  20.    </span>  
  21.         </a>  
  22.     </div>  
  23.     <div style="padding-left:1%;">  
  24.         <div class="content-primary">  
  25.             <ul data-role="listview" data-inset="true" id="tweets">  
  26.             </ul>  
  27.         </div>  
  28.     </div>  
  29.       
  30.   
  31.     <div data-role="header" data-position="inline">  
  32.         <h1></h1>  
  33.     </div>  
  34. </body>  
  35. </html>  
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
 <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
 <script src="js/app.js"></script>
</head>
<body>  
    <div data-role="header" data-position="inline">
        <h1>jQueryMobile Twitter</h1>
    </div>
    <div style="padding-left:1%;">
        <input type="search" name="tuser" id="tuser" value="" width="3"/>
  <a data-inline="true" data-role="button" href="#" data-theme="c" class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-c" onClick="javascript:getTweets()">
   <span aria-hidden="true" class="ui-btn-inner ui-btn-corner-all">
    <span class="ui-btn-text">Get Tweets</span>
   </span>
        </a>
    </div>
    <div style="padding-left:1%;">
        <div class="content-primary">
            <ul data-role="listview" data-inset="true" id="tweets">
            </ul>
        </div>
    </div>
    <br>
    <div data-role="header" data-position="inline">
        <h1></h1>
    </div>
</body>
</html>

javascript部

view plainprint?
  1. //ドキュメント読み込み完了時に  
  2. $(function(){  
  3.  //検索する関数  
  4.  getTweets = function(){  
  5.  //ID "tuser"の値を取得  
  6.  var user = $("#tuser").val();  
  7.  if(user != ""){  
  8.   //リスト表示部を空白、初期化  
  9.   $("#tweets").html('');  
  10.   //検索中を示すため、読み込み中メッセージを表示  
  11.   $.mobile.showPageLoadingMsg();  
  12.   //Twitter APIを使って結果を取得し、dataパラメータに渡す。  
  13.   $.getJSON('http://twitter.com/status/user_timeline/'+user+'.json?count=10&callback=?',   
  14.   function(data){  
  15.    var template = "";  
  16.    var screenname = "";  
  17.    var realname = "";  
  18.    var tweet = "";  
  19.    var avataar = "";  
  20.    //抽出結果を一つづつ取り出して、index.htmlのitemにセット  
  21.    $.each(data, function(index, item){  
  22.     screenname  = item.user.screen_name;  
  23.     realname = item.user.name;  
  24.     tweet  = item.text;  
  25.     created_at = item.created_at;  
  26.     avataar  = item.user.profile_image_url;  
  27.     created_at  = created_at.split(" ");  
  28.       
  29.     // item内のドキュメント(テンプレート)を作成  
  30.     $("#tweets").append('<li><a href="#"><img style="margin:1%;" src="'+avataar+'" /><h3>'+screenname+'</h3><p>'+tweet+'</p><p class="light-text">'+created_at[1]+' '+created_at[2]+'</p></a></li>');  
  31.       
  32.     // list内を読み込みして再表示  
  33.     $("#tweets").listview();  
  34.     $("#tweets").listview("refresh");  
  35.    });  
  36.    //読み込み中のダイアログを消す  
  37.    $.mobile.hidePageLoadingMsg();  
  38.   });  
  39.    }  
  40.  }  
  41. });  
//ドキュメント読み込み完了時に
$(function(){
 //検索する関数
 getTweets = function(){
 //ID "tuser"の値を取得
 var user = $("#tuser").val();
 if(user != ""){
  //リスト表示部を空白、初期化
  $("#tweets").html('');
  //検索中を示すため、読み込み中メッセージを表示
  $.mobile.showPageLoadingMsg();
  //Twitter APIを使って結果を取得し、dataパラメータに渡す。
  $.getJSON('http://twitter.com/status/user_timeline/'+user+'.json?count=10&callback=?', 
  function(data){
   var template = "";
   var screenname = "";
   var realname = "";
   var tweet = "";
   var avataar = "";
   //抽出結果を一つづつ取り出して、index.htmlのitemにセット
   $.each(data, function(index, item){
    screenname  = item.user.screen_name;
    realname = item.user.name;
    tweet  = item.text;
    created_at = item.created_at;
    avataar  = item.user.profile_image_url;
    created_at  = created_at.split(" ");
    
    // item内のドキュメント(テンプレート)を作成
    $("#tweets").append('<li><a href="#"><img style="margin:1%;" src="'+avataar+'" /><h3>'+screenname+'</h3><p>'+tweet+'</p><p class="light-text">'+created_at[1]+' '+created_at[2]+'</p></a></li>');
    
    // list内を読み込みして再表示
    $("#tweets").listview();
    $("#tweets").listview("refresh");
   });
   //読み込み中のダイアログを消す
   $.mobile.hidePageLoadingMsg();
  });
   }
 }
});

コードの解説が全くない。後で、書き足すことにしよう。とりいそぎ、ここまで。
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2012年1月22日日曜日

MacPortsをアップデート

OSXで、オープンソースを利用する場合、パッケージシステムはいくつか選択肢があるが、私は、MacPortsを使っています。
http://guide.macports.org/

# 昔は、時々自分が何を使っている忘れて、複数のパッケージシステムを入れて混乱したりしました。

MacPortsは、バイナリを配布するのではなく、ソースをダウンロードして、コンパイルするタイプのパッケージ管理システムです。そのため、コンパイラが必要です。OSXの場合は、Xcodeが必要になります。そのため、Xcodeをインストールしておくことが必須です。

さて、Lionにしてからパッケージのアップデートしてませんでしたので、やってみました。以下の手順です。
  1. リポジトリ情報を最新にする
  2. インストール済みのport(パッケージ)を最新にする

リポジトリ情報の更新

CodeRider:~ baker$ sudo port selfupdate
Password:
--->  Updating MacPorts base sources using rsync
MacPorts base version 2.0.3 installed,
MacPorts base version 2.0.3 downloaded.
--->  Updating the ports tree
--->  MacPorts base is already the latest version

The ports tree has been updated. To upgrade your installed ports, you should run
  port upgrade outdated

selfupdateコマンドは、公開されているMacPortsのリポジトリで、ローカルのportsを更新するために使われます。結果、ローカルのportsは、最新のヴァージョンになります。このコマンドは、またMacPorts基盤 ( MacPorts base)の最新バージョンをチェックし、必要であれば最新のものに、アップグレードします。(macports.org コマンド解説 3.1.2. selfupdate)

つまり、selfupdateでは、リポジトリの情報のみがアップデートされて、既にインストールされているパッケージが更新されるわけではないと言うことです。ただし、ローカルで利用するportとか、MacPortsのコマンド群（MacPorts Base)は、このタイミングで最新版に更新されます。

パッケージの更新

インストール済みのパッケージを全て最新版にします。upgradeコマンドを使うのですが、

upgradeコマンドは、デフォルトの使用では、更新されたパッケージを削除しません。非アクティブにするだけです。(非アクティブについては、Package Image, Destroot, Activate Phasesの項を参照してください）もし、古いportを削除したいのであれば、uオプションを使用しましょう。
(macports.org コマンド解説 3.1.15. upgrade Note)

なので、uオプションを使用して、古いportは削除し、新しいものに入れ替えました。もちろんアップグレード可能なもののみの話ですが。

CodeRider:~ baker$ sudo port -u upgrade outdated
--->  Computing dependencies for gdbm
--->  Fetching archive for gdbm
--->  Attempting to fetch gdbm-1.10_1.darwin_11.x86_64.tgz from http://packages.macports.org/gdbm
--->  Fetching gdbm
--->  Attempting to fetch gdbm-1.10.tar.gz from ftp://ftp.dti.ad.jp/pub/GNU/gdbm
--->  Attempting to fetch gdbm-1.10.tar.gz from http://distfiles.macports.org/gdbm
--->  Verifying checksum(s) for gdbm
--->  Extracting gdbm
--->  Configuring gdbm
--->  Building gdbm
--->  Staging gdbm into destroot
--->  Installing gdbm @1.10_1
--->  Cleaning gdbm
--->  Computing dependencies for gdbm
--->  Deactivating gdbm @1.9.1_0
--->  Cleaning gdbm
--->  Activating gdbm @1.10_1
--->  Cleaning gdbm
--->  Uninstalling gdbm @1.9.1_0
--->  Cleaning gdbm
(途中、たくさん省略）

古いportがクリーンされてますね。
コンパイルするので、少し時間が掛かりましたが、無事 終了です。
投稿者 時刻: 0 件のコメント:
ラベル: ,

2012年1月15日日曜日

WebSocketのRFCを一寸だけ訳す

HTML5と共に気になる技術があります。WebSocket。TCPソケット通信をHTTPプロトコルの下で実現する技術であり、試みだと想像しています。XMLHttpRequestを利用するAjaxは、ドキュメント全体の更新で高負荷となるHTTPと異なり、初めて観た時に革新的だった。でもプログラムレベルでは、やっぱりなじまない。もう少し、他の部分とは独立的にTCP送信を実装したいもんだと、WebSocketに期待しています。
そのWebSocketですが、RFCが公開されていたので、さわりの部分だけ訳してみました。

原文は、ここです。
http://tools.ietf.org/html/rfc6455

いやあ、酷い和訳です。あくまで自分の勉強のためなので、決して訳を鵜呑みにしないように。そもそも、日本語になっていないような気もするし、概要と導入部の最初の節だけなので、具体的な内容には乏しい。

ウェブソケット プロトコル

概要
ウェブソケット・プロトコルは、管理された環境で委託されたコードが動いているクライアントと、そのコードが通信を受け取っているホストとの双方向通信を可能にします。
セキュリティモデルは、ウェブ・ブラウザに一般に使われている原初的なセキュリティモデルです。プロトコルは、T通信を開始時の通信確定手順と、それに続くTCP層の基本的なメッセージ・フレーム群で構成されています。
この技術の狙いは、サーバとの双方向通信を必要とするブラウザベースのアプリケーションに、XMLHttpRequest、iframe、ロング・ポーリングのような複合的なHTTP接続に頼らない、機構を提供することです。

1. 導入（イントロダクション）
1.1. 背景
歴史的に、クライアントとサーバ間の二方向の通信を必要とするウェブアプリ（チャット、ゲームとか）は、更新確認のため、上位への通知を送信する間、(ドキュメントの表示のためのHTTPではない）別のHTTPコール(RFC6202)を使ったサーバへのポーリングを多用してきた。

この結果は、様々な問題を生むことになる。
* サーバは、それぞれのクライアントと、クライアント数だけのTCP通信を強いられる。ある通信は、クライアントに情報を送り、またある通信は送られてくるメッセージを受け取るために。
* 通信の成立は、非常に負荷が高い。それぞれのクライアントーサーバ間メッセージは、(そのための）HTTP headerをメッセージ毎に持っている。
* クライアントサイドスクリプト(Ajaxのような)は、送信結果を結びつけるために、送信と受信の管理（マッピング）を強いられる。

より単純な解決は、双方向の流れをまとめた一つのTCP接続を使うことであるべきだ。これが、ウェブソケットプロトコルの提供するものだ。WebSocket APIを組み込むことで、ウェブプロトコルは、ウェブページから、遠隔地のサーバへの双方向通信を実現するため、HTTPポーリングに代わる別の手段を提供する。
同様の技術は、様々なウェブ・アプリケーションで使われることが可能だ。ゲーム、リアルな証券情報ニュース、複数人による同時編集アプリ、リアルタイムな情報発信機能を提供するユーザインターフェースなどなど。

ウェブソケット プロトコルは、現存する基盤（プロキシ、フィルタリング、認証）からの利便性を得るために、トランスポート層でHTTPを利用している現存の双方向通信技術を捨て去ることができるように設計されました。

== このあたり、全くお手上げ ==
そのような（現存の）技術は、効率と信頼性のトレードオフのもとで実装されている。なぜなら、HTTPは、本来、双方向通信に利用されることを意図していなかったからである。
ウェブソケットは、その目的を、既存のHTTP基盤のもとで、既存のHTTP双方向通信技術に割り当てている（？）。それは、80ポートや443ポートで動作することで、HTTPプロキシや媒体（それが、現在の環境への特殊な使用を意味することであっても）をサポートすることだ。
「 The WebSocket Protocol attempts to address the
goals of existing bidirectional HTTP technologies in the context of
the existing HTTP infrastructure; as such, it is designed to work
over HTTP ports 80 and 443 as well as to support HTTP proxies and
intermediaries, even if this implies some complexity specific to the
current environment.」
== ここまで ==

しかし、設計では、ウェブソケットをHTTPのみに制限していないし、将来の実装では、全体のプロトコルを再構成する事無く、専用のポートのもとで、より単純な通信確定を使うことが出来る。
最後の点は、重要である。なぜなら、双方向のメッセージ通信の際の交信パターンは標準的なHTTP交信にぴったりとはあっていないし、いくつかのコンポーネントの一寸変わった取込を実現できるからだ。
投稿者 時刻: 0 件のコメント:
ラベル: ,
登録: 投稿 (Atom)