Download presentation
Presentation is loading. Please wait.
1
Web 2.0 時代の Ajax Binary Hacks
竹迫 良範
2
はじめに
3
アンケート 説明できる人いますか？
4
Web 2.0 って何？ 最近話題のWeb2.0をパソコンにインストールしようと思っているのですが、パソコンに詳しい友人に聞いたところ初回版はバグが多いから、Web2.1のバージョンまで待った方がいいとのことでした。 そうなんでしょうか？ またWeb2.1はいつごろでるのでしょうか？ えっ！？そうだったのかー（汗）
5
Tim O’Reilly による Web2.0 の概念
6
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次元で萌える→原点回帰
8
Binary 2.0 x Moe 2.0 のマッシュアップ
9
さて
10
ここで、バイナリアンの 皆様に問題です
11
Quiz. どちらがWeb2.0的か？
12
５秒でわかる解説 ロングテール
13
(^^;)
14
YappoLogs: 信頼のおけるブロガー
17
orz
18
人生: stable <-> unstable
UNIXにみる世代間の断絶 Binary 2.0 Web 2.0 人生: stable <-> unstable
21
本題
22
Web 2.0 時代の Ajax Binary Hacks とは？
越えられない壁 Web 2.0 の裏を支える サーバ側の基盤技術 クライアント側 Ajax技術 （JavaScript, CSS）
23
私の手元には Binary Hacks の 献本が届きませんでした！ orz
24
Web Browser is Text Parser ELF x86 実行形式… HTML, CSS, JavaScript
そのものが実行形式 ELF x86 実行形式…
25
そこで
26
Bio通信 Binary Image Object 究極の非同期クロスドメイン通信APIの実装 画像ファイルにバイナリ情報を埋め込んで
Ajax通信を実現する新しいプロトコル Binary Image Object communications Protocol Bio通信
27
従来：Ajaxでクロスドメイン通信する方法
1. XMLHttpRequest + Local proxy 非同期通信APIの元祖 XMLHttpRequest レスポンスはXML形式とは限らない（HTML, JSON…） クロスドメイン通信ができないので Local proxy パフォーマンスの問題（自サーバのProxy経由でアクセス） セキュリティの問題（Open Proxy悪用の危険性） 2. Flash + crossdomain.xml SocketJS の実装アリ 3. Script tag の動的生成 JSONP とかで最近ちょっとブーム
29
http://server/crossdomain.xml を設置
クロスドメイン通信を可能にするため を設置 <?xml version="1.0"?> <!DOCTYPE cross-domain-policy SYSTEM " <cross-domain-policy> <allow-access-from domain="*" /> </cross-domain-policy>
30
JSONPの動作原理 function callback(data) { // … ここに処理を書く … } callback( {
（１）コールバック関数の定義 function callback(data) { // … ここに処理を書く … } （２）script tag の動的生成 <script src=“ /> （３）サーバからのレスポンス callback( { foo: 'This is foo.', bar: 'This is bar.', moe: 'This is moe.' } ); クロスドメインで JavaScript関数を実行
32
JSONPのロードされるタイミング Safari Firefox IE Opera 並列リクエストされてロードされた順に実行
並列リクエストされるけど実行順は固定 IE 並列リクエストされて実行順はほぼ固定？ 応答が遅いと後回しにされてるような気が… Opera 並列リクエストされない 最速インターフェース研究会より
33
communications Protocol
Bio通信 Binary Image Object communications Protocol
34
<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)"> クロスドメインもＯＫ
35
画像ファイルのサイズ比較 画像サイズ 1x1（モノクロGIF） 画像サイズ 1000x1000（モノクロGIF）
35 byte 画像サイズ 1000x1000（モノクロGIF） 1,735 byte 画像サイズ 1000x1000（24bpp BMP） 3,000,054 byte （約3MB） 画像サイズ 65535x65535（24bpp BMP） 約12GB ワークエリア足りません…orz
36
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
37
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 | | map or default map if none specified)
38
つまり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形式にエンコードして渡せる
39
Firefox ではサイズ情報を読めた！
40
しかし、IE では壊れた画像と認識 … orz
サイズ情報を読み出せない…
41
とほほのWWW入門より
42
GRAPHICS INTERCHANGE FORMAT(sm) Version 89a (c)1987,1988,1989,1990
Copyright CompuServe Incorporated Columbus, Ohio
43
とほほのWWW入門より
44
1x1のダミーの Image Block を挿入すると IEでも解釈するように
クロスブラウザ対策 GIF89aの形式にして 1x1のダミーの Image Block を挿入すると IEでも解釈するように とほほの WwwCounter で使用されている GIF画像連結ライブラリの動作原理にインスパイア 独立した一つの Image Block
45
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 (;)
46
任意pixelの幅・高さの固定長GIFを出力
Perl のサンプルコード #!/usr/bin/perl use strict; use warnings; sub create_gif { my $size = pack 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;
47
ここに注目
48
ファイルサイズが固定長 35 byte 65535 x pixel の画像も 35 byte で Bio
49
オールドタイプのための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); }
50
それ ニンテンドーDS ブラウザーで（ｒｙ
51
ごにょごにょ
52
!!
53
まとめ
54
歴史の古いGIF規格 GIF XML JSON GIF87a（1987年） GIF89a（1989年） 1996年～（？）
1998年に規格化 JSON 1999年～（？） 2006年にRFC4627 約２０年前の バイナリ フォーマット コンピュータにやさしい バイナリアンにやさしい
55
温故知新 原点回帰
56
弊社では モヒカン族・バイナリアンも歓迎しております
ご清聴ありがとうございました 弊社では モヒカン族・バイナリアンも歓迎しております
Similar presentations
