20241128_個人開発LT祭 2024年秋_同人誌即売会スタッフの出勤（？）システムを作ったはなし

同人誌即売会スタッフの 出勤（？）システムを作ったはなし 2024/11/28 個人開発LT祭 2024年秋 なのなの @nano2_aloerina HashTag: #とらラボLT 同人誌即売会スタッフの出勤（？）システムを作ったはなし (c) 2024 nano-nano 1

本題に入る前に 今日話す内容は、所属組織を代表しての発言ではありません 関係各所への問い合わせはしないでください！ 同人誌即売会スタッフの出勤（？）システムを作ったはなし (c) 2024 nano-nano 2

Who is ❏ ❏ ❏ ❏ ❏ Banno Takuya a.k.a なのなの ❏ @nano2_aloerina ❏ @[email protected] Webフロントエンド好き ❏ TypeScript, React好き VR好き ❏ VRChatエンジョイ勢 変なガジェット好き ❏ 呼び込み君私物勢 同人誌好き ❏ 即売会スタッフ歴10年以上 同人誌即売会スタッフの出勤（？）システムを作ったはなし (c) 2024 nano-nano 3

Who is ❏ ❏ ❏ ❏ ❏ Banno Takuya a.k.a なのなの ❏ @nano2_aloerina ❏ @[email protected] Webフロントエンド好き ❏ TypeScript, React好き VR好き ❏ VRChatエンジョイ勢 変なガジェット好き ❏ 呼び込み君私物勢 同人誌好き ❏ 即売会スタッフ歴10年以上 同人誌即売会スタッフの出勤（？）システムを作ったはなし (c) 2024 nano-nano 4

即売会スタッフ事務の悩み コロナ禍を経験して、デジタル化が進んだ部分もある スタッフ登録のオンラインフォーム化、各種打ち合わせのオンライン実施…… しかし、 スタッフ事務の作業はまだまだアナログな部分が多い 本部事務・本部受付スタッフが忙しくなりがち…… 同人誌即売会スタッフの出勤（？）システムを作ったはなし (c) 2024 nano-nano 5

例えば…… スタッフ活動日の出席確認や、昼食の受取確認は紙の名簿にチェックを入れる形式 シンプルだが、課題も多い ❏ ❏ ❏ 記入ミスが起きやすい ❏ 他人のところにチェックを入れてしまう 記入状況がその場に行かないと分からない ❏ 出席状況や昼食の受取状況は、現場でシフト管理している班長が一番知りたい 2値情報しか残らない ❏ 業務状況の分析に生かすには情報が少なすぎる なんとか できないものか…… 同人誌即売会スタッフの出勤（？）システムを作ったはなし (c) 2024 nano-nano 6

スタッフ証を使った記録システムの案 スタッフの身分を証明するスタッフ証 スタッフの氏名 所属 顔写真 スタッフ固有のID スタッフ証とスタッフIDを組み合わせて、 記録をするシステムが作れる？ スタッフIDをQRコード化して、 スキャナで読み込めば上手くできそう？ 👇 タイムカードのような出勤（？）システム のアイディアが浮上 同人誌即売会スタッフの出勤（？）システムを作ったはなし (c) 2024 nano-nano 7

できたもの 仕事の息抜きにプロトタイプを試作 右の写真はプロトタイプの動作を本部事務 担当のスタッフに見てもらったときのLINE その後、各所から意見をもらいつつ、ブ ラッシュアップして完成したのが…… 同人誌即売会スタッフの出勤（？）システムを作ったはなし (c) 2024 nano-nano 8

できたもの こちら👉 同人誌即売会スタッフの出勤（？）システムを作ったはなし (c) 2024 nano-nano 9

システム構成/技術スタック ホーム画面は最低限の ボタンだけ タッチ操作を意識して大 きめに 同人誌即売会スタッフの出勤（？）システムを作ったはなし (c) 2024 nano-nano 10

システム構成/技術スタック スタッフIDからスタッフ名を 表示 同人誌即売会スタッフの出勤（？）システムを作ったはなし (c) 2024 nano-nano 11

