職業プログラマの休日出勤スマートフォン用の表示で見るスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。職業プログラマによる日曜自宅プログラミングや思考実験の成果たち。リアル休日出勤が発生すると更新が滞りがちになる。記事の内容は個人の意見であり、所属している(いた)組織の意見ではない。このような記事も過去に投稿しています。職業プログラマの休日出勤さて。占い、それに類するものに興味をお持ちの方も多いかと思います。私自身はそのようなものは好きではないのですが、くじ等を作る側(射幸心を煽る側)の人間として各種法令を遵守しながら立ち回ることは嫌いではありません。ここでは、くじを作る側の人間として、SVGでスクラッチくじを作る手法を紹介したいと思います。完成品のご紹介さすがにブログ記事の中でJavaScriptを動作させるのはどうなんや...ということで、別のサイトにHTMLファイルを置くという形でご紹介いたします。https://www.tmotooka.com/svg_scratch.htmlこのページにアクセスすると、銀色(実態は灰色ですが)の部分をマウス操作やタッチ操作で削ることができ、削ると隠されていたメッセージが表示されます。引く」ボタンを押すと、銀色の覆いは元に戻り、中のメッセージはランダムで切り替わります。こすったときに何が起きているのか?まず初めに、SVG画像としては、銀色の覆いの向こう側には、あとで表示されることになるはずのテキストのメッセージが描かれています。その手前のレイヤに、銀色の長方形が描かれています。イベントを捕捉し、マウスカーソルの位置やタッチ位置を把握しています。いう機能を使って実現しています。SVGで描かれている内容のうち、指定した領域を透明にすることができます。領域は、<mask>で囲まれた内側で、通常のSVGと同じように描くことで指定することができます。白く塗り潰された領域は描画され、黒く塗り潰された領域は透明になります。いう形で適用するべきマスクを指定します。詳細な説明は、こちら。Edition)銀色の覆いをカスタマイズしてみるスクラッチの仕組みは、くじではなくプリペイドカードなどにおいても頻繁に用いられます。そのようなものの中には銀色の覆いに対して模様を描いていることもあります。今回紹介したスクラッチくじでも、そのような模様を描くことが可能ですし、実は少し修正するだけで模様を登場させることが可能です。書かれた部分があると思います。変えることで、3本の黒い波線を表示させることが可能です。タグの内側に居ますので、削る操作をしたとき、銀色の覆いと一緒に削れていきます。NAGOYA」に参加してきました。職業プログラマの休日出勤参加レポートには書いていませんが、この懇親会においてどなたかが「SVGでスクラッチくじとか作れたら面白そうだよね」という発言をされていました。このとき私は十分な量のお酒を頂いていたので誰の発言だったのかを思い出すことができないのですが、ここで私は「実装するぞ!」という宣言をしたことだけは覚えています。作りたい」という想いは募る一方でした。このときの約束を果たすことができて、私は幸せです。MITライセンスにて利用許諾しています。著者id:t_motooka職業プログラマ。本業は京阪地区でのWebアプリの開発運営。AWS2016-12-312016年、作ったものまとめ。Blog|ブログを報告する。