チラシ裏日記上等!!新館

Webアプリケーションエンジニアの雑記帳。映画とかアニメとかの記事も書きます。

Nuxt.jsとfirebaseを使ってマークダウンエディタを作っています

最近趣味でマークダウンエディタを作っています。

spellnote.com

Evernoteに変わるものを作るれると良いなと思いちまちまと作っています。

使っている技術

使っている技術は Nuxt.js と firebase です。

ja.nuxtjs.org

firebase.google.com

Nuxt.js は Vue.js で開発をする上で面倒なWebpackやミドルウェアの設定をうまく隠蔽してくれています。スピード感を持ってビューを開発するのに良い選択肢だと思いました。静的ファイルを nuxt generate で生成できるのでそれを firebase とつなげてWebアプリケーションを構築しています。

firebase では Nuxt.js で生成した静的ファイルを firebase hosting にアップロードしています。hostingでは特に課金しなくても独自ドメインを設定できるのが魅力的です。firebase hosting でホストした静的ファイルから firebase の Firebase Authentication で認証を行い、Cloud Firestore でデータを保存しています。

firestoreのruleなどが若干わかりづらいですが、ドキュメントも日本語書かれているので読み込めば大抵なんとかなりました。まだこのあたりの知見とかはあまりWeb上では見ないので増えてくるとうれしいですね。

今のところ特にアクセス数も多くないことから無課金で出来ています。Firestoreあたりは結構アクセス数が増えると課金しないといけない雰囲気はあります。

出来ること

マークダウンのリアルタイムプレビューができます。

f:id:Tomato-360:20180224012437g:plain

スタイルは github flavor で馴染みがある感じ。コードハイライトもダークなテーマを使ったメリハリがある感じにしています。

文書は自動で保存され一覧で閲覧することが出来ます。

f:id:Tomato-360:20180224012753g:plain

文書の編集や削除も可能です。

モバイルでも使えるようにエディタとプレビューの表示非表示が出来るようになっています。

f:id:Tomato-360:20180224013029g:plain

地味にPWAにも対応していたりします(アイコンが小さいのはちゃんと直したい)。

f:id:Tomato-360:20180224013410p:plain

あと欲しい機能としてはドキュメントの検索や、タグ付け、ドキュメントのピン止めなどがあります。近いうちに実装していきたいところです。

作った感想

何となく作り始めましたが結構いい感じです。firebase周りがまだちょっとこなれていないのでこの開発を通じて勉強していきたいところです。

次はflutterあたりを使って flutter + firebase で何か作りたいですね。今年はいろいろ創って行きたい気持ちが強いです。