Web 2.0 時代の Ajax Binary Hacks 竹迫 良範 <takesako@shibuya.pm.org>

はじめに

アンケート 説明できる人いますか？

Web 2.0 って何？ 　最近話題のWeb2.0をパソコンにインストールしようと思っているのですが、パソコンに詳しい友人に聞いたところ初回版はバグが多いから、Web2.1のバージョンまで待った方がいいとのことでした。 　　そうなんでしょうか？ 　　　　　　またWeb2.1はいつごろでるのでしょうか？ http://oshiete1.goo.ne.jp/kotaeru.php3?qid=1770566 えっ！？そうだったのかー（汗） http://oshiete1.goo.ne.jp/kotaeru.php3?qid=1770566

Tim O’Reilly による Web2.0 の概念

2.0 ブーム到来 Web 2.0 Binary 2.0 Moe 2.0 第2世代のWeb、再評価（2.0） HTML+JavaScript+CSS（Ajax） Binary 2.0 Binary 2.0 カンファレンス開催 Web 2.0 を裏で支える基盤技術 Moe 2.0 3.0次元に萌えるのは邪道 2.0次元で萌える→原点回帰

Binary 2.0 x Moe 2.0 のマッシュアップ

さて

ここで、バイナリアンの 皆様に問題です

Quiz. どちらがWeb2.0的か？

５秒でわかる解説 ロングテール

(^^;)

YappoLogs: 信頼のおけるブロガー

orz

人生: stable <-> unstable UNIXにみる世代間の断絶 Binary 2.0 Web 2.0 人生: stable <-> unstable http://0xcc.net/misc/ggap.html

本題

Web 2.0 時代の Ajax Binary Hacks とは？ 越えられない壁 Web 2.0 の裏を支える サーバ側の基盤技術 クライアント側 Ajax技術 （JavaScript, CSS）

私の手元には Binary Hacks の 献本が届きませんでした！ orz

Web Browser is Text Parser ELF x86 実行形式… HTML, CSS, JavaScript そのものが実行形式 ELF x86 実行形式…

そこで

Bio通信 Binary Image Object 究極の非同期クロスドメイン通信APIの実装 画像ファイルにバイナリ情報を埋め込んで Ajax通信を実現する新しいプロトコル Binary Image Object communications Protocol Bio通信

従来：Ajaxでクロスドメイン通信する方法 1. XMLHttpRequest + Local proxy 非同期通信APIの元祖 XMLHttpRequest レスポンスはXML形式とは限らない（HTML, JSON…） クロスドメイン通信ができないので Local proxy パフォーマンスの問題（自サーバのProxy経由でアクセス） セキュリティの問題（Open Proxy悪用の危険性） 2. Flash + crossdomain.xml SocketJS の実装アリ 3. Script tag の動的生成 JSONP とかで最近ちょっとブーム http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/

http://server/crossdomain.xml を設置 クロスドメイン通信を可能にするため http://server/crossdomain.xml を設置 <?xml version="1.0"?> <!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"> <cross-domain-policy> <allow-access-from domain="*" /> </cross-domain-policy>

