Slackワークフローで感謝を伝える機能/WiFi 自動接続/Figma to React Component/障害レポート君 Team3@NOT A HOTEL

NOT A HOTEL ソフトウェアチームハッカソン 2024/04/19 Team3
- Nakao: Slackワークフローで感謝を伝える機能「Azasu」
- Haru: WiFi 自動接続
- Fukaya: Figma to React Component
- Imashin: 障害レポート君

1. sys-hackathon-fy25-team-3
2. © NOT A HOTEL, inc. 2 メンバー Haru Guy Imashin Nakao Fukaya
3. © NOT A HOTEL, inc. 3 感謝を伝えあう仕組みの導⼊ Nakao 従業員同士で感謝を与えあう仕組みの導入
4. © NOT A HOTEL, inc. 4 感謝を伝えあう仕組みの導⼊ 仲間どうしでもっと感謝し合う文化を作りたい そして感謝をカタチにしたい
5. © NOT A HOTEL, inc. 5 感謝を伝えあう: Azasu Azasu (アザス) Slackワークフローから起動
6. © NOT A HOTEL, inc. 6 感謝を伝えあう: Azasu 社内情報が含まれるので非公開です󰢛
7. © NOT A HOTEL, inc. 7 haru ワンタップでWifiに自動接続
8. © NOT A HOTEL, inc. ホテルについたらまずやること なんでしょう
9. © NOT A HOTEL, inc. こたえ FREE WiFi の SSID / PASSWORD
10. © NOT A HOTEL, inc. こいつを探すのがめんどくさい FREE WiFi の SSID / PASSWORD
11. © NOT A HOTEL, inc. アプリから1タップで つながるようになりました。
12. © NOT A HOTEL, inc. iOS版もあります
13. © NOT A HOTEL, inc. しくみ WiFi情報
14. © NOT A HOTEL, inc. One more thing
15. © NOT A HOTEL, inc. 電波が入らない土地では WiFi画面までたどり着けないのでは・・・？
16. © NOT A HOTEL, inc. オフラインでも動くようにしたい
17. © NOT A HOTEL, inc. オフラインでも動くようになりました。
18. © NOT A HOTEL, inc.
19. © NOT A HOTEL, inc. 1 9 残タスク - WiFiがないハウス - 表示タイミングの調整 WiFi - 運用に耐えうる実装で作る - 他の画面にも適用 - エラーハンドリングの調整 - iOS実装 オフライン きつい いけそう
20. © NOT A HOTEL, inc. Figma to React Component ついでに... Fukaya
21. © NOT A HOTEL, inc. 現状のFigmaにあるプラグインの問題 ・divの嵐 ・ルートにもとづくデカいスタイル
22. © NOT A HOTEL, inc. 実装方針 ・VSCodeですむことは、そちらにまかせる ・文字の変換と行の削除だけですむ インデントおかしい →保存時に自動で整形される ←コンポーネント名を変えたい →文字の変換で OK Figma内で生成される CSS自体flexboxなので、大体つかえる
23. © NOT A HOTEL, inc. つかいかた（現状） ・CSSを生成したいコンポーネントを選択する ・開発者ツールにコードを貼り付けて、実行する ・CSSの変換関数(js)と、最終的に出力するためのテンプレートを用意する仕組み。 ・Reactコンポーネントの名前と htmlタグをカスタムしたい場合、 Figmaのコンポーネント名を変更する
24. © NOT A HOTEL, inc. NEXT Step ・Figmaプラグイン化 ・PCとSPのUIの紐付け ・svg自体のReact Component化 参考記事 https://zenn.dev/seya/articles/105ab3e2864178 https://zenn.dev/ki0i0ro0/articles/figma-code-generator
25. © NOT A HOTEL, inc. 2 5 障害内容まとめる君 Imashin 障害レポート君
26. © NOT A HOTEL, inc. 障害レポート君 #all-incident
27. © NOT A HOTEL, inc. 障害レポート君
28. © NOT A HOTEL, inc. 2 8 障害内容まとめる君 Imashin 障害内容まとめる君
29. © NOT A HOTEL, inc. 障害内容まとめる君 #all-incident #all-incident-sum
30. © NOT A HOTEL, inc. 障害内容まとめる君 zapier ChatGPTで構造化