Tweet
Tweet

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で構造化