Transcript 2 - Namazu

Web 2.0 時代の Ajax Binary Hacks
Binary 2.0 カンファレンス 2006
竹迫 良範
<[email protected]>
はじめに
2
アンケート
説明できる人いますか？
3
Web 2.0 って何？
最近話題のWeb2.0をパソコンにインストールしようと
http://oshiete1.goo.ne.jp/kotaeru.php3?qid=1770566
思っているのですが、パソコンに詳しい友人に聞いたと
ころ初回版はバグが多いから、Web2.1のバージョンまで
待った方がいいとのことでした。
そうなんでしょうか？
またWeb2.1はいつごろでるのでしょうか？
えっ！？そうだったのかー（汗）
http://oshiete1.goo.ne.jp/kotaeru.php3?qid=1770566
4
Tim O’Reilly による Web2.0 の概念
5
2.0 ブーム到来
Web 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次元で萌える→原点回帰
6
7
Binary 2.0 x Moe 2.0 のマッシュアップ
8
さて
9
ここで、バイナリアンの
皆様に問題です
10
Quiz. どちらがWeb2.0的か？
11
５秒でわかる解説
ロングテール
12
(^^;)
13
YappoLogs: 信頼のおけるブロガー
14
15
16
17
UNIXにみる世代間の断絶
Binary 2.0
Web 2.0
人生: stable <-> unstable
http://0xcc.net/misc/ggap.html
18
19
20
本題
21
Web 2.0 時代の Ajax Binary Hacks とは？
越えられない壁
クライアント側
Ajax技術
Web 2.0 の裏を支える
サーバ側の基盤技術
（JavaScript, CSS）
22
私の手元には Binary Hacks の
献本が届きませんでした！
orz
23
Web Browser
is Text Parser
HTML, CSS, JavaScript
そのものが実行形式
ELF x86 実行形式…
24
そこで
25
究極の非同期クロスドメイン通信APIの実装
画像ファイルにバイナリ情報を埋め込んで
Ajax通信を実現する新しいプロトコル
Bio通信
Binary Image Object
communications Protocol
26
従来：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/
27
28
クロスドメイン通信を可能にするため
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>
29
JSONPの動作原理
（１）コールバック関数の定義
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関数を実行
30
31
JSONPのロードされるタイミング
Safari
並列リクエストされてロードされた順に実行
Firefox
並列リクエストされるけど実行順は固定
IE
並列リクエストされて実行順はほぼ固定？
応答が遅いと後回しにされてるような気が…
Opera
並列リクエストされない
最速インターフェース研究会より http://la.ma.la/blog/diary_200610131704.htm
32
Bio通信
Binary Image Object
communications Protocol
33
Bio通信の動作原理
（１）コールバック関数の定義
function callback(data) {
//… ここに処理を書く…
}
（２）以下の img タグを生成
<img src=“null.gif?q=param" onload=“callback(this.width)">
クロスドメインもＯＫ
http://example.com/webapi/null.gif?q=hogehoge
34
画像ファイルのサイズ比較
 画像サイズ 1x1（モノクロGIF）
35 byte
画像サイズ 1000x1000（モノクロGIF）
1,735 byte
画像サイズ 1000x1000（24bpp BMP）
3,000,054 byte （約3MB）
画像サイズ 65535x65535（24bpp BMP）
約12GB
ワークエリア足りません…orz
35
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
36
GIF87a 仕様書
bits
7 6 5 4 3 2 1 0
+---------------+
|
|
+-Screen Width -+
|
|
+---------------+
|
|
+-Screen Height-+
|
|
+-+-----+-+-----+
|M| cr |0|pixel|
+-+-----+-+-----+
| background |
+---------------+
|0 0 0 0 0 0 0 0|
+---------------+
Byte #
1
Raster width in pixels (LSB first)
2
3
Raster height in pixels (LSB first)
4
5
6
7
M = 1, Global color map follows Descriptor
cr+1 = # bits of color resolution
pixel+1 = # bits/pixel in image
background=Color index of screen background
(color is defined from the Global color
map or default map if none specified)
37
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形式にエンコードして渡せる
38
Firefox ではサイズ情報を読めた！
39
しかし、IE では壊れた画像と認識 … orz
サイズ情報を読み出せない…
40
とほほのWWW入門より
http://www.tohoho-web.com/wwwgif.htm
41
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
42
とほほのWWW入門より
http://www.tohoho-web.com/wwwgif.htm
43
クロスブラウザ対策
GIF89aの形式にして
1x1のダミーの Image Block を挿入すると
IEでも解釈するように
とほほの WwwCounter で使用されている
GIF画像連結ライブラリの動作原理にインスパイア
独立した一つの Image Block
http://www.tohoho-web.com/soft/wcnt.htm
44
GIFファイルのデータ構造
20 byte
+-----------------------+
| +-------------------+ |
| |
GIF Signature
| |
| +-------------------+ |
| +-------------------+ |
| | Screen Descriptor | |
| +-------------------+ |
| +-------------------+ |
| | Global Color Map | |
| +-------------------+ |
|GIF Terminator
-|
+-----------------------+
35 byte
+-----------------------+
| +-------------------+ |
| |
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 (;)
+-----------------------+
45
任意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;
46
ここに注目
47
ファイルサイズが固定長 35 byte
65535 x 65535 pixel の画像も 35 byte で
Bio
48
オールドタイプのためのC言語ライブラリ
#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(0x00); \
putchar(0x00); \
putchar(0x00); \
putchar(0x00); \
putchar(0xff); \
putchar(0xff); \
putchar(0xff); \
putchar(','); \
putchar(0x00); \
putchar(0x00); \
putchar(0x00); \
putchar(0x00); \
putchar(0x01); \
putchar(0x00); \
putchar(0x01); \
putchar(0x00); \
putchar(0x00); \
putchar(0x02); \
putchar(0x02); \
putchar('L'); \
putchar(0x01); \
putchar(0x00); \
putchar(';'); \
} while (0)
int main()
{
print_gif_head();
print_gif_body(65535, 65535);
}
49
それ
ニンテンドーDS
ブラウザーで（ｒｙ
50
ごにょごにょ
51
!!
52
まとめ
53
歴史の古いGIF規格
GIF
GIF87a（1987年）
GIF89a（1989年）
XML
約２０年前の
バイナリ
フォーマット
1996年～（？）
1998年に規格化
JSON
1999年～（？）
2006年にRFC4627
コンピュータにやさしい
バイナリアンにやさしい
54
温故知新
原点回帰
55
ご清聴ありがとうございました
弊社では モヒカン族・バイナリアンも歓迎しております
56