きっかけ

ドキュメントを書く機会があったので、最近使う事の多い Markdown(GFM) で書こうと思った。
普段は gist で適当に書いてるんだけど、長くなりそうだしリアルタイムプレビューのあるツールが欲しかった。

少し探しても良さそうなのがなかったので、せっかくなので自作しようと思った。

使用ライブラリ、ツール群

このエディタはほとんどが他の方のつくったライブラリを組み合わせただけです。
特に Ace は素晴らしい出来で、リッチなエディタが簡単に Web アプリケーションに組み込めます。

Ace (エディタ)

marked (Markdown parser)

google-code-prettify (Syntax highlighting)

Closure Library (フレームワーク)

Closure Stylesheets (CSS minify)

Closure Compiler (JS minify)

また、Ace, marked の GFM 固有の表現で GitHub 側の挙動と一致していないところがあるので一部改造して使用しています。

はじめに

この記事の内容は「改行削除するくらいなら gzip したらいいじゃない」という記事の内容を受けて書いたものですので、まずはそちらをご覧になると良いかと思います。

記事を読んで、なんとなく呼ばれたんじゃないかという気になったので間違った方向でこれに取り組んでいこうと思います。

GZIP の展開を JavaScript で行う

まずは、GZIP ファイルを JavaScript で展開します。いくつか実装はあると思いますが、ここは自作で使い慣れてる zlib.js を使ってやります。そして、展開したらそれを Object URL にして適用します。簡単ですね。

大体こんな感じです。

で、できたものはこちらになります。

こちらのデモでは割と最近の機能(Blob, TypedArray, createObjectURL などなど)をつかっていますので Google Chrome などで見ると良いかと思います。( polyfill などを使えばそこそこ古いブラウザでも動かす事はできます)

一応動作するのですが、gzip ファイルを XHR で取得しなくてはいけないことから、ページの読み込みからスタイルの適用まで、素のページが表示されてしまいます。

また、複雑な構成のサイトではレイアウトの再計算が発生して体感速度の低下ということも考えられます。

CSS ではあまり効果的な使い方は思い浮かびませんが、遅延しても良いようなリソースを取得するのには良いかもしれません。

zlib.js 0.1.1 をひっそりリリースしました。圧縮サイズが小さくなるようにハフマン符号の処理を置き換えましたので、よろしくお願いします。