2009年8月31日月曜日

XML解析①

JavaScriptの話ばかりですが、
やっぱりAjaxに触れないわけにはいかない、ということで、
ちょっとやってみました。

まず、一番大切なのは、xml解析かなと。

で、やっぱりjQueryかなと。

ここを参考にしてみました。
ありがとうございます。

で、使うjqueryはいつものやつ。
　→　テーブルソート①

ポイントは、xmlオブジェクトを

$(xml)

で扱えることかな。
findして、eachしてと、かなり便利。
jqueryに詳しいと簡単なことかと思うので、
今日はここまで。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">
<head>
<title> .:: Sample Play Keepaway ::. Table-Sort-01</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="Author" content="Sample">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" href="css/blue/style.css" type="text/css" media="print, projection, screen" />

view plainprint?
  1. <script language="Javascript" type="text/javascript" charset="UTF-8" src="js/lib/jquery-1.3.2.min.js"></script>  
  2. <script type="text/javascript">  
  3. $(function(){  
  4.     $.ajax({  
  5.     url: './xml/sample.xml',  
  6.     type: 'GET',  
  7.     dataType: 'xml',  
  8.     timeout: 1000,  
  9.     error: function(){  
  10.         alert('xmlファイルの読み込みに失敗しました');  
  11.     },  
  12.     success: function(xml){  
  13.         $(xml).find("row").each(function(){  
  14.             var item_text = $(this).text();  
  15.   
  16.             $('<li></li>')  
  17.                 .html(item_text)  
  18.                 .appendTo('ol#samp-list');  
  19.         });  
  20.         $("li.demo").html("");  
  21.     }  
  22.     });  
  23. });  
  24. </script>  

</head>
<body>

<div class="preview">
<ol id="samp-list">
</ol>

</div>

</body>
</html>
投稿者 時刻: 0 件のコメント:
ラベル:

2009年8月30日日曜日

テーブルソート③

テーブルソートの第３回目

ダウンロードはここから。

  1. Table Sorting with Prototype [zipファイルをダウンロードします]



評価
  • 使いやすさ：○　何も指定しなくていいのは、実は楽かも。nosortもあるし。
  • 安心：prototypeは安心ですね。scriptaculousは使ったことないから、自分のスキルに若干不安あり。
  • その他：他のJavaScriptライブラリとの併用は大丈夫？統一すべきだよなー



jQueryのときと変わった部分
  1. 読み込むスクリプトが違うのは当然。
  2. scriptを読み込む＆class指定のみでソート可能



ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">
<head>
<title> .:: Sample Play Keepaway ::. Table-Sort-01</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="Author" content="Sample">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" href="css/style.css" type="text/css" media="print, projection, screen" />
<script language="Javascript" type="text/javascript" charset="UTF-8" src="js/lib/scriptaculous/lib/prototype.js"></script>
<script language="Javascript" type="text/javascript" charset="UTF-8" src="js/lib/fastinit.js"></script>
<script language="Javascript" type="text/javascript" charset="UTF-8" src="js/lib/tablesort.js"></script>
</head>
<body>

