sukechan.net

とあるグリモンを作っていて、JSONP をサポートしている API にリクエストを投げて、Callback 関数で結果を受け取りたい。例えば以下のような URL。

http://example.com/api?data=hoge&callback=fuga

無名関数内でこの JSONP を呼び出しても fuga は当然実行されないので、グローバルにオブジェクトを 1 つ作り（名前空間的なものです）、その中に Callback 関数を定義してみました。
Safari ではちゃんとグローバルになるんですが、Firefox ではグローバルにならず。
原因が分からずいろいろ調べてみたところ、Greasemonkey として実行される場合、前後に (function() { ～ })(); が付くらしい（Safari では付かない）。

次に、Callback パラメータ内にイベントを作成して、Callback 時にイベントを発生させられないかと思って試してみましたが、こちらは Safari で結果を受け取る方法が分からず断念。

(function() {

  // Callback
  document.addEventListener("onJSONPLoad", function(request) {
    alert('callback');
  });

  // JSONP 実行
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.charset = 'UTF-8';
  s.src = 'http://example.com/api?data=hoge&callback=(function(result){var%20c=document.createEvent(%22HTMLEvents%22)%3bc.initEvent(%22onJSONPLoad%22,true,true)%3bdocument.dispatchEvent(c)%3b})';
  document.body.appendChild(s);
})();

仕方ないので、script タグを動的に生成して、グローバルに 1 つ名前空間を作り、その中に関数を定義。

(function() {

  // JSONP 実行
  var s = document.createElement('script');
  s.src = param.url + '&callback=my_ns.json_callback';
  s.charset = 'UTF-8';
  document.body.appendChild(s);

  // Callback
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.charset = 'UTF-8';
  var t = document.createTextNode("var my_ns = { callback: function(r) { alert('callback'); } }");
  s.appendChild(t);
  document.body.appendChild(s);
})();

とりあえずこれで動きますが、もっとスマートな方法ありそうですね・・・。
JavaScript に対する理解がまだまだ浅いことを実感しました＞＜

参考リンク

• Greasemonkeyで定義した関数をJSONPで呼び出したい - ロックスターになりたい
• JavaScriptの巧い書き方 - Archiva
• amachang - JavaScript 入門
• 関数、オブジェクト、クロージャ - RapidShare
• Greasemonkeyは(function(){\nと\n})()を付加しなくなる(という夢を見た) - 0x廃棄階層 - 統治局

先日 Twitter で

マク語が局所的に話題になっていたので、マク語に変換する bookmarklet を作りました。まだ数は少ないです。

マク語に変換するでよ

ソース

(function() {
  var s = {
    'です。':'でよ。',
    'ですよ。':'てすよ。',
    'ここ':'こつら',
    'こちら':'こつら',
    'ありがとう':'サンクス・ァロツト',
    'これ':'こり',
    'みなさん':'みんなさん',
    'して':'すて',
    'した':'すた',
    'くれた':'くりーた',
    'してる':'してーる',
    'だった':'だた',
    'やって':'ヤッて',
    'ちょっと':'ちょと',
    'ください':'くだせぃ',
    'まったく':'またーく',
    '！':'あひーっ！',
    'すごい':'すげぇ',
    'いい':'ぃぃ',
    'そういえば':'そうゆえば',
    'あたらしい':'あたらしぃ',
    'もらった':'もらつた',
    'する':'ずる',
    'ない':'亡い',
    '無い':'亡い',
    'Apple':'アプール',
    'Mac':'マっク',
    'マック':'マっク',
    'グラフィック':'グラヒック',
    'アップル':'アプール',
    'デザイン':'デザィン',
    'スタンダード':'スタンダド',
    'サイト':'サィト',
    'サイズ':'サィズ',
    'ドラッグ':'ドラツグ',
    'ドロップ':'ドロツプ',
    'メール':'メィル',
    'サムネイル':'サムネェル',
    'サムネール':'サムネェル'
  }
  for(var i in s) {
    var r = new RegExp(i, 'g');
    document.body.innerHTML = document.body.innerHTML.replace(r, s[i]);
  }
})();

これで

どこでもマク語になるでよ、あひーっ！

ここ数日、いろいろブログを弄ったのでメモ。

• ページナビゲーションを強化

WP-PageNavi プラグインを追加しました。
index.php や archive.php 等をそれぞれ以下のように修正（テーマに Vicuna を使っています）。

(old)
<?php vicuna_paging_link('indent=2') ?>

(new)
<?php if(function_exists('wp_pagenavi')) {
  wp_pagenavi();
} else {
  vicuna_paging_link('indent=2');
} ?>

• 各エントリにはてなブックマークへの追加ボタンと Twitter に送るボタンを追加

そのままです。

• ページを表示している時にヘッダのナビゲーションをそれっぽく

