この投稿はUDHI-LAB++; Advent Calender 2022 9日目の記事です
高専祭！
やっと学外からも人が参加できるようになりました
私はちょうど今年四年生で四年生は分野展を毎年担当しています
ということで情報の分野展をすることになったわけですが、ちょうど担任の先生から面白いものの話を聞いていてそれは文字のアウトラインをベジェ曲線でとり透視投影を用いてwebのcanvas上に表示し回転させるものでした
そこで私は文字を入力して自動的に生成し、これを送れる立体掲示板的なものを作ろうと考えました
実際にアウトラインをsvgでとって…とやっていたのですが文字を送るぐらいなら絵を描いておくれたら面白いのではないか！！と思いここで方針転換しました
合わせてちょうどfirebaseに興味があり、特にfirebase Authがどのぐらい使いやすいのかなと気になっていたのでfirebaseを用いてホスティングする形に決めました
ユーザー側はこんな感じで
サーバー側はこんな感じになりました
やったこと
いざ開発を始めていきます
認証系
まずはfirebase Authが気になっていたのでそれについて調べていきました
Authを使ってみたいと言っても絵を送れるというのがメインでしかも学祭の展示物ということであまりアカウントを作って…などとすると手間が大きく面白く無くなってしまうと感じたため匿名認証というものを使いました
狙いとしては最初は匿名認証で自分の送った絵だけをみれる機能を作り、これを永続化するためにgoogleなどのアカウントに移行してもらうという考えです(まだギャラリー機能も移行機能はありません…)
そうして名前を入力するだけで自動的に登録され、すぐに絵が描き始められるようにしました
絵を描く機能
後で表示するときはVector形式のデータが欲しいのでcanvasのデータをsvgとして出力できるようなものも合わせて実装していきました
いきなりfirestoreに登録してしまうと結局送らなかった時に勿体無いのでプレビュー画面までlocalStorageで運んでいます
ここでfirebase Authの認証が遅いことで少し問題が発生しました
{user_name}さんの描いた絵を送ろうというメッセージを上に表示していたためこのuser_name取得のための時間がかかり絵を描いている途中で出てきたりして線が大きくずれてしまいました(これ普通の開発だとどうやって解決しているんですかね…)
そこで急遽ローディング画面を追加し、firebase Authの認証が終わるまで絵を描き始められないようにしました
プレビュー画面
ここでは四角い箱の中に描いた絵が現れ自由に回転させることが出来ます
この時の回転に使った角度を用いてサーバー側で表示するときに回転させています
このsvgのデータと角度のデータをfirestoreに保存しています
サーバー画面
サーバー側の画面はウィンドウのサイズから表示できる数を計算してその数だけfirestoreから取得して表示しています
新しい絵が送られたらonSnapShotで更新される仕組みです
一個一個の絵を四角で囲んだものを一つのオブジェクトとして内包して複数個展開しています
完成
そうして学祭の展示になんとか間に合わせることに成功しました！！
(実は今までもプロ研としての展示があったのですが間に合わずライブプログラミングしてました…)
まだまだ改良したい点はたくさんあって現在改良中ですが、二日間で計100個ほどの絵を送って頂き画面いっぱいに描いた絵が並んでいる光景はとても嬉しいものでした
現在は、サーバー用画面を開放して誰でも見れるようにしています
ここまでお読み頂きありがとうございました
そしてこの場をお借りして、絵を描いていただいた方々本当にありがとうございました！！！
機会があれば来年も展示したいと考えているのでその時はぜひよろしくお願いします