| @技術/プログラミング

あけましておめでとうございます。なんか2010年後半は転職とか引っ越しとかあってあまりここに記事を書けなかったのが残念です。Rubyとか全然さわってねーし、JavaScriptも忘却曲線の彼方。というわけで2011年一発目はJavaScriptについて。

AutoPagerize対応なページで、読み込まれた2ページ目以降でもJavaScriptを動かす方法について調べてみた。oAutoPagerizeのos0xさんのページでまとめられてる。

いちばん手っ取り早そうだったので、以下のような書き方をした。

if (window.AutoPagerize) {
  window.AutoPagerize.addFilter(fucintion(){
    // 実行したい処理
  });
}

ただ無名関数は呼び出せないので、二回書かなければならなくなる。これはアホっぽい。関数リテラルにして呼び出し用に function init() みたいのを書き、その中から呼び出せばよい。そしてその init() を上記 // 実行したい処理 内にも書いてあげればオッケーだ(もちろん window.onload で呼び出す必要もある)。

jQueryについては live() というメソッドがある。これは動的に生成された要素にも処理を適用してくれる非常にありがたいメソッドだ。しかし個人的な事情で、 live() というメソッドと一緒に、処理を一度しか実行しないというメソッド one() も適用している要素があり、これを二つ両立するのがjQuery的に無理っぽい。単純に処理実行のフラグを作って処理を分ければいいんだけど、これにもjQuery的なかっこいい書き方があることを知った。ネタもとはこちら。

$('処理を適用したい要素').live('click', function(e) {
  if($(e.target).data('oneclicked')!='yes')
  {
    //Your code
  }
  $(e.target).data('oneclicked','yes');
});

jQuery().data() 、なかなか便利そうだ。

| @技術/プログラミング

二月末に行ったスマートフォン開発環境セミナー(仮)でmasuidriveさんのTitanium Mobileについての発表を見てすっかり感化された。これからはJavaScriptで空を飛べる時代が来ると思った。

ドイツの会社がやってるToDo管理のサービスにWunderlistってのがあって、これは結構かっちょいUIのiPhone/Mac/PC/Webアプリを出してたりする。なんでそんなにマルチプラットフォーム対応できんの? と思ってたらどうもTitanium MobileとTitanium Desktopを使ってるみたい。だから簡単にマルチプラットフォーム対応できてるわけ。他にもThe Hit Listが一向にiPhoneアプリを出さないのでそれに業を煮やしたSenchaの社員が作ったHub ListっていうアプリもJavaScriptでデスクトップアプリを書いててマルチプラットフォーム対応してる。

しかし、なんかTitanium Desktop使って僕みたいなスキルしょぼい人がアプリ作るときじゃくせい(なぜか変換できない)を突かれて困ったことになる懸念もあるみたい。

とはいえ、最近プログラム書き始めたばっかでObjective-CとかJavaとか分かんない自分には、JavaScriptでiPhone/Androidはもちろんのこと、MacやWindows、はてはLinux向けのデスクトップアプリケーションが作れてしまうのTitanium MobileとTitanium Desktopにはとてつもない魅力を感じる。

連休期間中にしょぼいのでいいからなんか一個作りたい。

| @技術/プログラミング

みなさん、クリッカブルマップしてますか? あんなくそみたいなもの使って地図をつくるなんて発狂しそうなこと、ここを読みそうな人はやってないと思いますが、僕の職場のお客さんとか上司は「Google Mapsには心がこもってない」とか言うので、クソみたいイラストをクリッカブルマップにして地図を作ってるんですよ。まじでかわいそうな僕ちゃん。

ご存じない方のためにクリッカブルマップの作り方を説明しておくと、まず画像を作り、それをHTMLに貼り付け、HTMLオーサリングツール(うちの職場ではDreamWeaver)のGUIエディタでちまちま画像上のクリッカブルにしたい位置を選択するという、血尿が出そうなくらい面倒くさい作業を強いられます。