JSONPの動作原理 function callback(data) { // … ここに処理を書く … } callback( { （１）コールバック関数の定義 function callback(data) { // … ここに処理を書く … } （２）script tag の動的生成 <script src=“http://example.com/data.json?jsonp=callback” /> （３）サーバからのレスポンス callback( { foo: 'This is foo.', bar: 'This is bar.', moe: 'This is moe.' } ); クロスドメインで JavaScript関数を実行

JSONPのロードされるタイミング Safari Firefox IE Opera 並列リクエストされてロードされた順に実行 並列リクエストされるけど実行順は固定 IE 並列リクエストされて実行順はほぼ固定？ 応答が遅いと後回しにされてるような気が… Opera 並列リクエストされない 最速インターフェース研究会より http://la.ma.la/blog/diary_200610131704.htm

communications Protocol Bio通信 Binary Image Object communications Protocol

<img src=“null.gif?q=param" onload=“callback(this.width)"> Bio通信の動作原理 （１）コールバック関数の定義 function callback(data) { //… ここに処理を書く… } （２）以下の img タグを生成 <img src=“null.gif?q=param" onload=“callback(this.width)"> クロスドメインもＯＫ http://example.com/webapi/null.gif?q=hogehoge

画像ファイルのサイズ比較 画像サイズ 1x1（モノクロGIF） 画像サイズ 1000x1000（モノクロGIF） 35 byte 画像サイズ 1000x1000（モノクロGIF） 1,735 byte 画像サイズ 1000x1000（24bpp BMP） 3,000,054 byte （約3MB） 画像サイズ 65535x65535（24bpp BMP） 約12GB ワークエリア足りません…orz

Graphics Interchange Format (tm) A standard defining a mechanism G I F (tm) Graphics Interchange Format (tm) A standard defining a mechanism for the storage and transmission of raster-based graphics information June 15, 1987 (c) CompuServe Incorporated, 1987 All rights reserved http://members.aol.com/royalef/gif87a.txt

GIF87a 仕様書 bits 7 6 5 4 3 2 1 0 Byte # +---------------+ | | 1 | | 1 +-Screen Width -+ Raster width in pixels (LSB first) | | 2 | | 3 +-Screen Height-+ Raster height in pixels (LSB first) | | 4 +-+-----+-+-----+ M = 1, Global color map follows Descriptor |M| cr |0|pixel| 5 cr+1 = # bits of color resolution +-+-----+-+-----+ pixel+1 = # bits/pixel in image | background | 6 background=Color index of screen background +---------------+ (color is defined from the Global color |0 0 0 0 0 0 0 0| 7 map or default map if none specified)

つまり32bitの情報をサーバ側で GIF形式にエンコードして渡せる Bio通信の戦略 Image Block の存在しない GIF Header だけ 画像の幅と高さのサイズ情報をサーバで生成 最小で20byte固定長 Perlのサンプルコード sub create_gif { my ($width, $height) = @_; my $size = pack "S2", $width, $height; return "\x47\x49\x46\x38\x37\x61$size\xf0\x00\x00\x00\x00\x00\xff\xff\xff\x3b"; } widthとheightの16bitずつ つまり32bitの情報をサーバ側で GIF形式にエンコードして渡せる

Firefox ではサイズ情報を読めた！

しかし、IE では壊れた画像と認識 … orz サイズ情報を読み出せない…

とほほのWWW入門より http://www.tohoho-web.com/wwwgif.htm

GRAPHICS INTERCHANGE FORMAT(sm) Version 89a (c)1987,1988,1989,1990 Copyright CompuServe Incorporated Columbus, Ohio http://www.w3.org/Graphics/GIF/spec-gif89a.txt

とほほのWWW入門より http://www.tohoho-web.com/wwwgif.htm

1x1のダミーの Image Block を挿入すると IEでも解釈するように クロスブラウザ対策 GIF89aの形式にして 1x1のダミーの Image Block を挿入すると IEでも解釈するように とほほの WwwCounter で使用されている GIF画像連結ライブラリの動作原理にインスパイア 独立した一つの Image Block http://www.tohoho-web.com/soft/wcnt.htm

GIFファイルのデータ構造 20 byte 35 byte +-----------------------+ | +-------------------+ | | | GIF Signature | | | | Screen Descriptor | | | | Global Color Map | | |- GIF Terminator -| +-----------------------+ | +-------------------+ | | | GIF Signature | | 5byte (GIF89a) | | Screen Descriptor | | 7 byte (width x height) | | Global Color Map | | 6 byte (2 colors) | | IMAGE DESCRIPTOR | | 15 byte (1 x 1) |- GIF Terminator -| 1 byte (;)

任意pixelの幅・高さの固定長GIFを出力 Perl のサンプルコード #!/usr/bin/perl use strict; use warnings; sub create_gif { my $size = pack "S2", @_; return "GIF89a$size\xf0\x00\x00\x00\x00\x00\xff\xff\xff," . "\x00\x00\x00\x00\x01\x00\x01\x00\x00\x02\x02L\x01\x00;"; } print "Content-Length: 35\n"; print "Content-Type: image/gif\n\n"; binmode(*STDOUT); print create_gif(65535, 65535); 1;

ここに注目

ファイルサイズが固定長 35 byte 65535 x 65535 pixel の画像も 35 byte で Bio

オールドタイプのためのC言語ライブラリ putchar(','); \ #include <stdio.h> putchar(0x00); \ putchar(0x01); \ putchar(0x02); \ putchar('L'); \ putchar(';'); \ } while (0) #include <stdio.h> #define print_gif_head() do { \ printf( \ "Content-Length: 35\n" \ "Content-Type: image/gif\n" \ "\n"); \ } while (0) #define print_gif_body(x,y) do { \ putchar('G'); \ putchar('I'); \ putchar('F'); \ putchar('8'); \ putchar('9'); \ putchar('a'); \ putchar(0xff & (x)); \ putchar(0xff & (x >> 8)); \ putchar(0xff & (y)); \ putchar(0xff & (y >> 8)); \ putchar(0xf0); \ putchar(0x00); \ putchar(0xff); \ int main() { print_gif_head(); print_gif_body(65535, 65535); }

それ ニンテンドーDS ブラウザーで（ｒｙ

ごにょごにょ

!!

まとめ

歴史の古いGIF規格 GIF XML JSON GIF87a（1987年） GIF89a（1989年） 1996年～（？） 1998年に規格化 JSON 1999年～（？） 2006年にRFC4627 約２０年前の バイナリ フォーマット コンピュータにやさしい バイナリアンにやさしい

温故知新 原点回帰

弊社では モヒカン族・バイナリアンも歓迎しております ご清聴ありがとうございました 弊社では モヒカン族・バイナリアンも歓迎しております