ソースは以下。ID をオンコーディングしてるけどとりあえず気にしない。

<ul id="globalNavi">
  <li><a href="http://www.sukechan.net/">Home</a></li>
  <?php if($post->ID == '72') : ?><li class="current"> <?php else : ?></li><li> <?php endif; ?><a href="http://www.sukechan.net/lab">Lab</a></li>
  <?php if($post->ID == '2') : ?><li class="current"> <?php else : ?></li><li> <?php endif; ?><a href="http://www.sukechan.net/about">About</a></li>
</ul>

だいぶ間が空いてしまいましたが、サイ本の続きです。
今回は 9 章。自分がちゃんと身につけたいと思っていたプロトタイプやコンストラクタの内容。
ちゃんと理解して実践に活かしたい。

9 章 クラスとコンストラクタとプロトタイプ

9.1 コンストラクタ

• new 演算子と一緒に使うための関数をコンストラクタ関数という。
• コンストラクタ関数が呼び出されるとそのオブジェクトが this キーワードの値になる。

9.2 プロトタイプと継承

• メソッドとして関数を呼び出すと、関数を呼び出す時に使われたオブジェクトが this キーワードの値になる。
• すべての JavaScript オブジェクトには、プロトタイプオブジェクトというオブジェクトへの参照が含まれ、プロトタイプオブジェクトからプロパティを継承する。
• new 演算子を使ってオブジェクトを生成すると、そのオブジェクトに対してプロトタイプを設定する。
• 継承はプロパティの値を探す処理の一部として自動的に行われる。
• プロパティはプロトタイプからコピーされるのではなく、オブジェクトのプロパティであるかのように見える。
• プロトタイプオブジェクトを使用することで、たくさんのオブジェクトがプロパティを継承するので、メモリを節約できる。
• また、プロパティの値を探す処理でプロトタイプを参照するので、オブジェクトを生成した後にプロトタイプを追加した場合でも継承できる。
• よって、そのクラスのすべてのオブジェクトに対して同一のプロパティを定義する場合（メソッドなど）に限って使用するのが適切である。

// コンストラクタ関数
function Rectangle(width, height) {
  this.width = width;
  this.height = height;
}

// プロトタイプオブジェクトを生成
Rectangle.prototype.area = function() {
  return this.width * this.height;
}

var r = new Rectangle(2, 3);
r.width;  // 2
r.area();  // 6 が返る。プロトタイプオブジェクトから継承されている。
for(var o in r) {
  alert(o);  // width, height, area。for/in でも調べられる。
}
r.hasOwnProperty("width");  // r 直属のプロパティなので true
r.hasOwnProperty("area");  // r から継承されたプロパティなので false

9.2.1 継承プロパティへのアクセス

• 1 つのプロトタイププロパティが複数のオブジェクトによって継承される。よってプロパティの値の継承が有効なのは読み出す時に限られる。
• プロトタイプオブジェクトのプロパティに値を書き込もうとすると、元のオブジェクトに新しいプロパティが生成され、以降はプロトタイプからはそのプロパティは継承しない。

9.2.2 組み込み型の拡張

• String や Date などの組み込みクラスのプロトタイプオブジェクトにも値を代入できる。
• Object.prototype にはプロパティを追加してはいけない。追加するとすべての JavaScript オブジェクトで、追加したプロパティやメソッドが for/in ループで調べられるようになるため、オブジェクトを連想配列として利用するとうまく動かなくなる。

9.3 JavaScript の「クラス」

• JavaScript はオブジェクトと呼ばれるデータ型をサポートしているが、クラスという正式な概念はない（JavaScript 2 ではサポートされるとのこと）。

9.3.1 インスタンスプロパティ

• オブジェクト毎にそれぞれ異なるプロパティのこと。
• JavaScript のオブジェクトプロパティは、デフォルトでインスタンスプロパティになる。

9.3.2 インスタンスメソッド

• 特定のオブジェクトを介して呼び出されるメソッドのこと。
• ただし、必ずしもすべてのオブジェクトが自分専用のメソッドを保持しているわけではなく、クラスのすべてのインスタンスで共有される。
• JavaScript の場合、コンストラクタのプロトタイプオブジェクトのプロパティに関数値を設定することで、クラスのインスタンスメソッドを定義する。

9.3.3 クラスプロパティ

• クラスのインスタンスではなくクラスそのものに関連づけられたプロパティのこと。
• JavaScript ではコンストラクタ関数自身のプロパティを定義することでクラスプロパティになる。

// コンストラクタ
function Rectangle(width, height) {
  this.width = width;
  this.height = height;
}

// クラスプロパティ
Rectangle.UNIT = new Rectangle(1, 1);  // 関数はオブジェクトなのでプロパティを定義できる

9.3.4 クラスメソッド

