Simple@Idx 2009/12/26

今年最後になるかもしれない、Simple勉強会＠Idx。
今回も、crud_sessの続き。

Simple@Idx 2009/12/12

今年最後のSimpleミーティング。
内容は、
◆jQueryでフォームのUp/Down
◆PHPでセッション使ってDBのCRUD
◆CentOSがインストールできないよ

MySQLでサブクエリ（エラー#1093を回避する方法）

MySQLでもサブクエリーが使えることを思い出して、とあるプロジェクトで使ってみることにした。さくっと、以下のようなSQLを書くと･･･

INSERT INTO exam ( type, code ) VALUES ( 
'A', ( 
    SELECT IFNULL( MAX( code ) + 1, 1000 ) 
    FROM exam WHERE type='A' )
);

#1093 - You can't specify target table 'exam' for update in FROM clause

と怒られてしまった。
正直な話、SQLは得意というわけではないので、 最初はやっぱり無理？と思ってしまった。

が、気を取り直して「mysql 1093」でググってみると、答えのページを発見。MySQLだからではなく、SQL標準から見ても間違った構文なんだそうだ。

jQuery::Up/Downキーでフォームを移動、パート６：テーブル用とデバッグ用コード

前回のSimpleで発表したテーブル用のサンプルですが、アップしました。
http://www.workspot.jp/tech/formupdnTable.html

ctrl＋up/down/left/rightキーを使って、テーブル内を自由に上下左右に動き回れます。コードは直接HTMLを見てください。
ま、グローバル変数使いまくりのコピペなコードですが、初めてのJavaScript/jQueryということで勘弁してください。

Simple@Idx 2009/10/24

今日のシンプルは3人。
のんびりと、おいしいサツマイモを食べながらコーディング・・・
今日の作業内容は・・・
－formUpDnのコンセプト画面
－FireFoxで問題が出るのでバグレポートを提出したい
－久々にCのコードを見たよ

FireFoxアドオン：Google Toolbarインストールでエラー#-203

古いPCのFireFoxをアップデートして、
ついでにGoogle Toolbarもアップデートしたらエラーが出た。

エラー番号は：-203

でした。
で、ググって見ると、英語のページしかヒットしなかったのでログしてみます。参考にしたのはこのページ。

Simple@Idx 2009/9/26

作業ログ
－FoxServアンインストール　→　Xamppインストール
－jQueryでformUpDn（オブジェクト化）

PHP::symfony 1.2 を勉強中･･･４～７日目

Jobeetチュートリアルも、いよいよPHPコードをいじくる4日間。
モデル、ビュー、モジュール、テンプレート、そしてconfigの間を行ったりきたり。

今まで開発はDreamWeaverで行ってきたけど、ここにきて限界がきた。
早速Eclipseをインストール。

というか、PHP Development Tools（PDT）という便利なのがあるんですね。
昔TruStudioとか試したことはありましたが、いつのまにか進んでます。
ありがたいです。

が、ZendDebuggerが動かない。
う～ん、debugテストは通るのだけど、ブレークポイントが利かない。
後で原因を探ることにして、Jobeetチュートリアルを進めます。

PHP::symfony 1.2 を勉強中･･･１～３日目

symfonyを勉強中。

◆まずはXAMPPを使ってローカルに環境を整える。

えぇと、すでにXAMPPを使っているのでアップグレード･･･
が、動かない。

仕方が無いので最新のxamppliteをインストール。
このままだと動かないので、既存のXAMPPのApacheを停止。
その後、xamppliteのxampp_control.exeからApacheをスタート。
これで最新のXAMPP、つまりPHP5.3.0が使えるようになりました。

◆Jobeetチュートリアル

PHP：：sprintf 引数の番号付

前から使ってみたくても動かなかったのが
PHPのsprintf関数の引数の番号付

という機能。

PHPのマニュアルに書いてあるのだけど、
どうも動かなかった。

動かないなぁ、変だけど、まぁいいや、
と使わないでいたが、原因が分かった。
教えてくれたのは、このページ。

Simple@Idx 2009/8/29

シンプルインデックス＠２００９年８月２９日
まずはラップトップ、じゃなくてノートブックの電源をオン。
出掛けに
「仕事に行ってきます」
と娘に言ったので、これで約束は果たしたぞ、と。

