Avance.Lab

実験

第7回 IoTを活用した社内備品管理システムを作る / Webアプリで備品の状態を確認する

公開日：2024.11.08　更新日：2024.11.11

tag: IoTクラウド組み込み

はじめまして。wistaveと申します。
備品管理システムでは、API・Webアプリチームのリーダーを担当しています。

IoTを活用した備品管理システム開発も、いよいよ佳境です。
今回は、システムの要となるWebアプリの開発に着手し、誰でも簡単に備品の状態を確認できるUI/UXを目指します。

UIの実装

画面イメージの作成

まずは、Figmaを使って画面イメージを作成しました。

Figma とは
UIデザインを行うためのWebベースのツールです。
Webサイトやアプリの画面設計、プロトタイプ作成、デザインの共有などが行えます。
チームでの共同作業がしやすい点も特徴です。

重量計に載せて管理している備品を一覧で表示します。
各備品の写真、名前、残りの数量が表示されます。
数量が少なくなるとアイコンと赤字で警告状態であることを示します。

各備品はクリックすることで詳細を確認できます。

この画面イメージから、備品の一覧画面と詳細画面（数量推移を除く）を実際にソースコードを作っていきます。

Reactコンポーネントの作成

WebアプリはReactで実装します。

React とは
Facebookが開発したJavaScriptライブラリの一つで、ユーザーインターフェース(UI)を構築するために用いられます。
Webページの要素を効率的に更新できるため、インタラクティブなWebアプリケーション開発に適しています。

Figmaの画面イメージをReactのコンポーネントにします。
今回は試しに、Figmaの拡張機能のClapyを使用しました。

Clapy とは
FigmaのデザインからReactのコードを自動生成する拡張機能です。
Figmaのデザインを元に、Webページの骨組みとなるコードを生成することで、開発時間の短縮に役立ちます。

Clapyを実行するとサインアップを求められるので、GoogleやFigmaのアカウントでサインアップします。
生成したい要素を選択し < Generate code > ボタンをクリックすると、Zipファイルがダウンロードできます。

Zipファイルを解凍すると、Reactで実装したことがある方ならWebページの作成に必要なソースコードが一通り含まれていることがわかると思います。

npm install コマンドでパッケージをインストールし、 npm start コマンドでローカルサーバーを起動できます。
すると、Figmaとほとんど遜色ないWebページが表示されました。

よく見ると、「備品の追加」がイメージ通りに表示がされていないので修正が必要そうです。
また、componentsディレクトリ内のソースコードは、残念ながらFigmaで作成したコンポーネントの通りには出力されていないので、作業しやすい形に修正します。

Clapyを使用して感じたこと

  • Figmaのデザインファイルからすぐに動くコードが生成できるので、スタートアップやPoC開発でイニシャルにかかる時間を短縮できます。
  • Material-UIやAnt DesignなどのUIコンポーネントライブラリを使用する場合は、自分で実装した方が手間は少ないです。

備品の詳細画面も同じ手順でコンポーネントを作成し、一覧画面の備品をクリックした時に表示されるよう実装しました。

REST APIの作成

続いて、Webアプリから呼び出すREST APIを作成します。

技術スタックの選定

技術スタックとしては、FastAPIとMongoDBを使用することにしました。

REST API とは
Webサービス同士がデータのやり取りを行うための仕組みの一つです。
HTTPというWebで使われている通信規格を用いて、データの取得や更新などの操作を行います。

FastAPI とは
Python製のWebフレームワークの一つで、REST APIを高速かつ簡単に開発することができます。
動作が軽く、開発効率の高さから人気を集めています。

MongoDB とは
ドキュメント指向データベースと呼ばれる種類のデータベースです。
データの構造を柔軟に設計できるため、Webアプリケーション開発などで広く利用されています。

FastAPIを選択した理由は、自動ドキュメント生成など、REST APIを簡単に実装できる機能があるためです。
また、過去に利用した経験があったことも選択理由の一つです。

MongoDBを選択した理由は、今後の業務でNoSQLを利用していきたいと思っているため、試しにローカルでもサーバーを構築できるMongoDBを選びました。

データベースの構造

データベースの構造は以下の通りです。

これらのデータから備品一覧画面に必要な情報を渡すGetメソッドを作成しました。
FastAPIの自動ドキュメント生成機能で表示した画面です。

FastAPIからMongoDBを操作するライブラリとしてPyMongoを使用しました。
MongoDBがJSONライクなドキュメントを扱うため、PythonだとNode.jsと比較して少し実装にクセがあるようです。
Pythonで上手く実装するには、経験と工夫が必要だと感じました。

備品一覧の取得

WebアプリからAPIを呼び出し備品の情報を取得してみます。

無事にデータベースに記録された備品の情報がWeb画面で確認できました。

まとめ

今回は、Figmaで作成した画面イメージを元に、Reactで備品一覧画面を作成しました。
Clapyなどの自動コード生成ツールは、今回のようなUIコンポーネントライブラリを使わないPoC開発の場合などで、UIの実装時間短縮になることがわかりました。

また、FastAPIとMongoDBを用いてREST APIを作成し、Webアプリから備品データを取得できるようにしました。
MongoDBを扱うのは初めてで、今回のようなデータが複雑に絡み合うシステムでは、APIの設計と実装に時間が掛かりました。

APIとWebアプリの基本的な連携が確認できたところで、今回はここまでとします。
次回は、実際の運用を想定した機能追加や、より使い勝手を向上させるための改善など、実践的な内容に踏み込んでいきます。お楽しみに！
wistave

Webのフルスタックエンジニアを目指して勉強中!!

関連記事