メイン

「JavaScript」のアーカイブ

2008年6月19日

外部JavaScriptファイルをロードして、そこに書かれている関数を実行する。

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が定義されていない場合はここを通る。=何もしない
  }
}

2008年5月20日

Re:javascript - 勝手に添削 - textareaの高さを自動調節

textareaのサイズを入力にあわせて調整するJavaScript (イラスト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に参加してきましたよ!

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のみなさん、刺激的なプレゼンをしてくれたスピーカのみなさん、ありがとうございました!

2008年4月21日

JavaScript忍者!

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

JavaScript忍者・・・。

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

に、忍者・・・。

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

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

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

080421_01.png

ちょっと!

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

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

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

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

2008年3月25日

JavaScriptのparseInt関数の挙動

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

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

2007年12月26日

JavaScriptの多言語対応の方法についてぼんやり考えてみた

ぼんやりと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でやる方法ですね。
この場合、メッセージのファイルがロードされるまで、そこにアクセスしようとするとエラーになっちゃうから、ちょっと工夫が必要ですが。

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



2007年12月13日

プルダウンについてちょっとだけ考える

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 の上方にあるのも、その一例ですね。

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

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

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

2007年11月17日

JavaScript の開発環境

みなさんはどんな環境でJavaScriptの開発されてるんでしょうか。

僕が家で趣味グラミングしている環境は、apache + Eclipse with JSEclipse + ブラウザです。

Eclipse のworkspace を apache のhtdoc に指定しているので、自分が書いたものを http://localhost で確認することができます。

ローカルのファイルを開いてもJavaScriptは動作するので、apache が動いている意味はあまりないかもしれませんが、気分的なものでしょうかね。

テキストエディタとかでゴリゴリ書くこともありますが、事前にしょーもない文法エラーとかを拾ってくれるJSEclipse はかなり重宝します。

GeekになるためにはEmacs とか使いこなせないといけないんでしょうが、つい使っちゃうんですよね、
Eclipse 。

2007年11月15日

JavaScript 勉強会 その2

JavaScript勉強会 (でぃべろっぱーず・さいど)の続き。

今回は、DOMとかAjax とかライブラリとか。

↓資料はこちら。

http://docs.google.com/Doc?id=ajhh7vcqfw52_117hjvjpz

見た目派手にするつもりが、結構たんたんと進めてしまいました。

やっぱりこの内容を質問とかの時間込みで1時間に圧縮するのは難しいなぁ。

第1回、第2回と資料を作りながら、僕自身知らなかったことを色々と身につけられました。

勉強会開催は人のためならず、ですね。

2007年11月14日

続・JavaScript で ActionScript っぽく onEnterFrame を実装してみた

昨日の続き。

作ったサンプルがあまりにもしょぼかったので、今度はもっとFlash っぽいものを作ってみました。

onEnterFrame のサンプル その2

画面左端の黒いエリアにマウスを持っていくと、にょきにょきっと伸びます。

縦にマウスを動かすとそれっぽく見えます。

動作の振る舞いを onEnterFrame に書いて、frame オブジェクトに突っ込むだけなので、Flash でアニメーションを書いたことがある人なら結構直感的に分かってもらえるんじゃないかなぁと。

onmouseover とか onmouseout をわざわざ onRollOver 、onRollOut にしてるのは ActionScript っぽさを出すためです。

Flash で言うところの、_root オブジェクトを作って、もっと階層的にアニメーションを動かしたり、ライブラリに登録したMovieClip を load したりとかしてみようかとも思ったんですが、ちょっと煩雑すぎかなぁ。

2007年11月13日

JavaScript で ActionScript っぽく onEnterFrame を実装してみた

Flash を作る際、ActionScript でタイムラインであるフレームを管理するonEnterFrame というプロパティがあります。

MovieClip クラスのonEnterFrame に関数を代入すると、フレーム毎にそれを実行してくれるので、アニメーションの表現がやりやすいわけです。

JavaScript も ActionScript も同じECMAScript の実装なわけで、じゃあ JavaScript で onEnterFrame を実現したらどうなるなるかなぁと。

で、↓こんな感じで作ってみました。

動作サンプルはこちら

エラーチェックとかちゃんとしていないので、実用的なコードではありませんが、僕がやりたいことはつかんでいただけるかと。

ただ、この方法だと、Frame クラスが管理するオブジェクトが増えれば増えるほど、動作がもっさりするのは目に見えてますね。

というか、ここまでするならFlashでええやんって話かな。

2007年11月12日

JavaScript勉強会

職場でJavaScriptの勉強会を開催しました。

JavaScript初心者のために開催したんだけど、なんかうまくまとまらなかったなぁ。

せっかくだからもっとデモをやればよかった。

一応、資料を公開しておきます。

http://docs.google.com/Doc?id=ajhh7vcqfw52_11488vf3q

口頭で補足した部分が結構あるので、これだけ見てもつまんないかも。

JavaScriptでこんなことできますよーって意味で、冒頭にmeltdown.js とか2ndlifeさんのタイポグラフィとか見せてみたんだけど、思ったほど反応なかったなぁ。みんなこういうのに興味ないんだろうか。

次回は今週木曜日を予定していて、内容はDOMとかAjaxとかライブラリとか。

今日に比べると見た目が派手になるので、もう少し食いつきも違うかなぁ。

見せ方をどうしようか・・・。

2007年11月11日

instanceof の戻り値

来週、職場でJavaScriptの勉強会を開くことになって、資料を作っていたんですが、その中でへぇと思ったことがあったのでメモ。

instanceof で何のインスタンスかが分かるんですが、

var a = 1;
alert(typeof a); // number
alert(a instanceof Number); // false
a = new Number(1);
alert(typeof a); // object
alert(a instanceof Number); // true
a = a + '';
alert(typeof a); // string
alert(a instanceof String); // false
a = new String('1');
alert(typeof a); // object
alert(a instanceof String); // true
a = true;
alert(typeof a); // boolean
alert(a instanceof Boolean); // false
a = new Boolean('true');
alert(typeof a); // object
alert(a instanceof Boolean); // true

てなかんじで、new したやつはちゃんとオブジェクトのインスタンスとして認識されるんですね。

でもって、関数は、

function a(){}
alert(typeof a); // function
alert(a instanceof Function); // true
var b = new Function();
alert(typeof b); // function
alert(b instanceof Function); // true
var c = function(){}
alert(typeof c); // function
alert(c instanceof Function); // true

どう宣言しても、ちゃんとtypeofは関数型で関数オブジェクトのインスタンスということになるんですと。

2007年11月 6日

Object.prototype をどうしようか・・・

rosy.js の中で、ヘルプメッセージをObjectの形で管理しようとしていて、出力するときはfor 文で回して一発だ!とか思ってたら、Object.prototype を拡張しているページだとヘルプメッセージにそれらの関数が表示されちゃってがっかり。

まあ、そうだよね。

ということで、その部分の実装を変更しようと考え中。

今は、

helpmessage : { "commands":{ "#list":"show input command list" ,"#help":"show help messages" ,"#img":"show img file list" }, "key operation":{ "up / down key":"show input command log" ,"left / right key":"easy input for rlog.d() / rlog.d('') (if input line is empty)" } }

こんな感じで持ってるんだけど、↓こんな風にした方が良いんだよね、きっと。

helpmessage : [ { "category":"commands" ,"child":[{"command":"#list","exp":"show input command list"} ,{"command":"#help","exp":"show help messages"} ,{"command":"#img","exp":"show img file list"}] }, { "category":"key operation" ,"child":[{"key":"up / down key","exp":"show input command log"} ,{"key":"left / right key","exp":"easy input for rlog.d() / rlog.d('') (if input line is empty)"}] } }]

