仕事SPOT: 6月 2009

2009年6月29日月曜日

やった～、85点

思ったよりよかった。 http://rikunabi-next.yahoo.co.jp/tech/docs/ct_s03600.jsp?p=001531 ほかに書くことが無のか？

2009年6月27日土曜日

CF-Y2のHDD換装作業＠Simple.Index

Simple.Indexには2度目になります。前回参加したときは途中でノートブック（レッツノートCF-Y2)が故障。即座に原因を特定してもらったものの、修理は延び延びになってしまっていた。

そこで、今回は壊れたHDDの換装作業。 Simple.IndexにCF-Y2と新HDDを持ち込んで作業開始。 HDDは日立HGST製のHTS541680J9AT00の80GB。分解の参考にしたのは↓のページ。 http://homepage2.nifty.com/o-nikko/Hard/cf-y2_hdt.htm HDDは↓のページに載っていたのを確認してから購入。 http://dank.cocolog-nifty.com/blog/2008/03/cfyhdd_6c1c.html 分解中のねじはガムテープに貼り付けながら作業すると楽、というのをどこかで読んだので、早速使わせてもらった。少なくともねじが余る、ということはなかった。

最後の裏蓋がとれずに苦労したが、ねじ一個はずし忘れたのとビデオ端子横のねじ二個を取るのに気がつくと簡単に取れた。 HDD２つを上下に並べて、折る端子を確認。ぐりぐりと４回ほど折り曲げると、ポロっと取れた。後は同じ手順を逆にしたら元に戻った。

リカバリーDVDで再起動→Cドライブ20GBを切ってOSからインストール→動いた。ただし、名誉の負傷が2点。どこから出てきたんだろう？まぁ無くても動いているからいいか。

OSセットアップ→FireFoxインストール→Avastインストール、と作業したところで、このブログをアップしました。ということで、本日の予定は終了。ありがとうございました→Simpleの皆様。

2009年6月8日月曜日

jQuery::Up/Downキーでフォームを移動、パート5：完成コードとデモ

(1)動作デモ
ブログ上で動かなかったので、ここでフォームのUp/Downデモ版を公開してます。 IE6、IE7、Chromeで動いてます。 FireFoxは基本的には動いてますが、とセレクトで挙動がおかしいです。

【追記2009/06/11：Safariでも動きました。ちなみにWindows Vistaです】
【追記2011/12/26：githubでソースコード公開してます。
　コードはかなり変わっていますので、githubのほうを参照してください。】

(2)全部入りソースコード

<script language="javascript" type="text/javascript" src="./jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="./jquery.hotkeys-0.7.8.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
var focusElem;  // フォーカスされたオブジェクトそのもの
var jFormElem;  // フォーム内のエレメント一覧（jQueryオブジェクト）
var jFormLeng;  // エレメントの数

$(document).ready( function()
{
// フォーム要素の配列を生成。
jFormElem =
   $( 'form' ).map( function() {
       var ele = $.makeArray( this.elements );
       return ele;
   }).filter( function() {
       if( this.type == 'hidden' ) {
           return false;
       }
       return true;
   }).each( function(i) {
       $(this).attr( 'focusIndex', i );
   });
jFormLeng = jFormElem.length;

// フォームエレメントがフォーカスされたら記録。
$(jFormElem).focus( function() {
   focusElem = jQuery( this );
});
// 要素#0にフォーカスを当てる。
jFormElem.get(0).focus();

// DOWNキーが押された場合の処理。
$(jFormElem).bind( 'keydown', 'down', function( event )
{
   var keyPropagate = true;
   if( !focusElem ) return keyPropagate;
   if( !$(focusElem).attr( 'focusIndex' ) ) return keyPropagate;
   if(  $(focusElem).attr( 'type' ) == 'textarea' ) return keyPropagate;

   var fIndex = parseInt( $(focusElem).attr( 'focusIndex' ) );

   if( fIndex == jFormLeng-1 ) {
       $(jFormElem).get(0).focus();
   }
   else {
       $(jFormElem).get( fIndex+1 ).focus();
   }
   keyPropagate = false;
   return keyPropagate;
});
// UPキーが押された場合の処理。
$(jFormElem).bind( 'keydown', 'up', function( event )
{
   var keyPropagate = true;
   if( !focusElem ) return keyPropagate;
   if( !$(focusElem).attr( 'focusIndex' ) ) return keyPropagate;
   if(  $(focusElem).attr( 'type' ) == 'textarea' ) return keyPropagate;

   var fIndex = parseInt( $(focusElem).attr( 'focusIndex' ) );
   if( fIndex == 0 ) {
       $(jFormElem).get( jFormLeng-1 ).focus();
   }
   else {
       $(jFormElem).get( fIndex-1 ).focus();
   }
   keyPropagate = false;
   return keyPropagate;
});
});
-->
</script>

