12
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

育児アプリから見るアプリをサクッと作るイメージ

Posted at

こんばんは。
チョコミントよりも あ・き・ら です

こんなんでもMicrosoft MVPやってます。
世界ってどうかしてますよね。

こんなんでも最近娘が産まれました。
世界ってどうかしてますよね。

実際なかなかどうして、生命の誕生の瞬間には涙が流れるものです。
女性が産まれましたので、心の底から嫁に似てほしいと、一番星に日々祈りをささげる毎日です。
日々、宇宙のゴミに祈ってる天然パーマを見かけたら私だと思ってください。

もし娘が私のせいで天然パーマになったら、わたしの余りある財力をつかって一生分の縮毛矯正代を約束することをここに誓います。

各方面から「おめぇの娘はバケモノになる」と示唆されております。
恐らく「大物になる」の誤植だと思ったのですが、
各方面複数名から「バケモノ」とハッキリ聞いたので、恐らくバケモノになることを免れないでしょう。

そろそろ本題に入りたいと思います。

Power Apps Advent Calendarに空きがあったので、毎年恒例のくだらないネタを投下して、皆さまの本年の締めくくりの一助としたいと考えます。

育児アプリとは

育児するようになって色々知ることがあります。
授乳とか。
ウチは奥様の「え、母乳なんてしんどい!完全ミルクだよ」という進言がありまして、
所謂"完ミ"になりましたが、
結構「母乳で育てるんだ!」派の方も多いと聞きます。

我々男子からすると、逆立ちできてもいい歳こいて3晩徹夜できてもAI使ってツヨツヨエンジニア!みたいな胡散臭い発信できても、母乳を出すことはできないわけで。
父乳って言葉もないわけです。
パパのミルクちゅっちゅする?って文章は事案にしかならないわけです。
地域の不審者事案になっちゃいますよね。
男女平等というならば身体の構造から変えないといけないわけです。
なんのはなしでしたっけ。

そうそう、ミルクにすれば、いままで間接的にしてか関われなかった育児をある一定以上こちらでも遂行できるようになるという点で、あきら家では完ミという結論になりました。
初乳はあげてましたけどね。
卒業のときは、何か思うことがあったのか、嫁は号泣してました。
わたしは真顔でした。

さて核心に迫ってまいりましたが、
子供アクションの時間管理ってなかなか難しいもので、
なおかつルールがいっぱいありますね。
・ミルク・・・3時間ごと、あげる量もなんとなく決まっている、ミルク消費量の傾向見る
・おしっこ・・・医者に「どうですか?」って聞かれたときに1日何回とか記録しとくと楽、オムツの消費量の傾向見る
・うんち・・・同上、できればどんな感じの便か
・ギャン泣き・・・ルーティンを知りたい
・睡眠、起床・・・どの時間帯にどんだけ寝たか、寝んトレのData取り
・お散歩・・・寝んトレのData取り

お散歩や睡眠に関しては、ウチの方針として「早く"夜は寝るもの"という意識を持たせる」という教育方針によるものです。散歩の時間で日を当てることにより、メラトニンの分泌を促すことにより14〜16時間後に眠気が来るようにコントロールしよう!というある種邪で恣意的なコントロールをするための統計だしを行っています。
だって俺らも寝たいもん。

お絵描き

20251119_155438000_iOS.jpg

子供抱きながらテキトーに書いたメモです。
解読したら作れます。
さぁどうぞ!

作ったアプリ

image.png
image.png
image.png

こだわりPoint

・合計睡眠時間をわかるようにしたかった
・うんち、おしっこは回数くらいかな
・ミルクを何時にどんだけ飲ませたらいいのか
このあたりの報連相をとにかく省きたかったんですよね。
じゃないと毎日機械のように「次ミルクいつ?何ミリ?」っていう愛情のカケラもない報連相を愛する嫁としなきゃあかんので。

最終的に
ワイ「いつ?、いくつ?」
ヨッメ「3時、120」
というスパイの暗号みたいになるのもまた一興な気はしますが。

このアプリを部屋中いろんなところに配置してあります。
たまたまスマートフォンとタブレットが5台ずつくらいあったので。
みなさま是非お試しください。

作り方ポイント

これってよくある行動履歴登録アプリなんですよね。

