Node.js
Unity
初心者
REST-API

学校のカフェテリアのためにメニューソフトを作ったお話

はじめに

こんばんわ、ダブと申します
今回は自分の学校のために作ったメニューソフトについて書きます。
初めに言っておくと、ほぼ日記みたいな感じです(というか日記)
同じようなことをしようとしている中高生の参考(?)になれば良きです。

学校にカフェテリアができた

最近、(といっても数年前ですが)学校にカフェテリアができました、カフェテリアでは日替わりのメニューを毎日3つ提供しています。

カフェテリア内には大きなモニター2x2で構成されたでっかい画面があります。
最初の一年間はそこにメニューの画像が表示されていました(日替わりなので、必要だった)。
しかし、二年目以降ソフトが動かなくなり、更新されなくなってしまった...
なので生徒は、文字のみでメニューを選んでいました。

まぁ、それで全然問題ないのです。が、4枚のモニタが真っ黒のままってのはいただけないし、やはり見えた方がいいよね、ってことで一人でメニューソフト開発することにしました。

完全におもちゃになっている図
CvhFCCkUEAE4xv2_censored (1).jpg

とりあえずデザインから

見栄えを重視するってことは最初に決めていたので、windowsform は候補から外れました。
当時はC#しか書けなかったのでUnityで開発することにしました。

はじめのデザイン

C4TFZX2UEAE-M4r_censored.jpg

見開きの本をイメージして作ったのですが、2つしか同時に表示できません。(メニューは3つあるのに)
なんでこんなデザインにしたのか、たぶん...相当眠かったのでしょう。

ちなみに、メニューデータはJsonで記述されています、これは最初から最後まで変わりませんでした。
この時はJsonファイルを読み込んでいないのでエラーが出ていますね。

次のデザイン

C8j-NvpUMAEFmiq.jpg
これはイラストレーターでデザインしたものです
チュウニズムに若干のインスピレーションを受けてますw
上のタブを一定間隔で切り替えることによって、いくらでも表示できるようにしよう、ってわけです。
最終的にこのデザインで作業を進めることにしました。

そして、こうなる

C8zBVMpUQAALGKN_censored.jpg

だいぶメニューっぽくなってきました。
この時点でだいぶコーディングが終わっていて、メニューデータも読み込まれている状態です。

データを同期する

このメニューソフトにはメニューを設定する機能があり、写真撮影もできます。
が、こんなでっかいPCからWEBカメラ引っ張ってきてパシャパシャするのはアレなんで
タブレットでメニューを編集して、本器に送信できればいいな、と考えました。

はじめにやったこと

サーバーとか、そーゆーのがさっぱりわからなかったので某ファイル同期サービスをインストールしてデータを共有する、というごり押しの戦法をとっていました。(この状態で1年くらい運用していた)

まぁ全然スマートじゃないわけで、次の手に出ます。

APIをやろうず

せっかく自宅にLinuxマシンあるのだからそれ使おうぜってことでNode.jsでREST APIを構築
出来ることはとてもシンプルです、メニュー情報の取得、設定、他にも端末のメニュー情報が最新か確かめるためのIDを管理しています。

一応完成

ってことで完成(?)です。
ezgif-3-54969af3be.gif

上の方に張った写真のモニタでこれが動いています、あとタブレットでも...

WEB GUI実装

ブラウザから設定できるようにしました。便利。

通常表示
Screenshot-2018-7-5 ラボメニューWEB_censored.jpg

編集用ページ
Screenshot-2018-7-5 ラボメニューWEB Admin_censored.jpg

おわりに

作っててとても楽しかったです、学校の情報職員が見て見ぬふりをしてくれたおかげで自由に開発できました。
ちなみに報酬としてカレーをおごってもらいました。同情するならマネーを(ry