2011年06月30日

JavaScriptでオブジェクトをクローンする方法。

JavaScriptでオブジェクトをclone(ディープコピー)する方法を紹介する。

例えば、WebアプリのUIを作っていて、特定のタグ要素群を纏めてディープコピーしたいことも多々あるだろう。しかし、JavaScriptの標準APIではそれが実現出来ないようなので、今回はdankogai氏が作成した clone.js を利用させてもらった。

以下はサンプルコードだ。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="clone.js"></script>
<script type="text/javascript"><!--
$(function() {
  // ディープコピーボタンクリック
  $("#deepcopyBtn").click(function(){
    // クローン生成
    clonedTag = $("#div_src p").clone();
    // 貼り付け
    $("#div_dst").append(clonedTag);
  });
  
  // シャローコピーボタンクリック
  $("#shallowcopyBtn").click(function(){
    // タグの参照を取得
    tag = $("#div_src p");
    // 貼り付け(というか移動)
    $("#div_dst").append(tag);
  });
});
--></script>

<p>↓コピー元</p>
<div id="div_src">
<p ><b>ほげ。</b></p>
</div>

<p>↓コピー先</p>
<div id="div_dst"></div>

<button id="deepcopyBtn">ディープコピー</button>
<button id="shallowcopyBtn">シャローコピー</button>

実際に試してみよう。

↓コピー元

ほげ。

↓コピー先


clone.js を読み込み、object.clone() するだけ。

このように clone.js を使えば、かくも簡単にオブジェクトのクローンが実現できるのだ。dankogai氏に感謝である。

それにしても、JavaScriptの標準APIに clone が実装されていないのが不思議でならない。

posted by 寄り道退屈男 at 17:29 | Comment(0) | TrackBack(0) | Webデザイン

2011年06月29日

Javascriptを使ってタグ要素を好きな属性でソートする方法。

HTMLタグ要素を好きな属性でソートする方法を紹介する。
今回はソースをより簡単にするためjQueryを利用した。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript"><!--
$(function() {
  
  var arr = new Array();
  
  $('#hoge li').each(function(i){
    arr[i] = new Object();
    // a要素のtitle属性の値をkeyにセット。
    arr[i].key = $(":first-child", this).attr('title');
    // li要素をvalueにセット。
    arr[i].value = $(this);
  });

  $('#descBtn').click(function(){
    arr.sort(sortDesc);
    for(i = 0; i < arr.length; i++){
      $("#hoge ul").append(arr[i].value);
    }
  });
  
  $('#ascBtn').click(function(){
    arr.sort(sortAsc);
    for(i = 0; i < arr.length; i++){
      $("#hoge ul").append(arr[i].value);
    }
  });

  // "key"プロパティで降順ソートする関数
  var sortDesc = function(a, b) {
    return b.key.localeCompare(a.key);
  }
  // "key"プロパティで昇順ソートする関数
  var sortAsc = function(a, b) {
    return a.key.localeCompare(b.key);
  }

});
--></script>

<p>aタグのtitle属性でソート。</p>
<div id="hoge">
<ul>
<li><a href="#1" title="001">title属性:001</a></li>
<li><a href="#2" title="002">title属性:002</a></li>
<li><a href="#3" title="003">title属性:003</a></li>
</ul>
</div>

<button id="ascBtn">昇順ソート</button>
<button id="descBtn">降順ソート</button>

さて、これを実行してみよう。

aタグのtitle属性でソート。


まず、Objectを生成し、適当な属性(今回はkeyvalue)にそれぞれ"ソートしたい属性" と "タグ要素" 自身をセットし、それを配列に詰めておく。

次にソート用関数を用意し、それを先程の配列のsort関数に渡してやれば配列のソートが行われる。

ソートされた配列の要素であるObjectのvalueプロパティ(liタグ要素が格納されている)をもう一度 #hoge ul な要素に append してやることでソート結果が画面に反映される。

posted by 寄り道退屈男 at 18:30 | Comment(0) | TrackBack(0) | Webデザイン

2011年06月28日

jQueryで文字サイズを動的に変更し、ついでに文字サイズをCookieに保存してみる。

ユーザーフレンドリーなWebページには大概「文字の大きさを変更する」機能が備わっている。ついでに変更したフォントサイズが他のページへ移動した時にも引き継がれていれば更に使いやすい。

今回はjQueryと jquery.cookie.js というjQueryプラグインを使ってそれを簡単に実現する方法を紹介する。

以下はそのサンプルコードだ。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript"><!--
$(function() {
$('#hoge').css("font-size", $.cookie('fsize'));
});

function fontSize(fsize){
$('#hoge').css('font-size', fsize);
$.cookie("fsize", fsize, { expires : 30, path : '/' });
}
--></script>

