久々にコーディング。「Neo's Timer」を作った
ちまちましたスクリプトは書いていたものの、久々に Angular を使ったフロントエンドアプリのコーディングをした。その名も「Neo's Timer」。
ソースコードは以下。
「秒数」と「メモ」が書けるフォームが複数行登録できる。んで、設定した秒数に従ってカウントダウンとアラーム音の再生を続ける、というモノ。何がしたくてこんなモノを作ったのかというと、筋トレのメニューをこなす時のタイマーが欲しかったのだ。よく、
- レッグリフト : 30秒
- インターバル : 10秒
- ブルガリアンスクワット・左足 : 45秒
- ブルガリアンスクワット・右足 : 45秒
みたいなメニューで筋トレをするが、こうしたメニューを覚えたりするのが苦手だったので、それを記録しつつ、時間を計測できるタイマーアプリを作った次第。
フォームに入力した秒数とメモは、「Start」ボタンを押したタイミングなんかで URL クエリパラメータに組み立てられる他、LocalStorage にも保存できる。クエリ文字列で情報を保存・読み込みできるようにしておくと、色んな筋トレメニューをブラウザのブックマークで分けて扱えるので、クエリ文字列を使う簡易アプリを作るのが個人的な趣味になってる。
Angular アプリはいつもどおり、テストとかない最小構成。SCSS も使わず素の CSS なので package.json
がシンプル。あんまりあれやこれや依存したくない気分。
タイマー表示のデジタル時計については、オンライン目覚まし時計というサイトで使われていた、clockicons という Web フォントを読み込んでいる。
アラーム音についても OtoLogic 様よりいただいた素材で作って、Base64 文字列にして埋め込んである。iOS Safari では new Audio()
で作った音声の再生に制約があって、音が鳴らない。自分は PC の Chrome ブラウザで使うつもりで作ったアプリだし、音はいいやーと思って対応をサボっている。w
デザイン周りは CSS Grid でガチガチに組んだ。CSS Grid って本質的にテーブルレイアウトと変わんない気がするけど、やりたいのってそういうことだからなー仕方ない。w
今回は自分が一番慣れてる SPA フレームワークである Angular を使って、リハビリがてら開発した。ReactiveForms で FormArray をゴリゴリ触るアプリは実はちゃんと作ったことなかったかも。今回それが出来てよかった。Angular は一番堅牢さがあって良いのだが、そろそろ自分の中での目新しさがなくなってきたので、バックエンドも込みで Next.js あたりを触ってみるかどうするか悩み中。
今回みたいなフロントエンドオンリーで完結する趣味アプリとは別の話だけど、最近どんどん「SPA である意味」が分かんなくなってきてるんだよなぁ。
バズワードに飛びついて「時代は React らしいっすよ!」とか今さら言ってる素人客には刺さるから、SIer としては案件獲得時のアピールポイントに利用して「SPA でモダンで疎結合な…」とか書くんだけど、実際ちゃんと SPA でバックエンドも込みで作れる人間が自社内にもいないのが終わってんだよなぁ。「JSON っていうのよく分からないです、HTML 返せないんですか?」とか社内の人に言われて、それって MPA っていうか Hotwire っていうかヘッドレス CMS 状態っていうか。結局開発する側も「疎結合」って概念が分かってなかったり RESTful な設計スキルがなかったり運用まで考えて作れなかったりするから、作る側もバカならバカのレベルに合わせて動くモン作った方がよくね?って思ったりする。テーブルの正規化との区別がついてないような状態の人間が、外部公開しない API を頑張って RESTful に疎結合にするんだーってしても効果薄いし、GraphQL で「作れる」(概念的に分かってるだけじゃなくて具体的なフレームワークを使ってパフォーマンスや運用まで考えて設計実装ができるかどうかってこと) 人もいないし、フロントエンドアプリ上で発生したエラーログも収集できない連中には高尚過ぎるんだよなぁ。疎結合にした上に元来のドキュメント作成嫌いが出てドキュメント残さないから、何と何が繋がってるのか自分で分からなくなってて障害トレース出来てないでしょ。そんなんばっかりだから、身の丈にあった道具を使って必要な問題だけ解決しようよ、って気分になってる。
バックエンドが絡むと色々面倒臭くて、やっぱり Kubernetes である必要なくないっすか?SPA にしない方が保守もしやすいんじゃないですか?PaaS でいいっすよね?自分たちのくだらない仕事増やすの止めません?って気持ちになる。客もベンダも得しないなーっていう。
別に「お客様に価値を届けたい」とか何とかキザったらしい思いは全くなくて、俺が被る「面倒かつ不必要な仕事」をなくして楽したいっていうだけなんだけど、ホント SIer の仕事よく分からん。w