Vue.jsとFirebaseの本を読んで高速にWebサービスを開発してみた

まずVue.jsとFirebaseの本を読んでみた

ワタナベ(id:tatsuaki_w)さんの「Vue.jsとFirebaseで作るミニwebサービス」というイカした本を買ってみました、超絶わかりやすくオススメ出来ます。

Vue.jsもまだまだ分からない部分も多く勉強中ですが、Firebaseに関しては一切触ったことがなかったです。

しかし、使ってみるとこれがめっちゃ便利。
この本によって基礎知識を付け、サクッとマークダウンエディターをFirebase上で作ってみて要領を掴みました。

今回作ったのがこのWebサービスです。
昔々、「notepad.cc」というオンラインメモ帳が好きで使ってました。

しかし！ある日突然サービス終了してしまったのでした。悲しみ。
というわけで、今回作ったものはそれにかなり近い形で自分なりに復刻というコンセプトで作ってみました。

・メモ帳(markdownなどはなし)
・Share用のURL発行
・鍵付けれる
・レスポンシブ対応

ログイン不要で、あとから場合によっては鍵を付けられるっていう手軽さが良いところだと思ってます。
あと自動保存も付けておきました。

onkeydownでclearTimer→setTimeout(3秒待機後保存)

という超単純な仕組み。これで最後のkeydownから3秒入力がないと保存される。
もっと良い方法がありそうだけどとりあえずこういう時はまず完成を優先させます。

しかし、「OimoNote」って名前の付け方はどこか「秀丸エディタ」っぽいですね。

ロゴはshopifyの提供しているロゴジェネレーターを使用してみました。

○etlifyに似ている気がしますが、出てきたものの中では気に入ったのでこれにしました。

類似するサービスは他にもありそうなので出来るだけ使っていて気持ち良かったりテンションが上がるものにしたいですよね。

こういった個人サービスは無骨なデザインのままだったりすることが多いので出来るだけデザインはまともにしました。
ちなみにcss フレームワークにはUIKitを使っています。

今はランダムなURLが発行されるようになっていますが、お気に入りに入れるなりしないと忘れてしまいそうです。
自分の好きなURLに変更出来る機能があれば良いな～と思います。

今は複数人が同じメモ帳を開いて編集すると最後に更新した人の方の内容で全面的に書き換えられます。
リアルタイムに複数人での編集が出来ると良いなと思います。このあたりFirebaseは割と得意分野っぽいので。

Vue.jsもFirebaseも本当に良いもの。イカしてますよこいつら！途中で色々ハマったりもしましたが開発日数は5日間でした。Firebaseのおかげで自分としては速い方です。

とりあえず完成させることを目標にやったのでこれからリファクタリングです。
コンポーネント指向のはずが一つのコンポーネントが既に巨大化してきてます。

福岡かリモートで絶賛職探し中やで！