inside job: 2011

2011年12月25日日曜日

複数列のセレクトボックス～そう見えれば、それは本物よ～

だれがセレクトボックスは1列だって決めたの？

たしかにそうね。
あなたが与えられたものを全てだと思い込んでるなら、
そういうことになるわよね。

こんな感じで、1列しか表示しない。
ええ。たしかに。

女の化粧は詐欺かしら？

私はそうは思わない。
自分を表現するための手段よ。
なら、セレクトボックスもおんなじ。
自分の可能性を広げるために、そういう風にしちゃえばいいのよ。
たとえば、こんな風に。

そう見える。ただそれだけなの。

方法は単純。
（１）セレクトボックスのoptionを全部とりだす。
（２）ひとつずつoptionの値をdivに設定していく。optionのvalueはdivにvalue属性なんかを勝手につけて。
（３）それをm行ずつ作って、列divで囲む。
（４）列divを左からfloatさせて、wrapperのdiv内に順番に配置する。
ただこれだけで、見かけは完成。

振る舞いもそれらしくね。

でも、見かけだけちゃ簡単にあきられちゃう。
それなりに振る舞いなさい。
（１）mouseoverされたら背景が紺色になって、mouseoutされたら背景が白色になる。
（２）クリックされたら、一倍外部のwrapperのdivを消去する。
（３）クリックされた要素が選択された状態にする。

これが私のやり方

2011年12月20日火曜日

追記できるセレクトボックス～はんぐりーな僕たちへ～

与えられただけじゃ物足りない！

もっと、はんぐりーなんだ僕たちはっ（°Д°）！
そんな僕たちにぴったりなのが、
ダブルクリックすると追記できるセレクトボックス。

サンプルを示す

何より、サンプルみたらすぐわかるので。
こんな感じ↓↓

セレクトボックスをダブルクリックするか、
セレクトボックス上でキーボードを押す。

どうやって作ってるのか

作り方は単純で、
（１）セレクトボックスのダブルクリックのイベントに、
『テキストボックスを表示して、セレクトボックスを隠す』処置を設定する。
（２）そのテキストボックスからフォーカスが外れたら、
そのテキストボックスの中にあった文字をセレクトボックスの末尾に追加
（selectのoptionを生成して、selectに追加）
あとはテキストボックスを削除。

っていうだけ。

ソースを眺める。

ソースは↓↓こんな感じ。

/**
 * 追記可能なセレクトボックスを生成する。
* 目的のセレクトボックスのイベントにこの関数を追加することで、
* そのセレクトボックスに当該イベントが発生したとき
* テキストボックスを表示する。
* そのテキストボックスからフォーカスがはずれれば、
* 目的のセレクトボックスに、
* テキストボックスに入力された値が追記されている。
* 
 * @example 
 * var prefecture= document.getElementById("prefecture_id");
 * prefecture.addEventListener("dblclick", addEditableSelect, false);
 * 
 */
function addEditableSelect(){
    var newOptionText;
    // テキストボックス生成
    newOptionText = document.createElement("input");
    newOptionText.type = "text";
    newOptionText.value = "";
    newOptionText.style.width = "100px";
    // フォーカスが外れたとき（２）の処理
    addEvent( newOptionText
            , "blur"
            , (function(elm, pSelect){   
                return function(){
                           addTextValueToSelect(elm, pSelect);
                       }
            })(newOptionText, this));
    this.parentNode.appendChild(newOptionText);
    newOptionText.focus();
    this.style.display="none";
}

/**
 * テキストボックスの値を、セレクトボックスに追加する。
* optionもvalueも同じ値である。
 * 
 * @param {Object} textValue テキストボックスオブジェクト
 * @param {Object} originalSelect セレクトボックスオブジェクト
 * 
 * @example 
 * addTextValueToSelect(newOptionText, pSelect);
 * 
 */
function addTextValueToSelect(textValue, originalSelect){
    if (textValue) {
        var addedOption;
        if (textValue.value != "") {
            // テキストボックスに入ってた値を、セレクトボックスの末尾に追加。
            addedOption = document.createElement("option");
            addedOption.value = textValue.value;
            addedOption.appendChild(document.createTextNode(textValue.value));
            addedOption.style.backgroundColor = "#f0f0ff";
            addedOption.selected = true;
            originalSelect.appendChild(addedOption);
        }
        textValue.parentNode.removeChild(textValue);
        originalSelect.style.display="inline";
    }
}

function initializeSelect(){
    var prefecture= document.getElementById("prefecture_id");
    // ダブルクリックのイベントに追加。
    addEvent(prefecture, "dblclick", addEditableSelect);
    // キーボードを押したときのイベントにも追加。
    addEvent(prefecture, "keypress", addEditableSelect);
}

var addEvent = (window.addEventListener ?
               function(element, type, func) {
                   element.addEventListener(type, func, false);
               } :
               function(element, type, func) {
                   element.attachEvent('on' + type, func);
               });
addEvent(window, "load",initializeSelect );

まあ、たしかに。

セレクトボックスか、テキストボックス
をならべて表示して、
どっちの値を採用するのか
サーバ側で判断してもいいんですけどね。

2011年12月19日月曜日

SQL Serverのデフォルトの分離レベル

はじめに

DBのトランザクションの分離レベルのお話です。
隔離性とも言うみたいです。
トランザクションACID特性の”I”のIsolationの部分ですね！

分離レベルといえば、

”同時に実行されたトランザクションがどれだけ影響を及ぼさないか”
を表しています（°Д°）
『Read Uncommited』、『Read Commited』、『Repeatable Read』、『Serializable』
があります。

たとえば、

Serializable（直列化可能とでも）なら、
同時に実行しても、まるで一直線にトランザクションが並べられたように、
まったく影響を与えません。
でも、これだと負荷がかかるので、
通常、必要としているレベルを設定して、DBへの負担を軽減します。

MySQLのInnoDBの場合

たとえば、MySQLのInnoDBで、
インストール仕立てのデフォルトはRepeatable Readです。
（この調整はmy.cnfの[mysqlId]で、
transaction-isolation = SERIALIZABLE等々として設定できます。）

じつはSQL Serverでは...

今回お話したいのは、SQL Serverのトランザクションの分離レベルのことです。
じつは意外なことに（僕にとってはｗｗ）デフォルトではRead Commitedなんです！
（SQL Server2005と2008で確認）

DBCC USEROPTIONS;

を実行してみてください。

isolation lever read committed

と表示されるはずです。

実務でRead Commitedだと、

Read CommitedだとデータのIDを取得するキーテーブルで、
同じIDを発行してしまうことがありえるので注意です！
（更新するか、破棄されるのか分からないのに、更新前の値を読んでしまうことがありえます。）

ちなみに分離レベルの設定は、

SET TRANSACTION ISOLATION LEVEL REPEATABLE READ;

でできるみたいです。

はじめました。

今日から

技術系が中心になると思います。
PHP、SQL、HTML、JavaScript等々Web系のエンジニアです。
どうぞ、よろしく☆