うーん。なんかもっと良い方法ないかなぁ。

2007年11月 4日

rosy.js 0.3.0 リリース

rosy.js の 0.3.0 をリリースしました。

rosy - Google Code

0.2.0からの大きな変更点は、コマンド入力ラインを設けたところです。

そのコマンドラインからページに対してjavascriptを実行できます。グローバル変数/関数の作成もできるので、IEでデバッグする際は結構便利かと。

bookmarklet も作っているので、色んなページにログコンソールとコマンド入力ラインを表示することが出来ます。

Rosy logging bookmarklet

ブックマークレットには、安定版を呼び出すものとSVNから最新版を呼び出すものの2種類があるので、お好きな方をご利用ください。

また、コマンド入力ラインに独自のコマンドを実装しました。

#help と入力するとその内容を確認することができます。

例えば、#img でページないのimg タグのsrc 属性を一覧で表示したり、#clear でコンソールをクリアしたりします。

あと、↓↑キーで、過去に入力したコマンドを呼び出したり、←→キーで、ログ出力のrlog.d() を簡易入力できたりします。

start rosy log window (0.3.0)

↑上記リンクをクリックすると、このページ内にログウィンドウを出現させるので、是非おためしください。

2007年11月 3日

The Future of JavaScript 行きたかったなぁ。

最近、超 Love JavaScript な僕としては、是非とも参加したかったイベント。

The Future of JavaScript -presented by Mozilla & Shibuya.JS-

行きたかったんだけど、知ったのが当日だったので、当然定員いっぱいで締め切られてました。

id:amachangのブログに ustream.tv で中継すると書いてあったので、家に帰ってみてみたら、もう最後の質問タイムのところでした。残念。

The Future of JavaScript メモ - てっく煮ブログ」のレポートで大体の内容はつかめましたが、やっぱりこういうのは会場で生の雰囲気を味わいたいですね。

2007年10月31日

rosy.js ログウィンドウを色んなページに表示させるBookmarklet

まだ開発中ですが(今週末0.3.0をリリースする予定)。

JavaScript を実行するコマンド入力欄とログコンソールを表示させるBookmarklet です。

start rosy log window

このBookmarkletでは、rosy.js と rosy_bookmarklet.js をロードしていて、rosy_bookmarklet.js の中で rosy.js の関数とかを呼んでいるのですが、普通にロードしただけだと、rosy.js がページにロードされる前にrosy_bookmarklet.jsのコードが実行されてしまい、エラーになってしまいます。

そこをどうやって解決しようかと考えて書いたのが↓このコード(rosy_bookmarklet.js)。

function loadRosyLogWindow(){
	try{
	if(RosyLog && Rosy){
		rlog = new RosyLog();
		rlog.use = true;
		rlog.d('start rosy log window.');
		rlog.d('Rosy.version : ' + Rosy.Version);
		document.getElementById('rosyLogConsoleInput').focus();
		clearInterval(rosyStartTimer);
	}
	}catch(e){
		//
	}
}
var rosyStartTimer;
if(!rosyStartTimer) rosyStartTimer = setInterval(loadRosyLogWindow,500);
var rlog;

rosyStartTimer が定義されていないときだけ setInterval で 0.5秒ごとにloadRosyLogWindow()を実行するようにしてます。 で、loadRosyLogWindow() の中では、rosy.js の中で定義されている RosyLog と Rosy がロードされている(if の条件句に入れたときに true が返ってくる)ときだけ、ログを出力して、rosyStartTimer をclearInterval してやります。

こういう解決法ってどうなんだろ。

2007年10月29日

rosy.js の ログコンソールに実行用の入力欄を付けてみようかと

最近仕事で JavaScript のコードを書いていて、FireFox だと firebug 超使える!便利!なんだけど、IEだとしょんぼり。

FireFox で上手く動いていたモノが、IEだとエラーを出したり。

しかも常にエラーじゃなくて、なんかの条件でぽろっと左下のステータス欄に黄色い三角形が出てくるわけです。

じゃあIEでも firebug のようにコンソールでJavaScriptを実行できるようにしたらええじゃん、と。

まあ、地道にアドレス欄からjavascript:hogehogeと入力すれば良いんですが、せっかくLogクラスを作っているんでこれに実装しちゃおうかなと。

イメージとしては、bookmarklet を実行してログウィンドウを開き、後は表示された入力欄でガシガシとJavaScriptを実行する、みたいな。

超お試しで作ってみたのが↓このbookmarklet。

start rosy log window


まだまだデバッグが足りない、というか読み込み時にstackのエラーが出ちゃうことが多い。

rosy.js本体のscriptタグをbodyにappendして、内容がコンパイルされないうちに、ウィンドウをロードする関数が動いちゃうんだよなぁ。

しょうがなしに今はtry catch で囲んで、catch句の中で同じ関数を呼び出すという荒技をしてます。このせいでstack overflow が発生するんですよねぇ。

※setInterval で関数が定義されるまで実行を繰り返し行うことで上記問題は対応しました。

世のbookmarkletはどうやってるんだろ。

明日はソースを読もう。そうしよう。

2007年10月27日

rosy.js 0.2.0 リリース

先日公開したrosy.js の version 0.2.0 をリリースしました。

といっても新しい機能を追加したわけじゃなく。

String の prototype にいくつか関数を追加していたのですが、わざわざString のprototype を汚してまで追加する機能ではなかったので、Rosy.(関数名)として機能を移動しました。

rosy.js

2007年10月25日

rosy.js 0.1.0 リリース。ログクラス作ってみました。

rosy.jsの0.1.0をリリースしました。

rosy.js

0.1.0に盛り込んだのは以下の内容です。

Rosy.setHTMLStyles
 :HTMLElement オブジェクトと、スタイルのオブジェクトを渡して、Elementにセットする関数
Rosy.mappingObj
Rosy.mappingObjArray
 :オブジェクトのキー値を変える関数
String.prototype.toNumberFormat
 :文字列の数値3桁区切り表現をreturn する関数
String.prototype.padZero
 :ゼロ詰めした文字列をreturn する関数
String.prototype.padLeftZero
 :左ゼロ詰めした文字列をreturn する関数
String.prototype.padRightZero
 :右ゼロ詰めした文字列をreturn する関数
Log
 :ログをページ上に書き出すクラス

これまでに紹介していなかったLogクラスについて。

↓デモページはこちら。
rosy.js sample page --- extends string

最初にロガーを生成して、それを利用するとページ上にログウィンドウが表示されて内容が書き出されるって感じです。

var log = new Log();
log.use = true;//ここをfalse にすると書き出されません。

使うときは、

log.debug('ログです。');

みたいな感じ。
カンマ区切りでつっこんでもOKです。

log.debug('ログです。', hoge ,'こんな感じ')

オブジェクトを入れると、プロパティのキーと値を書き出してくれます。(緑色)

エラーオブジェクトを入れると、赤字で書き出してくれます。

あと、console.log()も同時に実行しているので、FireFox で firebug 使っている人も使えます。

FFとIE両方でデバッグするときに便利かなぁと思ったり。

d という名前の関数がいて debug と同じ動きをするので、短く書こうと思ったら、

var l = new Log();
l.use = true;
l.d('ログです。');

とl.d() でログを書くことができます。

