はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記
はじめに 「新はてなブックマーク」になったということで、とっても便利になったのですが、ブックマーク一覧ページ*1が若干 JavaScript に時間が掛かっているみたいです。 というわけで 調査してみたいと思います。調査して、改善できそうなところは後で纏めて「はてなアイデア」にでも登録しようと思います。 この日記は調査しながら、過程を書いていくつもりです。 準備 まずは、人のサイトの JavaScript を書き換えて試してみるための環境を作ります。 作業用ディレクトリを作る とりあえず、ホームに HatenaJS というディレクトリを作ります。 $ mkdir HatenaJS $ cd HatenaJS CocProxy をダウンロードしてくる 以下から CocProxy というツールをダウンロードしてきます。 http://coderepos.org/share/wiki/CocPr
【速報】IE8 Beta 2 で DOM オブジェクトに対して Getter / Setter を追加できるように！ - IT戦記
さっき IE8 Beta 2 が出ましたね！ ということで、インストールをしてみました！ で IE8 Beta 2 の DOM オブジェクトに以下の Getter Setter 用の関数群を発見！ __defineGetter__ __defineSetter__ __lookupGetter__ __lookupSetter__ ちゃんと動いている見たいです！ これは本当にすごいです！感動！ var body = document.body; // IE にだけ存在しない // textContent プロパティを body に作ってみる body.__defineGetter__( 'textContent', body.__lookupGetter__('innerText')); body.__defineSetter__( 'textContent', body.__lookup
プログラミング未経験者が JavaScript でプログラミングを始めるまでに必要なこと - IT戦記
（執筆中） （文章の練習も兼ねてぐだぐだと執筆中、現時点で読んでも日本語になってないと思います。） （執筆途中だけど、こうしたらいい！とか、アドバイスがあれば教えてください＞＜読者みんなが編集者！とか言ってみる） （あ、はてな記法のパッチを送ってくれてもいいです＾＾） （ちょっと、 Shibuya.JS in Kyoto → PHP カンファレンスがあるので、次の更新はそれ以降になるかも） 自分の知り合いに「まったくのプログラミング未経験だけど、自分のウェブサイトを作ってみたい！」という人がいるので、プログラミングを始める前に必要な知識や心構えや準備などを書いておこうと思います。もちろん、最初に使う言語は JavaScript です。 この文章は、プログラミングまったくの未経験者が読んで分かる文章を目指しています。もし、分からない部分がある場合は指摘してください。聞いてください。自分で調べ
Gmail がメールごとにブックマーク出来るようになって超便利 - IT戦記
今日 Gmail を開いたら URL が以下のようになってました！ http://mail.google.com/mail/#inbox/<id>これはパーマリンクなのかなと思って、実際にブックマークしてみたら、ちゃんとまたそのメールを開き直せました！ メールをブックマークしたり、パーマリンクで管理できるということか！ これは便利ですね！ （追記）その URL を人に送ってみた 見れないようです（その人も参加してるスレッドでも） 他の人のメールのパーマリンクを踏んだ場合は、 http://mail.google.com/mail/ へ飛ばされます。 なので、忘れそうなメールとかは「はてブ」とかで管理してもいいかもしれませんね。
DOM Range のテストケースを書きました - IT戦記
W3C で DOM Range という便利なオブジェクトが勧告されています。 http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html DOM Range って何？ DOM Range とは、 DOM ツリーの任意の範囲を表すための仕様です。 DOM Range を使うと、「ここからここまでのノードを全部削除」とか「ここからここまでの要素をここに移動」というような操作が簡単にできます。 もちろん、ノードの途中も選択できます。 また、 DOM Range はコンテンツをマウスなどで選択したときの選択範囲を表す Selection オブジェクトからも使われています。 （ちなみに Selection オブジェクトの仕様は HTML5 で定義されています。 http://www.whatwg.org/specs/web-apps/cu
IE8 で実装された Selectors API とは何か？ - IT戦記
はじめに IE8 には Selectors API という新しい仕様が実装されました。 ということで、今後 DOM 操作 API の主流になるであろう Selectors API についてまとめておきます。 Selectors API が使えるブラウザ 2008 年 3 月 6 日現在の一覧 WebKit Build Archives | WebKit (開発版の Safari) Windows | Official Site for Microsoft Windows 10 Home & Pro OS, laptops, PCs, tablets & more (IE8 の Beta 版) Selectors API とは Selectors API とは W3C で定義された仕様です。詳細に関してはこちらをどうぞ 簡単に説明すると getElementsByTagName や getE
display: table-cell を使ったマルチカラムレイアウト - IT戦記
Acid2 Test で IE8 が display: table-cell をきちんとレンダリングするということが分かったので。 IE8 が普及する（笑）のを 5 年くらい先取りして display: table-cell によるマルチカラムレイアウトを書いてみました。 リンクは以下です。 http://amachang.art-code.org/tablecell/ 今のところ Opera 9+、Safari 2+、 Firefox 2+ で正常にレンダリングされることを確認しました。 ポイント ソースを見て分かるように HTML も CSS もめちゃめちゃシンプルです。 ポイントは display: table-cell の要素が兄弟要素の高さに併せて間延びするところでしょう。 これで、何カラムだろうとお手のものです。
1000 人スピーカープロジェクト第一回カンファレンスを開催しました - IT戦記
このエントリの最後に次回カンファレンスの告知があります！！ はじめに 2008/1/19(土) 13:00 〜 夜中まで、1000 人スピーカープロジェクトの第一回カンファレンスを開催いたしました。 今回は、忙しい中参加してくださった皆様、 Linger や Ustream や IRC やニコニコ動画や Wiki にご意見くださった皆様、本当にありがとうございました！！ おかげさまで第一回は大変有意義なものになりました！ 1000 人スピーカープロジェクトとは 日本の IT 業界から 1000 人の講演者を生み出すプロジェクトです。 詳しくは以下の Wiki ページをご覧ください。 エロと風俗情報満載 どう抜く？ 動画配信について 動画配信は coji さんに協力いただきました！このために様々な機器まで自腹で用意していただいて、めちゃめちゃ感謝感謝です＞＜ また、 coji さんが今回の動
わーい ＼（＾o＾）／ Scheme もどきを JS で書いたよー！ - IT戦記
昨日の夜のこと （1000 人スピーカープロジェクトの打ち上げが終わって、解散後、数名でサイボウズラボに寄り道） id:amachang: あー今日は楽しかったねー（レゴみたいなおもちゃで遊びながら） id:nishiohirokazu: うんー楽しかったねー（レゴみたいなおもちゃで遊びながら） id:amachang: yuum3 や yad-EL さんが言ってたみたいに SICP 読んでみたいなー id:yukoba: …黙々… id:amachang: ところで yukoba さん、さっきから何やってんの id:yukoba: え？ Scheme 作ってる（超笑顔） …レゴみたいなおもちゃ ポロリ id:amachang & id:nishiohirokazu: えー！抜け駆けずるいー！！！＞＜ id:amachang: おれも作る＞＜！ id:nishiohirokazu: えっえ
Opera 9.5 の Date().getYear() が IE と同じ仕様に - IT戦記
JavaScript の以下のコードは Date().getYear() ブラウザによって 108 を返したり 2008 を返したりする ちなみに、仕様的には 108 が正しい。 今までの Opera の場合は仕様通り 108 で処理していたが、 Opera 9.5 で互換性重視で 2008 になったようだ。 こうコロコロ変わられてはブラウザ判定してても意味がないので、以下のように判定することにした。 var year = Date().getYear(); year += (year > 1900) ? 0 : 1900; いやー。ダサいのは分かってるんだけどー＞＜ きっと、このようなコードがのちに 3800 年問題と呼ばれるに違いない（違
話したい人のためのカンファレンス、改め 1000 人スピーカプロジェクト第一回カンファレンス詳細 - IT戦記
ここまでの流れを纏めておきます。 話したい人のためのカンファレンスというのをやると言って、そろそろ時期が近づいて来たので、その詳細を告知したいと思います。 カンファレンス名について 参加者（聞きたい人）の追加募集について 第一回の詳細（wiki）について 今後の方針とか カンファレンス名について まず、カンファレンス名ですが「話したい人のためのカンファレンス」をやめて「1000 人スピーカプロジェクト」という名前にしようということになりました。 この名前は id:nishiohirokazu と考えたもので、「1000 人のスピーカが居れば日本の IT 業界は変わると思う」という信念を持ってこの名前を付けました。 ですので、次回のカンファレンスは、その第一回、つまり、「1000 人スピーカプロジェクト」の「第一回カンファレンス」ということになります。 参加者（聞きたい人）の追加募集について
JavaScript でこんなパッケージ管理はどうか？ - IT戦記
まず、以下のような package 関数を作る。 function package(name) { package.__hash__ = package.__hash__ || {}; if (!package.__hash__.hasOwnProperty(name)) { package.__hash__[name] = { def: function(name, value) { return this[name] = value; } } } return package.__hash__[name] } で、こんな感じで使う // ここは hoge の名前空間 with (package('hoge')) { def('var0', 1); // 変数は def 関数で定義 def('var2', 2); alert(var0); // 1 alert(var2); // 2 }
Firefox の拡張機能をふとした時に手元でチョコチョコいじれるようにしとくと楽しい - IT戦記
この記事で Firebug ハッキング Tips を纏めたい Firebug に一行追記して右クリックで XPath をコピペ出来るようにする。 - IT戦記 とか言ってたけどその前に、 僕は Firebug だけじゃなくて、 だいたいの拡張機能で、簡単に「チョコチョコいじれる化」というのをしてるのでそれを書いてみます。 チョコチョコいじれる化とは jar ファイルを解凍しておいてすぐ書き換えられるようにしとくこと。 「チョコチョコいじれる化」しとくと気付いたときにちょっと JS や XML や CSS を追加するだけで、いろいろ改造できて楽しい。 「でも、 Firefox が壊れる可能性があるじゃん＞＜」って？ チッチッチ、ナンセンスだよメーン そんなの拡張機能のディレクトリを削除しちゃえば元通りさ Don't be scared! iKnow!で英語。ちょっとの努力で、大きな成果を。
JavaScript-XPath の jQuery 用のプラグインと Prototype.js 用のプラグインを公開しました - IT戦記
以下のサイトからダウンロードしてお使いください。 Prototype.js 用 http://coderepos.org/share/wiki/JavaScript-XPath/bindings/Prototype jQuery 用 http://coderepos.org/share/wiki/JavaScript-XPath/bindings/jQuery 使いにくいところがあれば すぐになおしますので、コメントやブックマークなどで教えていただければ嬉しいです。 他のライブラリのプラグインに関して そのうち、開発したいなあとは思っているのですが。 そのライブラリの空気感（コンセプト）を読めないと、なかなか使いやすいプラグインは書けないので時間がかかりそうです。 もし 誰か書いてくれる人がいればとてもありがたいなあ。。。とか思っています。 いませんよねいませんよね＞＜？ 「こんな、感じで
動的スクリプトローディング（さんざん既出だと思うけど - IT戦記
なんか、既出な予感もするんですけど 私製版を作ったので コード var load = function(src, check, next) { check = new Function('return !!(' + check + ')'); if (!check()) { var script = document.createElement('script') script.src = src; document.body.appendChild(script); setTimeout(function() { if (!check()) setTimeout(arguments.callee, 100); else next(); }, 100); } else next(); }; 考え方は、 このエントリ と同じです。 使い方 以下の場合 // 処理 1 // ← ここで jQu
JS オレオレ言語ブーム - IT戦記
オレオレ言語ブームについては以下 OreScript時代の幕開け - yukobaのブログ で。 scriptタグ - ロックスターになりたい を見て思いついたんだけど <script src="俺のスクリプトインタプリタなんだぜ.js"></script> <script type="text/俺の"> ： ： </script> ってやるより <script src="俺のスクリプトインタプリタなんだぜ.js"> ： ： </script> のほうがシンプルでいいかもー。 とか思った。 これだと onload 待たなくても取れるんじゃないかなー。たぶん
JavaScript-XPath をリリースしました！さあ、あなたも XPath を使おう！（解説付き） - IT戦記
JavaScript-XPath とは JavaScript-XPath は、 DOM 3 XPath を実装していないブラウザに対して、実用的な速度で動作する DOM 3 XPath のエンジンを追加します。 一言で乱暴に言ってしまえば、どのブラウザでも document.evaluate って関数で XPath 使えるようになるよ！ってことです。 以下が公式サイトになります。 http://coderepos.org/share/wiki/JavaScript-XPath DOM 3 XPath ってなんなの！？ めっちゃ簡単（で、ちょっとだけ適当）なDOM 3 XPath の説明をします＞＜。 JavaScript でよく使う document.getElementById や document.getElementsByTagName って関数ありますよね？ DOM 3 XPath
for 文を setTimeout に変換する - IT戦記
for 文で 100 項目とか 1000 項目とかあるテストケースを処理するとブラウザが固まる。 こんなダイアログが表示されます。 ということで for 文を setTimeout や setInterval に変換する事で定期的にブラウザに処理を戻すことができる。 // ここでは console.log のところでログを取ってますが // 通常は処理が入ります。 for (var i = 0; i < 3; i ++) { console.log('a' + i); } /* * 結果 * a0 * a1 * a2 */ これをまず while 文に変換 var i = 0; while (true) { if (!(i < 3)) break; console.log('a' + i); i ++; } /* * 結果 * a0 * a1 * a2 */ で、 setTimeout に
IT戦記 - 一行で IE の JavaScript を高速化する方法
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
みんな Perl やろうよ！ - IT戦記
