⚫︎が動くアニメーション open_in_new
こちらのX(旧ツイッター)のポストで「直線上を動く複数のボールが円周上に並ぶ」動画を見て 面白いなあと思い、なんでこうなるのかよくわかんないけど実装したらわかるかも?とつくってみることに。さっさと動かしたかったので、久しぶりに何もフレームワークを使わずプレーンなJavaScriptで書きました。
直線上を動いているボールは、一定速度ではなさそうな気がする・・円運動を射影したやつなんて言うんだっけ?あれかな? 等分した直径上で時間差で点を動かせばいいのかな?という程度のあたりをつけて、試行錯誤しながらつくっていきました。
つくっているうちに、ひとつの点の等速円運動の射影だったのか!(という表現が合っているかわかりませんが)ということがわかりました。
直線上を動き出す時間をずらすと、それはそれで面白い動きになることもわかったので、動き出す時間をずらせるようにしてみました。
円周上を動く円と直径上を動く円の座標が微妙にズレる時が合って、実装上どこかおかしい気もしますが満足したので、とりあえず完成としました。
(直しました)
結局理屈は、よくわからなかったので、誰かに分かりやすく解説してほしいです。
ツクッタ時期:2023年冬
arrow_circle_upトピックルーレット open_in_new
あらかじめ設定した10個のトピックから1つを選ぶルーレット風のツールです。
職業体験講座の質問タイムでなかなか質問が出てこない時のために「よくある質問」から選べるように作ってみました。
質問内容を編集できるようにして、データはブラウザに保存するようにしました。様々な場面でサイコロトークツールとして使えると思いますが、残念ながら、スマホ対応していません。
解像度が大きめのモニターやプロジェクターに映して使うことを想定しています。
オフラインでも動作するようにService Workerを使ってみましたが、ちょっとよくわかりません。「ちゃんとやろうとしたらめんどくさそうだ」ということを理解したところで棚上げしてみました。
ツクッタ時期:2023年秋
arrow_circle_upルビ用HTMLタグ作成ツール open_in_new
「漢字(かんじ)」とテキストボックスに入れると、「漢字」と表示するためのHTMLタグをコピーできるだけのツールです。
HTMLファイルを直接編集しているWebサイトで、ごく稀に、ルビをふる必要が生じます。たまにしかやらないので、タグを覚えているはずもありません。 そして、ルビをふるには、意外と複雑なタグが必要です。地味でめんどくさい作業を少しでも楽にしたくて作りました。
ツクッタ時期:2023年夏
arrow_circle_up漢字小学校配当学年チェック open_in_new
文章に含まれる漢字の配当学年をチェックして、色分けするツールです。
指定学年以上の漢字のみ色分けします。
対象学年が決まっている場合は、その学年を指定することで効率的にチェックすることができます。
まだ習っていない漢字を別の言葉に言い換えたり、ひらがなにしたり、ふりがなをふったり・・・。
地味でめんどくさい作業を少しでも楽にしたくて作りました。
ツクッタ時期:2023年夏
arrow_circle_up