プログラマーですが何か?まだプログラマーですが何か?プログラマーネタとアスリートネタ中心。使って1年間かけて一周する「年間時計」を作ってみました:https://dotnsf.github.io/yearclock/表示すると1分で一周する秒針と、1年で一周する年針(?)が表示されます。年針は針というよりはパイチャートの要領で面積で表示されます。月後半に表示したものです。使って1秒おきに描画しています。画像の透明度をうまく使って秒針の残像が残る形にしています。経過する瞬間になります。画面内にコンテキストを利用した図形を比較的自由に描くことができるようになります。:で、このような図形を描くのが目的であればいいのですが、パックマンのような(円からピザの一部を切り取ったような)画像を描きたい場合はこれでは目的の画像とは異なります。いうのが今回のテーマです。表記)すること自体はできるようになりました。イベントをハンドリングすることで独自に実装することは可能でした。行うことはまだ困難が伴います。多くはスマホブラウザからは使えないことが多いようです。スマホのブラウザでアクセスすると以下のような画面になります。4角の枠内に5枚の付箋が貼られているイメージです:各付箋は指でドラッグして位置を変えることができるようにしています。下図はピンクの「ハロー」と書かれた付箋をドラッグして位置を変更した後の様子です:また各付箋はダブルタップすると編集モードになり、書かれた文字を編集することができるようになります。「ハロー」を編集して「ハロー!」にしてみました:編集モードで「OK」をタップすると編集後の文字列が反映されます:付箋を削除する場合は、一度ダブルタップして編集モードにして、「DELETE」をタップします:確認後に削除されて元の画面に戻ります。「abc」と書かれていた付箋が削除されました:新しい付箋を追加する場合は「NEW」をタップし、編集モードで内容を入力します:そして「OK」をタップすると新しい付箋が追加されます。この付箋も同様にドラッグして位置を変えたり、再度編集して内容を変更することができます:一連の機能紹介は以上です。使ってフロントエンドだけで実現していますが、データベースとのバックエンド連携を加えることで永続化なども実現できると思っています。内に付箋に相当するオブジェクトを描画して実現しています。イベントを監視してドラッグを処理しています。モーダルダイアログを使っています。ソースコードはこちらです。ライセンスで公開されています。サーバー上にアップロードされている必要はなく、ローカルファイルとして開くだけでも可)で遊べます。一応、遊び方にも触れておきます。ファイルをブラウザで開くと以下のような画面になります。この「Play」ボタンをクリックするとテトリスがスタートします:操作はキーボードを使います。矢印の左右でテトリミノ(ピース)を左右に移動、上矢印で回転、下矢印で強制的に下に移動します:といった背景もあって実際に遊ぶのはもちろん、改良する場合においても技術的&ライセンス的なハードルが低く、デモやハンズオンも含めたセミナーのネタとして重宝しています。操作する、というカスタマイズの紹介です。(オブナイズ)をご存じない人のために簡単に紹介しておきます。比較しても小型で、単体ではダイヤル式のスイッチと簡単な文字が表示できるディスプレイを入出力装置として持っています。よって各種センサーやモーターを接続することができます。