2009年12月29日火曜日

ブラウザ機能抑止

ブラウザ機能抑止の世界では、

  • 右クリック

  • 戻るボタン

  • F5



あたりが抑止される対象だと思う。
まあ、ブラウザの機能を抑止するWebページってどうなんだ、
という議論は置いておいて。
(業務システムだとか、そういう場合かな)

またもや、jqueryを用いて抑止してみた。

一応、以下の場所ではBackspaceを許可。

  • <input type="text">

  • <input type="password">

  • <textarea></textarea>





<!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 ::. Prohibit-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" />
<link rel="stylesheet" href="css/default.css" type="text/css" />

  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. $(document).ready(function() {  
  4. // 戻るの禁止  
  5.     $(document).keydown(function(event){  
  6.         if (event.altKey && event.keyCode == 37) {  
  7.             return false;  
  8.         } else if (event.keyCode == 8) {  
  9.             if (event.srcElement.type != undefined &&   
  10.                 (event.srcElement.type == 'text' ||  
  11.                     event.srcElement.type == 'password' ||  
  12.                     event.srcElement.type == 'textarea')) {  
  13.                 return true;  
  14.             } else {  
  15.                 return false;  
  16.             }  
  17.         } else {  
  18.             return true;  
  19.         }  
  20.     });      
  21.     // 右クリックの禁止  
  22.     $(document).bind("contextmenu",function(e){  
  23.         return false;  
  24.     });  
  25.       
  26. });   
  27. </script>  


</head>
<body>
<h2>最初のページ</h2>
<div>
テキストボックス:<input type="text" name="sampleText" id="sampleText" size="20" value="さんぷるてきすと">
<br>
パスワードボックス:<input type="password" name="samplePassword" id="samplePassword" size="10" value="">
<br>
テキストエリア:<textarea name="sampleArea" id="sampleArea" rows="10" cols="20">ああああああああああああああああああああああああ
いいいいいいいいいいいいいいいいいいいい
</textarea>

<a href="./sample2.html">次のページへ</a>
</div>

</div>

</body>
</html>

2009年10月18日日曜日

和暦→西暦+曜日算出

よくよく考えてみると、
西暦に戻すと、月日は関係ないのかも。

ということで、一気に仕上げた。

曜日まで出すよ。


  1. $(function(){  
  2.     $('#convertButton').click(function(){  
  3.         var d = $('#date_text').val();  
  4.         $('#result').html(d.getSeireki('漢字'true));  
  5.     });  
  6. });  
  7.   
  8. var weeks = ["日","月","火","水","木","金","土"];  
  9.   
  10. String.prototype.getSeireki = function(pattern, day) {  
  11.     var ret = this.match(/[0-9]+/g);  
  12.     var wareki = '';  
  13.     var year = -1;  
  14.     var month = -1;  
  15.     var date = -1;  
  16.     if (ret.length == 1) {  
  17.         year = ret[0];  
  18.         wareki = this.substring(0,this.indexOf(ret[0]));  
  19.     } else if (ret.length == 2) {  
  20.         year = ret[0];  
  21.         wareki = this.substring(0,this.indexOf(ret[0]));  
  22.         month = ret[1];  
  23.     } else if (ret.length == 3) {  
  24.         year = ret[0];  
  25.         wareki = this.substring(0,this.indexOf(ret[0]));  
  26.         month = ret[1];  
  27.         date = ret[2];  
  28.     } else {  
  29.         return '';  
  30.     }  
  31.       
  32.     var result = '';  
  33.     if ("昭和" == wareki || "S" == wareki) {  
  34.         result = parseInt(year) + 1925;  
  35.     } else if ("平成" == wareki || "H" == wareki) {  
  36.         result = parseInt(year) + 1988;  
  37.     } else if ("大正" == wareki || "T" == wareki) {  
  38.         result = parseInt(year) + 1911;  
  39.     } else if ("明治" == wareki || "M" == wareki) {  
  40.         result = parseInt(year) + 1867;  
  41.     }  
  42.       
  43.     var divYear = '';  
  44.     var divMonth = '';  
  45.     var divDate = '';  
  46.     if (pattern == undefined || pattern == '漢字') {  
  47.         pattern = 1;  
  48.         divYear = '年';  
  49.         divMonth = '月';  
  50.         divDate = '日';  
  51.     } else if (pattern == '-') {  
  52.         pattern = 2;  
  53.         divYear = '-';  
  54.         divMonth = '-';  
  55.         divDate = '';  
  56.     } else if(pattern == '/') {  
  57.         pattern = 3;  
  58.         divYear = '/';  
  59.         divMonth = '/';  
  60.         divDate = '';  
  61.     } else {  
  62.         pattern = 3;  
  63.     }  
  64.       
  65.     if (ret.length == 1) {  
  66.         return result + divYear;  
  67.     } else if (ret.length == 2) {  
  68.         return result + divYear + month + divMonth;  
  69.     } else if (ret.length == 3) {  
  70.         var dispDay = '';  
  71.         if (day == true) {  
  72.             var strDate = result + '/' + (month) + '/' + date;  
  73.             var d = new Date(strDate);  
  74.             var youbi = weeks[d.getDay()];  
  75.             if (pattern == 1) {  
  76.                 dispDay = ' ' + youbi + '曜日';  
  77.             } else if (pattern == 2 || pattern == 3) {  
  78.                 dispDay = ' (' + youbi + ')';  
  79.             }  
  80.         }  
  81.         return result + divYear + month + divMonth + date + divDate + dispDay;  
  82.     }  
  83. }  

