おはようございます！！みなさん元気に出勤していますか？
モチベーションの高い仕事の始まりは朝の挨拶から。
とはいえリモートワークも多いエンジニアの仕事環境、なかなか朝の挨拶でモチベーションを上げるというのも難しい時代になりました。
プログラマらしく、技術の力でこの課題に取り組んでいきます。
※AIは全く登場しません。Svelteの記事です。
提案手法
本稿で提案するシステムの概要を次のデータフロー図に示します。
- 出勤ボタンを押した瞬間にフロアが熱狂する
- テンションがブチ上がる
- 今日も一日がんばるぞいってなる
出勤した瞬間に実際にフロアが熱狂するならば問題ないわけですが、週明け月曜日の朝などは同僚がみんな目が死んでいるケースもあり、モチベーションが上がるような挨拶をするためのモチベーションが無いことが実務では問題になります。服を買いに行く服が無いみたいな状態ですね。
本システムでは「熱狂するフロア」の部分を人間ではなくAIで代替することで、モチベーションの立ち上がりの課題を解決します。
とはいえ、AIの部分をちゃんと作るのがムズイ
エンジニアのリソースをベットするまえに、MVPを作成してUXを検証するというPoCフェーズを丁寧に実施してPMFを測定していくというリーン的なプロセスにプライオリティを置いていますので、
AI云々の部分はとりあえずハードコーディングでそれっぽく見せるとして、Svelteの静的サイトジェネレーター機能を使って、気分を味わえるデモを作ってみます。
作ったもの
デモURL: https://set0gut1.github.io/god-kintai/
※現時点では、デモ動画の録画に必要な部分だけの実装
制作過程
Svelteをセットアップする
→ 静的サイトとしてビルドする
→ GitHub Pagesで公開する
ハマったところのメモを置いておきます（ポエムだけ書くと怒られそうだから）
あっ、ポエムだけ書くと怒られるという社会的な課題を、Svelteで静的サイトを作成するときのつまづきポイントを共有するという手法で、技術的に解決します。
Svelteのセットアップ
Svelteのdocの Getting started に従ってやってく。
npx sv create
prettier, eslint, tailwind を入れてみる。
業プロだと、最初のこれをやる機会があんまり無いから、たまにやると新鮮。
TypeError: getVisitorKeys is not a function or its return value is not iterable
とりあえずフォーマットしようと思って
pnpm format
を打つと、 src/routes/+layout.svelte: TypeError: getVisitorKeys is not a function or its return value is not iterable みたいなエラーが出る。うぇー
これは prettier-plugin-svelte@3.4.0 に対して prettier@3.7.0 を入れると発生するエラーで、数日前から発生しているらしい。解決方法は、 .prettierrc を編集して plugins の順番を入れ替えると直るらしい。
"plugins": [
- "prettier-plugin-svelte",
- "prettier-plugin-tailwindcss"
+ "prettier-plugin-tailwindcss",
+ "prettier-plugin-svelte"
],
参考 → prettier-plugin-svelte の issue Prettier has been updated to 3.7.0, this plugin gives error with this version of Prettier #504
こういうの時々あるよね
Svelteで出勤ボタンとコメント欄を作る
作った。
このクソ出勤ボタンの中身にはみんな興味ないと思うので、詳細略。
いちおうソースはgithubにあります。リポジトリ名はゴッド勤怠。
https://github.com/set0gut1/god-kintai/tree/master/src/routes
静的サイトとしてビルドする
Svelte の doc の Static site generation に従い、@sveltejs/adapter-staticを導入・設定。
pnpm build
: ビルドが走る
cd build
python3 -m http.server 3333
↑こんな感じでビルドして、python3の臨時サーバを立てて localhost:3333 をみると、確かに静的サイトとして動いている
GitHub Pages で公開する
これも Svelte の doc の adapter-static#Github-Pages にある通りなんですけど、書いてある通りにするとちょくちょくハマる。
/docs/ からの GitHub Pages 公開で /_app/ 以下が404になる
ちょっと手抜きして、ビルド先ディレクトリを docs/ にして git commit → push して ghpages 公開を試すと、ちゃんと動かない。
/_app/ ディレクトリ以下が軒並み HTTP 404 になってしまっている。
この問題は svelte + GitHub Pages あるあるらしく、
- GitHub Pages はデフォルトで Jekyll を想定する
- _app/ というディレクトリ名は Jekyll にとって特別なものらしく、デフォルトだと消される
- 対処法は
.nojekyllという名前の空ファイルを置いておくこと - svelte だと /static/ ディレクトリに置いておくと良い
らしいです。
参考 → SvelteKit issue Unable to resolve JavaScript chunks after SvelteKit deployment on GitHub Pages (404 on /blog/_app/immutable/chunks/...) #13954
（よく見たら公式ドキュメントの下の方にも書いてある）
まぁでも、せっかくなので、ビルド成果物をpushするとかではなく、GitHub actionsを使う方法を試してみましょう（こっちの方だと .nojekyll 不要）
ERR_PNPM_INVALID_WORKSPACE_CONFIGURATION packages field missing or empty
というわけで GitHub actions による ghpages のデプロイをしようと思って、svelte の doc に従って.github/workflows/deploy.ymlを置いてみたけど、CI/CDが落ち、エラーログには
ERR_PNPM_INVALID_WORKSPACE_CONFIGURATION packages field missing or empty
Error: Process completed with exit code 1.
とか書いてあって、うまくいかない。
これは pnpm のバージョンがズレているときに発生するエラーらしく、修正を試みて最終的に動いたものがこちらの deploy.yml
おっけ〜完成〜〜
やってみた感想
たまにゼロから作ってみると、業務では普段いじらないところをたくさん触れて楽しかったです。
静的サイトジェネレーターは Sveltepress を使ってシステムの取扱説明書を作ると、変更履歴や内容レビューが github 管理下になるので、ドキュメントとしてメンテナンスしやすいんじゃないかって最近考えてたので、いい感じの勉強になりました。
記事タイトル前半の「モチベーションが爆上がりする勤怠システム」の方は、プロダクトとして作る予定は特になし。でもそのうち「AIにチヤホヤされて気持ちよくなれるシステム」とか流行りそうな気はする。いいけど、なんかな…。
幸せとはなにか、みたいな哲学的な気分になる。
以上、読んでいただいてありがとうございました！！