document[B!]新着記事・評価 - はてなブックマーク (original) (raw)

5 users
imaya.blog.jp
6月9 asm.js を手書きする はじめに 人間は誰しもパフォーマンスを求め、最終的には asm.js か WebAssembly を手書きするようになるので、人権を手に入れるためにいつでも asm.js を書ける環境をつくります。 WebAssembly はさすがに手書き厳しそうでした。 というのは冗談で、zlib.js の一部の処理を asm.js で高速化できないかと考え、ひとまず Adler-32 と CRC-32 を asm.js で書き直してみた際にいろいろ苦労したので忘れないようにこの記事を書いています。 なお、今回 asm.js で書いたコードは以下の通り gist で公開しています。 zlib.js での採用はまだ検証が必要なので未定ですが、採用するにしてももう少しきちんとした書き方になるでしょう。 Adler-32: https://gist.github.com/i

3 users
imaya.blog.jp
6月1 zlib.js 0.3.0 リリース 致命的なバグの修正 HLIT と HDIST のデコードに関するバグ修正 Inflate において、リテラルと長さ符号(HLIT)と距離符号(HDIST)の展開において不具合があったため、Inflate に失敗あるいは正しくないデータになってしまうことがありました。 これはどういうことかと言うと、HLIT と HDIST は連続して格納されていますが、その中で同じ符号が連続する場合は繰り返しを行う処理があります。 0.2.0 までの実装では、HLIT と HDIST をそれぞれ別の配列として扱っていたため、 HLIT と HDIST をまたぐような繰り返し符号が出現していた際、誤ったデータが展開されてしまっていました。 0.3.0 では HLIT と HDIST の展開を連続する配列として展開し、その後のハフマン符号テーブルを構築する際に HL

67 users
imaya.blog.jp
10月16 難読化されたJavaScriptコードを読む はじめに 何らかの事情で JavaScript のコードを読み、その挙動について調査しなくてはいけないということはよくあると思います。 そんなとき、難読化やMinifyなどによって複雑怪奇に見えるコードに遭遇したという経験をもつひとも多いのではないでしょうか。 この記事はそんなコードにぶつかった際に、どうすれば良いのかを自分なりにまとめてみました。 また、jjencode 作者のはせがわようすけさんのJavaScript難読化読経というスライドを見て、 作者がネタバレしてるんだからこの辺の知見について書いても大丈夫だろうという気持ちで書き始めたことも一応記しておきます。 ツールによって難読化されたコードの読み方 まずはコードリーディング出来る状態にするため、よく見る2つのツールによる難読化のデコード方法について書いておきます。 Ja

8 users
imaya.blog.jp
2月10 6to5 に末尾呼び出し最適化が入ったと思ったら一瞬でなくなった 一昨日の記事を書いた後、末尾呼び出し最適化の実装にバグがあって速攻で消されたようです。 v3.5.0: 末尾呼び出し最適化の実装が入る v3.5.1: 他のTailオブジェクトと混同して判定されてしまうため、Tail.prototype._isTailDescriptor というのを付けて対処 v3.5.2: _tailCall をつかった末尾呼び出し最適化がコメントアウト v3.5.3: v3.5.0 以前の末尾再帰最適化の実装に戻す 少し見たところ、以下のようなケースでうまく動かないようです。 Do not attempt nested TCO by peferron · Pull Request #721 · 6to5/6to5 function foo() { return "foo"; } functio

41 users
imaya.blog.jp
2月8 6to5 に末尾呼び出し最適化が実装されたので調べてみた @azu_re さんのツイートで知ったのですが、6to5 に末尾呼び出し最適化が追加されました。 Added complete TCO (tail call optimization). by RReverser · Pull Request #714 · 6to5/6to5 · GitHub ECMAScript 6 compatibility table によると ES6 transpiler では初めてテストを通った実装のようです。 6to5 ではどのような ECMA−262 5th のコードに変換して実現しているのか気になったので調査してみました。 末尾呼び出し最適化って何？ その前に「末尾呼び出し最適化って何？」って人のために簡単に説明しておきます。 通常、再帰するようなコードを書くとこんな感じになります。 fun