view plainprint?
  1. <p>ソートしたい場合は、class="sortable"を記述する</p><table id="sample" class="sortable">    <thead>  
  2.         <tr>   
  3.             <th>first name</th>   
  4.             <th>last name</th>   
  5.             <th>age</th>   
  6.             <th>total</th>   
  7.             <th>discount</th>   
  8.             <th>date</th>   
  9.         </tr>   
  10.     </thead>   
  11.     <tbody>   
  12.         <tr>   
  13.             <td>peter</td>   
  14.             <td>parker</td>   
  15.             <td>28</td>   
  16.             <td>$9.99</td>   
  17.             <td>20%</td>   
  18.             <td>jul 6, 2006 8:14 am</td>   
  19.         </tr>   
  20.         <tr>   
  21.             <td>john</td>   
  22.             <td>hood</td>   
  23.             <td>33</td>   
  24.             <td>$19.99</td>   
  25.             <td>25%</td>   
  26.             <td>dec 10, 2002 5:14 am</td>   
  27.         </tr>   
  28.         <tr>   
  29.             <td>clark</td>   
  30.             <td>kent</td>   
  31.             <td>18</td>   
  32.             <td>$15.89</td>   
  33.             <td>44%</td>   
  34.             <td>jan 12, 2003 11:14 am</td>   
  35.         </tr>   
  36.         <tr>   
  37.             <td>bruce</td>   
  38.             <td>almighty</td>   
  39.             <td>45</td>   
  40.             <td>$153.19</td>   
  41.             <td>44%</td>   
  42.             <td>jan 18, 2001 9:12 am</td>   
  43.         </tr>   
  44.         <tr>   
  45.             <td>bruce</td>   
  46.             <td>evans</td>   
  47.             <td>22</td>   
  48.             <td>$13.19</td>   
  49.             <td>11%</td>   
  50.             <td>jan 18, 2007 9:12 am</td>   
  51.         </tr>   
  52.     </tbody>   
  53. </table>  
  54. <p>ソートしたくない場合は、class="nosort"を記述する</p><table id="sample" class="nosort">    <thead>  
  55.         <tr>   
  56.             <th>first name</th>   
  57.             <th>last name</th>   
  58.             <th>age</th>   
  59.             <th>total</th>   
  60.             <th>discount</th>   
  61.             <th>date</th>   
  62.         </tr>   
  63.     </thead>   
  64.     <tbody>   
  65.         <tr>   
  66.             <td>peter</td>   
  67.             <td>parker</td>   
  68.             <td>28</td>   
  69.             <td>$9.99</td>   
  70.             <td>20%</td>   
  71.             <td>jul 6, 2006 8:14 am</td>   
  72.         </tr>   
  73.         <tr>   
  74.             <td>john</td>   
  75.             <td>hood</td>   
  76.             <td>33</td>   
  77.             <td>$19.99</td>   
  78.             <td>25%</td>   
  79.             <td>dec 10, 2002 5:14 am</td>   
  80.         </tr>   
  81.         <tr>   
  82.             <td>clark</td>   
  83.             <td>kent</td>   
  84.             <td>18</td>   
  85.             <td>$15.89</td>   
  86.             <td>44%</td>   
  87.             <td>jan 12, 2003 11:14 am</td>   
  88.         </tr>   
  89.         <tr>   
  90.             <td>bruce</td>   
  91.             <td>almighty</td>   
  92.             <td>45</td>   
  93.             <td>$153.19</td>   
  94.             <td>44%</td>   
  95.             <td>jan 18, 2001 9:12 am</td>   
  96.         </tr>   
  97.         <tr>   
  98.             <td>bruce</td>   
  99.             <td>evans</td>   
  100.             <td>22</td>   
  101.             <td>$13.19</td>   
  102.             <td>11%</td>   
  103.             <td>jan 18, 2007 9:12 am</td>   
  104.         </tr>   
  105.     </tbody>   
  106. </table>  
</body>
</html>
投稿者 時刻: 0 件のコメント:
ラベル:

2009年8月29日土曜日

テーブルソート②

続いてsortableTable

ダウンロードはここから。


  1. sortableTable.js [sortabletable.zipってやつ]

  2. MooTools [MooTools 1.2.3のJSMin]




評価


  • 使いやすさ：△　axis属性はどうなのか？明示的に指定するのは安心だけど面倒な面もあるね

  • 安心：○　mootoolsも安心かなぁ

  • その他：「矢印で幅を取られるのが困るけど、cssいじれば大丈夫だと思う。
    できれば下線にしたいな。」というのはjQueryのときと同じ意見



jQueryのときと変わった部分

1. 読み込むスクリプトが違うのは当然。

2. scriptの実行部分

script language="Javascript" type="text/javascript"><!--
    var myTable = {};
    window.addEvent('domready', function(){
            myTable = new sortableTable('myTable', {overCls: 'over', onClick: function(){alert(this.id)}});
    });
//--></script>

