るみさんのブログ

妹がスマホを使ってよいかチェックするサイトを作った

作成日:2024-08-04 14:02:23
最新更新日:2024-08-05 00:12:20

はじめに


きっと妹は「余計なことしやがって」と思っていることだろう()

さて、このサイトというかアプリだが、なんで作ったのかをまずは書いていく。
前提として、妹はスマホが使用禁止だ、
なんでそうなったのか覚えていないが、私も妹と同じ頃は禁止だったので同じ道をたどっているだけだ。

但、特定の条件下では使ってもいいのだ。
その条件は、「8時〇〇分までに家を出ること」だ。
要は「遅刻しなきゃ使ってええぞ」ってこと。
土日は少々違って、「月から金まで遅刻がなければ使っても良い」である。
(元々は金曜日も土日に含んでたが、妹の甘えにより金曜日は土日ルールから除外された)
そんなルールを私が法律みたいに堅苦しくしたりしていたわけだ()
(まあ、堅苦しい文章は読みにくいだけだが、その分不正をしにくくなるメリットがある。法の抜け穴とか見つけるの難いだろ?)

しかし、父は忘れっぽい。
話したことも忘れるし、言われたことも忘れる。
これはどうしようもないし、責めるべきではないと私は思っている。
ミスは責めるより、「どのようにしてそのミスを無くすか」を考えることが重要だと思う。
だから宿題を忘れたやつを怒鳴ってる教師はただの騼だと思っている()
(まあ、先生にも先生の言い分があるはず、一概に言うことは出来ない)

さて、じゃあミスを無くすにはどうすればいいか?
私ができる範囲のことを考えよう、すると「ミスを機械にカバーさせる」というのが浮かんだ。
人間はミスが多い、だが機械は命令を間違えなければミスをしないんだ。
よく「バグった」とか言うだろ?あれは命令を作った人、つまりプログラマーも想定していなかった行動をしたから機械がミスったんだ。
まあどのアプリもバグがあるので、あれば治せばいい。
よく、「PHPには脆弱性がー」とかいう奴が居るが、問題は「脆弱性の有無」ではなく「その脆弱性をどれだけ早く対処できたか」
だと私は思う。

まあそんなことはどうでもいい、早速作っていこう

開発条件


まず、認証は必須だ。
妹が勝手にやっても気づかないかもしれない。
まあ、本質としては「だれがチェックをしたか」を記録するためなんだが()

そして、出発記録は絶対必要だ、さらに"視覚的に"今日使えるかを見れることが重要だ。
「結局使っていいの?」ということになりかねない。
人間は色を見分けるのは一流だ、つまり「使用可能」は緑色に、「使用不可能」は赤色にすればいい。
/Data/Blog/f26bd54119c68bf54bdf3780b3862182_1722780863.png

そして、「なぜ使えないのか」という理由書きも重要だと思う。
「なんで使えないの?」と言われたときに「何曜日にN分遅れたからだね〜」って言えるようにするためだ。
/Data/Blog/f26bd54119c68bf54bdf3780b3862182_1722780884.png
このように、クリックすると「どれぐらい遅れたか」とかが見れる。

妹は「1分ぐらいいいでしょ?!」とかほざくのだが、1分でも駄目だろと思う。
どうでもいいな、次は「スマホ対応」だ。

私はスマホ向けのサイトを作るのが嫌いだ、というか苦手だ。
しかし、今回の場合なら簡単だ、次のメタタグというものを書くだけでいい。
<META NAME="viewport" CONTENT="width=device-width,iniial- scale=1">

意味は「画面サイズにおおじて拡大する」かな?そんなに難しいことはしてない。

画像はFireFoxのスマホサイズでサイトを見るやつだが、こんな具合だ。
これなら押し間違えないし見やすいだろう。
/Data/Blog/f26bd54119c68bf54bdf3780b3862182_1722781007.png

ちなみに実際に使われる環境はiPadだと思う

コード


クソむずかった、二度とやりたくないけど、
今思えば楽しくもあったかもしれない、仕事のプログラミングよりは楽しかった。
やはり自分の好きな言語で書くことは大事なのかもしれない、モチベにも関わるかも。

「IMOUTO」とかいう安直なプロジェクト名だが、気にしなくて良い()
URLは安全のため非公開だが、いちおう認証あるのでたぶん大丈夫!
/Data/Blog/f26bd54119c68bf54bdf3780b3862182_1722781255.png

見た目からわかるとおり、簡素なコードだ()
/Data/Blog/f26bd54119c68bf54bdf3780b3862182_1722781346.png

だが、GET_CHECKというプログラム、これは「今日使えるか」をチェックするものなんだが。
これはまあまあ複雑、特に「この日付は今週中か?」の検知が難しかった
/Data/Blog/f26bd54119c68bf54bdf3780b3862182_1722781418.png

ページ


一応、自作のSPAライブラリでSPA化してある。

Q.SPAって何?
A.Twitterとか、「ホーム」から「通知」に移動してもリダイレクト(ページまるごと切り替わるやつ)が無いだろ?
それのことだ。

ページは全てで4つ!
・ホーム(特に機能なし)
・出発記録(その名の通り)
・使用可能かチェック(スマホがその日使えるかチェック)
・ルール変更(出発時刻とかを変えれるようにする予定、まだ未実装)

すべてヘッダー部分のボタンで移動できる。
/Data/Blog/f26bd54119c68bf54bdf3780b3862182_1722781794.png
出発記録ができたら、自動でホームに移動する機能を組み込んでおいた
/Data/Blog/f26bd54119c68bf54bdf3780b3862182_1722784325.png

終わりに


この記事は、完成後に書いたものなので、
このコードがどれだけ有用か、どれだけ使われるかはわからない。
もしかしたら使われないかも。。。?

そうなったら、もう私は知らん。
「妹がどうなっても知ったこっちゃ無い、就職して1分の遅れてクビにされても知らん。
友達との待ち合わせで遅れて徐々に友達を失っても知らん。
助けを乞われても私は知らん、勝手に生きてろ。」
という姿勢で行く予定です!

まあ、半分は嘘だが、ここまでやっても治す姿勢が無いなら知らない。当たり前()

禁止されてたときにこっそり使ってた私が言えることではないだろうが、当時私は遅刻とかそういう話ではなく。
成績とか生活優先を守らなかった結果だ、結果って気に私は今は守っている。

以上!終わり!続きは多分書かない!



シェア



コメント欄の復旧は少し待ってね