思いつきで実装しているので、エラーハンドリングとか甘甘だったり、ログウィンドウと言いつつドラッグ&ドロップできなかったりしますが、とりあえず公開。

突っ込みなどお待ちしております。

2007年10月24日

rosy.js に mappinObj と mappingObjArray を追加

rosy.js に mappinObj と mappingObjArray を追加しました。

mappingObj は、第1引数にObjectを渡し、第2引数にキーのマッピングのObjectを渡して、キーの値を変えるという関数です。

↓使い方はこんな感じ。

var objIn = {"ido":"50","keido":"20"};
var mappingObj = {"ido":"lat","keido":"lng"};
var objOut = Rosy.mappingObj(objIn,mappingObj);
// objOut = {"lat":"50","lng":"20"}


例えばGoogle Map 上に、様々なサイトから取得した情報を表示したいとき、色んなwebサービスから帰ってくるJSONのキーの値がバラバラなときに使えるんじゃないかと。

mappingObjArray はObjectの配列に対して同様の操作を行うというものです。

なんとなく思いつきで実装。

Google Code --- rosy.js

2007年10月20日

div の style "overflow":"auto" で隠れているHTMLElementを表示させる

div の style に "overflow":"auto" を指定すると、div に指定された大きさを超えたHTML Element は隠され、スクロールバーが表示されます。

その中身を表示したいときは、document.getElementById などを使って、表示させたいHTMLElement を取得し、scrollIntoView() メソッドを使うとうまく表示してくれます。

2007年10月17日

Re: rosy.js の toNumberFormat を修正

rosy.js の toNumberFormat を修正」のコメントでtomさんからコメントいただいたので、仕様を検討。

×小数点が2つ以上あるときにエラーにならない(たとえばNaN=Not_a_Numberを返すべき) ⇒入力の「文字列」を「数値」として解釈し、カンマ区切りの「文字列」として返す以上、数値として解釈するところでエラーになるパターンがあるはず。いまはできるだけエラーを返さないつもりみたいだけど(文字列があったら無視している)、もう少し厳しい解釈をするほうがライブラリとしての使い勝手が良いのでは?

確かに。

今はかなりゆるーい解釈をしていて、途中に数字以外の文字が入っていても無視してくれちゃうわけです。

こうしたのは理由があって、例えば数値を入力する必要があるテキストフォームの値に定期的にこの関数を実行してやれば、3桁区切りの数値が常に表示されるようなテキストフォームができるんじゃないかなぁと思ったため。

でもまあ確かに、ライブラリとして出すのであれば、ご指摘の通りだと思うので修正します。

isNumber() とか isNumberFormat() とかいう関数を実装してみようかな。


×http://rosy.googlecode.com/svn/trunk/rosy/sample/extends_string.htmlをFireFoxで開くとなぜかソースが表示される

これ、何でですかね・・・。htmlの書き方がまずいのかな。うーん。


>美しくないなぁ。
ソースコードとして美しくないと思う点を。
\d」と「[0-9]」って等価では? ひとつのソースコードに混在させる意味はありますか?
あとaとかbとか配列の名前が可読性を損なってるのかも。一文字変数・関数って非常にGoogleっぽいけど。

これは確かに。正規表現書き慣れていないので、ぶれちゃうんですねぇ。統一します。

でもって、1文字変数・関数は、内部で利用するものだし、こういうところで文字数を減らしておこうという目論見です。

仕事では1文字変数・関数はNGとしているので、こういうところで試しに使ってみようかと。

確かに可読性を損なっちゃいますけどね。

2007年10月15日

document.write()に関するあれこれ

↑これを読んでいて知った document.write()に関する小ネタ。

document.write() と document.writeln() があって、writeln() の方は、引数で渡された文字列 + 改行が出力される。pre タグとかの中身を書き出したいときに便利。

document.write() した後は、document.close() しないと通信中になってしまう。ただ、IE では再現せず。FireFox ではいけました。

document.write() は、ページ表示中に実行しなければ、ページの内容をクリアしてから上書きしてしまう。

document.write() の引数は複数渡せるので、 document.write( 'あなたの名前は' + name + 'です')と + で結合しなくても、document.write('あなたの名前は',name,'です') と書ける。

なんか最初に使ったメソッドの割に知らないこと多かったなぁ。

2007年10月10日

javascript の高速化 by amachang

一行で IE の JavaScript を高速化する方法 - IT戦記

はてぶでもうすぐ1000ブクマ。すげーなー。

やり方は簡単で、↓こんなのをJavaScriptの先頭にくっつけるだけ。

/*@cc_on var doc = document;eval('var document = doc');@*/

ただし、例でも10万回ループして0.5秒という高速化なので、体感的には変わらないかもしれないですね。

それよりも気になったのが、/*@cc_on @*/ の記法。

調べてみると、同じように気になって調べていた人がいました。

Clouder::Blogger: @cc_on ってなに?

条件付きコンパイルですか。知らなかったなぁ。

僕的にはこちらの方がへぇ度が上でした。

2007年10月 8日

rosy.js の toNumberFormat を修正

暇つぶしに JavaScript のライブラリを作ってみることにしました。 」にて、最初に手を付けたString クラスの拡張メソッド toNumberFormat に、コメント欄で会社の先輩tomさんが「負の数と小数にも対応してみてください」とリクエストしてくださったので、対応してみました。

rosy.js sample page --- extends string

<ソース>

さくっと綺麗に書けると思うんだけど、なんだかこってりしたソースになっちゃいました。美しくないなぁ。

<関連エントリ>

暇つぶしに JavaScript のライブラリを作ってみることにしました。 (でぃべろっぱーず・さいど)

2007年10月 1日

暇つぶしに JavaScript のライブラリを作ってみることにしました。

Mash up award 3rd 、iGoogle ガジェットコンテスト、gihyo.jpへの連載、社内でのプレゼン、社外でのプレゼン、と今年の夏は結構忙しくしていたのですが、どれも一通り終わり、ちょっと一息モード。

というか、冬の時代が到来しそう。

ということで、こんなときはコードでも書こうと思い、JavaScriptのライブラリを作ってみることにしました。

と言っても、prototype.js や Doja 様々に対抗しようなんざこれっぽっちも思ってなく。Google Code にプロジェクトを作って、たまーに、じみーに更新していこうかなと。

思い立ったが吉日なので、早速プロジェクト作りました。

rosy - Google Code

名前はrosyにしました。

意味は特にありません。妻に「好きな花の名前は?」と聞いたら、「薔薇」と答えてくれたからです。

最初に作ったのは、String オブジェクトを拡張して、3桁区切りの文字列を返してくれるメソッドです。

rosy.js sample page --- extends string


探せばどこにでもありそうなメソッドですが、まあその辺のことは気にせず、自分の勉強のために気楽に作っていこうかなと思ってます。

2007年8月29日

JavaScript で HTML タグを生成

JavaScriptでHTMLタグを生成する方法。

var s = document.createElement( 'script' );
s.type = 'text/javascript';
s.src = 'http://www.example.com/';
document.getElementsById('hoge').appendChild( s);

こんな感じ。

最後のHTMLエレメントにappendChildしているところで、実際に生成される。

使いどころとしては、JSONPでクロスドメインで通信をする場合とか、角丸テーブルやツールチップを表示したりとか。

2007年8月23日

JavaScript での日付チェック

年月日のプルダウンがあって、そこで指定された日付が正当なものかどうかJavaScriptでチェックする方法。

日付は Date クラスの引数に年月日を与えれば良いのですが、例えば、

