でぃべろっぱーず・さいど

Greasemonkey勉強会で紹介したJavaScriptのTips。

hoge.jsにhogeFuncが定義されていて、hoge.jsを読み込んですぐにhogeFuncを実行したいとき。

↓こんな風に書いちゃうと、エラーになってしまいます。

var s = document.createElement('script');
s.type='text/javascript';
s.charset = 'utf-8';
s.src = 'hoge.js';
document.getElementsByTagName('head')[0].appendChild(s);
hogeFunc();//この時点ではまだhoge.jsがロードされていない可能性が高い

hoge.jsのscriptタグをappendした後、実際にhoge.jsがダウンロードされ、JavaScriptが解釈されるまではhogeFuncは実行できません。

ということで、↓こんな風にしてsetIntervalで定期的に処理を実行してやればOK。

var s = document.createElement('script');
s.type='text/javascript';
s.charset = 'utf-8';
s.src = 'hoge.js';
document.getElementsByTagName('head')[0].appendChild(s);
var timerId = setInterval(timerFunc,100);//100msecごとにtimerFunc()を実行
function timerFunc(){
  if(window.hogeFunc){
    clearInterval(timerId);//100msecごとに実行している処理を停止
    hogeFunc();//ロードされているのでエラーが起こらない
  }else{
    //hogeFuncが定義されていない場合はここを通る。=何もしない
  }
}

textareaのサイズを入力にあわせて調整するＪａｖａＳｃｒｉｐｔ (イラストdeブログ開発記)

404 Blog Not Found:javascript - 勝手に添削 - textareaの高さを自動調節

textareaの高さ調整は前に書いたことがあって、for文回さずにこう書きました。

イチ に 三

function resize_textarea(ev){
    var textarea = ev.target || ev.srcElement;
    var lines = textarea.value.split('\n').length + 1;
     textarea.setAttribute("rows", lines);
}

split 大好き。

と、思ったけど、動きが変ですね。後で調整しよ。

JUI Tokyo 2008に参加してきました！

無謀にもLTとか申し込んじゃったりして。

スピーカ（LT含む）の席は一カ所に固められていて、なんとamachangさんの隣に座れました。もっとお話しすれば良かったのですが、久しぶりに知らない人ばかりのところに飛び込んだので、ちょっと気後れしちゃいましたよ。だめだね、こりゃ。

まずは各セッションの内容と感想から。

 

jQuery UI / Paul Bakaus (パウル・バカウス) さん

フルタイムの仕事でjQuery UIやってるそうです。

jQuery UIの機能とか説明しつつ簡単なデモをいくつか。

Drag & Drop 等のよくある機能から、Effect API とか。

Dragしても、要素をposition:absoluteじゃなくてfloatしたまま扱うから、要素を3つfloatさせて並べているところで、真ん中の要素をドラッグしても崩れないのだそう。

widget factoryのところはもう少し勉強しようと思った。

webkit専用の機能として画像を回転させたりとか、3Dっぽく見せたりとかできるみたいで、そこのデモはかなり感動しましたよ。

＜質問コーナー＞（走り書いたので正確じゃないかも）

Q.開発しようと思ったきっかけは？
A.以前もう1人とインターフェースのライブラリを作っていた。公式なものではなかった。プラグインのオーサーが開発できなくなった。そういうときに、jQueryの作者から公式な依頼があった。

Q.JavaScriptでの複数人開発のポイントは？
A.共通のライブラリで開発し、コード規約を作ることかな・・・。フルタイムでやってるのは自分だけ。あんまり問題は起きていない。

Q.script.aculo.usやExtを意識するか？
A.インスピレーションは得られる。他のライブラリもjQuery UIをまねしたりする部分もある。競争相手がいるのはうれしい。

Q.自慢コードを教えてください。
A.誰も理解することができないコードが好き。複雑なコードが好き。（すごいif文を見せてくれました。）

Q.これからJQueryを学ぼとしている人へのアドバイスは？
A.どんどんやってみると良いよ。jQueryはドキュメントがそろっているからそこからやってみると良いよ。

会場からの質問

Q.エディタを教えてください。
A.E。（綴り分からず・・・）

Q.プログラミングを始めて何年？JavaScriptを始めてどれくらい？
A.10年、5年

Q.EcmaScript4の仕様についてどう思いますか？
A.John(jQueryの作者)がJavaScript2.0のサポータ。私自身は複雑な感情を持っている。新しい文法はうれしいけど、オブジェクト指向とプロトタイプ指向がうまく融合するか、どうだろうか・・・。

 

プレゼンツールを作るときに考えたこといろいろ / amachangさん

初生amachangだよ。わーい。

S6を作るときに考えたことの話。

