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 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)