【Ringee開発記 #6】ホーム画面のデザインを調整＆ちょっとだけバックエンド制作【夏休み毎日投稿 Day14】

こんにちは。小川智也です。

夏休み毎日投稿 Day14ということで、この2日くらい疲れてサボっていた大須に行ってて出来ていなかったRingeeの続きを作っていこうと思います。

最後までぜひお楽しみください。

今日行っていく内容

今日は主に下記のような内容の開発を行っていきます。

• ホーム画面のUI調整
• ホーム画面の内容を動的に書き換えるバックエンド制作

順に見ていきましょう。

ホーム画面のUI調整

ということでまずはホーム画面のUI調整を行っていきます。

前回適当に作ったUIがちょろっと見にくかったので、

• 各ステータスのboxの株を揃える
• 背景に色を付ける
• ボタンの位置を変更
• 罫線をなくす

このような作業を行っていきます。

UI調整後

調整後はこんな感じになりました。

いい感じに下部も揃い、色がついたので視覚的にかなり見やすくわかりやすいUIになったのではと思います。

「もっと見る」ボタンも上部に移動したことで、タイトルとのまとまりでが出来た上、省スペース化も出来ました。

ホーム画面の内容を動的に書き換えるバックエンド制作

次に、ホーム画面の内容を動的に書き換えるバックエンド制作を行っていきます。

今後データベースと連携することも考えると先にPHPを組み込んどいたほうがやりやすいのでサクッと作っていきます。

とはいえ現段階からDBをぶち込むと大変なので、仮で同じようなデータが入った配列を作り、それを読み込んでいきます。

制作したバックエンド

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

$requests という配列にDBと同じような事前にデータを突っ込んでおいて、 foreach 関数で status の数字を見ながらぶん回して $draft 配列、 $progress 配列、 $approved 配列に入れてます。

まとめ

いかがだったでしょうか。今回はDay14ということでRingeeのホーム画面のUI調整とバックエンド制作をちょっろっと行ってみました。

金額のところなどがまだ調整できてないですが、大まかには出来たと思います。

次回は同様にRingeeの開発...ではなく夜中に誤購入してしまったXiaomi Smart Band 10と買ってから2ヶ月くらい使っているPixel 9aのレビューになると思います。

お盆の帰省が近いのでたくさん記事のストック作っとかないとやばいです()

最後まで見ていただき、ありがとうございました。