tag:crieit.net,2005:https://crieit.net/tags/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9/feed Crieitでタグ「ウェブサービス」に投稿された最近の記事 2020-06-05T22:31:45+09:00 https://crieit.net/tags/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9/feed tag:crieit.net,2005:PublicArticle/15923 2020-06-05T22:29:21+09:00 2020-06-05T22:31:45+09:00 https://crieit.net/posts/620b85ee075fd93545b20ccfb92d3491 <p>さっき投稿した記事で、4日前に「musico」というウェブアプリをリリースしたことについて書きましたが、</p> <p>好きな楽曲について語り合うウェブサービス「musico」を作ってみました。<br /> <a href="https://crieit.net/posts/musico">https://crieit.net/posts/musico</a><br /> <a target="_blank" rel="nofollow noopener" href="https://musi-co.fun">musico | find track you like and talk about it</a></p> <p>実は昨日、もう一つウェブアプリをリリースしましたｗ<br /> その名も「みんなのきょうしつ」。</p> <p><a href="https://crieit.now.sh/upload_images/8ae825a52f93537d282260b5dff649f25eda3eaa27764.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/8ae825a52f93537d282260b5dff649f25eda3eaa27764.png?mw=700" alt="image" /></a></p> <p><a target="_blank" rel="nofollow noopener" href="https://class-room.fun">みんなのきょうしつ</a></p> <h2 id="開発の動機"><a href="#%E9%96%8B%E7%99%BA%E3%81%AE%E5%8B%95%E6%A9%9F">開発の動機</a></h2> <p>このアプリは、もともと３月のコロナ禍による一斉休校をきっかけに、いきなり会えなくなった友達とオンラインで再開して貰い、小中高生のみなさんに、社会の混乱からのストレスを一時的にでも忘れてもらえたら良いなという思いで、二日間ぐらいでガッと基本的な機能を作って公開しようとしていたものでした。ですが、その後なかなか着手する時間が取れず、限定的な公開にとどめて、ほぼ動いていない状態が続いていました。</p> <h2 id="開発頓挫、からの突貫リリースへ"><a href="#%E9%96%8B%E7%99%BA%E9%A0%93%E6%8C%AB%E3%80%81%E3%81%8B%E3%82%89%E3%81%AE%E7%AA%81%E8%B2%AB%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E3%81%B8">開発頓挫、からの突貫リリースへ</a></h2> <p>そんななか、先日の「musico」の開発と公開をきっかけに、テンションとモチベーションがひさびさに爆上がりしたので、この機を逃す手はないと思い、一念発起して昨日・一昨日をかけて最低限の機能を実装し、公開していみました。</p> <h2 id="どんなアプリ？"><a href="#%E3%81%A9%E3%82%93%E3%81%AA%E3%82%A2%E3%83%97%E3%83%AA%EF%BC%9F">どんなアプリ？</a></h2> <p>このアプリでは、教室を模した座席表的なものに、自分の好きな人やモノの名前と写真を登録していき、自分の理想の教室が作れます。</p> <p><a href="https://crieit.now.sh/upload_images/3cd6bc3848f85dbd1abedf7a1cfeb3cc5eda46c7d816b.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/3cd6bc3848f85dbd1abedf7a1cfeb3cc5eda46c7d816b.png?mw=700" alt="image" /></a></p> <p>さらに、URLを共有することで、別の場所にいる友だちとオンラインでリアルタイムで共同編集することが出来ます。（動画は開発中に撮影したものです）</p> <p><a target="_blank" rel="nofollow noopener" href="https://www.youtube.com/watch?v=N7qo5popZ3Q">動作ムービー</a></p> <p>また、「記念撮影」機能で作った教室の画像を作成・ダウンロードしたり、各種SNSに手軽にシェアすることが出来ます。（写真は友人が作った「あつまれ どうぶつの森」のキャラクターが集まる教室です）</p> <p><a href="https://crieit.now.sh/upload_images/43103ea48631f57b3237c5df0b282b575eda46f1109e2.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/43103ea48631f57b3237c5df0b282b575eda46f1109e2.png?mw=700" alt="image" /></a></p> <p><a target="_blank" rel="nofollow noopener" href="https://class-room.fun/classrooms/8jVBr7suU0In1vbE3Ze8">https://class-room.fun/classrooms/8jVBr7suU0In1vbE3Ze8</a></p> <p>地味にインスタ映えしたりしますｗ</p> <p><a href="https://crieit.now.sh/upload_images/1780742f62e146dcfd91693883f4363d5eda47b04c5d4.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/1780742f62e146dcfd91693883f4363d5eda47b04c5d4.png?mw=700" alt="image" /></a></p> <h3 id="技術的なこと"><a href="#%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E3%81%93%E3%81%A8">技術的なこと</a></h3> <p>技術スタック的には「musico」と同じくFirebase+Vuejs（Nuxtjs）という、構成です。「musico」はUniversalモード（SSR）で作りましたが、こっちはSPAとして開発し、OGP取得部分のみCloud Functionsで作りました。</p> <p>しかし、Firebaseめっちゃ便利ですね〜。</p> <p>こっちもあんまり凝ったことはしていないのですが、OGPの動的生成あたりとか、記念写真機能あたりについて、あとで技術的なことを書こうかなと思っています。</p> <p>それではまた。</p> ぷろみつ