kanazawa.js v1.2 セミナー : ATND

基本はもくもく会スタイルで勉強している kanazawa.js ですが、今回はセミナー形式ということで

Firebugの使い方を中心にそもそものWebの基礎的な内容

で発表を行う予定です。JavaScript に限りません。

正直自分もフロントエンドの話はもうずいぶんご無沙汰なので Firebug もそれほど使い込んでいるわけではないのですが、何ができるか、言い換えると

どんな働きをさせることが大事だとFirebugや開発者向けツールの作者たちは考えているか

に思いを寄せることができればいいなと考えています。

4/16(土)会場でボクと握手！

• 各携帯キャリアの proxy の IP アドレスの範囲
• 各携帯端末の user agent とスペック

https でオフィシャルに配ってください。キャッシュ期間は適当にそっちで決めて。

そしたらわざわざ人間が、更新しましたよー、サーバの設定確認してくださーいとか広報したり確認したり手間ひま掛ける必要なくなるじゃん。

キャッシュがないとおびただしいアクセスが発射されると思うので、必ずクライアントサイドにキャッシュして使え、守らないと弾いちゃうよんという仕様にしておく。

流れで。

各種ロボットの情報も全部 API で取れるようになればいいのにね。そんでロボットが通知してくる URL には API のリファレンスがあるの。てゆーかロボット用の API くらい共通になってればいいのか¹。そしたらロボットのアクセスを検知 → 自動的に API に確認に行く → ポリシーに反しているので除外とか楽にできねーだろうか。少なくともまっとうなロボットが API にのっかってお互いに楽しましょうよ的な紳士協定のもとで動いてくれれば、守らないやつは即排除という流れにしやすくていいんじゃなかろうか。

無理か。無理だよなぁ。誰がおいしいのかよく分からないものね。

携帯の方は少なくとも携帯サイト開発者はみんな欲しいと思うけど。

※ 詳しくは後半の追記を読んでください。

すでに最速の人のページをはじめあちこちで普通に紹介されているのですが、

Array.prototype.each = function( callback ) {
  var len = this.length;
  for ( var i = 0; i < len; i++ ) {
    callback( this[i] );
  }
}

で Array に Ruby の each みたいなメソッドを足すことができます。しかしこれ、自分で定義しているオブジェクトの中で利用してプロパティを参照しようとしてもできません。するとエラーで止まります。具体的には

MyObj.prototype = {
  prop: 'hoge',
  method: function() {
    var arr = [ 9, 8, 7, 6 ];
    var str;
    arr.each( function( num ) {
      str += this.prop + "\t" + num + "\n";
    });
  }
}

みたいなことができません。これはあれですか、each の中で this を解釈したときに MyObj にならずに Array になっちゃうからでしょうか。MyObj.prop を参照するつもりなのに本当は Array.prop を見に行っちゃってるのかなと思うんですが。違うかな。あと、回避策はないのでしょうか。

いやまぁ、手元では Array#first(), Array#next(), Array#item(), Array#at_end() なんつーのを用意して for で回す方法で回避できてるんですけどね。なんか面白くないなぁ、と。

すでに Array を拡張しちゃうのは確定なので素直に for ( i in array ) で回せば？っつーのはナシの方向で。

※ このネタ、カテゴリ何にしてようかなぁ…。JavaScript にしちゃうと他の ecma 系のものが該当しないし、Ecma262 か？ スクリプト言語の名前に見えないなぁ。あ、ここに挙げたコードは動かしてみてません。

[2006-10-28 追記]

上を書いたときには根本的に分かっていなかったのだが、一応残しておいてとりあえず正解のコードを追記しておく。オブジェクトをまたいで使える Array#each は以下のようになる。

/**
 * Array の要素一つずつに function を適用する
 *
 * @param function callback
 * @param Object obj（あってもなくてもよい）
 */
Array.prototype.each = function( callback, obj ) {
  var len = this.length;
  for ( var i = 0; i < len; i++ ) {
    callback.call( obj, this[i] );
  }
}

これを利用する場合、上のようにあるオブジェクトから利用したいという際は

arr.each( function( e ) {
  ..
}, this );

と第2引数にオブジェクトを投げてやる。特別オブジェクトなど作成していない場合はそのまま

arr.each( function( e ) {
  ..
} );

でよい。このコードを理解する際に必要な知識は

1. JavaScript の変数スコープ
2. function の引数は多すぎても足りなくてもエラーは起きないこと
3. Function#call の第1引数が null か undefined になった場合は Global オブジェクトになること

の3つである。下の2つは

Under Translation of ECMA-262 3rd Edition の

15.3 Function オブジェクトの call メソッド を、

最初のスコープの話は

Hawk's W3 Laboratory : JavaScript Notes : JavaScript 深層 : スコープチェーンと変数のスコープ(2)

をよく読むと分かるはず。

ま、分からなくても使うだけなら使えるけど。

世間では 1.7 beta が速いという話だが、Alt + [半角/全角] で IME を切り替えた際にメニューにフォーカスが取られる症状が再発しているという噂を聞いて Mozilla 1.6 を試さずに Wazilla 1.5 のままきていた。そろそろ 1.7 も気になるので Mozilla 1.6 を試してみたがやっぱ噂の通りだった。そした Wazilla 1.6 は出ていない。うーん、使いものにならん。

いや、読む分にはまったく関係のない話だけど。Hiki ライクかつオリジナル Wiki ライクかつ tDiary 的味付けというよく分からない仕様だが、少なくともセクションタイトルと p タグ以外ほとんど HTML そのまんまだった tDiary スタイルよりは書きやすそうだ。よしよし。

結論から言うと、ドキュメントは分かりにくかったが動作上の揺れのなさという意味でデキがいいのは Vodafone live! だった。文字コード変換の影響をまったく受けないし、シミュレータでもほぼ完全に再現されているようだった。これは素晴らしい。（バージョンが上がったというか完全に作り直しているでしょ、これ、っていうシミュレータは実にデキがいい。）

i-mode は絵文字の種類に基本と拡張があり、拡張は i-mode HTML バージョン4以降対応ということだが、最近の FOMA への移行のスピードを考えると無視はできない。しかしこの拡張絵文字は Unicode の文字コード（ややこしい）を使った参照か、sjis のバイナリコード直埋めでしか表示できない。したがってちと扱いにくい。特に sjis 直埋めは文字コード変換の影響を受けまくりなのでやっかい。まぁ安全寄りってことで古い方に合わせればいいかーって感じ。

EZweb は proxy 側であれこれ手厚いサポートをしてくれるのだが、OpenwaveSDK が img タグを使った古い記法しかサポートしていない。逆に言えばこの方式を使えば、SDK の完成度を考えたときには検証がいちばん楽。ただし、絵文字と普通の文字をひとかたまりにしたリンクを生成することができないという弱点がある。これが問題にならないようにコンテンツを作るのであれば、いちばん記述しやすい方式と言える。

しかしいつものことだが EZweb の proxy のサポートの充実っぷりとそれをきちんと提示してくれる au には頭が下がる。世の中全部 EZweb になればいいのに。

さーてこいつらを wrap する emoji クラスはいつ作り始めることができるのかな？

http://www.zdnet.co.jp/broadband/0303/27/lp05.html

だそうで。気ぃつけなはれ〜。