システム構成/技術スタック 記録した時刻に応じて、 名簿に色が付く 時系列での記録 同人誌即売会スタッフの出勤（？）システムを作ったはなし (c) 2024 nano-nano 12

システム構成/技術スタック Windows PC 受付記録クライアントアプリ バックアップ エラーログ ネットワーク通信 Apps Script 書き込み 受付記録ファイル (スプレッドシート) Googleドライブ ログファイル（csv, txt） QRコードスキャナー 同人誌即売会スタッフの出勤（？）システムを作ったはなし (c) 2024 nano-nano 13

システム構成/技術スタック 【クライアントアプリ】 Windows上で動作するスタンドアロンアプリ ❏ フレームワーク：Tauri ❏ UI：React（+Chakra UI） ネットワーク通信 ❏ Tauriの利点 ❏ Electronより軽量（主にファイルサイズ） Apps Script 書き込み ❏ UIはWebアプリを作る感覚で実装可能 受付記録ファイル (スプレッドシート) ❏ ローカルファイルの読み書き、ネットワーク通 信、ウィンドウ操作など標準機能は一通り揃っ Googleドライブ ている ❏ 効果音再生部分など一部のみ、自前で用 意（Rustで実装） ❏ Windows PC 受付記録クライアントアプリ バックアップ エラーログ QRコードスキャナー 同人誌即売会スタッフの出勤（？）システムを作ったはなし (c) 2024 nano-nano ログファイル（csv, txt） 14

システム構成/技術スタック 【クラウド（？）】 ❏ ❏ ❏ 部署の業務資料を格納するGoogleドライブ上に 構築 Windows PC ❏ 閲覧権限管理を深く考えずに済む ネットワーク通信 Google Apps Script ❏ doPost()関数でAPI風に、クライアントア プリからのリクエストを受け付ける 受付記録クライアントアプリ Googleスプレッドシート ❏ 集計表示 兼 データベースとして利用 バックアップ ❏ 関数や条件付き書式を活用して、ある程 エラーログ ログファイル（csv, txt） 度自由にUIが構築できる Apps Script 書き込み 受付記録ファイル (スプレッドシート) Googleドライブ QRコードスキャナー 同人誌即売会スタッフの出勤（？）システムを作ったはなし (c) 2024 nano-nano 15

システム導入の成果 記録ミスがほぼ無くなった ❏ ❏ スタッフIDを読み取っているので間違えようがない 慣れるまでは操作ミスはあったが…… 最新の状況がいつでもどこでも見られるようになった ❏ ❏ 適切な権限を持っている人は、インターネット経由でスプレッドシートを参照可能 いつでも、どこでも、ほぼリアルタイムに状況がわかる 記録が秒単位で残せるようになった ❏ 時間帯別に集計し、業務改善のための基礎資料として活用 同人誌即売会スタッフの出勤（？）システムを作ったはなし (c) 2024 nano-nano 16

個人的によかったこと 仕事で試せない技術・ツールを積極的に使える ❏ ❏ 仕事では案件・会社の事情や個々のスキルなどが壁になり、モダンな技術・ツールを導入 できないことが多々ある その点、個人開発は自分がやりたいように、好き放題できる ❏ Tauri(Rust)を技術選択したのも、個人的に使ってみたかったのが大きい ❏ 最近は、UIデザインのためにFigmaも使い始めてみた モチベーション高く続けられ、承認欲求が満たせる ❏ ❏ 身近にある問題・やりたいようにやれる ❏ ＝モチベーションが下がる要素が（基本的に）ない 仕事以上に褒めてもらえる・ドヤれる・LTのネタになる（重要） ❏ 直接反応が返ってくるのっていいですよね ❏ 先日、各部署のトップが集まる会議で弊部署のトップがこのシステムを紹介した ら、はちゃめちゃにウケが良かったらしいです 同人誌即売会スタッフの出勤（？）システムを作ったはなし (c) 2024 nano-nano 17

まとめ 個人開発は自分のやりたいようにできて、 承認欲求が満たせるから ！ ご清聴 ありがとうございました！ 同人誌即売会スタッフの出勤（？）システムを作ったはなし (c) 2024 nano-nano 18