6 users
imaya.blog.jp
5月1 zlib.js の Inflate 実装を JSX-lang に移植しました はじめに JSX 速いという話を聞いたので、zlib.js を移植したらどうなるのか興味があったので試しました。 https://github.com/imaya/zlib.jsx お詫び JSXがリリースされた直後に少し触ってみたのですが、最初期のバージョンでは素のJSとの連携が取りにくかったので、自分の用途には少しマッチしないなと敬遠気味でした。 その認識は最近まで続いていたのですが、現在は export なども出来るようになっているのでライブラリなんかも簡単に作れるようになってます。 （おそらく実装されたのは 2013-04-30 にリリースされた v0.9.27 ？） 何度か飲み会などで「素のJSとの連携が取りにくいからなー」とか言ってしまって誤解を与えてしまったのをここでお詫びします。 (exp

25 users
imaya.blog.jp
3月29 #JSオジサンで Source Map について話してきました JSオジサンという名前からしてダメそうな感じのイベントでLTしてきました。 内容については azu さんのまとめ(→ JSオジサンで現在のJavaScript ASTについて発表してきた )を見ると良いと思います。 LT5分なのに時間オーバーしたあげく枠のおかわりまでしてすみませんでした…。 おっさんたちが集まってわいわいLTするゆるふわイベントだと思って、 最近ちょっと触った Source Map の話でもするかーと思って申し込んだら予想外にガチ勢が多くいたため、こりゃもうちょっと資料ちゃんとしないと駄目かなと思ってページ増やしたら時間足りなくなってしまいました。 楽しいイベントだったので次回以降もあるならば、予定があえば参加していきたいです。 発表資料 カテゴリなしの他の記事

5 users
imaya.blog.jp
2月22 zlib.js 0.2.0 をリリースしました 更新が必要な人 今回は Inflate のアルゴリズム部分のバグ修正となるので、過去のバージョンで Inflate を利用している方は更新する必要があります。 バグ詳細 このコミットの解説となります。 Deflate では、リテラルと長さ・距離符号(LZSS)をハフマン符号化して圧縮します。 ハフマン符号も辞書をそのまま格納するのではなく、符号の長さだけを格納することで更なるサイズ節約を行っています。 さらに、符号の長さもランレングス符号化を行って格納されます。 リテラルと長さ符号、距離符号は別々にハフマン符号化し、それぞれ RFC1951 では HLIT, HDIST と呼ばれています。 このように、別々の辞書を使ってハフマン符号化されるため、ランレングス符号化もそれぞれ別のコンテキストで行われるものだとおもっていたのですが、 ど

63 users
imaya.blog.jp
12月2 Emscripten によって生成された asm.js 対応コードは本当に人間が書いたコードより速いのか？ はじめに 先日、いつものように Twitter 監視業務に勤しんでいたところ、下記のような発言を見かけました。 asm.jsは対応してないブラウザでは読めないし遅いって説明をされることが多いけど、ams.jsはJavaScriptの中で高速実行可能なものだけを使って更に少し制約を加えて底上げをしてるものなので、多のブラウザであっても普通に人間が書いたコードよりも速いっすよ— dynamis (でゅなみす) (@dynamitter) 2013, 11月 29 なるほど、機械によって生成された asm.js 対応のコードはどんなブラウザでも速いよという主張です。 自分は JavaScript で高速に動作するように注意して書いた zlib.js というのを作っていたので、zl

