採用はこちら！

Shinonome Tech Blog

株式会社Shinonomeの技術ブログ
7 min read

【渋温泉ハッカソン： チーム３】WEBアプリで旅館の業務効率化

こんにちは。私たちチーム３は「旅館の人手不足を解消する」ことを目標としてReactとDjangoで動作するタスク管理webアプリを作成し、4位入賞することができました。今回はその開発の流れをお伝えします。
テクノロジー
【渋温泉ハッカソン： チーム３】WEBアプリで旅館の業務効率化

こんにちは。私たちチーム３は「旅館の人手不足を解消する」ことを目標としてReactとDjangoで動作するタスク管理webアプリを作成し、4位入賞することができました。今回はその開発の流れをお伝えします。

メンバー

Tonky(backend)
ymdkk(backend)
chosa(backend)
masaya(data)
Riko(design)
higashiji(frontend)

事前準備期間

アイデア出し

3班の使命は“旅館の人手不足を解消すること“です。最初期の議論ではNotionに班員が思い思いに人手不足の原因を投げました。

グラフィカル ユーザー インターフェイス, アプリケーション 自動的に生成された説明

投げられた人手不足の原因をまとめると以下の3つになります。

・旅館業は激務で不人気

・給料が悲しみの金額

・正社員のキャリアプランが不透明

旅館業は頻繁期には掃除など非常に重労働が深夜まで続くにもかかわらず，給料が割に合わないなどの原因で，離職率が低く，人手不足に拍車をかけていると考えられます。

アプローチ

次にこの問題へのアプローチの検討に入りましたが，これには以下の二つの方針があると考えました。

・魅力的な求人広告を打つなどして，“労働人口を増やす“．

・“業務の効率化“を行い一人当たりの負担を減らす

今回のハッカソンでは3日という限られた時間の上，Techで問題をhackするというシノノメのハッカソンのコンセプトから，労働人口を増やすアプローチは技術というよりコンサル的になってしまい不適切という理由からボツにしました。

そのため私たちは業務効率化を問題へのアプローチとしました。

コンセプト

私たちが業務効率化のために作成したのはタスク管理アプリです。このアプリは以下のことを実現することを期しています。

・旅館全体のタスクの共有，進行状況報告のオンライン化

・客室の状況のオンラインでの管理

以上の機能で，これまで口頭で行っていた業務連絡を，アプリ上で行うことで伝達ミスの削減，迅速化，タスクの確認の効率化が期待できます。

事前開発

事前開発では，dockerなどを利用した各自のローカル環境で，プログラムを作成しました。AWSを実装してサーバーでプログラムを動かすのはハッカソンの現場で行うこととしました。事前開発では，APIなどは利用しなかったこともあり，バックエンド，フロントエンド，デザインそれぞれおおむね問題なく開発を行うことが出来ました。

成果物について

成果物

温泉旅館での利用を想定した、タスク管理アプリです。
PC・モバイル端末のブラウザで動きます。

実装できた機能は、

  • サインイン・サインアップ
  • 旅館全体のタスク管理
  • 部屋の状態一覧
  • 作業ログ

です。

サインアップ・サインイン

サインアップ画面

なんの変哲もないサインアップ画面です。

ここで入力してもらったユーザー名が、タスク一覧などで担当者名として表示されます。

タスク管理

タスク一覧はカードで表示されます。

一覧画面では、タスク名、担当者名、進行状況、コメントを確認することができます。ボタンを押すとモーダルウインドウが開き、そこでタスクの追加・編集・削除を行うことができます。担当者は登録されたユーザーの一覧から一人選びます。

タスクの管理は誰でも行うことができるので、手が空いた人が順に拾っていくというような形を想定しています。

進行状況を色分け・チップで表示することで視認性を確保しています。

タスク一覧画面

部屋状態

部屋一覧画面では

  • 部屋番号
  • 担当者
  • 状態

が確認できます。

部屋ごとのコメントに関しては詳細のモーダルウインドウで確認できます。

「清掃中」、「使用可能」などの状態が確認できるため、実際に部屋に足を運ばずとも状態が把握できます。また、担当者を表示することで責任の所在をはっきりさせることができるのもメリットの一つです。

部屋一覧画面‌‌

スマートフォンでの詳細画面

作業ログ

タスクや部屋の追加、状態変更を行うと自動的に日時と変更内容が記録され、作業ログ一覧に表示されます。

過去の取り組みを可視化しすることで業務を効率化できるほか、責任者の明確化、問題個所の特定に役立ちます。

部屋の作業ログ

タスクのログ詳細画面
ERD

使用技術

フロントエンド

  • react
  • TypeScript
  • MUI
  • axios
  • react-hook-form

