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

jQuery Validation で特定のイベントに対してだけバリデーションを無効にする方法が分からなくて困ってた。例えばフォームの中の送信ボタンではなくキャンセルボタンが押されたときにはバリデーションを行わずにフォームを送信したいということがあると思う。

調べていたら以下の記事がひっかかった。

input タグの class に "cancel" を指定すれば validate されないとある。ほかに、ボタンの click イベントとかで

$("form").validate().cancelSubmit = true;

と書いてやっても良いみたい。こちらは JavaScript で form を submit() するタイプのやつにも使えて使い勝手良さそう。

jQuery Validation 、便利だけどドキュメントが充実してなくてつらい。あとどれが公式か分からないのもつらい。去年くらいまで jQuery Plugin のサイトにドキュメントあった気がしたんだど今は別のサイトに単独で存在してる。

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

まえ作った Amazonの検索結果が新規ウィンドウで開かれるのを殺すユーザースクリプト が Amazon の HTML 変更により動かなくなってたので更新した。Amazon 見てたら無限に新しいタブが開いていく現象にお困りの方はご利用ください。

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

I know why you came here. BECAUSE IT'S HARD TO FIND CONTENT IN GITHUB WIKI!!!

Here is a solution.

My colleague Tomohisa created a nice userscript. It provides you an ability to search GitHub Wiki in pretty easy way.

Install the script from his GitHub repository. It's compatible with Firefox (with Greasemonkey, of course), Google Chrome and Safari (with Nijakit).

Then you will find search box on right above "Page History" button.

1.png (640×457)

2.png (640×457)

Now search all the wiki content with github-wiki-search.user.js!

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

Amazonの検索結果画面で、個別商品URLへのリンクが target="_blank" 指定となっていてうざかったので target="_self" と置き換えるユーザースクリプトを書いた。

地味に便利。

Amazon target killer

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

あけましておめでとうございます。なんか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では動かないと思います。ここのサイトを参考にさせてもらいました。