なので全ての基準は「日付」です。
アプリのHeaderに記述してある日付を基準にいろんなもの作っていく、という運びをつかめばどうにかなるやつです。
細かい作り方は記述しません(ぶっちゃけ覚えてないし)
これ2時間くらいで作れちゃったので、2時間とはいかなくても、大枠を理解できれば半日~1日くらいで作れますのでやってみましょう。

変数は重複回数と不変定義かつ変動値に留める

基準が日付になる、といったのでその通りにします。
ツイデに子供生まれてから作ってるので、定数ですが誕生日も変数にぶち込んでおくと良いかと思います。

変数にぶち込む
Set(
    gbrTime,
    Today()
);
Set(
    gbrBirth,
    Date(
        2025,
        11,
        9
    )
)

うっかり娘の誕生日書いたので、なんか送ってください。

ちゃっちゃとアプリ作る上で必要な要件その1が、変数の定義かと思います。
ぶっちゃけ計算なんかあとでよくて、"このアプリは、何を基準に動くものなのか"という導線とトリガーを考えながら作ると良いかと思います。
形式が不変で数値が変化するもの、繰り返し使うもの、を変数として格納するイメージ。

月齢ごとのミルク量のCollectionとかもこの段階で頭の中で用意してあげると楽かもしれません。

Headerは不変定量的なデータを最小限に

Headerには必要最低限な情報を入れます。
操作対象と操作ボタンが直感的にリンクしてあげるといいかと思います。
今回は日付が絶対的にフィルター要素になるので、日付の切り替えを如何に操作させず、操作させるか、と考えます。
左にいったら日付が戻る、右に言ったら日付が進む、みたいなイメージで切りかえさせるイメージで進みます。
Today()をフィルターに入れてあるので、この変数を+1、-1してあげる式を"<"アイコン、">"アイコンで制御できるようにします。

DateAdd(gbrTime,-1,TimeUnit.Days))

image.png

「もう産まれて〇日経つんだね…」
っていう情緒を滲ませたコメントをイケボで嫁に言ってイクメン気取りたい人は、以下のように生まれてからの日数も計算して表示すると良いかと思います。

DateDiff(gbrBirth, gbrTime,TimeUnit.Days) 

image.png

操作手順なんざ説明しなくても使い方がわかりそうなアプリを意識する(ナビゲーション)

データソースはぶっちゃけなんでもいいかと思います。
無駄にDataverse使ってますけど、呼び出し制限だけきちんとわかってればさして重要やないかと思います。
あとは委任とかかな。
ますもりさんの記事が分かりやすいかと思います。
https://qiita.com/Takashi_Masumori/items/3d2bda5570d9ee2c0750

たとえばよくデザイン意識できない人が考えるのが以下のような導線
1.「+」と書かれたボタン押す
2.ドロップダウンから入力したいアクティビティ選ぶ(例:ミルク)
3.時間と量を選択し登録
4.状態更新

別に問題ないですけどね。
Power Appsのテンプレも結構こうなっています。
ただ今回のように、いわゆるCRUDのうちのRもUもDもGalleryで選択する方式にする場合は、
1と2を分ける意味ってあんまりないんですよね。
だって新規Record作る=何か登録する なんだから。
だったらいきなり2にいっちゃえばいいのです。
なおかつ"操作の説明をしなくても使えるように"を意識しながら。

ワイはミルクを飲ませたんや→ミルクアイコンポチー
の導線の完成です。

image.png

image.png

片手で操作しやすい設計

今回作成したのはスマホアプリなので、片手で操作できるように下側にナビゲーションを配置。
動かしやすいようにスライドできるGalleryコントロールで作成しました。
そして画像を配置し、カテゴリ選べるようにすれば、感覚的に使い方がわかるかと思います。

ちなみにポップアップで入力欄を出したときも、片手で届く範囲にまとめてあげましょう。
片手で操作できることが、結構スマホアプリでは大事かと思います。

半分より下側に入力コントロールをまとめるだけで、結構使いやすいものになります。
日付はあんまり変えない(だいたいその場ですぐ入力するから)ので省き、
その他は半分より下っぽく。
image.png

Galleryは情報を詰め込みすぎない