var d = new Date(2007,1,31); //月は0~11の値を取るので、これで2007年2月31日を指定している。

とすると、d は 2007年3月3日となってしまいます。

ということで、これを逆手にとって、

function isValidDate(y,m,d){
var di = new Date(y,m-1,d);
if(di.getFullYear() == y && di.getMonth() == m-1 && di.getDate() == d){
return true;
}
return false;
}

とすればOK。

↓一応サンプル。

//

2007年8月16日

Prototype 1.6 RC0

Prototype 1.6 RC0登場 - パフォーマンス改善、バグの修正を実施 | エンタープライズ | マイコミジャーナル

拡張されたのはイベントAPI、ファンクションAPI、クラスAPI、Ajax API、DOM API、テンプレートAPIなど細かく多岐に渡る。grepメソッドのセマンティックも拡張されているほか、JavaScript 1.6やWHATWG 1.0標準へのサポート改善も実施されている。

prototype.js も 1.6 なんですね。

最近、非同期通信や画面の書き換え処理は手組みで書いていたのですが、ちょっと触ってみようかなぁ。

ライブラリがリッチになればなるほど、簡単なものを作ろうとしたとき、足回りが重くなっちゃうんですよね。

2007年8月14日

JavaScript の for ~ in 文

JavaScript で連想配列のKey値を知りたいとき。

例えば、

var hoge = {"moge":"aaa" , "toge":"bbb"};

なんてのがあって、"aaa" 、"bbb"の値は、hoge['moge']、hoge['toge']で取得できるけど、このmoge,toge自体の値を知りたい。

そんなときは、for ~ in 文。

for ( var index in hoge){
alert(index);
}

で、分かります。

2007年8月13日

JavaScript で 0 - 9 のランダムな整数を取得

IT戦記 - Math.floor を使わずに小数を整数にする

普通はこう書く
var value = Math.floor(Math.random()*10);

僕も普段はこう書いてますが、↓こんな感じでも書けますよね(実用性なしですが)。

var value = (Math.random()+'').charAt(3)

これだと value が文字列になるので、

var value = (Math.random()+'').charAt(3) - 0

こうかな。

後は、

var value = parseInt(Math.random()*10)

とか。

2007年8月12日

IE と FF での挙動の違い --- ラジオボタンの onchange イベント

HTML上でラジオボタンでYes/Noの選択肢を作ったとします。

で、このラジオボタンが変わったときにJavaScriptの関数を呼び出し、ラジオボタンの状態に応じて動作させたいとき、以下のようにonchangeイベントで書くとIEとFFで動作が変わってしまいます。

<input type="radio" name="moge" onchange="javascript:hoge();">Yes
<input type="radio" name="moge" onchange="javascript:hoge();">No

FFがラジオボタンのcheck状態が変わった後に関数が呼び出されるのに対して、IE6ではcheck状態が変化する前に関数が呼び出されてしまいます。

ということで、こういうときはonchangeではなく、onclickイベントを利用するとうまくいきます。

<input type="radio" name="moge" onclick="javascript:hoge();">Yes
<input type="radio" name="moge" onclick="javascript:hoge();">No

2007年8月11日

JavaScript 第5版 & JavaScriptクイックリファレンス 第5版

オレンジニュースでオライリー本の JavaScript 第5版が発売されると知っていたので、発売日の今日早速買ってきました。先に発売されていたリファレンス本も一緒に。

JavaScript 第5版
JavaScript 第5版
posted with amazlet on 07.08.11
David Flanagan 村上 列
オライリー・ジャパン (2007/08/14)
売り上げランキング: 1535


JavaScriptクイックリファレンス 第5版―JavaScript1.5対応
David Flanagan 木下 哲也 福龍興業
オライリージャパン (2007/05)
売り上げランキング: 55155

パラパラめくっただけで知らないことがいっぱい。最近 JavaScript づいているだけに勉強になります。

かなーり分厚いので読み進めるのは時間がかかりそうですが、ちょっとウキウキしてます。

2007年5月16日

手軽にスライド形式のプレゼン資料が作れる Slider.js

phpspot で紹介されていたJavascript のライブラリ。

ブラウザ上で動作するプレゼン資料を簡単に作れる「Slider.js」:phpspot開発日誌

JavaScriptを利用して、簡単にスライド形式のプレゼン資料が作れるそうです。

↓デモはこちらから。

Slider.js Example


amachang のプレゼンツールに影響をうけて、会社内での発表をいくつか JavaScript + HTML の資料で行ってみました。

見ている人の反応も良く、かつ「凝りすぎない」ので、適切な作成時間でプレゼン資料を作ることができました。

こういうライブラリがそろってくると、プレゼン資料は Power Point ではなく、JavaScript + HTML で、という人がもっと増えるかもしれませんね。

2007年2月18日

表現力のあるJavaScriptライブラリScript.aculo.us

まるごとJavaScript&AjaxのScript.aculo.usサンプルインデックス|blog|たたみラボ

たたみラボでScript.aculo.usのサンプルが公開されています。

JavaScript(Ajax)でここまで表現できるというのは驚き。

一昔前ならFlashという選択肢しかなかったもの(例えば、画像のフェードイン/アウトとかパン処理とか)が結構綺麗に実現できています。すごいなぁ。


まるごとJavaScript & Ajax ! Vol.1
天野 仁史 舘野 祐一 川崎 有亮 小飼 弾 arton 田中 孝太郎 国分 裕 山本 有悟 海野 裕也 nanto_vi
インプレスジャパン
売り上げランキング: 302

2006年11月15日

GoogleMapsAPIとRico.js

GoogleMapsを使ったちょっとしたアプリを作っていたのですが、map上をクリックしたときに、マーカを表示して吹き出しも表示するところで、FireFoxだけでエラーが出てうまくいかず。

IEでは上手くいくので、色々と原因を探ってみたところ、結局、rico.jsの読み込みをなくしたら動くようになりました。

まあ、アプリ上で使ってなかったので、そんなもん読み込むなよって話ですが、JavaScriptは奥が深いですね。

でぃべろっぱーず・さいど http://dev.chrisryu.com/ 鹿児島出身子持ちSEのディベロッパーとしての一面 ja Copyright 2013 Thu, 19 Jun 2008 23:34:35 +0900 http://www.sixapart.com/movabletype/ http://blogs.law.harvard.edu/tech/rss 外部JavaScriptファイルをロードして、そこに書かれている関数を実行する。 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が定義されていない場合はここを通る。=何もしない
  }
}

]]>
http://dev.chrisryu.com/2008/06/execute_exjsfile.html http://dev.chrisryu.com/2008/06/execute_exjsfile.html JavaScript Thu, 19 Jun 2008 23:34:35 +0900
JUI Tokyo 2008に参加してきましたよ! 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のみなさん、刺激的なプレゼンをしてくれたスピーカのみなさん、ありがとうございました!

]]>
http://dev.chrisryu.com/2008/05/join_and_enjyoy_jui_tokyo_2008.html http://dev.chrisryu.com/2008/05/join_and_enjyoy_jui_tokyo_2008.html JavaScript Tue, 20 May 2008 22:56:44 +0900
Re:javascript - 勝手に添削 - textareaの高さを自動調節 textareaのサイズを入力にあわせて調整するJavaScript (イラスト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 大好き。

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

]]>
http://dev.chrisryu.com/2008/05/rej_resize_textarea_by_avascript.html http://dev.chrisryu.com/2008/05/rej_resize_textarea_by_avascript.html JavaScript Tue, 20 May 2008 14:47:43 +0900
JavaScript忍者! jQueryのJohn Resigさんのブログに書いてましたが、Johnさんが執筆中のJavaScriptの本のタイトルが「Secrets of the JavaScript Ninja」らしいのです。

