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