S6はリッチなプレゼンツール／軽い。というか、プレゼンの度に毎回自作してたってのはすごい。

この手のエフェクトを作るとき、子孫要素まで大きさを変えないといけない。ここで、いちいちすべてのスタイルを変更していると遅くなっちゃうので、%やemで指定して、大きさを変更するのは全てを囲んでいる親のフォントサイズを変更してやる（このテクニックはすごい）。

高速化の手法として、「1つのsetIntervalを使い回す」「DOMの値をキャッシュ」「無駄な関数呼び出しを減らす」などなど。この辺は後で公開されるであろうamachangの発表資料をcheck。

Firebugのプロファイル機能でチューニング。Own time / Time : Own Timeに着目すると良い。

ある関数の中で重たい処理を見つけたいときは、(function ___001(){ })() みたいに関数で囲んでやると、プロファイル機能でチェックできる。（これは便利だ）

 

inucara.netを支える技術 / inucaraさん

HatebuladderとかUIにこだわって、既存のサービスの情報を見やすく提供するという話。

「使いにくいのは悪」と言い切るのはすばらしい。

HatenaHaikuで、今年中に1000ブクマされるサービスを作る、と書いて、本当に作っちゃったのは立派（完璧画像検索）です。ほんと。有言実行ってすばらしいです。 

ユーザビリティの話で、以下の点を工夫した点として挙げられてました。

• 自動ページング
• スクロールに合わせて現在位置表示を動的に更新
• 解像度を自動取得
• ウィンドウサイズに合わせてサムネイルの列数を修正
• 使い慣れたUIをぱくる
• 先読み＆キャッシュ
• スムーズな視線移動を助ける

使い慣れたUIのところとかは、ちょっと疑問（だって、みんながみんなLDR使っているわけじゃないし）だけど、全体的に納得のできるお話で楽しかったです。小さな工夫を積み重ねて、ちゃんと検証している感じが伝わってきました。 

 

リクルート WEBサービス UI Library でお手軽マッシュアップ開発 / iandethさん

MTL iandethさんによる、リクルートが提供するUI Libraryの話。

リクルートでは40を超えるAPIを提供していて、それをもっと使いやすくするJavaScriptのUIライブラリを作りました、とのこと。

確かに、マッシュアップサイトを作るとき、いちいちプルダウンとかの仕組みを作り上げるのは大変。というか面倒くさい。そこにこういうライブラリがあったら、かなり便利に使えます。

月に1回更新が入るマスタ系のデータや、親データによってプルダウンの中身が変わったりするUIもちゃんと提供されていて、そこにJavaScriptのオブジェクトの形で関数とかを渡してやったり、テンプレート文字列を渡したりすることで、より上級な使い方ができますよ、と。

API提供側がここまでお膳立てしてくれるとありがたいですね。

あと、さりげなくMash up award 4thの告知が行われてました。

今回は参加しようかどうしようか。おそらくAPIの数も、前回以上にそろってくるんじゃないかしら。Macbook買ったから、PlaceEngineがらみで何か作ってみても面白そう。

 

さて、ここからLTコーナー。

jFormino - declarative from generation / gudogさん

いきなりの英語のLT（翻訳あったけど）。

jQueryを使って、Google Maps とか Formとかをお手軽に生成できますよ、というもの。

確かに便利そうだけど、Formを自動生成というのは使うシーンがあるのかなぁ、と思った。

 

GreasemonkeyでjQueryと遊ぶ - Play jQuery Anywhere - / noriakiさん

グリモンでjQueryをうまくロードする方法の紹介。

プレゼンツールも、コレを利用したグリモンで作られているとか。

過去グリモンをいくつか作ってきて、ライブラリのロードにはちょっと面倒な思いをさせられていたので、これは使ってみようかしら。

 

Colors in jQuery / Yoshiomi KURISU

で、僕。本当はmonjudohさんだったんだけど、機器トラブル（というのか）で急遽僕の番に。

てか、この時点で僕の発表内容のうすっぺらぺらぺらさに、LTやりますと言ったことに後悔し始めていたりして。 

参加した人は分かると思いますが、

「chris / chris4403 / 栗栖」→「これというHNがない」→「amachangみたいに親しまれるようなHNが欲しい」→「クリちゃん？」

という下ネタだったわけですが、発表直前に、

「chris / chris4403 / 栗栖」→「これというHNがない」→「複数ある名前を正規化したい。amachangみたいに親しまれるようなHNが欲しい」→「クリちゃん？（せいき化）」

というもっと程度の低い内容を思いついてしまい、必死で自重してました。

以下、発表資料です。（ustream.tvのチャットのコメントでcoffeeの誤字を指摘されたけど、そのままにしてます。恥ずかしす）

 