JavaScript忍者・・・。

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

に、忍者・・・。

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

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

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

080421_01.png

ちょっと!

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

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

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

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

]]>
http://dev.chrisryu.com/2008/04/javascript_ninja.html http://dev.chrisryu.com/2008/04/javascript_ninja.html JavaScript Mon, 21 Apr 2008 19:58:52 +0900
JavaScriptのparseInt関数の挙動 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

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

]]>
http://dev.chrisryu.com/2008/03/javascript_parseint.html http://dev.chrisryu.com/2008/03/javascript_parseint.html JavaScript Tue, 25 Mar 2008 20:51:33 +0900
JavaScriptの多言語対応の方法についてぼんやり考えてみた ぼんやりと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でやる方法ですね。
この場合、メッセージのファイルがロードされるまで、そこにアクセスしようとするとエラーになっちゃうから、ちょっと工夫が必要ですが。

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



]]>
http://dev.chrisryu.com/2007/12/multi_language_by_javascript.html http://dev.chrisryu.com/2007/12/multi_language_by_javascript.html JavaScript Wed, 26 Dec 2007 23:16:57 +0900
プルダウンについてちょっとだけ考える 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 の上方にあるのも、その一例ですね。

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

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

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

]]>
http://dev.chrisryu.com/2007/12/think_about_select_pulldown_a_little.html http://dev.chrisryu.com/2007/12/think_about_select_pulldown_a_little.html JavaScript Thu, 13 Dec 2007 23:41:13 +0900
JavaScript の開発環境 みなさんはどんな環境でJavaScriptの開発されてるんでしょうか。

僕が家で趣味グラミングしている環境は、apache + Eclipse with JSEclipse + ブラウザです。

Eclipse のworkspace を apache のhtdoc に指定しているので、自分が書いたものを http://localhost で確認することができます。

ローカルのファイルを開いてもJavaScriptは動作するので、apache が動いている意味はあまりないかもしれませんが、気分的なものでしょうかね。

テキストエディタとかでゴリゴリ書くこともありますが、事前にしょーもない文法エラーとかを拾ってくれるJSEclipse はかなり重宝します。

GeekになるためにはEmacs とか使いこなせないといけないんでしょうが、つい使っちゃうんですよね、
Eclipse 。

]]>
http://dev.chrisryu.com/2007/11/develop_environment_of_javascript.html http://dev.chrisryu.com/2007/11/develop_environment_of_javascript.html JavaScript Sat, 17 Nov 2007 21:39:04 +0900
JavaScript 勉強会 その2 JavaScript勉強会 (でぃべろっぱーず・さいど)の続き。

今回は、DOMとかAjax とかライブラリとか。

↓資料はこちら。

http://docs.google.com/Doc?id=ajhh7vcqfw52_117hjvjpz

見た目派手にするつもりが、結構たんたんと進めてしまいました。

やっぱりこの内容を質問とかの時間込みで1時間に圧縮するのは難しいなぁ。

第1回、第2回と資料を作りながら、僕自身知らなかったことを色々と身につけられました。

勉強会開催は人のためならず、ですね。

]]>
http://dev.chrisryu.com/2007/11/javascript_study_meeting_part2.html http://dev.chrisryu.com/2007/11/javascript_study_meeting_part2.html JavaScript Thu, 15 Nov 2007 23:31:17 +0900
続・JavaScript で ActionScript っぽく onEnterFrame を実装してみた 昨日の続き。

作ったサンプルがあまりにもしょぼかったので、今度はもっとFlash っぽいものを作ってみました。

onEnterFrame のサンプル その2

画面左端の黒いエリアにマウスを持っていくと、にょきにょきっと伸びます。

縦にマウスを動かすとそれっぽく見えます。

動作の振る舞いを onEnterFrame に書いて、frame オブジェクトに突っ込むだけなので、Flash でアニメーションを書いたことがある人なら結構直感的に分かってもらえるんじゃないかなぁと。

onmouseover とか onmouseout をわざわざ onRollOver 、onRollOut にしてるのは ActionScript っぽさを出すためです。

Flash で言うところの、_root オブジェクトを作って、もっと階層的にアニメーションを動かしたり、ライブラリに登録したMovieClip を load したりとかしてみようかとも思ったんですが、ちょっと煩雑すぎかなぁ。

]]>
http://dev.chrisryu.com/2007/11/javascript_actionscript_onente_1.html http://dev.chrisryu.com/2007/11/javascript_actionscript_onente_1.html JavaScript Wed, 14 Nov 2007 22:11:34 +0900
JavaScript で ActionScript っぽく onEnterFrame を実装してみた Flash を作る際、ActionScript でタイムラインであるフレームを管理するonEnterFrame というプロパティがあります。

MovieClip クラスのonEnterFrame に関数を代入すると、フレーム毎にそれを実行してくれるので、アニメーションの表現がやりやすいわけです。

JavaScript も ActionScript も同じECMAScript の実装なわけで、じゃあ JavaScript で onEnterFrame を実現したらどうなるなるかなぁと。

で、↓こんな感じで作ってみました。

動作サンプルはこちら

エラーチェックとかちゃんとしていないので、実用的なコードではありませんが、僕がやりたいことはつかんでいただけるかと。

ただ、この方法だと、Frame クラスが管理するオブジェクトが増えれば増えるほど、動作がもっさりするのは目に見えてますね。

というか、ここまでするならFlashでええやんって話かな。

]]>
http://dev.chrisryu.com/2007/11/javascript_actionscript_onente.html http://dev.chrisryu.com/2007/11/javascript_actionscript_onente.html JavaScript Tue, 13 Nov 2007 22:44:59 +0900
JavaScript勉強会 職場でJavaScriptの勉強会を開催しました。

JavaScript初心者のために開催したんだけど、なんかうまくまとまらなかったなぁ。

せっかくだからもっとデモをやればよかった。

一応、資料を公開しておきます。

http://docs.google.com/Doc?id=ajhh7vcqfw52_11488vf3q

口頭で補足した部分が結構あるので、これだけ見てもつまんないかも。

JavaScriptでこんなことできますよーって意味で、冒頭にmeltdown.js とか2ndlifeさんのタイポグラフィとか見せてみたんだけど、思ったほど反応なかったなぁ。みんなこういうのに興味ないんだろうか。

次回は今週木曜日を予定していて、内容はDOMとかAjaxとかライブラリとか。

今日に比べると見た目が派手になるので、もう少し食いつきも違うかなぁ。

見せ方をどうしようか・・・。

]]>
http://dev.chrisryu.com/2007/11/javascript_study_meeting.html http://dev.chrisryu.com/2007/11/javascript_study_meeting.html JavaScript Mon, 12 Nov 2007 22:49:52 +0900
instanceof の戻り値 来週、職場でJavaScriptの勉強会を開くことになって、資料を作っていたんですが、その中でへぇと思ったことがあったのでメモ。

instanceof で何のインスタンスかが分かるんですが、

var a = 1;
alert(typeof a); // number
alert(a instanceof Number); // false
a = new Number(1);
alert(typeof a); // object
alert(a instanceof Number); // true
a = a + '';
alert(typeof a); // string
alert(a instanceof String); // false
a = new String('1');
alert(typeof a); // object
alert(a instanceof String); // true
a = true;
alert(typeof a); // boolean
alert(a instanceof Boolean); // false
a = new Boolean('true');
alert(typeof a); // object
alert(a instanceof Boolean); // true

