AI対戦型オセロゲームが「ベストコンテンツ賞」を受賞しました。

2010/07/01 01:05

『マイコミジャーナル』『Web Designing』主催コンテスト「Microsoft WebsiteSpark サイト&コンテンツギャラリー」へエントリーしていたAI対戦型オセロゲームが「ベストコンテンツ賞」を受賞しました。

詳しくは → http://news.mynavi.jp/news/2010/06/30/058/index.html

JavaScript冗長回避、性能改善の常套手段 - 初心者向け

2010/04/28 08:21

プログラミングにおける冗長回避、性能改善において力を発揮するコーディング手法を以下に記載します。

オブジェクト指向のコンパイル言語プログラムを書く人にとっては、性能面も踏まえ、作法として当たり前の事なのですが、

JavaScriptはウェブデザインと言う分野においてデザイナ/プログラマーの垣根なく使われる言語なので、コーディング作法や性能まで考えてプログラミングされていることが少ない気がします。

処理が短く簡易であるから良いものの、性能が全く出ていないであろうソースを沢山みます。

document.getElementById("id").~
document.getElementById("id").~
document.getElementById("id").~

なんて書いてプロパティセットしていくのはあまりに冗長ですし、毎回DOMでアクセスする分性能がでません。

var e = document.getElementById("id");
e.~
e.~

とすることを推奨します。

これによって、DOMでのアクセスは最初の1回のみになります。更にeとかくだけでよいのでコーディングの冗長さも断然減りますしね。

 

そして、document.getElementByIdなんて何度も使うことになると思います。こういった場合は、あらゆる有名なフレームワークでも実装されていますが、

var $ = function(id) {
    return document.getElementById(id);
}

なんていうオブジェクトを共通ライブラリで用意しておけば、

var e = $(id);
e.~
e.~

と書くことができます。

document.getElementById("id").~
document.getElementById("id").~
document.getElementById("id").~

var e = $(id);
e.~
e.~

になりました。如何でしょうか?

JavaScriptによるdrag&drop(ドラッグドロップ)

2010/04/27 05:19

JavaScriptによるドラッグアンドドロップは結構人気がありますが、全てのブラウザでまともに機能するソースはウェブ検索ではあまり出てこない様なので、以下に記載しておきます。

ご自由にコピーしてお使い下さい。

呼び出し方法は dragDrop.attach('ドラッグドロップ機能を付加したいエレメント'); です。

/*--ここから--*/

var dragDrop = {
    element:
        null
    ,
    mouseOffset:
        null
    ,
    mouseCoords:
        function(evt){
            if(evt.pageX || evt.pageY){
                return {x:evt.pageX, y:evt.pageY};
            }
            return {
                x:evt.clientX + document.body.scrollLeft - document.body.clientLeft,
                y:evt.clientY + document.body.scrollTop  - document.body.clientTop
            };
    }
    ,
    getMouseOffset:
        function(e, evt){
            var ev = evt || window.event;
            var ePos = dragDrop.getPosition(e);
            var mousePos = dragDrop.mouseCoords(ev);
            return {x:mousePos.x - ePos.x, y:mousePos.y - ePos.y};
    }
    ,
    getPosition:
        function(e){
            var elm = e;
            var left = 0;
            var top = 0;
            while (elm.offsetParent){
                left += elm.offsetLeft;
                top += elm.offsetTop;
                elm = elm.offsetParent;
            }
            left += elm.offsetLeft;
            top += elm.offsetTop;
            return {x:left, y:top};
    }
    ,
    mouseMove:
        function(evt){
            ev = evt || window.event;
            var mousePos = dragDrop.mouseCoords(ev);
            var e = dragDrop.element;
            if(e){
                e.style.position = 'absolute';
                e.style.top = mousePos.y - dragDrop.mouseOffset.y + "px";
                e.style.left = mousePos.x - dragDrop.mouseOffset.x + "px";
                return false;
            }
    }
    ,
    mouseUp:
        function(){
            dragDrop.element = null;
    }
    ,
    attach:
        function(e){
            if (!e) {
                return;
            }
            e.onmousedown = function(evt){
                dragDrop.element = this;
                dragDrop.mouseOffset = dragDrop.getMouseOffset(this, evt);
                return false;
            }
    }
}
document.onmousemove = dragDrop.mouseMove;
document.onmouseup = dragDrop.mouseUp;

/*--ここまで--*/

※ ドラッグアンドドロップ対象のエレメントの親がdocumentではなく、親要素のエレメントであった場合、getPositionのwhile文をコメントアウトして下さい。