Reactを使ってSPAを作成しました。MUI(Material UI)を利用してUIを構築しました。APIとの通信にaxiosを使っています。入力項目のstate管理にはreact-hook-formを使いました。一応Typescriptで開発を進めましたが、かなり行き当たりばったりになってしまいTypeScriptで書く意味がほぼありませんでした。

バックエンド

使用技術

  • DRF
  • Docker
  • AWS


開発中はDockerでサーバー構築し、実装ではAWSでサーバーを構築しました。従業員やタスクの情報をUserモデルやTaskモデルとして定義し、それらの情報をAPIとして提供しました。その際にDRFを用いました。また、ページごとの認証には、DRFのトークンを用いました。

感想

Tonky(backend) 今回のハッカソンでは、チームのリーダーとして参加しました。 メンバーの技術スタックやスケジュールを元に、出てきたアイディアの実現可能性を考えり、技術選定をしたり、全体の設計、タスクの振り分けを主に行いました。 チームメンバーをみていると、挑戦に対して後ろ向きではなく、むしろ、どんどん挑戦したいタイプが多かったと感じています。そのおかげでタスクが非常に振りやすかったです。 また、進捗報告や不明点を報告してくれたおかげで、開発の状況がわかりやすかったです。 今回はハッカソンでしたが、次は案件で一緒に仕事をしてみたいと思えるメンバーでした。 成果物も無事入賞できたので、チームでいい経験ができたのではないかと考えています。
ymdkk(backend) どの班もアイデアの質が高く、正直入賞できるとは思っていなかったので、入賞できて驚きました。本当に良かったです。 開催してから開発まではNotionというツールを用いて、アイデア出しや情報の共有をしていました。そのおかげか、アイデアやどのように開発するかを決定するミーティングの開催数や時間を少なくできました。チーム開発はもっとミーティングするものだと思っていましたが、あっさり終わったので、こういったやり方もあるのかと勉強になりました。 また、開発期間は授業日と被っていたこともあり、集中して開発出来るときが夜しかありませんでした。皆いつ寝てんだろうと思いながら開発していました。しかし、睡眠時間を削って開発しているのが、なんかめっちゃ良かったです。いい体験でした。
chosa(backend) 今回始めてシノノメのハッカソンに参加させていただきました．長らくオンラインでのみシノノメの活動を行ってきたこともあり，slackでの質問は後手に回りがちでしたが，今回の対面のハッカソンでは単なる質問だけでなくともに作業することで傍らにいるメンバーのプログラムをから偶然学ぶことがたびたびありました。オンライン環境と体験の密度が全く違い，対面でコミュニケーションをとることのアドバンテージを強く実感しました。 今回の作業では，AWSなどサーバー側のスキル不足が最後まで足を引っ張り，他のメンバーにタスクを偏らせてしまう結果となってしまったので，自力で実装の最終工程まで行えることを当面の目標に勉強をしていきます。
masaya(data) ハッカソンに参加するのは今回が初めてでした。普段はデータコースに所属していますが、今回はDjangoを用いたバックエンドの活動に携わらせていただきました。正直、バックエンドについてはほとんど知識のない状態でしたが、チームの方々のおかげで非常に良いものを作ることができました。また、実際にPlayGroundの方たちと対面でお会いするのも初めてで、これまでオンラインで話していた方たちと実際に会うのは不思議な感じがしました。 今回のハッカソンではさまざまな経験をすることができ、また1つ自分の成長に繋がったのではないかと思います。非常に楽しく参加することができました。ありがとうございました。
Riko(design) ハッカソンの感想を3つに分けて記します。 1つ目は、ハッカソン事前準備期間についてです。あまり時間が取れず、打ち込むことが出来ませんでした。スケジュール管理が上手くできるようになりたいです。 2つ目は、湯田中渋温泉郷についてです。とてもあったかい街であったかい方々でした。温泉にはあまり入れなかったけど、サルに出会えて、お土産屋さんの優しいおばさんに出会えてとても心温まりました。 3つ目は、対面で活動できたことについてです。チームメンバーの一生懸命な姿から刺激を貰えました。また、シノノメのことをもっと知ることが出来ました。これは対面で行えたからです。ありがたく思っています
higashiji(frontend) 夏のハッカソン以来2回目のチーム開発で、今回初めてReactを触らせていただきました。全体を通してTonkyさんはじめチームの皆さんに大変お世話になりました。現地で初めて顔を合わせた時には「実在するんだ」という妙な感動がありました。 自分の担当箇所に関しては、MUIを使うことで、時間がない中で最低限の見た目を整えることができたことがよかったと思っています。反省点は、動くことを最優先にするあまり機能・見た目の面で地味になってしまった点です。次回までにReactに関する知識を深め、独自の工夫を盛り込んだアプリを開発してみたいです。

関連する投稿

ESC キーを押して閉じる