にゃみかんてっくろぐ

猫になりたい

日用品のストック管理ツール Stokk を作った

日用品のストックを管理出来るツール「Stokk」を公開しました。

以下はポエムです。

技術選定

  • サーバをわざわざ建立するほどの機能はない
  • mBaaSと親和性が高そう
  • フロントエンドを書きたい

ということで、SPA + mBaaSで作ることにしました。

使ったもの

ツール: Adobe XD

初使用。無料の「スタータープラン」があり、アカウントさえあればシュッと使えます。

プロトタイプは作らず、ちょっと便利な図形描画ツール程度に使いました。事前にデザインや要件を整理でき、その後データやイベントの流れを練り練りするのにも大いに役立ちました。

f:id:no_clock:20190916220935p:plain
Adobe XDでのデザイン

言語: TypeScript

JavaScriptを操れる自信はなかったのでTypeScriptで書きました。エディタはVisual Studio Code

ただ、厳格に型付けをするのは諦めました。動く状態で、「thisはVueだからお前が定義したプロパティなぞ存在せんわ!」などと言われていました。「ぐ、Gradual Typingだから…」と意味不明な言い訳をしつつキャストしたりanyにしたりしました。

f:id:no_clock:20190916221003p:plain
怒られが発生している様子

フレームワーク: Vue.js + Vue Router, Bootstrap + BootstrapVue

ふわっと書きたかったのとReactは仕事で書く機会があるのとでVue.jsにしました。Vue CLIでTypeScriptも含めて一括で初期設定でき、とても楽でよいです。

デザインは安定のBootstrap。BootstrapVueも入れましたが、「BootstrapのListってBootstrapVueでどう書くんだっけ」と毎回マッピングしつつ書いていました。効率的に書けたかは分かりません。

その他ライブラリ: Lodash, Font Awesome

Lodashはdebounceに、Font Awesomeはアイコンに。

mBaaS: Cloud Firestore, Firebase Hosting, Firebase Authentication + FirebaseUI

作るサービスと親和性高そうなので全面的に依存しました。

FirebaseUIについては、 Firebase 6.6.1 と FirebaseUI 4.2.0 でドキュメント通りに書いたつもりで動作せず(firebase.auth()と書くとfirebaseがないと怒られる)。 メジャーバージョンを1つ落として FirebaseUI 3.6.1 を使用することで落ち着きました。何故なんだ。

そのほか

命名: Stokk

当初「にちまね!(日用品在庫マネージャ)」で けいおん!風にしようと思っていました。が、サブドメインを割り当てるタイミングで nichimane は無いな… と思って在庫(stock)を意図的に誤字らせました。

アニメーション

「動いているんだけど動いている感がない」という印象を受けたため、「小気味よく動いている」感を演出するべくアニメーションを設定しました。

  • アイテム追加、削除、並び替え時
  • 読み込み・保存時(スピナー表示)

f:id:no_clock:20190916221048g:plain

ソースコード

やっつけ感満載のソースコードGitHubにあります。