ぷろみつの投稿 - Crieit

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

2020-06-07T19:47:07+09:00

promitsuです。

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

http://class-room.fun/

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

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

https://crieit.net/posts/620b85ee075fd93545b20ccfb92d3491

アップデート

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

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

主な内容

ステータスのタイプライター表示

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

教室ページのデザイン・レイアウト修正

VuejsもFirebase(firestore)もまともに使ったことがなかった３月ぐらいに一日間の突貫作業で作った時のままだったので、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、インタラクションなどもたくさんありますが、地道に少しずつ良いプロダクトにしていこうと思います。

ではまた。

自分の理想の教室を、友達とリアルタイムで一緒に作れるウェブサービス「みんなのきょうしつ」をリリースしました。

2020-06-05T22:29:21+09:00

さっき投稿した記事で、4日前に「musico」というウェブアプリをリリースしたことについて書きましたが、

好きな楽曲について語り合うウェブサービス「musico」を作ってみました。
https://crieit.net/posts/musico
musico | find track you like and talk about it

実は昨日、もう一つウェブアプリをリリースしましたｗ
その名も「みんなのきょうしつ」。

みんなのきょうしつ

開発の動機

このアプリは、もともと３月のコロナ禍による一斉休校をきっかけに、いきなり会えなくなった友達とオンラインで再開して貰い、小中高生のみなさんに、社会の混乱からのストレスを一時的にでも忘れてもらえたら良いなという思いで、二日間ぐらいでガッと基本的な機能を作って公開しようとしていたものでした。ですが、その後なかなか着手する時間が取れず、限定的な公開にとどめて、ほぼ動いていない状態が続いていました。

開発頓挫、からの突貫リリースへ

そんななか、先日の「musico」の開発と公開をきっかけに、テンションとモチベーションがひさびさに爆上がりしたので、この機を逃す手はないと思い、一念発起して昨日・一昨日をかけて最低限の機能を実装し、公開していみました。

どんなアプリ？

このアプリでは、教室を模した座席表的なものに、自分の好きな人やモノの名前と写真を登録していき、自分の理想の教室が作れます。

さらに、URLを共有することで、別の場所にいる友だちとオンラインでリアルタイムで共同編集することが出来ます。（動画は開発中に撮影したものです）

動作ムービー

また、「記念撮影」機能で作った教室の画像を作成・ダウンロードしたり、各種SNSに手軽にシェアすることが出来ます。（写真は友人が作った「あつまれどうぶつの森」のキャラクターが集まる教室です）

https://class-room.fun/classrooms/8jVBr7suU0In1vbE3Ze8

地味にインスタ映えしたりしますｗ

技術的なこと

技術スタック的には「musico」と同じくFirebase+Vuejs（Nuxtjs）という、構成です。「musico」はUniversalモード（SSR）で作りましたが、こっちはSPAとして開発し、OGP取得部分のみCloud Functionsで作りました。

しかし、Firebaseめっちゃ便利ですね〜。

こっちもあんまり凝ったことはしていないのですが、OGPの動的生成あたりとか、記念写真機能あたりについて、あとで技術的なことを書こうかなと思っています。

それではまた。

好きな楽曲について語り合うウェブサービス「musico」を作ってみました。

2020-06-05T19:26:08+09:00

突然ですが、先々週に行われたweb1weekという1週間でウェブアプリを作って公開するオンラインハッカソンに参加しました。

（5/18～5/24）１週間でWebサービスを作るイベント - お題「Like」

と、言いたいところだったのですが、実は2日目以降、家庭内のインシデント対応やそれに起因する自身の体調不良で、全く開発を進めることができませんでした（汗）

昨日あたりから、体調含めて状況が落ち着いてきたので、遅ればせながら開発を進め、ガっと最低限の所まで作り込み、勢いでドメイン取って公開してみました。

以下、今回開発したウェブアプリについて。

お題は「Like」でしたので、好きな楽曲についてあーだこーだ語り合えるサービスを作ってみました。

「musico | find track you like and talk about it」（何故か英語ｗ）

フリーワードで楽曲を検索して、その楽曲にLikeやコメントをすることができます。

現時点での機能は以下、

未ログイン時

楽曲を検索、またはコメントがある楽曲リストを閲覧できる
楽曲のコメントページを閲覧できる
楽曲のプレビュー再生ができる（ファイルがあるもののみ）
Spotifyで楽曲を聞くことができる（別タブでウェブ版を表示）

ログイン時

上記に追加して、
- 楽曲にコメントできる
- 楽曲にLikeできる

動作ムービー

https://youtu.be/sDVK6O61_S0

各楽曲、コメントごとのページをSNSにシェアすることも出来ます。

https://musi-co.fun/tracks/6K53GM9W6Vle5KBwGFVnZM

開発時の様々や動機はなどは下記のハッカソンのボードに書きました。
https://crieit.net/boards/web1week-202005/musico

技術的なこと

技術スタック的にはFirebase+Vuejs（Nuxtjs）という、マネージドなサーバレス環境とコンポーネント思考なリアクティブフレームワークを組み合わせたJAMstackな流行りの構成です。

最初はホスティングにNetlifyを選択したのですが、SSR周りやFirestoreなど他に使ってるサービスとの兼ね合いも考えて、Firebase全乗っかりな構成にしました。

UIは最近良く使ってるBulmaのコンポーネントをほぼほぼそのまま使ってる感じです。

本業ではAWSがっちり使って、コンテナとかサーバレスとかマネージドサービスを組み合わせたサーバサイド寄りの開発が多いので、個人開発ではフロントエンド寄りの技術を選定しがちですね（汗）

あんまり凝ったことはしていないのですが、開発時に得た知見は今後すこしずつ書いていこうと思っています。

それではまた。

PS.

祝Crieit初投稿！！