2009年6月5日金曜日

jQuery::Up/Downキーでフォームを移動、パート4：Up/Downキーイベントを作成

いよいよメインです。上（Up）あるいは下（Down）キーが押されたときの処理です。（１）最初に書いたとおり、hotKeyプラグインを使うとキーのイベントを簡単に書くことが出来ます。

    $(jFormElem).bind( 'keydown', 'down', function( event )
{
 var keyPropagate = true;
 // ・・・イベント処理･･･
 return keyPropagate;
});

見たまんまです。最初に作成していたフォーム内の要素についてキーのイベント処理を書いています。おそらく、こう書くことでフォームの要素のフォーカスがあたっているときだけ、イベント処理が行われるはずです。なお、イベント処理が実行された場合、キーのデフォルトの挙動を阻止しないといけません。そこでキーの処理が行われた場合、「keyPropagate」変数にfalseを設定します。（２）やっとですが、Upキーが押された場合の処理です。

    // UPキーが押された場合の処理。
 $(jFormElem).bind( 'keydown', 'up', function( event )
 {
     var keyPropagate = true;
     if( !focusElem ) return keyPropagate;
     if( !$(focusElem).attr( 'focusIndex' ) ) return keyPropagate;
     if(  $(focusElem).attr( 'type' ) == 'textarea' ) return keyPropagate;
  
     var fIndex = parseInt( $(focusElem).attr( 'focusIndex' ) );
     if( fIndex == 0 ) {
         $(jFormElem).get( jFormLeng-1 ).focus();
     }
     else {
         $(jFormElem).get( fIndex-1 ).focus();
     }
     keyPropagate = false;
     return keyPropagate;
 });

