4月 252014
 

Markdown-F Editor
こんにちは。ファガイです。

4/24にオンラインマークダウンエディタ「Markdown-F Editor」をリリース致しました!
この記事では、そのMarkdown-F Editorに関して紹介しようと思います。



Markdown-F Editorについて

Markdown-F Editorは、Markdownを書くために作られたWebアプリケーションです。(実際、コピー機能以外はオフラインで動きます。)

Markdownに関してはここでは割愛させていただきます。
詳しい形式は、Markdown – wikipediaを見ると良いです。

機能

基本的な入力、出力

ファイルの作成や、ローカルに存在するmdファイルの読み込み、Markdown-F Editorで作ったmdファイルのダウンロードが出来ます。

コードブロックに対応

Github等で使用されている`(バックスラッシュ)3つでのコードブロックの記述に対応しています。

一時保存に対応

HTML5のlocalStorageに対応しており、1文字でも入力すれば、その文字列はlocalStorageにtempとして保存されます。
そのため、万が一、ブラウザを閉じた場合も心配なく使用することが出来ます。

HTMLタグのクリップボードコピー機能

zClipというライブラリを使用しており、生成されるHTMLタグをクリップボードにコピーすることが出来ます。(なお、オフラインでは使用できない模様)

対応ブラウザ

対応ブラウザは以下となります。(自分が確認したもの)

  • Google Chrome
  • FireFox
  • IE11 以上(localStorageは対応しておりません)

制作にかかった期間とか、使用技術等

構想自体は2週間ほど前に有りましたが、開発にかかった日数は1週間程度です。(HTML5 Japan Cupの自由課題として出したい所)

使用技術

今回作る上で使用した技術は以下です。

こんな所ですね。Compassは今回初めて使用しましたが、最初の設定で躓かなければ悪くないなと思いました。

使用したライブラリ等など

jQueryもライブラリと言ってしまえばそうなのですが。。。内部的に使用しているのは以下です。

最後に

このアプリを作ったものの、まだまだシステム的に改善すべき所が幾つかあるかと思います。
個人的には、マークダウンだけ見えるようにするとか、幅の比率を切り替えられるようにするとか。
あとはスクロールの追尾機能付けたいですね。あれはどうやって作るんでしょう。

ではではー。(要望等も待ってます)

Markdown-F Editor

Pocket

 Posted by at 5:59 PM

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください