document

HTML5 & JavaScript side
twitter: @y_imaya

2012年11月

3連休だし Web ブラウザで動作する Markdown Editor 作った

きっかけ

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

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

デモ

あ、保存は gist にでもコピペするといいと思います。

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

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

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

今後やりたいこと

  • このアプリケーションに名前をつける(命名センスほしい)
  • ローカルでの保存
  • より完璧な GFM 対応
  • Syntax Highlighing をもっと見やすくしたい

ほかにもこんなの欲しいとかあったら意見いただけると嬉しいです。

最後に

Markdown Editor 作ってたら何のドキュメントを書くのだか忘れてしまった。
未だに思い出せない…。

ちなみに、今回の記事はつくった Markdown Editor で書いてます。

「改行削除の代わりにGZIP」を実践してみた

はじめに

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

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

GZIP の展開を JavaScript で行う

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

大体こんな感じです。

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

http://imaya.github.com/demo/gunzip/

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

問題点など

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

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

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

宣伝

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

記事検索
最新コメント
最新トラックバック
カテゴリ別アーカイブ
タグクラウド
QRコード
QRコード
  • ライブドアブログ