5 users
imaya.blog.jp
7月22 Zstandard と Zip ファイル Zstandard 対応のアーカイバ欲しい問題 Zstandard はパフォーマンスに優れたすばらしいものですが、今のところ個別のファイルしか圧縮できません。（いわゆるアーカイブ機能がない） Zstandard に対応したアーカイバ欲しいなと思っていたけど特に何もせずにいたのですが、最近 @__gfx__ さんの下記ツイートを見て再び興味を持ちました。 zipの中身、原理的にはzstdとかで圧縮してよさそうな気がしてる。— FUJI Goro (@__gfx__) 2017年7月20日 これは例えば Zip ファイルの仕様に Zstandard が追加され、その仕様に対応したアーカイバが公開されれば問題は解決しますが、そもそも仕様に追加されるかすらわかりません。 しかし、実際に仕様に追加されるのを待つのではなく、Zipでは圧縮を行わずアー

4 users
imaya.blog.jp
8月21 Canvas でカラーハーフトーン はじめに ネット上で Photoshop にはカラーハーフトーンというフィルタがあることを知って、面白そうなので実装してみました。 適当にググってカラーハーフトーンフィルタを使った画像を見ながら「多分こういうものだろう」と考えて実装したものなので Photoshop のものとは大きく異なる可能性があります。 カラーハーフトーンってなに 元々は網点という印刷まわりの技法のようですが、Photoshop のものは完全に画像の効果としてあつかった方が良いみたいです。 ネットで使用例を見た感じ、各色ごとに指定された角度の正方形に画像を分割して、色の多いところは大きく、少ないところは小さく円を描いて水玉模様みたいにする効果だと思います。 実装1: 独自実装(わりとゴリ押し) (0, 0) から角度と正方形のサイズから dx, dy を計算してそれを加算し