3. class指定不要


ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">
<head>
<title> .:: Sample Play Keepaway ::. Table-Sort-01</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="Author" content="Sample">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" href="css/sortableTable.css" type="text/css" media="print, projection, screen" />
<script language="Javascript" type="text/javascript" charset="UTF-8" src="js/lib/mootools-1.2.3-core-jm.js"></script>
<script language="Javascript" type="text/javascript" charset="UTF-8" src="js/lib/sortableTable.js"></script>
<script language="Javascript" type="text/javascript"><!--
    var myTable = {};
    window.addEvent('domready', function(){
            myTable = new sortableTable('myTable', {overCls: 'over', onClick: function(){alert(this.id)}});
    });
//--></script>
</head>
<body>


<table id="myTable" cellpadding="0" cellpadding="0">            
    <thead>
        <tr>
            <th axis="string">first name</th>
            <th axis="string">last name</th>
            <th axis="number">age</th>
            <th axis="number">total</th>
            <th axis="number">discount</th>
            <th axis="date">date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>peter</td>
            <td>parker</td>
            <td>28</td>
            <td>$9.99</td>
            <td>20%</td>
            <td>jul 6, 2006 8:14 am</td>
        </tr>
        <tr>
            <td>john</td>
            <td>hood</td>
            <td>33</td>
            <td>$19.99</td>
            <td>25%</td>
            <td>dec 10, 2002 5:14 am</td>
        </tr>
        <tr>
            <td>clark</td>
            <td>kent</td>
            <td>18</td>
            <td>$15.89</td>
            <td>44%</td>
            <td>jan 12, 2003 11:14 am</td>
        </tr>
        <tr>
            <td>bruce</td>
            <td>almighty</td>
            <td>45</td>
            <td>$153.19</td>
            <td>44%</td>
            <td>jan 18, 2001 9:12 am</td>
        </tr>
        <tr>
            <td>bruce</td>
            <td>evans</td>
            <td>22</td>
            <td>$13.19</td>
            <td>11%</td>
            <td>jan 18, 2007 9:12 am</td>
        </tr>
    </tbody>
</table>

</body>
</html>
投稿者 時刻: 0 件のコメント:
ラベル:

2009年8月28日金曜日

テーブルソート①

[JS]ソートできるテーブルを実装するスクリプト10選に書いてあるテーブルソートを試してみようと思った。

使いやすさとか何かしらの評価が欲しい。

まずは、jQueryベースのやつ。

ダウンロードはここから。

  1. jQuery 1.3.2

  2. tablesorter [jquery.tablesorter.min.js]

  3. themes [blue]




評価

使いやすさ：○
安心：○　jQueryをただ信じてるだけ
その他：矢印で幅を取られるのが困るけど、cssいじれば大丈夫だと思う。
できれば下線にしたいな。



ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">
<head>
<title> .:: Sample Play Keepaway ::. Table-Sort-01</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="Author" content="Sample">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" href="css/blue/style.css" type="text/css" media="print, projection, screen" />
<script language="Javascript" type="text/javascript" charset="UTF-8" src="js/lib/jquery-1.3.2.min.js"></script>
<script language="Javascript" type="text/javascript" charset="UTF-8" src="js/lib/jquery.tablesorter.min.js"></script>
<script language="Javascript" type="text/javascript"><!--
$(document).ready(function() {
    // call the tablesorter plugin
    $("#sample").tablesorter();
});
//--></script>
</head>
<body>


<table id="sample" class="tablesorter" cellspacing="1">            
    <thead>
        <tr>
            <th>first name</th>
            <th>last name</th>
            <th>age</th>
            <th>total</th>
            <th>discount</th>
            <th>date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>peter</td>
            <td>parker</td>
            <td>28</td>
            <td>$9.99</td>
            <td>20%</td>
            <td>jul 6, 2006 8:14 am</td>
        </tr>
        <tr>
            <td>john</td>
            <td>hood</td>
            <td>33</td>
            <td>$19.99</td>
            <td>25%</td>
            <td>dec 10, 2002 5:14 am</td>
        </tr>
        <tr>
            <td>clark</td>
            <td>kent</td>
            <td>18</td>
            <td>$15.89</td>
            <td>44%</td>
            <td>jan 12, 2003 11:14 am</td>
        </tr>
        <tr>
            <td>bruce</td>
            <td>almighty</td>
            <td>45</td>
            <td>$153.19</td>
            <td>44%</td>
            <td>jan 18, 2001 9:12 am</td>
        </tr>
        <tr>
            <td>bruce</td>
            <td>evans</td>
            <td>22</td>
            <td>$13.19</td>
            <td>11%</td>
            <td>jan 18, 2007 9:12 am</td>
        </tr>
    </tbody>
