新・クマックマのダラダラダイアリー

エスタディオクマックマ

おー!って思ったことをブログに書いてきます。

2021-02-11:板橋区の保育園探しアプリの詳細画面を変更しました(空き状況がより視覚的に!)

ここ数日、板橋区の保育園探しアプリを

もう少し視覚的に表現できないかを模索していました。

 

 

1.前回の記事を書いてみてから、色々考えてみましたが。。。

 先日は、「こんな感じにできれば」ということを 

 書いたと思います。

f:id:sandplover_petro:20210210002008p:plain

 

 詳細は先日の投稿を。

sandplover-petro.hatenablog.com

 

悪くはなかったのですが、

横軸に年齢が表示されない(データの持ち方の問題らしい)とか、

縦軸の空き人数がたまに小数点表示になるとかが

やはり気になりました。

なので、nocode アプリ「glide」でできることをも含めて

検討してみました。

 

 

2.半円グラフを使って表現してみる

やりたかったことは「空き人数が直感的にわかること」でした。

「glide」の 『progress bar』という機能でいい感じで実装できそうだったので

ちょっと試してみました。

 

下の左図は、テキストベースなだけに多少分かりづらいのは否めません。

f:id:sandplover_petro:20210211181335j:plain

 

 それを、直感的にわかるようにするために少し検討してみました。

 

まずは、棒グラフで。

悪くはないのですが、ちょっと平凡な感じも。。。

f:id:sandplover_petro:20210211181735j:plain

 

次に試してみたのは、半円グラフ。

実際の業務ではあんまり使ったことなかったのですが、

使えるものは使ってみようということでやってみました。

 

試してみたらそんなに悪くない感じになりました。

f:id:sandplover_petro:20210211181901j:plain

半円の中にある表記が変更できない(パーセンテージが必ず上に来る)ことは

突っ込みたくなるところではあるのですが、

そこは突っ込んでもしかたがないことなので諦めることに。

だいぶぱっと見ではわかりやすくなったと思います。

というわけで、これで実装することにしました!

 

3.glideの機能をもう少し使いこなしていきたい

glide の機能の中には、まだまだ便利な機能が眠っている

(というか、自分が知らないだけ?)こともよくわかりました。

 

たしかに、google スプレッドシートの関数とかを使えば

どうにかなるものも多いのですが、

せっかくある機能なので使ってみてもいいのかな、という

思いもあります。

 

ドキュメントが英語という制約はあるものの、

そんなに苦のある内容ではないので、

これからいろいろ読んでいって色々試したいなと思います。

 

改修を加えたアプリのURLは以下になります。

もしよかったら、触れてみていただけると嬉しいです

(感想とかもいただけたらさらに嬉しいです!)

itabashi-nurserylist.glideapp.io

 

 

 

過去記事はこちらです。

せっかくですので、惹かれるものがありましたら

見ていってもらえればと思います。

 

sandplover-petro.hatenablog.com

 

 

sandplover-petro.hatenablog.com

 

 

sandplover-petro.hatenablog.com

 


f:id:sandplover_petro:20210103010427j:image