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
5秒でわかる解説
ロングテール
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の動作原理
(1)コールバック関数の定義
function callback(data) {
// … ここに処理を書く …
}
(2)script tag の動的生成
<script src=“http://example.com/data.json?jsonp=callback” />
(3)サーバからのレスポンス
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通信の動作原理
(1)コールバック関数の定義
function callback(data) {
//… ここに処理を書く…
}
(2)以下の img タグを生成
<img src=“null.gif?q=param" onload=“callback(this.width)">
クロスドメインもOK
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
ブラウザーで(ry
50
ごにょごにょ
51
!!
52
まとめ
53
歴史の古いGIF規格
GIF
GIF87a(1987年)
GIF89a(1989年)
XML
約20年前の
バイナリ
フォーマット
1996年~(?)
1998年に規格化
JSON
1999年~(?)
2006年にRFC4627
コンピュータにやさしい
バイナリアンにやさしい
54
温故知新
原点回帰
55
ご清聴ありがとうございました
弊社では モヒカン族・バイナリアンも歓迎しております
56