スプレッドシート+Google Apps Scriptでプロトタイプを作る(Flaskで簡単なWebサービスを作ってみる[第1回])

2020年6月7日

Contents

はじめに

PythonのWebアプリケーションフレームワークFlaskを使って、簡単なWebサービスを作ってみます。
→ 前回 : Flaskで簡単なWebサービスを作ってみる[第0回]

今回作るのは「消耗品買い物リスト」。
具体的に開発を始める前に、プロトタイプを作って使い勝手を実際のユーザー(妻)にヒアリングします。

注意: まだFlaskは触りません。

プロトタイプといっても相当に簡易なものです。

まずは画面イメージを書いてみます。
ふせんをiPhoneの画面に貼り付けながら、どんな操作感になりそうかイメージしながら書いてみます。

一画面で、そこまで凝ったこともしないので5分もかからず作成。

作ってみたふせんをiPhoneの画面に貼り付けた状態でユーザーに見せて意見を聞いてみます。

「ステータスがいつの情報か知りたい」というフィードバックをもらいました。
確かに…。採用。

こんな感じになりました。

フィードバックをもらって調整を加え、今度は実際に動くものを作ってみます。
Google SpreadsheetとGoogle Apps Scriptでサクッと作ります。

機能は以下:
– 品目、ステータスを管理できる
– ステータスを更新すると最終更新時刻が更新される

スプレッドシートでメイン画面を作成。
ここでステータス名を言葉から記号(◯,△,×)に変更します。

ステータス名はIDで管理した方が良さそうです。

ここの実現にはGoogle Apps Scriptが必要でした。
「セルの更新を検知→更新セルがステータス列なら、その隣のセル(最終更新日時)に現在時刻を入力」
という流れです。ググりながら実装。

これでメインの機能ができました。

実際に触ってみたり、フィードバックをもらったりしながら、使い勝手や課題が解決できそうか？という点を検証します。
結果、以下のような課題が出ました。

機能面の課題
- ステータスを更新したらソートしたい。(×→△→◯の順)
- 品目が増えると探すのが面倒になりそう
- 品目で何を買うべきか知りたい
  - 商品画像やURLがあると良い？
スプレッドシートの課題 : レイアウトや使い心地はそんなによくない
- スマホからの見栄えが悪く、水平スクロールやピンチイン・ピンチアウトなどの情報が見渡せない
- スマホで操作するにはもっさりしている
  - 特にステータスを変更するときのセルをタップ→ステータスリストを表示→ステータスの選択という流れは出先で忙しいときにやってられない
  - 実運用の上ではサクサク動くことが重要
- 品目の追加はスマホからだと面倒くさそう
etc

機能面で詰める必要があるものの、
開発のきっかけである「消耗品の買い忘れが多い」課題は解決できそうなので、この方向性で進めていきます。

ちなみに、この段階で「Webサービスじゃなくてスプレッドシート+GASでいいんでは？」という気持ちが出てきました。
実際、上記のスプレッドシートの課題もスプレッドシートの工夫でどうにかなるかもしれません。

とはいえ、今後の手の入れやすさを考えると、スプレッドシートでなんとかするのに労力を割くよりは、Webサービスとして作った方が良いと判断しました。当初の予定通りFlaskで構築していきます。

今回、プロトタイプを作って使ってみる、まで進みました。

次はUI設計とデザイン。
現状のスプレッドシートやふせんからもう少し踏み込んで、
スマホのWeb画面としてイメージができるぐらいには作り込んでいきます。