promitsuです。
今週の土日の空いた時間を使って、先日リリースした「みんなのきょうしつ」というウェブサービスのアップデート作業を行いました。
このアプリは、リアルタイム同期な共同編集機能により、オンライン上の別々の場所やデバイスから、友達と一緒に好き勝手に教室(という名の座席表)を作成し、その画像をシェアできるサービスです。
開発の経緯などについては下記の記事を参照ください。
https://crieit.net/posts/620b85ee075fd93545b20ccfb92d3491
先日のリリースは、複数人でリアルタイムに「教室」(座席表)を作成できるという目的のもとに、最低限の機能のみに絞った仕様になっていました。その後、友人などに使ってもらい、フィードバックをもらった内容について、以下のような機能追加や修正などを行いました。
※ 前提としてこのサービスはNuxtjs(Vuejs)とFirebaseを使って開発・運用されています。
黒板に表示される生徒のつぶやきをタイプライター風に1文字ずつ表示するようにしました。
普通に文字列を配列化して、一定間隔おきにv-modelの配列にpushする感じでJavascriptで実装しました。
VuejsもFirebase(firestore)もまともに使ったことがなかった3月ぐらいに一日間の突貫作業で作った時のままだったので、HTML/CSSの構造から、Vueコンポーネントの構成などもリファクタリングしました。
現状ユーザー認証がないので、SessionStorageに自分がいいねした教室の情報を保持し、多重いいねを防ぐようにしました。
実装にはvuex-persistedstateを使っています。
これ以外のデータの読み込みなどはvuexfireを使って、vuexのstoreとfirestoreをシームレスにつないでいるので、moduleとして分けてindex.jsから読み込む構成にしています。
```jsx
store/
|
+-- index.js
|
+-- like.js
```
store/index.js
import like from './like'
import localStorage from 'vuex-persistedstate'
...
export const plugins = [
localStorage({
key: 'like',
paths: ['like'],
storage: window.sessionStorage
})
]
vuex-persistedstate
https://github.com/robinvdvleuten/vuex-persistedstate
vuex-persistedstate
https://github.com/posva/vuexfire
これがないと他にどんな教室があるかわからんし、アクセスもできないという指摘。ごもっともですね😓
作成・編集ができるのに、削除できないとは何事か!?というご指摘。さーせん。
トップページにリストが表示される様になったので、他の人にアクセスしてほしくない人は非公開設定にできるようにしました。秘密の言葉による簡易認証を入れようかとも思ったのですが、ユーザーから見た複雑度が増す気がしたので一旦ペンディングにしました。
だだっ白い無味乾燥な背景が寂しかったので、教室の背景画像を変更できるようにしました。アップロード時の画像リサイズ・クロップなどはまだ実装できていないのでIssue積んどきました。
vue-draggableを使って実装しました。(Vuejsは便利なコンポーネント・ライブラリが充実してるので、個人開発者にはとても嬉しい😭)
もちろん編集結果はリアルタイムに他のデバイスに反映されるようになっています。(挙動をもうちょっとかっこよくしたい😓)
https://www.youtube.com/watch?v=2RCYmpFSae8
vue-draggable
https://github.com/SortableJS/Vue.Draggable
背面黒板を廃止して、全面の黒板につぶやきを表示するようにしたり、その他微妙なデザイン・レイアウト調整、及びバグ修正を行いました。
まだまだバグも多いし、実装したい機能や修正したいUX、インタラクションなどもたくさんありますが、地道に少しずつ良いプロダクトにしていこうと思います。
ではまた。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント