buggy_trekkerの学習帳

2009-10-24

JavaScript による 3 state button

22:06

[JavaScript]

今日は時間があるので久々にJavaScriptのお勉強。

JavaScript本の方はまだ半分ぐらいしか読んでいないけれど、読んでばっかりだと理解が浅いし面白くないのでコードを書いてみた。

マウスオーバーした場合とそうじゃない場合で画像を変えるスクリプトが掲載されていたので、これとトラックバックされていたエントリを参考に"3 state button"に挑戦。

要するに、マウスオーバー、クリック時に画像が変わるようにするわけですね。

参考にしたのは下記のページ

ソースがシンプルなJSによるロールオーバー - CSS HappyLife 2 state buttonのコード
JavaScriptメモ(３)：しんぷるロールオーバー（追記：2007.6.29） | Le Arche JavaScriptにおける変数のスコープや寿命、Listenerの使い方
JS でロールオーバー - IT戦記プレロードの方法

簡単だと思っていたけれど、JavaScriptの変数の寿命とスコープについて分かっていないことがたくさんあって、だいぶ勉強になりました。

コードを公開している皆様に感謝です。

JavaScriptによる3 state buttonの実行例

ソースコード

(function(onLoad) {
   if(window.addEventListener) window.addEventListener("load",   onLoad, false);
   else if(window.attachEvent) window.attachEvent     ("onload", onLoad);
}) (
    function() {
        var result;
        var images;
        var image;
        function preLoadAndCreateFunction(name, filename)
        {
            var preload = new Image();
            preload.src = filename;
            return function() { this.setAttribute(name, filename); }
        }

        if(document.getElementsByTagName) {
            images = document.getElementsByTagName("img");
            for(var idx = 0; idx < images.length; idx++) {
                image  = images[idx];
                if(result = image.getAttribute("src").match(/(.*_)off(\..*)/i)) {
                    image.onmouseover = preLoadAndCreateFunction("src", result[1] + "on"    + result[2]);
                    image.onmouseout  = preLoadAndCreateFunction("src", result[1] + "off"   + result[2]);
                    image.onmousedown = preLoadAndCreateFunction("src", result[1] + "click" + result[2]);
                    image.onmouseup   = preLoadAndCreateFunction("src", result[1] + "on"    + result[2]);
                }
            }
        }
    }
);

コメントを書く

2009-10-04

エントリの読みにくさ

19:44

さっき書いたエントリが見にくい。

絵もなく見出しもなく、文章がただドカッと並べられているからのような気がする。

リンクも丸出しだし。ハテナ記法に[]でURLを囲めば自動的にページのタイトルを拾ってきてそれを表示してくれる機能があるらしい。Wikiみたいだけど、自動的にタイトルを拾ってきてくれる分こっちの方が便利だなあ。それとも僕が知らないだけでWikiの記法にもそういうのがあるのかも。

サンシャイン牧場（mixiアプリ）

19:27

マイミクがmixiアプリの”サンシャイン牧場”というゲームを勧めてきたのでやってみました。

内容はシンプルで、やりこみ的要素が多いわけではないのでゲーマーには物足りない感じだったけれど、ゲームとかほとんどやったことない人には敷居が低くて楽しみやすいのではないかと思いました。

ゲームとして簡単、食料を育てるというわかりやすい目的、敬遠したくなるサブカルチャー的要素がない、というのが特に敷居が低い理由かなあ。

しかも、ゲームの進行に時間の経過が必要なところとか、他のユーザーと関われるところとか、ネットゲームとしての要素もあって感心しました。実はこれがネットゲーム初体験。まさかmixiでネトゲ初体験になるとは夢にも思っていませんでした。

まだmixiアプリの仕組みを全然知らないのでなんともいえないのですが、きっと外部にゲームの情報を保存しておくサーバを用意してmixiアプリからそこにアクセスしているのでしょう。データの保持以外のほとんどの処理はクライアント側でできそうだから、Google App Engineとか使って無料で構築することもできるのかなあ?

JavaScript本はほとんど読み進めてないのですが、この”サンシャイン牧場”のmixiアプリのxmlを読んでみようというページを見つけました。mixiアプリではJavaScriptを使うことが多いのでサンプルとして読むのが楽しそうです。

http://mixiap.info/2009/06/18/mixi%E3%82%A2%E3%83%97%E3%83%AA%E4%BD%9C%E6%88%90%E5%85%A5%E9%96%803-mixi%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AExml%E3%82%92%E8%AA%AD%E3%82%93%E3%81%A7%E3%81%BF%E3%82%8B/

他にも"サンシャイン牧場用のミクシーアプリを作ってみた"というエントリも見つけてさっそく試してみました。こういう風に楽しく勉強できるエントリを作ってくれている人がいるというのはありがたいことです。実際に動いているソースコードを読ませてもらうと理解がすすむ気がします。

http://d.hatena.ne.jp/kenkitii/20090929/p1

コメントを書く