新卒技術研修

Transcript

1. 2 5 卒 技 術 研 修 成 果 発 表
2. 必須課題 端末管理システム (スマカリ) のリビルド 研修概要 管理者が端末追加、削除、編集できる機能を追加する 端末を一覧で表示する 各端末の貸出履歴を閲覧できるようにする 端末の貸出・返却ができるようにする 既存の貸出端末管理データを引き継ぐ 既存の端末管理システム
3. smacari 貸出物置き場 smacari (借りる) (返す) [返却手続き] [貸出手続き] 一連の流れ ユーザーが貸出端末を借りてから返すまで
4. 研修で取り組んだこと
5. smacari 貸出物置き場 smacari (借りる) (返す) [返却手続き] [貸出手続き] 研修で取り組んだこと ① smacariのリビルド … 設計の見直し・UI作成・新機能開発
6. smacari ユーザー 貸出物一覧 借りる 返す お気に入り登録
7. 貸出物一覧 … カテゴリ別の絞り込み機能を実装 カテゴリ：すべて カテゴリ：iOS smacari ユーザー
8. 返却手続き … 今借りているものが一目でわかりやすいUI 借りているものがある時の一覧画面 一覧画面 smacari ユーザー
9. お気に入り登録 … よく使う貸出物をブックマークできる新機能 カテゴリ：お気に入り smacari ユーザー
10. smacari 管理者 貸出物の追加 貸出物の編集 貸出物の削除 ユーザー管理
11. 貸出物の追加・編集・削除 smacari 管理者
12. ユーザー管理 … 管理者権限の付与をsmacari内で完結 ユーザー管理画面 smacari 管理者
13. smacari 貸出物置き場 smacari (借りる) (返す) [返却手続き] [貸出手続き] ② 貸出物置き場の整備 … タッチポイントの整理・ポップの作成 研修で取り組んだこと
14. ポップの制作 … ユーザーを自然にsmacariへ誘導 貸出物置き場の整備 タッチポイントの整理 制作したポップ
15. smacari 貸出物置き場 smacari Slack bot Slack コマンド (借りる) (返す) [返却手続き] [貸出手続き] ③ サービスとユーザーの連携強化 … 新機能開発・ガイド作成 研修で取り組んだこと
16. Slackの活用 … 管理者からユーザーへの連絡を一箇所に サービスとユーザーの連携強化 smacariログイン時にチャンネルに自動招待 招待されたユーザー向けにチャンネル概要の案内を自動送信（ワークフロー） 手軽な情報サイトとしてのチャンネル整備（canvas）
17. Slackbotの活用 サービスとユーザーの連携強化 端末を借りた時のパスワードをDMで通知 貸出期限を過ぎても返却がなかった時にメンションで通知
18. Slackコマンドの活用 サービスとユーザーの連携強化 借りている端末が一つの時はSlackからも返却手続きができるように /smacari_return
19. 工夫したところ 苦労したところ
20. ユーザーインタビュー 工夫したところ（チーム） 実際の使い方や現状の課題を把握するためにインタビューを実施 画面遷移図の作成 必要な画面の洗い出しと機能整理のためにチームで作成
21. ユーザーテスト 工夫したところ（チーム） Figmaで作成したプロトタイプ×2→ 基本機能を実装したもの→リリース前 プロトタイプの時点でユーザーテストを実施。早い段階で修正ができた　 自分たちでは認知できなかった課題に気づくことができた
22. 工夫したところ（エンジニア） Slack Webhook使用時のセキュリティ 課題：Slack → APIの場合、ALBのSG (Zero TrustのIP制限) に弾かれる 👉 やったこと ALBのSGでは全て許可 リスナールール slack用パスは許可(10) IPがZeroTrustなら許可(1000) slack用の認証ミドルウェア（Laravel） → 社員以外からのリクエストを遮断できる smacariシステム構成図
23. 過度な抽象化をやめ、シンプルなテーブル設計を心がけるように改善 横展開は一旦考えないことにした（YAGNIの原則） DB設計 苦労したところ（エンジニア） 原因：テーブル設計の際に、横展開を意識して 「貸出物テーブル」と「具象テーブル」に分割 （クラステーブル継承） 貸出物IDだけではどの具象テーブルを 見れば良いか分からず複雑化した
24. 機能ブランチをやめ、全機能をdevelopブランチに 統合するシンプルなGit運用に改善 Git ブランチの切り方 初期アプローチ：フロントエンドとバックエンドで役割を分担し、機能ごとにブラ ンチを切って開発 フロントが先行して開発が進み、機能 ブランチが生き残り続ける 変更を使い回したいが、上流の変更を 下流に伝播させる必要性が生じた 苦労したところ（エンジニア） 開発時にsmacariにはユーザーがいないので、 機能別にブランチを分ける必要がなかった...！
25. デザインシステムの作成 デザインの一貫性を担保し、コーディングがしやすいデータに 工夫したところ（デザイナー）
26. Tailwind CSSを用いたスタイル管理 デザイントークンの導入 Tailwind CSSの @layer components を用いた共通クラス定義 接頭辞＋BEM（Block Element Modifier）に倣った命名規則を使用し構造を 明確化 工夫したところ（デザイナー） Tailwind CSSとクラスを組み合わせることでスタイルをひとまとめに管理し、見 た目の一貫性と作業のしやすさを両立 .s-button { @apply flex ~~~ h-10 w-fit ~~~ px-3 ~~~; } app.css <button class="s-button ~~~“>借りる</button> <button class="s-button ~~~“>返却する</button> ~~~.php
27. AIの活用 デザインを作成する前にAIで生成、それをもとにロゴ案やPOP案を作成 工夫したところ（デザイナー） 「smacari」というサービスロゴを作成 したい。サービスは〜〜という内容で、 印象はスマートさと安心感のあるもの プロンプト
28. 各接点の役割を整理 ユーザーが違和感なくサービスを利用できるように改善 全体導線設計 苦労したところ（デザイナー） ユーザーがsmacariにアクセスするための方法としてSlackチャンネルの作成、 貸出端末置き場のポップ設置など多様な接点を用意 入り口は多いけれどその後の動線が不明確であり接点とサービスが分断 された状態に
29. 今後の展望
30. 全体導線設計の見直し 今後の展望 現状、smacariから手続きをしてから管理場所に行くという流れは既存のまま 貸出物置き場で全てが完結できるような動線を検討