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

gaaamiiのブログ

悪気なく間違ったことを書いている時があります。コメントやTwitter、ブコメなどでご指摘ください

Backbone.jsを使ってブラウザベースのMarkdownエディタを作りました

捗りすぎわろたンゴwwwwwwww

f:id:shgam:20141016173701j:plain

というわけで、Nekobitoという名前のテキストエディタを作りました。何が目的でどうやって作ったのかとかそういうことを書きます。タイトルは2ちゃん風にしたので、2ちゃんまとめサイトに取り上げられることを願うばかりです。

背景

photo by Moyan_Brenn

ブログの下書きを書くためのテキストエディタ、今まではKobitoを使ってたけど、できればブラウザ上で使いたい。でもQiitaの投稿ページがKobitoの代替になるとは思えず、他のテキストエディタとしてwri.peなども検討したけどテキストエリアがデフォルトすぎて気持よくなかったので自分で作りました。開発時には麒麟のどごし生を服用しました。

名前はNeo Kobitoとしようとしたんですが、思いっきりKobitoって言っちゃっていいのかと思ってoを抜いてnekobitoにしました。固有名詞っぽければなんでもよかった感じです。

使い方

  1. アクセス
  2. 使う

これだけです。以下詳細です。

どこに保存されるの?

ブラウザのローカルストレージという場所です。そのため、異なるデバイス間で同期!みたいなのは今のところできないです。ブラウザの履歴を小まめに全削除している・シークレットウィンドウを使っているような人は、下書きも消えてしまうので要注意です。

(追記)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

Backbone.jsアプリケーション開発ガイド

Backbone.jsアプリケーション開発ガイド

jQueryべたべただとキモいのでまともに管理できるコードにしないといけない。そのためには構造が必要だ。じゃあBackbone.jsだ。ということでBackbone.jsを使いました。SPAについてですが、テキストエディタなのでページ遷移が起きないのは当たり前といえば当たり前です。SPAと言ってみたかっただけです。

MVC

とりあえずアプリとしては使えるけど、MVCなどの設計がろくに出来ていない気がします。どうにかしないとです。本読みます。

おわりに

タイトルは酒を飲んで1日で作ったような風に書いてしまいましたが、実際にはけっこう時間がかかりました。最初は、「Markdownのパーサーを一から書くわけじゃない(marked.jsというのを使ってる)し、いったい何に時間がかかるのさww」と思ってたけど普通に時間かかった。できたと思っても気持ち悪さは残るし、ちょっと機能足そうとするとどこにコード書くべきか考えなくてはいけないし、プログラミング難しいです。

作り始めるときに酒飲むのはかなりいいなと思いました。

追記

一応Githubの個別リポジトリを用意しました。

(更新情報)