週末の時間を使って「みんなのきょうしつ」をアップデートしました。

promitsuです。

今週の土日の空いた時間を使って、先日リリースした「みんなのきょうしつ」というウェブサービスのアップデート作業を行いました。

みんなのきょうしつ | 理想の教室を作ってみよう！

このアプリは、リアルタイム同期な共同編集機能により、オンライン上の別々の場所やデバイスから、友達と一緒に好き勝手に教室（という名の座席表）を作成し、その画像をシェアできるサービスです。

開発の経緯などについては下記の記事を参照ください。

アップデート

先日のリリースは、複数人でリアルタイムに「教室」（座席表）を作成できるという目的のもとに、最低限の機能のみに絞った仕様になっていました。その後、友人などに使ってもらい、フィードバックをもらった内容について、以下のような機能追加や修正などを行いました。

※ 前提としてこのサービスはNuxtjs（Vuejs）とFirebaseを使って開発・運用されています。

主な内容

つぶやきのタイプライター表示
黒板に表示される生徒のつぶやきをタイプライター風に１文字ずつ表示するようにしました。普通に文字列を配列化して、一定間隔おきにv-modelの配列にpushする感じでJavascriptで実装しました。

教室ページのデザイン・レイアウト修正
Vuejs(Nuxtjs)もFirebase(firestore)もまともに使ったことがなかった３月ぐらいに一日の突貫作業で作った時のままだったので、HTML/CSSの構造から、Vueコンポーネントの構成などもリファクタリングしました。

いいね機能
現状ユーザー認証がないので、SessionStorageに自分がいいねした教室の情報を保持し、多重いいねを防ぐようにしました。実装がvuex-persistedstateを使っています。これ以外のデータの読み込みなどはvuexfireを使って、vuexのstoreとfirestoreをシームレスにつないでいるので、moduleとして分けてindex.jsから読み込む構成にしています。

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
 })
]

robinvdvleuten/vuex-persistedstate

posva/vuexfire

公開教室のトップページでのリスト表示
これがないと他にどんな教室があるかわからんし、アクセスもできないという指摘。ごもっともですね😓

座席削除
作成・編集ができるのに、削除できないとは何事か！？というご指摘。さーせん。

公開・非公開設定
トップページにリストが表示される様になったので、他の人にアクセスしてほしくない人は非公開設定にできるようにしました。秘密の言葉による簡易認証を入れようかとも思ったのですが、ユーザーから見た複雑度が増す気がしたので一旦ペンディングにしました。

教室背景変更機能
だだっ白い無味乾燥な背景が寂しかったので、教室の背景画像を変更できるようにしました。アップロード時の画像リサイズ・クロップなどはまだ実装できていないのでIssue積んどきました。

ドラッグ&ドロップ編集機能
vue-draggableを使って実装しました。（Vuejsは便利なコンポーネント・ライブラリが充実してるので、個人開発者にはとても嬉しい😭）
もちろん編集結果はリアルタイムに他のデバイスに反映されるようになっています。（挙動をもうちょっとかっこよくしたい😓）

SortableJS/Vue.Draggable

- その他の修正（レイアウト変更、バグフィックス等）
背面黒板を廃止して、全面の黒板につぶやきを表示するようにしたり、その他微妙なデザイン・レイアウト調整、及びバグ修正を行いました。

---

まだまだバグも多いし、実装したい機能や修正したいUX、インタラクションなどもたくさんありますが、地道に少しずつ面白いプロダクトにしていこうと思います。

みんなのきょうしつ | 理想の教室を作ってみよう！

ではまた。