和暦→西暦

和暦→西暦変換について。

Stringオブジェクト(クラス?)を拡張して、
getSeirekiなるメソッドを作ってみた。

本当にこんな拡張でいいかは別にして。


最初と言うことで、
 和暦年 → 西暦年という変換だけど、

最終形は、
 和暦年月日 → 西暦年月日
ということだと思う。

たとえば、1989年1月8日は平成1年だけど、
1月7日だと昭和64年だということ。

今回のは、昭和56年 → 1981年という変換です。



  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2.   
  3. <html lang="ja">  
  4. <head>  
  5. <title> .:: Sample Play Keepaway ::. Ajax-02</title>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7. <meta http-equiv="cache-control" content="no-cache">  
  8. <meta name="Author" content="Sample">  
  9. <meta http-equiv="Content-Script-Type" content="text/javascript">  
  10. <link rel="stylesheet" href="css/blue/style.css" type="text/css" media="print, projection, screen" />  
  11. <link rel="stylesheet" href="css/default.css" type="text/css" />  
  12. <script language="Javascript" type="text/javascript" charset="UTF-8" src="js/lib/jquery-1.3.2.min.js"></script>  
  13. <script type="text/javascript">  
  14. $(function(){  
  15.     $('#convertButton').click(function(){  
  16.         var d = $('#date_text').val();  
  17.         $('#result').html(d.getSeireki());  
  18.     });  
  19. });  
  20.   
  21. String.prototype.getSeireki = function() {  
  22.     var ret = this.match(/[0-9]+/g);  
  23.     var wareki = this.substring(0,this.indexOf(ret[0]));  
  24.     var n = ret[0];  
  25.     var result = '';  
  26.     if ("昭和" == wareki || "S" == wareki) {  
  27.         result = parseInt(n) + 1925;  
  28.     } else if ("平成" == wareki || "H" == wareki) {  
  29.         result = parseInt(n) + 1988;  
  30.     } else if ("大正" == wareki || "T" == wareki) {  
  31.         result = parseInt(n) + 1911;  
  32.     } else if ("明治" == wareki || "M" == wareki) {  
  33.         result = parseInt(n) + 1867;  
  34.     }  
  35.       
  36.     return result + '年';  
  37. }  
  38. </script>  
  39. </head>  
  40. <body>  
  41.   
  42. <div class="preview">  
  43. <input type="text" style="width: 20em;" name="date" value="昭和56" id="date_text">  
  44. <input type="button" value="西暦変換" style="width: 180px; height: 30px;" id="convertButton">  
  45. <div id="result"></div>  
  46.   
  47. </div>  
  48.   
  49. </body>  
  50. </html>  

2009年10月15日木曜日

和暦

日本にいたら、一生?ついてまわる和暦。

西暦⇔和暦変換って、
JavaScriptでどうやろう。

とりあえず、

  • 明治が始まる日:1868/09/08

  • 大正が始まる日:1912/07/30

  • 昭和が始まる日:1926/12/25

  • 平成が始まる日:1989/01/08

  • そして...



出展:和暦西暦対応表

  → 旧暦とか使ってるから、SEっぽくないなぁ。。。

という数字を持っていなければならないかな。
で、元号が分かるとアップデート。


とりあえず、ここが参考になるので、
読みながら勉強しよう。

2009年9月10日木曜日

jqueryでDOM操作

xmlによるDOM操作をもうちょっと勉強してみた。

繰り返しとかeachでできるようになったけど、
子要素とか難しい。
childとか。

でも、だいたいできるようになった気がする。

ポイントは、dataTypeとか指定しないことかなぁー

 → 指定はずしたら、うまく動くようになった。。。

XMLソース


  1. <!--xml version="1.0" encoding="UTF-8" ?-->  
  2. <address_database>  
  3. <address recordid="1" zipcode="6900015" kanjiaddress="島根県松江市秋鹿町" kanaaddress="マネケンマツエシアイカチョウ">  
  4. <address recordid="2" zipcode="6900834" kanjiaddress="島根県松江市青葉台" kanaaddress="マネケンマツエシアオバダイ">  
  5. <address recordid="3" zipcode="6900003" kanjiaddress="島根県松江市上乃木" kanaaddress="マネケンマツエシアゲノギ">  
  6. <address recordid="4" zipcode="6900027" kanjiaddress="島根県松江市朝酌町" kanaaddress="マネケンマツエシアサクミチョウ">  
  7. <address recordid="5" zipcode="6900881" kanjiaddress="島根県松江市朝日町" kanaaddress="マネケンマツエシアサヒマチ">  
  8. <address recordid="6" zipcode="6900006" kanjiaddress="島根県松江市意宇町" kanaaddress="マネケンマツエシイウチョウ">  
  9. <address recordid="7" zipcode="6900034" kanjiaddress="島根県松江市石橋町" kanaaddress="マネケンマツエシイシバシチョウ">  
  10. <address recordid="8" zipcode="6900062" kanjiaddress="島根県松江市伊勢宮町" kanaaddress="マネケンマツエシイセミヤチョウ">  
  11. <address recordid="9" zipcode="6900869" kanjiaddress="島根県松江市一の谷町" kanaaddress="マネケンマツエシイチノタニチョウ">  
  12. <address recordid="10" zipcode="6900131" kanjiaddress="島根県松江市魚町" kanaaddress="マネケンマツエシウオマチ">  
  13.                                                               
  14. </address></address></address></address></address></address></address></address></address></address></address_database>  


HTMLソース




  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2.   
  3. <html lang="ja">  
  4. <head>  
  5. <title> .:: Sample Play Keepaway ::. Ajax-02</title>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7. <meta http-equiv="cache-control" content="no-cache">  
  8. <meta name="Author" content="Sample">  
  9. <meta http-equiv="Content-Script-Type" content="text/javascript">  
  10. <link rel="stylesheet" href="css/blue/style.css" type="text/css" media="print, projection, screen" />  
  11. <link rel="stylesheet" href="css/default.css" type="text/css" />  



  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.     cache: false,  
  7.     type: 'GET',  
  8.     timeout: 5000,  
  9.     error: function(){  
  10.         alert('xmlファイルの読み込みに失敗しました');  
  11.     },  
  12.     success: function(xml){  
  13.         var index = 0;  
  14.         $(xml).find("address").each(function(){  
  15.             index++;  
  16.             var zipCode = $(this).attr('zipCode');  
  17.             var kanjiAddress = $(this).attr('kanjiAddress');  
  18.             var kanaAddress = $(this).attr('kanaAddress');  
  19.   
  20.             $('<div></div>')  
  21.                 .html('<a href="javascript:void(0); return false;" id="' + 'res-' + index + '">' + zipCode + ',' + kanjiAddress + ',' + kanaAddress + '</a>')  
  22.                 .appendTo('div#result');  
  23.         });  
  24.         $("li.demo").html("");  
  25.         $("div#result").find("a").each(function(){  
  26.             $(this).click(function(){  
  27.                 $('#address_text').val($(this).text());  
  28.             });  
  29.         });  
  30.     }  
  31.     });  
  32. });  
  33. </script>  



  1. </head>  
  2. <body>  
  3.   
  4. <div class="preview">  
  5. <input type="text" style="width: 20em;" name="address" value="" id="address_text">  
  6. <div style="border: 1px solid silver; padding: 2px; position: absolute; z-index: 999; background-color: lightyellow;" id="result" class="result"></div>  
  7. <ol id="samp-list">  
  8. </ol>  
  9.   
  10. </div>  
  11.   
  12. </body>  
  13. </html>  

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" />

  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>

2009年8月30日日曜日

テーブルソート③

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

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

  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>

  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>

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>

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>

2009年8月27日木曜日

バージョン管理

ちょっと前は(けっこう前?)CVSだったけど、

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

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


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

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

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



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

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

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

今回参考にしたサイト。

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>

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>





もうちょっと考えてみよっと。

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コンテナは、設定ファイルで登録できるらしいからなー

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を調べてみようと思う。

2009年7月23日木曜日

WebLogic -READY-

今までtomcat派だったけど、
WebLogicを使ってみようと思う。

ダウンロード



  1. WebLogic Server → Oracle WebLogic Server Downloads

  2. Eclipse 3.3 → Pleiades All in One 日本語ディストリビューション (zip ファイル) ダウンロード


メモリが2GBくらいあるマシンがいいな。

2009年7月20日月曜日

情報発信しなければ!

これからの時代、というかだいぶ前からだけど、
情報発信しなければ生きていけない気がした。

とりあえず、今抱えていることを書いてみる。

論文の読み直し
2006年のやつとか
2008年のやつとか


応用情報処理技術者試験の勉強
そろそろ本気出さないと受からない...

JasperReport
勉強したい
JAI
勉強したい
StrutsTestCase
勉強したい


さて、頑張りますか。