で、jQueryでフォームのアップ・ダウンの続き。
JavaScriptのオブジェクトを勉強。
JANさんからJSのオブジェクトの話を教わる。

ファイルの圧縮で改行コードが変わる？

まさかね。 そんなはずはない、と思ってました。 でも、この改行コードと圧縮についてのエントリーを読んで、 もしかしてと思い立ち、調査したんです。 そうしたら、圧縮→解凍して、改行コードが変わる場合を見つけました。 まだ調査中なのですが、以下のような条件です。

1. あるテキストファイルは、改行コードが「LF」と「CR+LF」で混在している。
2. このファイルをWindowsXP上で圧縮。
3. 圧縮したファイルを別マシーン（これもWindowsXP）で解凍。
4. するとファイルの改行コードが「CR+LF」に統一される。

という現象です。 この後調べて、

• 解凍は「解凍レンジ」というフリーソフトを使用している。 多分、圧縮はWindows XPの機能を使っている。
• で、圧縮したファイルを、 WindowsXP上で解凍レンジで解凍すると改行コードが変わる。 でもVista上で解凍レンジで解凍しても改行コードは変わらない。
• 両方ともバージョンは1.40　（最新が1.41なので少し古い）。

ということが分かり、「Windows XP上で解凍すると改行コードが化ける」事例を見つけました。 さて、どうしましょう？ やっぱりWindowsXPを使うのをやめるか？ まずは、改行コードを統一すべきだよな。

やった～、85点

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

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の皆様。

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>

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キーの場合も似たような処理になります。

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

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

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

すでに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キーイベントを作成」へ続く

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;
});

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

1. this.elements 最初はjQueryかと思いましたが、どうやらJavaScript標準の動きでした。フォーム内の要素を一覧で返します。ここの「this」はフォームを指定しています。
2. $.makeArray 要素の一覧を配列に変換しています。また、「ele」はjQueryオブジェクトの配列として保存されます。
3. $( "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件近くの入力を行う日があるらしく、少しでも楽に入力したいらしい。 ということでウェブを調べたが、大体こんな感じ･･･

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

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

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

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

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

Simple.Indexに参加

この土曜日、セサミさんのところで開催されているSimple.Indexに参加してきました。 参加というか、気になっている仕事以外の作業を行って、お互いに発表、というのが趣旨。 自分はjQueryのコーディングをしようと、ラップトップ持っていった。 TABを使ってHTMLフォームを移動するのように、矢印キーの上と下を使いたい。 というのが内容。 【追記：ブログで書きました（2009/06/05）】 しばらく作業しているうちに、ラップトップがブルースクリーン連発。 あれ？動かなくなったとおもうとブルースクリーン。 「ブルースクリーンなんて、最近見ないなぁ」 「多分ハードの問題でしょうね」 「HDDが原因じゃないですかね？」 「メモリなら一発で飛びますものね」 「多分HDDドライバーが飛んだんでしょう」 「そうみたいですね～」 とほとんど状況を説明することなしに、（僕の反応だけで）原因を解析してゆく他の参加者たち･･･ 「あぁ、このサイトでHDD換装してますよ」 と次々と情報も入ってくる。 いや～、故障するにはいい場所だったかも。 でも、タイミングがまずい。 来月はお客さんのサポートが入るかもしれない月。 ラップトップが無いと困る。 ま、飲んでいるうちに、いいアイディアでも浮かぶでしょう。 そんなこんなで楽しい土曜日を過ごせました。

少しは勉強しないと･･･

仕事が順調に進んでいるとき、 次々といいペースで締め切りが続いているとき、 目の前の仕事を片付けることに集中してしまい、 勉強しなくなります。 頭のどこかで、勉強しないとまずいなぁと思ってますが、 根が面倒くさがりなので先延ばししてしまいます。 さて、金融危機。 やってきましたよ、小さなSOHOのところまで。 締め切りのある大きなプロジェクトがなくなりました。 次のプロジェクトは決まってませんが、いくつか見積もりは出しているので、どれかは通るでしょう。 おかげさまで最近は暇です。 まぁよい機会と考えて、勉強しようというわけですね。 この業界は進歩が早いので、気をつけないといけないですし。 でも、こんな話は妻には出来ないなぁ。

ブログについて

まともな仕事のブログを始めることにしました。 内容はウェブ開発（PHP、JavaScriptなど）、 仕事で思ったことなど。