てなかんじで、new したやつはちゃんとオブジェクトのインスタンスとして認識されるんですね。

でもって、関数は、

function a(){}
alert(typeof a); // function
alert(a instanceof Function); // true
var b = new Function();
alert(typeof b); // function
alert(b instanceof Function); // true
var c = function(){}
alert(typeof c); // function
alert(c instanceof Function); // true

どう宣言しても、ちゃんとtypeofは関数型で関数オブジェクトのインスタンスということになるんですと。

]]>
http://dev.chrisryu.com/2007/11/instanceof.html http://dev.chrisryu.com/2007/11/instanceof.html JavaScript Sun, 11 Nov 2007 21:29:09 +0900
Object.prototype をどうしようか・・・ rosy.js の中で、ヘルプメッセージをObjectの形で管理しようとしていて、出力するときはfor 文で回して一発だ!とか思ってたら、Object.prototype を拡張しているページだとヘルプメッセージにそれらの関数が表示されちゃってがっかり。

まあ、そうだよね。

ということで、その部分の実装を変更しようと考え中。

今は、

helpmessage : { "commands":{ "#list":"show input command list" ,"#help":"show help messages" ,"#img":"show img file list" }, "key operation":{ "up / down key":"show input command log" ,"left / right key":"easy input for rlog.d() / rlog.d('') (if input line is empty)" } }

こんな感じで持ってるんだけど、↓こんな風にした方が良いんだよね、きっと。

helpmessage : [ { "category":"commands" ,"child":[{"command":"#list","exp":"show input command list"} ,{"command":"#help","exp":"show help messages"} ,{"command":"#img","exp":"show img file list"}] }, { "category":"key operation" ,"child":[{"key":"up / down key","exp":"show input command log"} ,{"key":"left / right key","exp":"easy input for rlog.d() / rlog.d('') (if input line is empty)"}] } }]

うーん。なんかもっと良い方法ないかなぁ。

]]>
http://dev.chrisryu.com/2007/11/use_object_for_messaging.html http://dev.chrisryu.com/2007/11/use_object_for_messaging.html JavaScript Tue, 06 Nov 2007 23:57:22 +0900
rosy.js 0.3.0 リリース rosy.js の 0.3.0 をリリースしました。

rosy - Google Code

0.2.0からの大きな変更点は、コマンド入力ラインを設けたところです。

そのコマンドラインからページに対してjavascriptを実行できます。グローバル変数/関数の作成もできるので、IEでデバッグする際は結構便利かと。

bookmarklet も作っているので、色んなページにログコンソールとコマンド入力ラインを表示することが出来ます。

Rosy logging bookmarklet

ブックマークレットには、安定版を呼び出すものとSVNから最新版を呼び出すものの2種類があるので、お好きな方をご利用ください。

また、コマンド入力ラインに独自のコマンドを実装しました。

#help と入力するとその内容を確認することができます。

例えば、#img でページないのimg タグのsrc 属性を一覧で表示したり、#clear でコンソールをクリアしたりします。

あと、↓↑キーで、過去に入力したコマンドを呼び出したり、←→キーで、ログ出力のrlog.d() を簡易入力できたりします。

start rosy log window (0.3.0)

↑上記リンクをクリックすると、このページ内にログウィンドウを出現させるので、是非おためしください。

]]>
http://dev.chrisryu.com/2007/11/rosyjs_030.html http://dev.chrisryu.com/2007/11/rosyjs_030.html JavaScript Sun, 04 Nov 2007 21:23:40 +0900
でぃべろっぱーず・さいど: アーカイブ

アーカイブ

