ugocat

pixiv社外公開勉強会「うごイラTeck Talks」のスライドです。

Transcript

1. ugocat
2. 自己紹介 高山温 Twitter: @edvakf 仕事ではpixivのユーザー分析や サービスのGrowthのための機能改善などをしています うごイラの開発にはほぼ関わってません
3. zip_player https://github.com/pixiv/zip_player 弊社スーパーエンジニアの marcanによって3日で作られた、 無圧縮zipの中の画像ファイルを JavaScriptのBlob URLにして、 canvasで再生するライブラリ。 bowerでインストールできます。
4. それはさておき
5. うごイラもcatしたい！
6. node-canvas & ansi.js function catcanvas(ctx, width, height) { var imageData = ctx.getImageData(0, 0, width, height); var pixelArray = imageData.data; var cursor = ansi(process.stdout); for (var y = 0; y < height; y+=2) { for (var x = 0; x < width; x++) { var i = (y * width + x) * 4; cursor.bg.rgb( pixelArray[i], pixelArray[i + 1], pixelArray[i + 2] ).write(' '); } cursor.bg.reset(); cursor.write('\n'); } }
7. 簡単！
8. npm install zip_player しようと思ったが、zip_playerにはpackage.json がなかった… →無ければ作るしかない
9. XMLHttpRequest
10. node-XMLHttpRequest
11. Note: This library currently conforms to XMLHttpRequest 1. Version 2.0 will target XMLHttpRequest Level 2.
12. xhr.responseType = ‘arraybuffer’
13. node-xhr2
14. Blob & ObjectURL
15. Blob & Object URL var buf = new Blob([slice]); var url = URL.createObjectURL(buf); var image = new Image(); image.src = url;
16. このあたりは壊滅的…
17. ここで奇跡が！ // Required for iOS <6, where Blob URLs are not available. This is slow... // Source: https://gist.github.com/jonleighton/958841 function base64ArrayBuffer(arrayBuffer, off, byteLength) { var base64 = ''; var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'; var bytes = new Uint8Array(arrayBuffer); … url = ("data:" + mime_type + ";base64," + base64ArrayBuffer(this._buf, off, end - off));
18. polyfill素敵！
19. jQuery
20. READMEより
21. npm install jsdom npm install jQuery
22. とか辛すぎる…
23. $(this).triggerHandler( “frameLoad”, frame);
24. event-target
25. DOM EventTarget var EventTarget = {}; EventTarget.prototype = require('event-target'); … ZipImagePlayer.prototype = { addEventListener: EventTarget.prototype.addEventListener, removeEventListener: EventTarget.prototype.removeEventListener, dispatchEvent: EventTarget.prototype.dispatchEvent,
26. 動いた var canvas = new Canvas(width, height); var player = new ZipImagePlayer({ canvas: canvas, autosize: false, autoStart: true, chunkSize: 4096, source: data.src, metadata: data, }); player.addEventListener('frame', function(e) { // });
27. marcan「libcacaシッテイルカ?」
28. libcaca
29. node-cacaが無かったので
30. node-canvasに手を入れた NAN_METHOD(Canvas::ToText) { NanScope(); Canvas *canvas = ObjectWrap::Unwrap<Canvas>(args.This()); uint8_t *data = canvas->data(); ... caca_canvas_t *cv = caca_create_canvas(0, 0); ... void *text = caca_export_canvas_to_memory(cv, "utf8", &len); caca_free_canvas(cv); ... Local<String> ret = NanNew<String>((char *)text, len); free(text); NanReturnValue(ret); }
31. こうなりました player.addEventListener('frame', function(event) { process.stdout.write(canvas.toText(width, height)); });
32. デモ
33. まとめ • zip_playerで使っているHTML5技術を紹介しま した • node.jsのDOM互換ライブラリは色々揃ってい るが、複数の仕様をまたぐようなコードになると 面倒 ◦ node-html5みたいな全部入りのデファクトスタンダード があると便利なのかもしれない