<a href="#" onclick="fontSize('24pt')">大</a>
<a href="#" onclick="fontSize('12pt')">中</a>
<a href="#" onclick="fontSize('8pt')">小</a>

<p id="hoge">ここの文字サイズを動的に変更します。</p>


シンプルで非常に分かりやすいと思う。
jQueryで動的にスタイルを適用している箇所は特に説明の必要はないだろう。
大切なのはクッキーへ書き込み、読み込みを行っている箇所である。

以下の部分で、フォントサイズを fsize というキーでクッキーへ書き込みしている。有効期限は30日を指定している。
$.cookie("fsize", fsize, { expires : 30, path : '/' });

これを読み込みたいときは $.cookie('fsize') とすれば良い。


ここはひとつポチっとよろしく。
人気ブログランキングへ


jQueryクックブック
jQueryクックブック
posted with amazlet at 11.06.27
jQuery Community Experts
オライリージャパン
売り上げランキング: 50544


posted by 寄り道退屈男 at 20:00 | Comment(0) | TrackBack(0) | Webデザイン

2011年06月27日

jQueryでフィルタを実現してみる。

Webアプリの画面にフィルタを設置したいこともあるだろう。そんな時もjQueryを使えばサクっと実装できる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript"><!--
$(function() {
  $("#keyword").keyup(function(){
    var str = $("#keyword").val();
    // 一旦全て非表示に
    hideAll();
    if(!str){
      // キーワードが空なら全て表示
      showAll();
      return;
    }
    // class="aaa" > li > p から
    // テキストに str を含む要素集団を抽出し
    // それらを表示
    $('.aaa li p:contains("' + str + '")').each(function(i){
      $(this).parent().show();
    });
  });
  
  hideAll = function() {
    $('.aaa li p').each(function(i){
      $(this).parent().hide();
    });
  }
  showAll = function() {
    $('.aaa li p').each(function(i){
      $(this).parent().show();
    });
  }
});  
--></script>
</head>
<body>
キーワード:<input type="text" id="keyword" />
<ul class="aaa">
<li><p>りんご</p></li>
<li><p>ごりら</p></li>
<li><p>らっぱ</p></li>
<li><p>ぱり</p></li>
</ul>
</body>
</html>

これを実行すると以下のようになる。

キーワード:
  • りんご

  • ごりら

  • らっぱ

  • ぱり


重要なのは以下の部分だ。
$('.aaa li p:contains("' + str + '")').each(function(i){
  $(this).show();
});

ここでセレクタの勉強だが、例えば、 $('.aaa li p:contains("hoge")') という記述は、全てのタグから class="aaa" > li > p と検索し、その中から、"hoge" というテキストを含む要素の集団を指す。

てことで、jQueryのセレクタを上手く使えばこんなに簡単にフィルタが実現できるということである。

ここはひとつポチっとよろしく。
人気ブログランキングへ
jQueryクックブック
jQueryクックブック
posted with amazlet at 11.06.27
jQuery Community Experts
オライリージャパン
売り上げランキング: 50544
posted by 寄り道退屈男 at 23:39 | Comment(0) | TrackBack(0) | Webデザイン

2011年06月23日

PythonでJST日付をUTC(GMT)に変換する。

以前はUTC日付をJST日付へ変換する方法を紹介したが、今度はその逆、JST日付をUTCへ変換する方法の紹介だ。

簡単に実現するためにPyTZという便利なモジュールを利用する。俺はとりあえずpytz-2006p.zipというファイルを落とした。解凍するとpytzというフォルダが現れるので、GAEアプリなどで利用したい場合は、そのフォルダごとGAEのプロジェクトフォルダ直下へコピーすれば良い。

使い方は以下の通りだ。
import pytz
from datetime import datetime

# ネイティブ日付を取得
native_dt = datetime.strptime('2011-06-23 17:12:00', '%Y-%m-%d %H:%M:%S')
# ローカル日付を取得
local_dt = native_dt.replace(tzinfo=pytz.timezone('Asia/Tokyo'))
# UTC日付を取得
utc_dt = local_dt.astimezone(pytz.utc)

print str(native_dt)
print str(local_dt)
print str(utc_dt)


実行すると以下のように表示される。
2011-06-23 17:12:00
2011-06-23 17:12:00+09:00
2011-06-23 08:12:00+00:00



ここはひとつポチっとよろしく。
人気ブログランキングへ

エキスパートPythonプログラミング
Tarek Ziade
アスキー・メディアワークス
売り上げランキング: 4805


プログラミング Google App Engine
Dan Sanderson
オライリージャパン
売り上げランキング: 40082



posted by 寄り道退屈男 at 17:22 | Comment(0) | TrackBack(0) | GAE for Python