jQueryを使ってTwitterクライアントを作る / monjudohさん

JavaScriptで実装されたTaffy DBとjQueryを使って、Twitterの画面を便利に使いやすくするという内容。

これまた機器トラブルで、内容に使える時間が短めでしたが、結構おもしろい内容でした。

Greasemonkeyとか作ってないのかな。

 

ここまでが、予定されていたセッションでした。ここから飛び入りのLTが。

まずは、YAMLを作ったIngyさん。

JavaScriptのテンプレートJEMPLATEを紹介していました。というか、発表内容よりプレゼンツールの方が気になってしまいました。

続いて、最速の人、malaさん。

これはかなりびっくり。MTLの川崎さんの召還能力すごすぐる。malaさんの発表は、キーワードハイライトをいかに高速化するかというテーマで、1000msec弱かかっていた処理が最終的に150msec程度になってました。すげー。

で、トリを飾ったのがTakesakoさん。カッコイイYAPCのイメージVTRを放映されました。

 

この後、懇親会だったのですが、僕は家の都合で参加せず。残念無念。amachangさんやmalaさんとかと話してみたかったなぁ。とか言いつつ、基本奥手なので、その場に行ってもなかなか話しかけられずもじもじしてたんだろうけど・・・。

 

全体としてかなり濃密で楽しいイベントでした。取り仕切っていたMTLのみなさん、刺激的なプレゼンをしてくれたスピーカのみなさん、ありがとうございました！

jQueryのJohn Resigさんのブログに書いてましたが、Johnさんが執筆中のJavaScriptの本のタイトルが「Secrets of the JavaScript Ninja」らしいのです。

JavaScript忍者・・・。

どんなんだろうと、公式サイトを見てみたら・・・。

に、忍者・・・。

なんとなくそれっぽいですが、そこはかとなく「侍」臭が漂っています。

個人的には「手裏剣」を持ってて欲しかったなぁ。

でもって、出版社がMannigだったので、Early Access Edition（執筆途中のものがPDFでダウンロードできる）があるだろうと、サイトに行ってみたら・・・。

ちょっと！

これ、JavaScript Samurai もしくは JavaScript Bushi ですから！

まぁ海外の人にとっては、忍者も侍も一緒なんでしょうね。要は雰囲気ですよ、雰囲気。

ということで、EARLY ACCESS EDITIONを無事にダウンロードできました。$25だから3,000円くらいなのかな。

通勤途中に読むことにします。

YYYYMMで日付を表現する文字列からDateオブジェクトを生成しようとして、

var yyyymm = '200808';
var date = new Date(yyyymm.substr(0,4),parseInt(yyyymm.substr(4,6)) -1);

とやってみたら、mmのところが08と09のときだけうまくいかなかった。

よくよく調べてみると、頭に0がついた文字列をparseIntするときは基数が8として計算されるみたい。

つまり、

parseInt('01'); // 1
parseInt('02'); // 2
parseInt('03'); // 3
parseInt('04'); // 4
parseInt('05'); // 5
parseInt('06'); // 6
parseInt('07'); // 7
parseInt('08'); // 0
parseInt('09'); // 0
parseInt('10'); // 10
parseInt('11'); // 11
parseInt('12'); // 12

こんな感じになります。

'08'を8にしたいときは、第2引数に基数の10を指定すればOK。

parseInt('08',10); // 8
parseInt('09',10); // 9

基本的なところなんだろうけど、ついはまちゃいました。

ぼんやりとJavaScriptでの多言語対応について。

実装方法は色々あって、メリット・デメリットがそれぞれあるので、思いつくままにさらさら書きます。

基本方針

メッセージ系は、定数としてオブジェクトにまとめておきます。

var messages = {};
message.loading = 'ロード中';
message.error = 'エラーが発生しました。';

小文字だと分かりづらかったら、大文字にしておくというのも手。

var M = {};
M.LOADING = 'ロード中';
M.ERROR = 'エラーが発生しました。';

で、使うときに、

alert(messages.error);

こんな感じで使います。

で、この messages オブジェクトに、どうやってそのときの言語を設定するのかという話。

1.サーバ側（動的に生成されるページのロジック）でメッセージを管理

サーバ側で、DBや或いは設定ファイル（Railsならymlとかかな）に、多言語の情報を保持しておきます。
ページを表示したときに、ページ中のscriptタグで messages オブジェクトを作ってやります。

<script>
  var messages = {};
  message.loading = 'ロード中';
  message.error = 'エラーが発生しました。';
</script>

英語だったら、

<script>
  var messages = {};
  message.loading = 'now loading';
  message.error = 'error was occuerd';
