00:06
神経質やせ男です。ブラウザ拡張機能で作るデジタル時計の後半です。
前回は、現在日時を取得して秒単位で更新される時計の仕組みを解説しました。
今回は、その時計をマウスで自由に動かせるドラッグ&ドロップ機能についてお話しします。
この機能の考え方は意外とシンプルです。必要なのは3つの動作だけ。
まず、マウスボタンを押した時、次にマウスを動かした時、そしてマウスボタンを離した時です。
プログラムではそれぞれにイベントを設定しています。
最初の押した時にはドラッグ開始のフラグをONにします。
さらにマウスと時計の位置の差を記録しておきます。
この差分を保存しておくことで、時計がマウスに吸い付くような不自然な動きを防げるんですね。
次に動かした時の処理です。
ドラッグ中のフラグがONであれば、マウスの座標に合わせて時計の位置を更新します。
この部分が実際に時計を動かしている本体です。
また最初に設定した右下固定の座標を解除するための処理も入っています。
最後は離した時です。
ここではドラッグ中のフラグをOFFにして時計の移動を終了します。
マウスカーソンの見た目も元に戻しています。
こうしてみると、ドラッグ&ドラップは難しそうに見えて、実際は状態を管理しながら座標を書き換えているだけなんです。
JavaScriptではこのようなイベント処理を覚えると、一気にできることが増えていきます。
ボタン操作、ゲーム、図形の移動、さらには本格的なウェブアプリ開発にも応用できます。
今回の時計は小さなサンプルですが、イベント処理を学ぶ入り口としてはとても良い題材です。
ぜひコードをコピーして動かしながら、マウスの操作の仕組みを体験してみてください。
それでは今回はこの辺で。
最後までお聞きいただきありがとうございました。
次回もよろしくお願いします。
本日の内容は以上となります。
最後までお聞きいただきありがとうございました。
最後にAmazon Kindleで発売中の電子書籍のお知らせです。
キレイごとゼロの別居介護をリアルに環状ではなく、システムとExcelで立ち向かった瞬間、
手取り23万円のエンジニアがExcel1枚で実家の破綻を防いだ話、
そして実家の保守運用を行なすための時間を圧倒的にひねり出す技術を書いた会社公認爆速仕事術PC魔改造、
この2冊が現在Amazon Kindleにて絶賛発売中です。
どちらもKindle Unlimited読み放題の対象となっていますので、
会員の方は追加料金なしですぐにお読みいただけます。
音声を聞いた後にスマホの画面の下にある概要欄のリンクから是非チェックしてみてください。
それではまた次回の配信でお会いしましょう。