</table>

</body>
</html>

投稿者 時刻: 0 件のコメント:
ラベル:

2009年8月27日木曜日

バージョン管理

ちょっと前は（けっこう前？）CVSだったけど、

いまはすっかりSubversion。
環境構築は結構できるんだけれど、
バージョン管理の肝を知っていないので、お勉強。

まずは、この３タイプを知る必要がある。


  • trunk：常に最新機能の開発に使うリポジトリ。

  • branch：リリース用のパッケージ。trunkからA.B.Xと採番して分岐を作り、リリースパッケージ開発＆バグFIX用のリポジトリとする

  • tag：branchで実リリースを行ったときのリビジョンのスナップショット



これ大事ですね。
いまいちbranchの使い方が理解できていなかったけど、
使い方間違っていたけど、
「うんうん」というかんじ。

でも、マージ作業が面倒ですね。
でも、やるしかない。

あとは、インストール方法と、
使い方かなー

今回参考にしたサイト。
投稿者 時刻: 0 件のコメント:
ラベル:

2009年8月20日木曜日

ショートカットキーを作る

ショートカットキーの作り方を考えた。

とりあえず、同時にCtrlが押されたとか、
そういうのは判断できた。

とはいっても、ここのサイトそのまんまだけど。。。


あとは、同時押しでCtrlと何が押されたかを判定できればOK
Ctrl判定すると、文字が取得できない。。。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">
<head>
<title> .:: Sample Play Keepaway ::.</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="Author" content="Sample">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="Javascript" type="text/javascript"><!--

function accesskey(e) {
    var ctrl = false;
    var shift = false;
    var alt = false;
    var keycode = -1;
    
    // Mozilla(Firefox, NN) and Opera
    if (e != null) {
            ctrl    = typeof e.modifiers == 'undefined' ? e.ctrlKey : e.modifiers & Event.CONTROL_MASK;
            shift = typeof e.modifiers == 'undefined' ? e.shiftKey : e.modifiers & Event.SHIFT_MASK;
            alt = typeof e.modifiers == 'undefined' ? e.altKey : e.modifiers & Event.ALT_MASK;
            // イベントの上位伝播を防止
            e.preventDefault();
            e.stopPropagation();
        
        } else { // Internet Explorer
            ctrl    = event.ctrlKey;
            shift = event.shiftKey;
            alt     = event.altKey;
            // イベントの上位伝播を防止
            event.returnValue = false;
            event.cancelBubble = true;
        }
        
        if (!ctrl && !shift && !alt) {
            if (e != null) {
                keycode = e.which;
            } else {
                keycode = event.keyCode;
            }
            // キーコードの文字を取得
            keychar = String.fromCharCode(keycode).toUpperCase();
        }
        
        document.getElementById('result0').innerHTML = keycode;
        document.getElementById('result1').innerHTML = keychar;
        
        // Ctrl同時押しの場合
        if (ctrl) {
            document.getElementById('result2').innerHTML = 'Ctrlが押されました';
        } else if (shift) {// Shift同時押しの場合
            document.getElementById('result2').innerHTML = 'Shiftが押されました';
        
        } else if (alt){ // Alt同時押しの場合
            document.getElementById('result2').innerHTML = 'Altが押されました';
        }
}

document.onkeydown = accesskey;
//--></script>
</head>
<body>
<div id="result0"></div>
<hr/>
<div id="result1"></div>
<hr/>
<div id="result2"></div>
</body>
</html>
投稿者 時刻: 0 件のコメント:
ラベル:

2009年8月19日水曜日

ondblclick

リンクの連打を考えていたら、

ondblclick

っていう属性を知りました。
ダブルクリックイベントを拾います。

で、サンプルを書いてみた。
いまいち期待とおりの動作をしない。

onclickとondblclickの併用は付加？

