【Ringee開発記 #9】請求管理画面の実装【夏休み毎日投稿 Day21】

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

本日はDay21ということで、前回に引き続きRingeeの開発を行っていきます。

最近は余計な機能ばっかり実装していましたが、重い腰を上げてちゃんと中心となる機能も作っていきます。

その中でも今回は、請求管理画面を実装していこうと思います！

請求管理画面に入れたいこと

ということでまずは請求管理画面にどのような情報をいれるか考えていきます。

色々考えた結果、こんな感じになりました。

• 請求種別（稟議 or 精算）
• 請求タイトル(例: 新PC購入予算案)
• ステータス（例:下書き）
• 更新日時＆作成日時
• 申請金額
• アクション（申請開始・編集・削除など）

表形式で楽にデータを見れればいいなーって感じで作っていきます。

完成品（不具合あり）

DBと連携はしてませんが、とりあえずそれっぽいUIは出来ました。

PCだとかなりいい感じに見えますね。ボタンも連結したうえで角丸にすることでシンプルに出来てます。

スマートフォン表示時の不具合

しかしここで問題発生。

スマホで表示した際、スクロールになるせいでめちゃくちゃ見にくいです。これはまずい。

改善案

ということで早急に改善案を考えていきます。

テーブルのままスマホだと表示項目を少なくするとかいろいろ案はありましたが、見やすさとデザインを考慮し今回はPCとスマホで全く別のUIにしようと思います。

はっきり言ってめちゃくちゃ手間ですが、テーブルのままにするわけにもいかないので渋々作ります()

完成品（スマホ対応版）

スマホUIも完全した改善版はこんな感じです。

テーブル型ではなくカードタイプで表示し、各種情報も横並びで表示することによって、限られたスマホの画面を有効活用し、従来のテーブルUIに比べてより多くの情報を表示できるようになりました。

まとめ

いかがだったでしょうか。今回はDay21ということで、Ringeeの請求管理画面を実装してみました。

次回からはデータベースもちゃんと弄ろうということで、ログイン認証関連の機能を実装していけたらと思います。

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