Galleryはデータを"みやすくする"ものであるはずなのに、
詰め込みまくって元々のDataみたほうが楽じゃねぇか!!!!ってパターンあると思います。
ここらへんも最初の設計で回避しておきたいっすね。

ぶっちゃけ時間と何したか大枠わかればいいかと思いますので、その他は全部排除。
作成者?日付?更新日?メモ?いらんいらん。見ない見ない。
ちなみにGalleryで作ってます。
色分けしてあげると見やすさが増すかな。

こういう場合の注意点としては、
・フォント以外の表現で如何に大別するか
に限ります。

フォント色を結構変更しがちですが、すんげぇ見ずらいリストが産まれます。
なぜならフォント色を変えるということは、補色にムラができるということです。
つまり一括で見たときに光の三原色や色の三原色が相まってチカチカする原因になり、ユーザーのストレスになり得ます。
なので、統一するところと統一しないところを決定し、同じ順列の中のカテゴライズを考慮したデザインにすることを意識しましょう。
あとできれば"うんち"だったら"うんち"っぽい色にする、色で語る。
image.png

以上、サクッとつくるために意識したポイントでした。
考えればわかりそうなもんですが、結構こだわってくると忘れがちなんで記事にしたった。

使う人の気持ちを考える

今回主に使うのは私とヨッメなので、話しながらフィードバック貰いながら作りましたが、
中々実務だとこれ難しいっすよね。
相手の話を聞く、っていうのが一番難しい。
だから自分たちで作りましょう!って流れなんですけど、
じゃあいまAIエージェントがどうこう言ってる流れで、
結局AIに質問したり相談したりするわけです。
またこういった視覚的感覚的な話は、なかなか言語化が難しいものかと思います。
「なんかいい感じによろしく!」でなんとなく作れちゃうのは人間が持つコミュニケーション能力に依存するのかもしれません。

コミュニティに関して

Power Apps Weekly Newsというコミュニティを運営しています。
アップデートを毎週解説になってないかもしれない解説していくものです。
ワタシらがナカナカ機会を作らないとチェックするの面倒だから、逃げられないようにしようという魂胆もありますが、
基本的にはそんな人たちが面白く楽しく「へーそんなUpdateあるんだぁ」という気付きや学びを得られるようなものにしていきたいと考え、始めたものです。
https://appsweeklynews.connpass.com/
毎週金曜日21:30からYouTubeとXでライブ配信しておりますので、是非ご参加ください。

わたしは初志貫徹で
"好きなものを「好きだ!」と叫んだ人の周りに、「俺もそれが好きだ!」と集まる"その場所がコミュニティだと思っています。
それが職場であっても、学校であっても、教室であっても、はたまた1つの机であっても。
漫画の絵が描かれた下敷きを持ってる子がいて、その子に「俺もその漫画好きなんだ!どのキャラが好き?」と話しかけたらもうそれはコミュニティです。
たくさんあったらアカンもんでもないし、それを他の誰かが「キモっ」っていうことはあってはならないことです。
来年も再来年も、そんな一つの机を守り、ここに集まる誰もが笑顔で好きなものについて語り合う、そんな場であろうと運営一同考えています。
是非来年もお越しいただければと思います。
皆様のご参加、お待ちしております。

最後に子育てに関しての話

私自身育児休業を取得していますが、
子供のため、という感覚があまりないっす。
嫁のため、嫁のため。

この十月十日、何もできなかった。
深夜にメロン探すことしかできなかった。
出産のとき既に頑張りまくってる嫁に、頑張れといえなかった。
ただただ涙を流して呆然と立ち尽くし無力感を噛みしめ、産まれた娘に厚顔無恥に「パパだよ」という。
興奮のまま射精しただけのガキなのにね。まさに厚顔無恥。

育児休業は、
やっと最愛の人の頑張りに報いるための"何か"をやっとできる。
そんな機会を作れるものかと思います。
いつかまた従業員を雇う時は、精いっぱい機会を提供したいものです。

その1ピースの一助として、こんなアプリ作ったら役に立てるよ!という共有のブログでした。

ああ、あの頃もよかったな、と
今も含めて誇れるような
そんな一年を皆さまが過ごせるように
宇宙のゴミに天然パーマが祈っておきます。
良いお年を!

12
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?