読者です 読者をやめる 読者になる 読者になる

ottatiのブログ

無職学生がネットにクソアプリをまき散らしていく様子

無料で作るWebサービスHerokuを使ってMarkdownエディタを作ってみた()

f:id:ottati:20150103125718g:plain     🍣

最近「Herokuをはじめよう!」という有益な記事を見つけました。

2つの記事の主旨は著者のid:nakazyeさんのブコメに集約されると思います。

インフラに悩まず無料で公開できるというのは本当に大きなメリットだと思ってます。何かやりたいなと思っている人は、カッコいいものではなくとも、まず作り始めて公開してみると見えるものがあるかもしれません

はてなブックマーク - nakazye のブックマーク - 2014年9月15日

ということで僕も作ってみました。

作ったもの

スクショ。

f:id:ottati:20140918112140p:plain

GitHub Flavored Markdown対応Markdownエディターです。Ajaxを使用してリアルタイムプレビューを実装しました。さらにエディターをスクロールするとプレビューも同じようにスクロールするように!つまりQiitaの真似です。Djangoを使っています。確実に持て余していますねw

誰かの参考になる可能性が微レ存なのでGitHubの方にもpushしました。

ちなみにDBもクッキーもWeb Storageも使っておりません。保存不可は仕様です。

PythonでのMarkdown

python-markdown, py-gfmとpygmentsを使うといい感じになると思います。先日記事にもしたので詳しくはWebでお願い致します。

工夫した点

スクロールを工夫しました。

[テキストエリア内のスクロールの高さ] / [テキストエリア内の全体の高さ]で全体からみたスクロールポイントの比率を割り出しました。テキストエディタがスクロールされると同時にプレビューもその比率でスクロールさせるようにしました。

textarea.on('scroll', function() {
        var scrollTop = textarea.scrollTop();
        var scrollHeight = textarea[0].scrollHeight;
        var scrollPointRatio = scrollTop / scrollHeight;
        // Do Scroll Preview!
        preview.animate({ scrollTop: preview[0].scrollHeight * scrollPointRatio }, 0);
});

やったQiitaっぽいです!

まとめ

VPSとか借りると公開までサーバの方の設定で無駄に時間を食うので、クリエイティブな時間に集中できるHerokuは素晴らしいと思いました。(最近は開発はもっぱらHerokuを使っています。)

f:id:ottati:20140918114139p:plain