最悪なことにこのクリッカブルマップのあるページ、頻繁に更新依頼が来るのですよね。依頼が来る度に就業時間中の快適なネットサーフィンが妨げられるので、一発JavaScriptを書いて画像上の座標を取得することにしました。いちいちクソみたいに重いAdobe DreamWeaverとか立ち上げてられるか。

コードはこんな感じ。

<html>
  <head>
    <script>
      function getPosition(){
        var x, y;
        var image = document.getElementById('image');
        image.onclick = function(e) {
          x = e.layerX;
          y = e.layerY;
          document.getElementById("pointX").value = x;
          document.getElementById("pointY").value = y;
        }
      }

      window.onload = getPosition;
    </script>
  </head>
  <body>
    <div>
      <img src="path/to/image" id="image" style="position: absolute; top: auto; left: auto; width: 500px; height: 332px" />
    </div>
    <form action="/" method="post">
      <input type="text" id="pointX" name="pointX" value="" />
      <input type="text" id="pointY" name="pointY" value="" />
      <input type="submit" value="発射!" >
    </form>
  </body>
</html>

Firefoxでしか動作確認してないけど多分IEでは動かないと思います。ここのサイトを参考にさせてもらいました。

| @技術/プログラミング

こういうコード書いてます。

function getAttrName(attrObj) {
    var attrName = attrObj.firstChild.data;
//  items = document.getElementsByClassName('item');
    var items = $('li.item');
    $(items).fadeOut('slow');
    for (var i = 0; i &lt; items.length; i++) {
    //  var keywordList = items[i].getElementsByClassName('keyword-list');
        var keywordList = $('.keyword-list', items[i]);
        for (var j = 0; j &lt; keywordList.length; j++) {
            //var keywords = keywordList[j].getElementsByTagName('li');
            var keywords = $('li', keywordList[j]);
            for (var k = 0; k &lt; keywords.length; k++) {
                if (attrName == keywords[k].textContent) {
                    $(items[i]).fadeIn('slow');
                }
            }
        }
    }
    getCurAttr(attrName);
}
function getCurAttr(attrName) {
    var curAttr = $("#keySelector li a");
    for (var l = 0; l &lt; curAttr.length; l++) {
        if ($(curAttr[l]).text() == attrName) {
            $(curAttr[l].parentNode).addClass('current-keyword');
        } else {
            $(curAttr[l].parentNode).removeClass('current-keyword');
        }
    }
}

やりたいことは以下のような感じ。

  1. onclickで attrObjgetAttrName に渡される
  2. クリックされた文字列を attrName に格納
  3. すべての item をjQueryを使って非表示
  4. item の中の ul.keyword-list li 内のテキストに一致したらjQueryで表示

Firefox/Safari/Operaでは問題なく動く。しかしIEが全滅。最初は getElementByClassName とか使ってるからかと思ってたけど、その辺のやつをコメントアウトしてjQueryセレクタを使ってオブジェクトを取得するようにしてもダメ。なんかループの処理とかが怪しいんじゃないかと思ってる。ループ処理もjQueryに書き換えようかな。

ブラウザ間の挙動の違いを吸収してくれるライブラリはまじですごいしありがたいのですが、結局IEちゃんでは動かせない。歯がゆいな。

サーバーサイドで実装する方法もないではないけど、

  1. いじる部分が広範囲になりめんどい(新たなバグが発生するかも)
  2. 大した機能じゃないのに大手術したくない
  3. ずっとPHPばっかり触ってるのはつまらん

などという理由により期限ぎりぎりまでJavaScriptで粘ってみたいです。

追記

"Twitterでcxxさんに教えてもらった":http://twitter.com/cxx/status/13545498622 んだけど、IEにはtextContetはないそうです。恥ずかしい。

そういうわけで

var keywords = $('li', keywordList[j]);

var keywords = $('li a', keywordList[j]);

とし、

if (attrName == keywords[k].textContent)

if (attrName == keywords[k].firstChild.data)

にしてみたところ、ばっちりIEで動くようになった。

cxxさんありがとうございます。今度焼き肉デートしましょう。