</script>

こんな感じで。そのときの言語を判断するのは、サーバ側で保持しているユーザ情報の言語設定とか、或いはGETパラメータで渡された値とか。

或いは、上記メッセージが書いてある言語別語とのjsファイルを用意しておいて、動的に読み込み先を変えるという手もあります。
↓フォルダ毎に管理しておくとか。

<script type="text/javascript" src="/messages/ja/message.js" />

↓ファイル名で管理するとか。

<script type="text/javascript" src="/messages/ja.js" />

2.JavaScript でメッセージを管理

メッセージオブジェクトに一つ階層を持たせて、

var messages = {};
messages.ja = {};
messages.en = {};

それぞれの言語のところにメッセージを詰め込んでいくと。
で、使うときに、

var useMessages = messages['ja'];

こんな感じで使ってみるとか。

fastladderのjs を見てたら、↓こういう分岐でメッセージをセットし分けてた。

if(typeof Language != "undefined" && Language == 'English'){
}else{
}

script.aculo.us のロードと同じように、GETパラメータでjsに値を渡してやったりとか。

<script type="text/javascript" src="hoge.js?lang=ja" />

みたいな感じで読み込むようにして、

hoge.js のソース中で、

var LANGUAGE = 'en';//デフォルト設定
var s = document.getElementsByTagName('script');
for(var i =0,len = s.length;i<len;i++){
  if(s[i].src.indexOf('hoge.js?') > 0){
    var tmp = s[i].src.splite(?)[1].splite('&');
    for(var j = 0,leng = tmp.length;j<leng;j++){
      var tmp2 = tmp[j].splite('=');
      if(tmp2.length == 2 && tmp2[0] == 'lang') LANGUAGE = tmp2[1];
    }
  }
}
var useMessages = messages[LANGUAGE];

こんな感じで取り出してやります。

「続・Gmail ショートカットの Cheat Sheet を表示する bookmarklet を作ったよ 」で作ったbookmarkletは、この方法で、英語と日本語のメッセージを出し分けてます。
bookmarkletを多言語対応させたいときとか、多言語分jsファイルを作るよりも、この方法が良いかも。

或いは、上記方法で取得したGETパラメータのlang の値を使って、

var s = document.createElement('script');
s.type = 'text/javascript';
s.charset = 'UTF-8';
s.src = '/messages/'+LANGUAGE + '.js';

とかやって、メッセージのファイルを動的に読み込んでも良いんじゃないかな。
1.の最後に書いている方法を、javascriptでやる方法ですね。
この場合、メッセージのファイルがロードされるまで、そこにアクセスしようとするとエラーになっちゃうから、ちょっと工夫が必要ですが。

こうやって多言語対応を意識して作っておくと、メッセージがソース中に散らばっちゃうこともなく、文言修正とかのメンテナンスも楽になります。

IE6 以前のブラウザだと、select プルダウンエリアが常にページのトップレイヤに表示されてしまうというバグ（仕様？）があります。

ページ内にDivタグとかをフロートウィンドウっぽく表示させたり、ドラッグオブジェクトを作ったりすると、結構やっかいなことに。

それを回避する方法として、以下の3つが挙げられます。

1.select のスタイルを display:none にする。

重なっているときは、見えなくすれば良いってことで、こういう対応がまあベタですね。
ただ、フロートウィンドウを select ボックスがあるページ内でドラッグさせたいときは、一々ウィンドウの位置とselect の位置を判定して、表示／非表示を切り替えることを考えねばならず、あまり現実てきじゃないです。

2.iframe を使う

HTMLElement の中で例外的にiframe だけは select ボックスの上に表示することができます。
ということで、ブラウザがIE6以前のときのみ、select の上に表示するオブジェクトの下にiframe を入れて、src は javascript:false style に filter : 'alpha(opacity=0)' を指定してやればOK。
jQuery プラグインの datepicker や YUI のカレンダーなど、ページ内でドラッグさせる可能性があるものについては、そういう対応がしてあります。

3.select を使わずプルダウンを自作する

select じゃなくてそれっぽく見えるモノを作っちゃう系の対応です。
Select Box replacement
jQuery Select box
↑こんな感じかな。
クロスブラウザ対応がめんどくさそうですが、上手く使うと面白いU/Iになったりします。
Google Reader の上方にあるのも、その一例ですね。

↓こんな感じでプルダウンの中に文字を入力できるようになっています。

↓「i」と入力すると、候補がリストに。

form に関連するものを自分で作り込んでいくのは、submit処理やライブラリの利用に影響が出そうですが、インターフェースを考える上で、その部分をちょっと検討するのも悪くないんじゃないかと思います。