if( $(focusElem).attr( 'type' ) == 'textarea' ) return keyPropagate; テキストエリアの場合は、キーの処理を行いません。
var fIndex = parseInt( $(focusElem).attr( 'focusIndex' ) ); プロパティ：focusIndexの値にはストリングで設定されるようです。このままだと次の配列のインデックスとして使えないのでintに変換します。
if( fIndex == 0 ) { 要素の先頭にフォーカスがあっている場合の処理です。

とまぁ、こんな感じで動きました。 Downキーの場合も似たような処理になります。

2009年6月4日木曜日

jQuery::Up/Downキーでフォームを移動、パート3：フォーカスされた要素を見つける

次はフォーカスされているフォームの要素を見つける方法について。最初は「this.focused();」なんて関数があるとばかり思っていた。ところがフォーカスされた要素を返す関数が無いどころか、要素のプロパティにも現在フォーカスがあたっているかどうか判別できるものが無い！仕方が無い、作るか･･･簡単な動作は以下の通り。

フォーカスを調べたい要素の一覧を作成。
フォーカスがあたった時点で、どこかの変数に要素の情報を記録。

すでに1については作成済み。ちなみに変数名が「jFormElem」。そして2についてもjQueryを使うと非常に簡単に出来た。

// フォームエレメントがフォーカスされたら記録。
$(jFormElem).focus( function() {
focusElem = jQuery( this );
});

簡単に説明すると、

$( jFormElem ) 前もって作成していた要素の配列のそれぞれについて、
.focus( function() { フォーカスがあたったらfunction()で設定されている処理を
focus Elem = jQuery( this ) 「focusElem」という変数に自分自身を保存。 jQuery（）で囲ってあげることで、普通のDOMオブジェクトの「this」をjQueryオブジェクトに変換しています。

という処理になっているはずです。ところがっ！保存したのはいいけれど、結局どの要素だか分からない、という事態になりました。なんと説明していいのやら、保存したオブジェクトのプロパティを見たのですが、要素を特定する方法が無いみたいなのです。「name」とかが近いのですが、ラジオボタンだと同じ名前になってしまいます。そこで、先に作成していた要素の一覧にプロパティを追加することにしました。

    // フォーム要素の配列を生成。
jFormElem =
  $( 'form' ).map( function() {
      var ele = $.makeArray( this.elements );
      return ele;
  }).each( function(i) {
      $(this).attr( 'focusIndex', i );
  });

とこうすることで、focusIndexというプロパティが要素の一覧に追加されます。後は番号を比べれば、どの要素なのかがすぐに分かるという算段です。

「パート4：Up/Downキーイベントを作成」へ続く

2009年6月2日火曜日

jQuery::Up/Downキーでフォームを移動、パート2：フォーム要素一覧

では、jQueryのインストールから。手順は省略。（１）キー入力イベント調べると、キー入力イベントを簡単に扱えるjQueryプラグイン：hotkeysを発見。簡単にUp/Downキーが押された場合の処理が書ける。（２）HTMLが読み込まれたときにJavaScriptを走らせる。

$(document).ready( function() {}

これでHTMLが読み込まれたときにJavaScriptを走らせられる。 <body onload="javascript:...">と書く方法は知っていたが、色々と面倒だった。これなら、どこにでも、そしていくつでも書けるので便利。また変数のスコープが関数内に限られるため、さらに便利らしい。他にも書き方があるらしい。（３）フォーム内の要素を一覧にする。

$( 'form' ).map( function() {
var ele = $.makeArray( this.elements );
return ele;
});

このページで見つけたコード。自分なりに読み解いてみました。

this.elements 最初はjQueryかと思いましたが、どうやらJavaScript標準の動きでした。フォーム内の要素を一覧で返します。ここの「this」はフォームを指定しています。
$.makeArray 要素の一覧を配列に変換しています。また、「ele」はjQueryオブジェクトの配列として保存されます。
$( "form" ).map フォームが複数存在する場合に対応するため、map関数で配列を集約している（？）みたい。

（４）以上をくっつけると、

<script language="javascript" type="text/javascript" src="../scripts/jquery-1.3.2.js"></script>
<script language="javascript" type="text/javascript" src="../scripts/jquery.hotkeys-0.7.8.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
var jFormElem;  // フォーム内のエレメント一覧（jQueryオブジェクト）
var jFormLeng;  // エレメントの数

$(document).ready( function()
{
// フォーム要素の配列を生成。
jFormElem =
$( 'form' ).map( function() {
var ele = $.makeArray( this.elements );
return ele;
});
jFormLeng = jFormElem.length;
}

ふぅ～。まだ続きます。

「パート3：フォーカスされた要素を見つける」へ続く

jQuery::Up/Downキーでフォームを移動

お客さんからUp/Downキーを使って、HTMLのフォームを移動したいという要望が出てきた。多いと100件近くの入力を行う日があるらしく、少しでも楽に入力したいらしい。ということでウェブを調べたが、大体こんな感じ･･･

キー入力をイベントでキャッチ。
Downキーなら、代わりにTABをイベントとして発行。
Upキーなら、代わりにShift+TABをイベントして発行。
が、しかしながら！現状では「Shift」をイベントとして発行できない。

というところで終わっていた。ということで自作してみることにした。基本的な方向性としては、以下の手順でフォームの移動を行う。

フォーム内の要素の一覧を作成。
現在、フォーカスされている要素を保持。
Downキーが押されたら、現在フォーカスされてる要素の次の要素にフォーカスを当てる。
Upキーが押されたら、･･･以下略。

こういうことを実行するにはjQueryが最適だろうということで、jQueryを使って開発することにした。実際に作ってみて、やっぱり「jQueryはすごい」ということがよく分かった。ということで、次は実際のコードと簡単なコードの説明をしてみます。正直、JavaScriptもjQueryも初心者のようなものなので、間違い・訂正･改善方法などご指摘いただけると助かります。

「パート2：フォーム要素一覧」へ続く

登録: 投稿 (Atom)