/* Base Weblog (base-weblog.css) */ /* basic elements */ html { margin: 0; /* setting border: 0 hoses ie6 win window inner well border */ padding: 0; } body { margin: 0; /* setting border: 0 hoses ie5 win window inner well border */ padding: 0; font-family: verdana, 'trebuchet ms', sans-serif; font-size: 12px; } form { margin: 0; padding: 0; } a { text-decoration: underline; } a img { border: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } h1, h2, h3, h4, h5, h6, p, ol, ul, pre, blockquote { margin-top: 10px; margin-bottom: 10px; } /* standard helper classes */ .clr { clear: both; overflow: hidden; width: 1px; height: 1px; margin: 0 -1px -1px 0; border: 0; padding: 0; font-size: 0; line-height: 0; } /* .pkg class wraps enclosing block element around inner floated elements */ .pkg:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; } * html .pkg { display: inline-block; } /* no ie mac \*/ * html .pkg { height: 1%; } .pkg { display: block; } /* */ /* page layout */ body { text-align: center; } /* center on ie */ #container { position: relative; margin: 0 auto; /* center on everything else */ width: 720px; text-align: left; } #container-inner { position: static; width: auto; } #banner { position: relative; } #banner-inner { position: static; } #pagebody { position: relative; width: 100%; } #pagebody-inner { position: static; width: 100%; } #alpha, #beta, #gamma, #delta { display: inline; /* ie win bugfix */ position: relative; float: left; min-height: 1px; } #delta { float: right; } #alpha-inner, #beta-inner, #gamma-inner, #delta-inner { position: static; } /* banner user/photo */ .banner-user { float: left; overflow: hidden; width: 64px; margin: 0 15px 0 0; border: 0; padding: 0; text-align: center; } .banner-user-photo { display: block; margin: 0 0 2px 0; border: 0; padding: 0; background-position: center center; background-repeat: no-repeat; text-decoration: none !important; } .banner-user-photo img { width: 64px; height: auto; margin: 0; border: 0; padding: 0; } /* content */ .content-nav { margin: 10px; text-align: center; } .date-header, .entry-content { position: static; clear: both; } .entry, .trackbacks, .comments, .archive { position: static; overflow: hidden; clear: both; width: 100%; margin-bottom: 20px; } .entry-content, .trackbacks-info, .trackback-content, .comment-content, .comments-open-content, .comments-closed { clear: both; } .entry-excerpt, .entry-body, .entry-more-link, .entry-more { clear: both; } .entry-footer, .trackback-footer, .comment-footer, .comments-open-footer, .archive-content { clear: both; margin: 5px 10px 20px 10px; } .comments-open label { display: block; } #comment-author, #comment-email, #comment-url, #comment-text { width: 240px; } #comment-bake-cookie { margin-left: 0; vertical-align: middle; } .comments-open-header { clear: both; } #comment-post { font-weight: bold; } img.image-full { width: 100%; } .image-thumbnail { float: left; width: 115px; margin: 0 10px 10px 0; } .image-thumbnail img { width: 115px; height: 115px; margin: 0 0 2px 0; } /* modules */ .module { position: relative; overflow: hidden; width: 100%; } .module-content { position: relative; margin: 5px 10px 20px 10px; } .module-list, .archive-list { margin: 0; padding: 0; list-style: none; } .module-list-item { margin-top: 5px; margin-bottom: 5px; } .module-presence img { vertical-align: middle; } .module-powered .module-content { margin-bottom: 10px; } .module-photo .module-content { text-align: center; } .module-wishlist .module-content { text-align: center; } .module-calendar .module-content table { border-collapse: collapse; } .module-calendar .module-content th, .module-calendar .module-content td { width: 14%; text-align: center; } .typelist-thumbnailed { margin: 0 0 20px 0; } .typelist-thumbnailed .module-list-item { display: block; clear: both; margin: 0; } /* positioniseverything.net/easyclearing.html */ .typelist-thumbnailed .module-list-item:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; } * html .typelist-thumbnailed .module-list-item { display: inline-block; } /* no ie mac \*/ * html .typelist-thumbnailed .module-list-item { height: 1%; } .typelist-thumbnailed .module-list-item { display: block; } /* */ .typelist-thumbnail { float: left; min-width: 60px; width: 60px; /* no ie mac \*/width: auto;/* */ margin: 0 5px 0 0; text-align: center; vertical-align: middle; } .typelist-thumbnail img { margin: 5px; } .module-galleries .typelist-thumbnail img { width: 50px; } .typelist-description { margin: 0; padding: 5px; } .module-featured-photo .module-content, .module-photo .module-content { margin: 0; } .module-featured-photo img { width: 100%; } .module-recent-photos { margin: 0 0 15px 0; } .module-recent-photos .module-content { margin: 0; } .module-recent-photos .module-list { display: block; height: 1%; margin: 0; border: 0; padding: 0; list-style: none; } /* positioniseverything.net/easyclearing.html */ .module-recent-photos .module-list:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; } * html .module-recent-photos .module-list { display: inline-block; } /* no ie mac \*/ * html .module-recent-photos .module-list { height: 1%; } .module-recent-photos .module-list { display: block; } /* */ .module-recent-photos .module-list-item { display: block; float: left; /* ie win fix \*/ height: 1%; /**/ margin: 0; border: 0; padding: 0; } .module-recent-photos .module-list-item a { display: block; margin: 0; border: 0; padding: 0; } .module-recent-photos .module-list-item img { width: 60px; height: 60px; margin: 0; padding: 0; } /* mmt calendar */ .module-mmt-calendar { margin-bottom: 15px; } .module-mmt-calendar .module-content { margin: 0; } .module-mmt-calendar .module-header { margin: 0; } .module-mmt-calendar .module-header a { text-decoration: none; } .module-mmt-calendar table { width: 100%; } .module-mmt-calendar th { text-align: left; } .module-mmt-calendar td { width: 14%; height: 75px; text-align: left; vertical-align: top; } .day-photo { width: 54px; height: 54px; } .day-photo a { display: block; } .day-photo a img { width: 50px; height: 50px; } /* Vicksburg II (theme-vicksburg.css) */ /* basic page elements */ body { font-family: 'trebuchet ms', verdana, helvetica, arial, sans-serif; font-size: 12px; } a { color: #666666; text-decoration: underline; } a:hover { color: #66cc33; } #banner a { color: #fff; text-decoration: none; } #banner a:hover { color: #fff; } .module-content a { color: #666666; } .module-content a:hover { color: #66cc33; } h1, h2, h3, h4, h5, h6 { font-family: 'trebuchet ms', verdana, helvetica, arial, sans-serif; } .module-header, .trackbacks-header, .comments-header, .comments-open-header, .archive-header { color: #000000; font-family: 'Trebuchet MS', Verdana, sans-serif; font-size: x-small; border-bottom: 1px dashed #999999; text-align: left; font-weight: bold; text-transform: uppercase; padding: 3px; letter-spacing: .3em; } .module-header a, .module-header a:hover, .trackbacks-header a, .trackbacks-header a:hover, .comments-header a, .comments-header a:hover, .comments-open-header a, .comments-open-header a:hover .archive-header a, .archive-header a:hover { color: #fff; } .entry-more-link, .entry-footer, .comment-footer, .trackback-footer, .typelist-thumbnailed { font-size: 11px; } .commenter-profile img { vertical-align: middle; } /* page layout */ body { min-width: 720px; color: #333; background: #FFFFFF; } #container { width: 720px; margin-bottom: 20px; background: #fff; } #container-inner { border-width: 0 5px 5px 5px; border-style: solid; border-color: #FFFFFF; } #banner { width: 710px; /* necessary for ie win */ background: #66cc33; } #banner-inner { padding: 15px 13px; border-width: 0px 0px 0 0px; border-style: solid; border-color: #fff; } .banner-user { width: 70px; margin-top: 5px; font-size: 10px; } .banner-user-photo { border: 1px solid #fff; } #banner-header { margin: 0; color: #fff; font-size: 30px; font-weight: bold; line-height: 1; text-shadow: #666666 0 2px 3px; } #banner-description { margin-top: 5px; margin-bottom: 0; color: #fff; background: none; font-size: 12px; line-height: 1.125; text-shadow: #666666 0 1px 2px; } #alpha { margin: 15px 15px 0 15px; width: 480px; } #beta { width: 200px; background: #e6ecf2; } #gamma, #delta { width: 180px; background: #dddddd; } #beta-inner, #gamma-inner, #delta-inner { padding: 10px 10px 0 10px; border-width: 0px 0px 0px 0; border-style: solid; border-color: #fff; } .date-header { margin-top: 0; font-size: 11px; font-weight: bold; text-transform: uppercase; } .entry-header { margin-top: 0; border-left: 5px solid #66CC33; padding: 0 0 0 10px; color: #000000; font-size: 18px; font-weight: bold; } .entry-content, .comment-content, .trackback-content { margin: 0; line-height: 1.5; } .entry-tags { margin: 0 0 10px 10px; } .entry-tags-header, .entry-tags-list, .entry-tag { display: inline; } .entry-tags-list { list-style:none; padding: 0px; } .entry-footer, .comment-footer, .trackback-footer { margin: 0 0 20px 0; border-top: 1px solid #DDDDDD; padding-top: 3px; color: #666; font-size: 10px; text-align: right; } .comment-content, .trackback-content, .comment-footer, .trackback-footer { margin-left: 10px; } .content-nav { margin-top: 0; } #trackbacks-info { margin: 10px 0; border: 1px dashed #66cc33; padding: 0 10px; color: #292e33; font-size: 11px; text-align: center; background: #dddddd; } .comments-open-footer { margin: 10px 0; } /* modules */ .module { margin: 0 0 10px 0; border-bottom: 1px solid #f3f6f9; background: #DDDDDD; } .module-content { margin: 0 0 10px 0; padding: 10px 10px 0 10px; font-size: 10px; line-height: 1.2; } .module-search input { font-size: 10px; } .module-search #search { width: 100px; } .module-mmt-calendar .module-content table, .module-calendar .module-content table { font-size: 10px; } .module-powered { border-width: 0; } .module-powered .module-content { margin-bottom: 0; border: 1px dashed #66cc33; padding-bottom: 10px; color: #292e33; background: #fff; } .module-photo { background: none; } .module-photo img { border: solid 1px #fff; } .module-list { margin: 0 15px 10px 15px; list-style: disc; } .module-list .module-list { margin: 5px 0 0 0; padding-left: 15px; list-style: circle; } .module-list-item { margin-top: 0; color: #666; line-height: 1.2; } .typelist-thumbnailed .module-list { margin: 0 0 10px 0; list-style: none; } .typelist-thumbnailed .module-list-item { margin: 1px 0; padding: 0; background: #f3f6f9; } .typelist-thumbnail { background: #fff; } .module-photo img { border: 1px solid #fff; } .module-featured-photo { width: 398px; } .module-featured-photo .module-content { margin: 0; border-width: 0; padding: 0; } .module-featured-photo img { width: 398px; } .module-recent-photos .module-content { padding: 10px 0 0 19px; } .module-recent-photos .module-list { margin: 0; } .module-recent-photos .module-list-item { width: 64px; /* mac ie fix */ margin: 0 10px 10px 0; padding: 0; background: none; } .module-recent-photos .module-list-item a { border: #cfd4d9 1px solid; padding: 1px; background: #fff; } .module-recent-photos .module-list-item a:hover { border-color: #666666; background: #fff; } .module-tagcloud .module-list {text-align: center; } .module-tagcloud .module-list { list-style: none; } .module-tagcloud .module-list-item { display: inline; } .module-tagcloud li.taglevel1 { font-size: 19px; } .module-tagcloud li.taglevel2 { font-size: 17px; } .module-tagcloud li.taglevel3 { font-size: 15px; } .module-tagcloud li.taglevel4 { font-size: 13px; } .module-tagcloud li.taglevel5 { font-size: 11px; } .module-tagcloud li.taglevel6 { font-size: 9px; } /* calendar tweaks */ .layout-calendar #alpha { width: 260px; } .layout-calendar #beta { width: 420px; } .layout-calendar #gamma, .layout-calendar #delta { width: 190px; } .layout-calendar #gamma-inner, .layout-calendar #delta-inner { border: 0; padding: 0; } .module-mmt-calendar { width: 398px; } .module-mmt-calendar .module-content { margin: 0; border-width: 0; padding: 10px; } .module-mmt-calendar table { width: 378px; background: #66cc33; } .module-mmt-calendar th { color: #fff; border-top: 1px solid #fff; border-right: 1px solid #f3f6f9; border-bottom: 1px solid #cfd4d9; padding: 2px; text-align: right; font-weight: bold; } .module-mmt-calendar td { border-top: 1px solid #fff; border-right: 1px solid #f3f6f9; border-bottom: 1px solid #cfd4d9; padding: 2px; text-align: right; font-weight: normal; background: #dddddd; } th.weekday-7, td.day-7, td.day-14, td.day-21, td.day-28, td.day-35, td.day-42 { border-right: none; } .module-mmt-calendar td { height: 70px; } .day-photo { width: 49px; height: 49px; } .day-photo a { border: #cfd4d9 1px solid; padding: 1px; background: #fff; } .day-photo a:hover { border-color: #666666; background: #fff; } .day-photo a img { width: 45px; height: 45px; } /* artistic tweaks */ .layout-artistic #alpha { width: 260px; } .layout-artistic #beta { width: 420px; } .layout-artistic #gamma, .layout-artistic #delta { width: 190px; } .layout-artistic #gamma-inner, .layout-artistic #delta-inner { border: 0; padding: 0; } /* moblog1 tweaks */ .layout-moblog1 #alpha { margin: 0; width: 180px; background: #dddddd; } .layout-moblog1 #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-moblog1 #beta { margin: 15px 15px 0 15px; width: 320px; background: none; } .layout-moblog1 #beta-inner { padding: 0; border-width: 0; } .layout-moblog1 .module-recent-photos .module-content { padding: 10px 0 0 10px; } /* moblog2 tweaks */ .layout-moblog2 #alpha { margin: 0; width: 86px; background: #dddddd; } .layout-moblog2 #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-moblog2 #beta { margin: 15px 15px 0 15px; width: 260px; background: none; } .layout-moblog2 #beta-inner { padding: 0; border-width: 0; } .layout-moblog2 #delta { width: 154px; } .layout-moblog2 .module-recent-photos { border: 0; background: none; } .layout-moblog2 .module-recent-photos .module-content { padding: 0; border: 0; } .layout-moblog2 .module-recent-photos .module-list-item { margin: 0 0 10px 0; } /* timeline tweaks */ .layout-timeline #alpha { width: 260px; } .layout-timeline #beta { width: 420px; } .layout-timeline #gamma, .layout-timeline #delta { width: 190px; } .layout-timeline #gamma-inner, .layout-timeline #delta-inner { border: 0; padding: 0; } /* one-column tweaks */ .layout-one-column body { min-width: 520px; } .layout-one-column #container { width: 520px; } .layout-one-column #banner { width: 510px; } /* necessary for ie win */ /* two-column-left tweaks */ .layout-two-column-left #alpha { margin: 0; width: 200px; background: #dddddd; } .layout-two-column-left #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-two-column-left #beta { margin: 15px 15px 0 15px; width: 480px; background: none; } .layout-two-column-left #beta-inner { padding: 0; border-width: 0; } /* three-column tweaks */ .layout-three-column #alpha { margin: 0; width: 180px; background: #DDDDDD; } .layout-three-column #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-three-column #beta { margin: 15px 15px 0 15px; width: 320px; background: none; } .layout-three-column #beta-inner { padding: 0; border-width: 0; } /* * Preliminary styles added by Jay for Vicksburg II * for review by Luke/Walt and rest of team */ /* All or multiple templates Suppress underlines on linked entry titles */ .entry-header a { text-decoration: none; } /* Suppress the prev/next nav */ .content-nav { margin: 0px; display: none; } /* Search results templates */ .mt-search-results .search-results-header { border: 2px solid #669; background-color: #666666; color: #eee; padding: 5px; } .mt-search-results .search-results-container { margin-left:10px; } .mt-search-results form#search-form { width: 400px; margin: 0px auto 20px auto; } .mt-search-results form#search-form input#search { width: 80%; } .mt-search-results form#search-form p#search-options { text-align:center; } /* Entry tag display */ div.entry-tags { margin:0 0 10px 10px; } ul.entry-tags-list { list-style:none; padding: 0px; } h4.entry-tags-header, ul.entry-tags-list, li.entry-tag { display: inline; } /* Main index styles Suppress date header on main index */ .main-index .date-header { display: none; } /* Comment preview and individual entry Widen the comment form */ form textarea#comment-text { width:400px; } /* All archive templates Informational "where am I?" module at top of sidebar */ .module-welcome p { font-size: 12px; } .module-content p.first { margin-top:0px; } /* Date-based and category archives Archive title banner at top of page, below blog banner */ .master-archive-index #archive-title, .individual-entry-archive #archive-title, .date-based-archive #archive-title, .category-archive #archive-title { /* ie win (5, 5.5, 6) bugfix */ p\osition: relative; width: 100%; w\idth: auto; margin: 0; border-left: 10px solid #66cc33; padding: 5px; color: #fff; background: #666666; } /* Experimental comment styles Not currently in use anywhere in default templates For testing only... */ #comments-experimental .comment, #comments-experimental .comment .comment-inner { width:36em; } #comments-experimental .comment { padding: 0px; margin: 10px 15px; background-color:#eef; border:2px solid #bbb; } #comments-experimental .comment .comment-inner { position:relative; margin:-5px 0 0 -3px; background:#f3f3ff; border:1px solid #003; } #comments-experimental .comment:hover .comment-inner { border:1px solid #000; background-color: #fff; } #comments-experimental .comment a { text-decoration: none; border-bottom: 1px dotted #666666; } #comments-experimental .comment:hover a { color: #333; border-bottom: 1px solid #666; } #comments-experimental .comment .comment-footer, #comments-experimental .comment .comment-content { margin-right: 25px; margin-left: 25px; margin-bottom: 15px; } #comments-experimental .comment .comment-header { font-size: 16px; margin: 5px auto 5px 10px; text-shadow: #99A 2px 2px 1px #66F; color: #666; } #comments .comment-header { display: none; } #comments .comment-footer-experimental { display: none; } #comments-experimental .comment-footer { display: none; } でぃべろっぱーず・さいど: コメントの保留

コメントを受け付けました。

コメントを受け付けました。受け付けたコメントは、ブログの管理者の承認のため保留されています。

エントリーのページに戻る