40 users
imaya.blog.jp
8月14 Canvasできれいな色相環を描画する はじめに JavaScript で Canvas を使っていると、HSV の Color Picker とか作りたくなって色相環を描画したくなることがよくあるとおもいます。 ここでは、自分の行っている色相環の描画方法を説明します。 準備 色相を扱うのために HSV 色空間を使います。HSV から RGB への変換は以下の function を用います。 function hsvToRGB(hue, saturation, value) { var hi; var f; var p; var q; var t; while (hue < 0) { hue += 360; } hue = hue % 360; saturation = saturation < 0 ? 0 : saturation > 1 ? 1 : saturation; v

15 users
imaya.blog.jp
7月24 あとから線の編集が可能なお絵描きツールの描画高速化 はじめに 2010 年くらいからのんびり開発している趣味のお絵かきツール Diceros の実装について、ドキュメントを残しておいたほうがよさそうなのでこの文章を書きます。 まだ未完成ですが、お絵描きツールは以下の URL で開発バージョンを触ることができます。IE10+, Google Chrome 17+ あたりで動作すると思います。Wacom のペンタブレットプラグイン(MouseEvent)、Android Chrome(TouchEvent)、IE10(PointerEvents) あたりの筆圧に対応してます。 http://draw-imaya.sqale.jp/diceros/ しばらく触るとわかると思うのですが、このお絵描きツールは(VectorLayer/SVGLayerでは)一度書いた線をあとから調整すること

49 users
imaya.blog.jp
5月17 Web Audio API で Sound Font を使った標準 MIDI ファイルの再生 はじめに Google Chrome では Web Audio API という API を使って音を鳴らすことができます。 今回、これをつかって Sound Font を使った標準 MIDI ファイル(以下 SMF と表記)のプレイヤーを作ってみました。 なお、仕様の具体的な話しなどはほとんどしません。 音楽的な知識などもほとんどないため、何かおかしなことをしていたらご指摘いただけるとありがたいです。 また、今回の実装はあくまでも実験・検証用のものなので実用にはまだ手を加えなくてはいけないところが多いため、もし利用としようと思う方がいたらそこは注意してください。 動作環境は PC 版の Google Chrome のみです。 現在開催中の Google I/O で Chrome for

6 users
imaya.blog.jp
5月10 zlib.js 0.1.6 をリリースしました はじめに 本日 zlib.js 0.1.6 をリリースしました。ここでは告知とともに 0.1.6 の更新内容などを簡単に説明したいと思います。 なお、今回から Change Log を添付したあるので概要はそちらでも確認できます。 今回のバージョンでは主にビルド環境の整理やテスト・デバッグ効率の向上を行っています。 https://github.com/imaya/zlib.js ビルド環境の更新、最適化 zlib.js は Closure Compiler でビルドしているのですが、今までは minify したコードに余分なコードが含まれている事がありました。 今回の更新では Closure Compiler の更新とその辺りの設定を見直す事で minify したファイルのサイズを縮小しました。 例えば、Inflate だけならば

73 users
imaya.blog.jp
4月11 JavaScript でペンと筆圧を扱う はじめに JavaScript でアプリケーションを作っていると、筆圧を取得したくなることがよくあると思います。 ここでは JavaScript でタッチやペンによる筆圧の取得の仕方について簡単にまとめます。 Wacom ペンタブレットによる筆圧の取得 Wacom のペンタブレットではブラウザにプラグインをインストールすることにより筆圧の取得が可能になります。 最近はタブレットの最新版ドライバをインストールすると一緒にプラグインもインストールされるようです。 タブレットプラグインのバージョンによる API 変更 Wacom のタブレットプラグインでは元々ペンを扱う単体のものでしたが、バージョン 2 からはタッチと統合されたため API が変更されました。 基本的には統合であるため、プラグインのオブジェクトに .penAPI を付けるか付け

23 users
imaya.blog.jp
3月12 ブラウザのデコード機能を利用した Shift JIS などの読み込み はじめに JavaScript でバイナリから文字列を取り出したら Shift JIS だったなんてことよくありますよね。 そういう文字列もさっと表示したいことがあります。 読み込む方法はいくつかある これらの文字列を読み込む方法はいくつかあって、自分が把握してるだけでも以下のものがあります。 Shift JIS と UTF-16 の対応表をつくる ぽりごんさんの文字コード変換ライブラリ Blob, File API を使って読み込む 右京さんの javascriptのnative APIで任意の文字コードからutf8に変換 script, Data URL を使って変換 1, 2 の方法についてはそれぞれ解説や実装があるのですが、3 の方法については見当たらなかったので説明してみます。 準備 念のため 2 段

16 users
imaya.blog.jp
3月10 Zopfli を Emscripten で移植した際の備忘録 Emscripten で Zopfli を移植した際のメモを残します。 思ったより簡単に使えましたが、知らないとハマることも結構多かったです。 導入 自分の環境(Mac)では以下のような感じでやれば OK でした。この辺りは情報が豊富なので適当です。 JS Engine は NodeJS だけで良いっぽいです 必要な環境は homebrew 環境なら brew install llvm だけ？ あとは emscripten を clone するだけ clang, clang++ の位置が llvm-link と違う場合はシンボリックリンクを張るなどして合わせる 使い方 C プログラムから JS へ変換 $ emcc *.c -o hoge.js ライブラリの場合 通常だとリンク時最適化(LTO)によりエントリポイント(

5 users
imaya.blog.jp
3月9 Zopfli を Emscripten をつかって JavaScript に移植しました はじめに Zopfli が公開されてから zlib.js の Deflate 処理と比較したいなーと思っていたので、 Emscripten を使って JavaScript に移植してみました。 Emscripten を使うのは初めてのためいろいろ手間取りましたが、とりあえず動作するようになったのでご報告です。 zopfli.js というわけで、JavaScript に移植したものを以下の場所で公開しています。 もし良ければご利用ください。 使い方は zlib.js と似せています。 https://github.com/imaya/zopfli.js zlib.js を使って簡単なテストも行っていますので使用できないほどのバグはないかと思いますが、何かあればお知らせください。 デモ せっかく移

20 users
imaya.blog.jp
3月1 Zopfli を使って PNG の再圧縮を行ってみた はじめに Google から Deflate 互換の圧縮アルゴリズム実装 Zopfli が公開されました。 「Deflate 互換ってどういうこと？」って方もいると思いますので簡単に説明します。 符号アルゴリズムは同じ(LZSS + Huffman符号) RFC では、 LZSS はこんな感じで Huffman 符号はこんな感じと大体のやり方が書かれている RFC に書かれている方法とは異なる手法でより最適な LZSS + ハフマン符号化を行うのが今回の Zopfli Kflate との比較 PNG の圧縮界隈では、一部で Kflate と呼ばれる Deflate 互換実装が圧縮効率の良いものが知られています。 (この実装は PNGOUT として PNGGauntlet や ImageOptim で使用されている) 今回は Im

6 users
imaya.blog.jp
2月10 zlib.js で PKZIP が扱えるようになりました (0.1.4リリース) zlib.js 0.1.4 の変更点 zlib.js 0.1.4 を先ほどリリースしました。 主要な変更点は PKZIP の圧縮、展開サポートです。 ただし、PKZIP で扱える圧縮形式は STORE (無圧縮) と DEFLATE のみとなっています。 また、暗号化は現在未対応です。 https://github.com/imaya/zlib.js PKZIP 使用例 なにか分かりやすい使用例があった方が良いと思ったので作りました。 以下のページでデモを公開しています。 (Google Chrome 推奨) http://imaya.github.com/demo/zip/ 簡単な説明 ファイルを選択したあと Download ボタンをクリックすると、Web Worker 上で選択した各ファイルの

13 users
imaya.blog.jp
12月18 ファイルサイズを考慮した Canvas の保存 こんにちは、18 日以降の Graphical Web Advent Calendar が空いているので、場をつなぐ意味も込めて簡単な記事を投稿させていただきます。 先日の記事では PNG の仕様について書きましたが、その知識をさっそく生かす事ができます。 また、この記事では HTMLCanvasElement を省略して Canvas と表記させていただきます。 Canvas#toDataURL() さて、一般的に Canvas の描画状況を保存しようと思うと、Canvas#toDataURL メソッドを使用すると思います。 ですが、このメソッドで保存された画像がどのようになっているかご存知の方はあまりいないと思います。 まずは、以下のコードで簡単な Canvas 描画を行ってみます。 function draw1(target

75 users
imaya.blog.jp
12月16 PNG 画像の解析と最適化ツール はじめに この記事は Graphical Web Advent Calendar の 16 日目の記事として書かれました。 Graphical Web ということで、PNG フォーマットの簡単な説明と Web ブラウザ上で動作する PNG 解析ツールを作ったので使い方と解析結果の見方について書いていこうと思います。 また、人気のある PNG 画像最適化ツールがどのような最適化を行っているのか調べていきます。 PNG の仕様に入る前に ここから、PNG の仕様について最低限の説明を書いていきます。 PNG の最適化や検証するときに必要になるので、退屈かもしれませんが軽く目を通してください。 以下の項目について、なんとなく分かれば良いです。 シグネチャ 必須チャンクの役割 IHDR PLTE IDAT IEND PNG 仕様概要 PNG フォーマッ

3 users
imaya.blog.jp
11月25 3連休だし Web ブラウザで動作する Markdown Editor 作った きっかけ ドキュメントを書く機会があったので、最近使う事の多い Markdown(GFM) で書こうと思った。 普段は gist で適当に書いてるんだけど、長くなりそうだしリアルタイムプレビューのあるツールが欲しかった。 少し探しても良さそうなのがなかったので、せっかくなので自作しようと思った。 デモ http://imaya.github.com/demo/markdown/ (ソースコードは準備中です…) あ、保存は gist にでもコピペするといいと思います。 使用ライブラリ、ツール群 このエディタはほとんどが他の方のつくったライブラリを組み合わせただけです。 特に Ace は素晴らしい出来で、リッチなエディタが簡単に Web アプリケーションに組み込めます。 Ace (エディタ) http:

4 users
imaya.blog.jp
11月16 「改行削除の代わりにGZIP」を実践してみた はじめに この記事の内容は「改行削除するくらいなら gzip したらいいじゃない」という記事の内容を受けて書いたものですので、まずはそちらをご覧になると良いかと思います。 記事を読んで、なんとなく呼ばれたんじゃないかという気になったので間違った方向でこれに取り組んでいこうと思います。 GZIP の展開を JavaScript で行う まずは、GZIP ファイルを JavaScript で展開します。 いくつか実装はあると思いますが、ここは自作で使い慣れてる zlib.js を使ってやります。 そして、展開したらそれを Object URL にして適用します。 簡単ですね。 大体こんな感じです。 で、できたものはこちらになります。 http://imaya.github.com/demo/gunzip/ こちらのデモでは割と最近の機能

4 users
imaya.blog.jp
9月27 SWF 研究会 #2 で LT してきました はじめに まずはLT枠5分というはずだったのに15分ほど話してしまい、会場の皆様すみませんでした。 最近 SWF の Lossless, Lossless2, Jpeg3 あたりのデコード実装を JavaScript で行ったので、Lossless 系について話しました。 SWF の話と見せかけて、PNG の仕様の話と JavaScript のパフォーマンスチューニングが大半で、あとは少しだけ zlib.js の宣伝です。 スライドについて GitHub Pages です。 JSPerfView のグラフを埋め込みたかったので、ブラウザで実行できるスライドツールを探しました。 その中で html5slides が良さそうだったので採用しました。 JSPerfView の使い方には以前書いたものがあるのでご参照ください。 また、Java

3 users
imaya.blog.jp
9月24 zlib.js 0.1.0 をリリースしました はじめに 最近はいろいろなところで使っていただいているのに、いまだに develop ブランチが安定版というのも申し訳ないので zlib.js としては初のリリースとなる 0.1.0 をリリースしました。 使い方など GitHub のプロジェクトページをご覧ください。 以前の master ブランチからの変更点など パフォーマンス改善 BusterJS ユニットテスト(一部)の追加 Node.js 対応 GZIP圧縮・伸張対応 ZLIB Inflate のストリーム実装の追加 圧縮時不正な出力が行われることがあるバグを修正 カテゴリなしの他の記事

70 users
imaya.blog.jp
9月22 JavaScript で PSD Parser を作り始めました はじめに JavaScript で PSD ファイル (Photoshop Document) をパースする psd.js というのを作り始めました。 以下のURLで公開しています。 https://github.com/imaya/psd.js psd.js と聞いて、なんか前に聞いた事あるって言う人もいると思いますが、以前話題になった psd.js は Twitpic へ譲渡されたあと GitHub で公開しなくなったようなので、３日ほどでまったく新しく作り始めました。 現在できること まだざっくりとしか実装していません。 基本的な parse Image Data, Channel Image Data からキャンバス生成 未実装の部分はすごく大雑把にデータを切り出しているだけです。 将来的にやりたいこと ブ

55 users
imaya.blog.jp
8月17 jsPerf, JSPerfView を使った、JavaScript コードのベンチマーク計測とブログなどで計測結果を利用する方法 jsPerf とは JavaScript のコードスニペットに対してベンチマークを計測するサービスです。 一般的に、コードの速度を計測する際は console.time, console.timeEnd を使う事が多いと思いますが、 実行するたびに結果がブレたり、短い処理では正確な比較ができなかったりします。 jsPerf では何度か同じ処理を実行して最終的に一秒間に何回実行できたかをスコアにするので、実行時間が 1ms より小さい処理でも計測できたり、ブレがあっても大体のスコアが分かったりします。 このスコアを計算する部分は Benchmark.js というライブラリで書かれていますので、サーバサイドの JavaScript コードの速度を計測する

次のページ