Backbone.jsを使ってブラウザベースのMarkdownエディタを作りました
というわけで、Nekobitoという名前のテキストエディタを作りました。何が目的でどうやって作ったのかとかそういうことを書きます。タイトルは２ちゃん風にしたので、２ちゃんまとめサイトに取り上げられることを願うばかりです。
背景
ブログの下書きを書くためのテキストエディタ、今まではKobitoを使ってたけど、できればブラウザ上で使いたい。でもQiitaの投稿ページがKobitoの代替になるとは思えず、他のテキストエディタとしてwri.peなども検討したけどテキストエリアがデフォルトすぎて気持よくなかったので自分で作りました。開発時には麒麟のどごし生を服用しました。
名前はNeo Kobitoとしようとしたんですが、思いっきりKobitoって言っちゃっていいのかと思ってoを抜いてnekobitoにしました。固有名詞っぽければなんでもよかった感じです。
使い方
- アクセス
- 使う
これだけです。以下詳細です。
どこに保存されるの？
ブラウザのローカルストレージという場所です。そのため、異なるデバイス間で同期！みたいなのは今のところできないです。ブラウザの履歴を小まめに全削除している・シークレットウィンドウを使っているような人は、下書きも消えてしまうので要注意です。
（追記）Dropbox Datastore APIを使ってクラウドへの保存を可能にしました（2014/12/20）
キーバインド
以下、今のところ設定してあるキーバインドです。
Ctrl + n : 新規の下書きを開く Ctrl + s : 編集中の下書きを保存 Ctrl + d : 編集中の下書きを削除 Ctrl + l : リストを表示/非表示
追記（10/24）
Vimライクな上下移動を可能にしました。
（サイドバーを開いた状態で） k: 上 j: 下 o: 下書きを開く
どれくらい保存できる？
ブラウザによって異なります。下書きのためのテキストエディタなので、あまり多く保存することは想定していません（想定して作るとwri.peのようにサーバーサイドのいろいろが必要、もしくはDropboxのような外部ストレージと同期するようにしなければいけないので）。
技術
技術面は妥協と挫折が多くてあまり語れませんが、はじめてのBackboneということで勉強に時間をかけました。
Backbone.jsでSPA
jQueryべたべただとキモいのでまともに管理できるコードにしないといけない。そのためには構造が必要だ。じゃあBackbone.jsだ。ということでBackbone.jsを使いました。SPAについてですが、テキストエディタなのでページ遷移が起きないのは当たり前といえば当たり前です。SPAと言ってみたかっただけです。
MVC
とりあえずアプリとしては使えるけど、MVCなどの設計がろくに出来ていない気がします。どうにかしないとです。本読みます。
おわりに
タイトルは酒を飲んで１日で作ったような風に書いてしまいましたが、実際にはけっこう時間がかかりました。最初は、「Markdownのパーサーを一から書くわけじゃない（marked.jsというのを使ってる）し、いったい何に時間がかかるのさｗｗ」と思ってたけど普通に時間かかった。できたと思っても気持ち悪さは残るし、ちょっと機能足そうとするとどこにコード書くべきか考えなくてはいけないし、プログラミング難しいです。
作り始めるときに酒飲むのはかなりいいなと思いました。
