SVGで「文字を書いていくアニメーション」を作る

かきかたプリントメーカーに「書き順アニメーション」という機能を実装した。 これを作る際に使ったテクニックを紹介する。スクリプトは不要。純粋なSVGだけで次ようなアニメーションが作れる。 (2021/06/16追記 : アニメーションSVGの貼り過ぎでスマホだとめちゃくちゃ重かったり表示されなかったり遅延が発生したりします。すみません。) SVGに「線を途中まで書く」という機能自体はない。そこでちょっと工夫が必要になる。 テクニックの概要はこんな感じだ。 「ものすごく荒い破線で線を表示し、破線のオフセットがち

続きを読む »

「かきかたプリントメーカー」に新スタイル「日めくりカレンダー」を追加

「かきかたプリントメーカー」のアップデートを行った。「日めくりカレンダー」スタイルが新たに加わった。 文字は漢字・ひらがな・英語の3種類から選べて、年表記も西暦・和暦の両方使える。レイアウトは4分割・2分割・1枚まるごとの3種類。A4で4分割にするとコンパクトな手帳サイズ、子供がのびのび書くなら2分割、デコる前提ならまるごと1枚。 好きな色のカラーペンやクレヨンで目立つ字を書くのがおすすめ。色を塗ったり、絵を書いたりしても楽しいかもしれない。最近は新型コロナウィルスの影響で家にいることが多くなり、生活が単調

続きを読む »

ひらがな練習プリントを作れるサービスを公開したよ

好きな言葉でひらがなの練習ができるプリントが作れるサービス「ひらがなプリントメーカー(仮)」を公開した。今後カタカナにも対応したり、文字練習以外の教材の生成ができるようにすることもぼんやり考えているので、名前は変わるかもしれない。 (2019年01月11日追記) 0〜9の数字にも対応したので「かきかたプリントメーカー」に改名した。さらにカタカナもサポートした。 紙の向きや縦書き横書き、文字サイズが切り替えられるようになっている。書き順もつけることができるので、数字をおぼえた子ならひとりでもできる。 PDFフ

続きを読む »

マウスオーバーで拡大する広告はもうちょい挙動を改善してほしい

マウスカーソルを3秒〜5秒バナーに乗せると、画面いっぱいにババーンと動画が広がり、せっかく楽しんでいたコンテンツを覆い隠す……という広告を去年あたりから見かけるようになった。エキスパンド広告という名前がついているらしい。 タブレットやスマートフォンなどのタッチスクリーン端末には影響がないのだが、普通のパソコンだと、「カーソルをそのへんに置いたまま画面をスクロールしていたらいつの間にかバナーに乗っかっていて動画がでかでかと表示されてしまった!」という事故がよく起こる。 先日Twitterでこんなことを書いたと

続きを読む »