それじゃあ、連打してると＃のリクエストがとぶような気がするのは？




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">
<head>
<title> .:: Sample Play Keepaway ::.</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="Author" content="Sample">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="Javascript" type="text/javascript"><!--
  function onclick_action() {
    document.getElementById('result').innerHTML = 'onclickイベント';
 return false;
  }
  
  function ondblclick_action() {
    document.getElementById('result').innerHTML = 'ondblclickイベント';
 return false;
  }
  
  function init() {
    document.getElementById('result').innerHTML = '';
 return false;
  }
//--></script>
</head>
<body>
  <ul>
    <li><a href="#" onclick="return onclick_action();">onclickイベント発動</a></li>
    <li><a href="#" ondblclick="return ondblclick_action();">ondblclickイベント発動</a></li>
 <li><a href="#" onclick="return onclick_action();"　ondblclick="return ondblclick_action();">どっちでもイベント発動</a></li>
 <li><a href="#" onclick="return init();">初期化</a></li>
  </ul>
  <div id="result"></div>
</body>
</html>





もうちょっと考えてみよっと。
投稿者 時刻: 0 件のコメント:
ラベル:

2009年8月13日木曜日

JNDI　-JNDIへの登録-

JNDIの2回目

いまいち理解できないので、
ちゃんと流れを追うことにした。

参考：

まず、JNDIを使うには、JNDIへ情報を登録する必要がある。
登録してあって、初めて使うことが出来る。

で、登録の方法。

例としては、
DataSourceオブジェクトの登録
File Systemサービスプロバイダを使用するJNDIへの登録例

1. システムプロパティを取得する
Properties sys_prop = System.getProperties();

2. File Systemサービスプロバイダのプロパティを設定する
sys_prop.put(Context.INITIAL_CONTEXT_FACTORY, "com.sun.jndi.fscontext.RefFSContextFactory");

3. File Systemサービスプロバイダで使用するディレクトリを設定する (この場合，c:\JNDI_DIRの下に登録される)
sys_prop.put(Context.PROVIDER_URL, "file:c:"+File.separator + "JNDI_DIR");

4. システムプロパティを更新する
System.setProperties(sys_prop);

5. JNDIを初期化する
Context ctx = new InitialContext();

6. DataSourceオブジェクトを，jdbc/TestDataSourceという論理名称でJNDIに登録する
ctx.bind("jdbc" + File.separator + "TestDataSource", ds);

まだ理解が追いつかない...
でも、とりあえず次は情報の取得を調べてみよう。
J2EEコンテナは、設定ファイルで登録できるらしいからなー
投稿者 時刻: 0 件のコメント:
ラベル:

2009年8月12日水曜日

JNDI -いまさら-

JNDIをちゃんと勉強しようと思った。

こんなソースを触ってたら、
「やっぱりちゃんと勉強しよう」と。

InitialContext ictx = new InitialContext();
DataSource ds = (DataSource) ictx.lookup("java:comp/env/jdbc/SampleDS");


JNDIを使うと、様々なネーミングサービス、ディレクトリサービスにアクセスすることができるとのこと。
で、ネーミングサービス、ディレクトリサービスとは？

ネーミングサービス


・文字列で表現される名前と特定のオブジェクトとを関連づけるサービス
・名前を指定するとそれに対応するオブジェクトを得ることができる

ディレクトリサービス


・住所録や電話帳などのように、住所や氏名などの様々な情報を効率的に管理し、その情報を更新したり検索したりすることができるようにするサービス
・電話帳で名前から電話番号が探し出せるように、ディレクトリサービスを利用することで簡単にほしい情報を得ることができる

うーん、いまいち分からない。。。
使用の手順は、

手順




  1. Propertiesオブジェクトを用意する。

  2. PropertiesにINITIAL_CONTEXT_FACTORYをputする。

  3. 同様にPROVIDER_URLをputする。

  4. Propertiesを引数としてInitialContext（またはInitialDirContext）をnewする。

  5. InitialContextやInitialDirContextを利用して、bindしたりlookupしたりする。



やっぱり難しい。
どうやら、InitialContextがポイントになるみたい。
次はInitialContextを調べてみようと思う。
投稿者 時刻: 0 件のコメント:
ラベル:
登録: 投稿 (Atom)