• クラスのインスタンスではなくクラス自身に関連したメソッドのこと。
• JavaScript ではコンストラクタ関数自身に関数を定義する。

// コンストラクタ
function Rectangle(width, height) {
  this.width = width;
  this.height = height;
}

// クラスメソッド
Rectangle.max = function(rect1, rect2) {
  if(rect1.width * rect1.height > rect2.width * rect2.height) {
    return rect1;
  } else {
    return rect2;
  }
}

var r1 = new Rectangle(5, 6);
var r2 = new Rectangle(7, 4);
Rectangle.max(r1, r2);

9.3.7 プライベートメンバ

• JavaScript ではクロージャを使うことでプロパティをカプセル化できる。

function ImmutableRectangle(width, height) {
  // オブジェクトに対してアクセッサーメソッドを定義する
  this.getWidth = function() { return width; }
  this.getHeight = function() { return height; }
}
var rect = new ImmutableRectangle(2, 3);
rect.getWidth();  // 2
rect.width;  // undefined

9.5 スーパークラスとサブクラス

• JavaScript の場合、Object クラスはすべての組み込むクラスのスーパークラスであり、その他のクラスは Object クラスのサブクラスと見なせる。
• プロトタイプオブジェクトは Object.prototype からプロパティを継承する。

9.5.1 コンストラクタチェーン

• 新しいオブジェクトに対してスーパークラスのコンストラクタを呼び出す処理をコンストラクタチェーンという。
• 1 レベルのサブクラスしか持たない場合は、サブクラスのプロトタイプオブジェクトに superclass という名前のプロパティを追加することで対応できる。

9.5.2 オーバーライドされたメソッドの呼び出し

• サブクラスでスーパークラスと同じ名前のメソッドを定義すると、サブクラスはそのメソッドをオーバーライド（上書き）する。
• オーバーライドしたメソッドから元のメソッドを呼び出すために、メソッドチェーンという方法を利用する。

// スーパークラス Rectangle のコンストラクタ
function Rectangle(width, height) {
  this.width = width;
  this.height = height;
}
// スーパークラスに toString メソッドを定義する
Rectangle.prototype.toString = function() {
  return '[' + this.width + ', ' + this.height + ']';
}

// サブクラス PositionRectangle にも toString メソッドを定義する
PositionRectangle.prototype.toString = function() {
  return "(" + this.x + ", " + this.y + ") " + // このクラスのプロパティ
         Rectangle.prototype.toString.apply(this);  // スーパークラスの toString() を呼び出し
}

今日で 2008 年も終わり。
今年はなんと言っても「iPhone の年」でしょう。
というわけで、自分がインストールしたアプリ 197 個（！）の中から 2008 年の iPhone アプリベスト 5 をご紹介。
個人的にお世話になっているアプリたちです。

1. NatsuLion for iPhone
Twitter クライアント。
おそらく iPhone 用 Twitter クライアントの中でも、1・2を争う使いやすさのアプリ。
ベータテストから参加させていただいて、思い入れが深いアプリ。もう手放せません。

2. Remember The Milk
オンラインタスク管理サービスの Remember The Milk の iPhone 版。
素晴らしい完成度で、本家 Web よりも使いやすいと言っても過言ではない。
このアプリが出たのをきっかけに Pro 版へアップグレードしました。

3. NetNewsWire
RSS リーダ。
当初は Livedoor Reader を使っていたのですが、iPhone で快適に見れるものを求めて Google Reader、そして NewNewsWire に乗り換えました。
フィードを管理する NewsGator、Mac 版の NetNewsWire と同期されるので、iPhone で RSS を消化していき気になった記事をクリップ→Mac 版 NetNewsWire でクリップした記事をまとめ読み、という運用をしています。

4. Rolando
iPhone / iPod touch 専用に開発されたゲーム。
iPhone を傾けたりタッチしながらローランドーというキャラクタをゴールの扉まで運ぶというゲームです。
最近買ったばかりなのですが、時間が空くとすぐにプレイしてしまい、クリアしました。
クリアした後でもやり込める要素があるので何度でも遊べます。
iPhone / iPod touch のゲームの中でベストアプリと言えるほどの楽しさです。
iPhone / iPod touch ユーザは全員買うべし。そのぐらいオススメです。

5. Big Canvas PhotoShare
写真共有 SNS。
インタフェースが考えられており、iPhone のカメラで撮った写真を簡単にアップロードして、家族や友達と共有できます。
他の人が投稿した写真を見たり、コメントを書き込んだりといったことが楽しい。
「写真を共有する」ということの楽しさを教えてくれたアプリです。

というわけで、今年は iPhone と AppStore から次々出てくるアプリのおかげで、生活が変わりました。
来年も素敵なアプリがたくさん登場することを楽しみにしてます。