![見出し画像](https://assets.st-note.com/production/uploads/images/110855230/rectangle_large_type_2_20dcaa8ebf4e69332a0bfa639486357e.png?width=800)
令和五年の暑中見舞い状の作り方
作品の概要
HTMLプログラムで毛筆の筆記体による『暑中見舞い挨拶状』の動画を3例作成しました。コードを入手して自前の住所、ロゴ、花押、署名印に作りなおすことができます。頑張ればBGMを付けることも可能でしょう。
暑中見舞いのはがきに印刷し郵送してネット時代を逆手にとるのも良し、Youtubeなどの公開サーバーにアップしてURLアドレスをメールやLINEにてお知らせするのもいいでしょう。最高の推しはそのアドレスをQRコードに変換して画像として送り、タップするだけで動画にたどり着けるように仕立て上げるさりげない技でしょうか。
![](https://assets.st-note.com/img/1689415160436-S7gO3paxzN.png)
上級編《夏休みの自由研究》として挑戦されてはいかがでしょう。
作り方
InkScapeと絵描き風のSVGアニメーション:vivusを使って毛筆で手書きするような振る舞いに仕立てあげています。ここは上級編です。コードを入手してまずは住所などのテキストを編集してから挑戦してください。図や文面を切り替えるところは必要ないので削除します。多くのpathデータはvivusが掃きだしたコードです。大量データでありコピー&ペーストによる取りこぼしに注意しなければなりません。
編集のコツ
まず、コードをすべてコピーし自前のデバイス上にHTMLファイルを作り、JavaScriptとして実行させます。その後、自前の住所などに編集します。画像ファイルは皆無であり、月夜のテント画像は絵文字のテキストであるのでオリジナルコードのまま無修正で動作するでしょう。
住所の字数が多くなったりすると違和感のある表示なりますがフォントサイズや表示位置を修正することによって違和感はなくなります。
付加価値を付ける
pathデータの作成は奥深く多くの周辺知識を要します。作りやすいテキストの編集から入るのが常道です。夏向きの絵文字はもっとあります。金魚、花火、すだれ、団扇(うちわ)、あさがおなどに変更して芸術性の高い作品を作ってください。
蛇足
車を改造して勝手に公道を走ると罰せられますが、自分のパソコンやスマホに確保したソフトを改造して動作させても所有する機器を壊したりすることはありません。
どしどし、大胆に改造してプログラミング開発に邁進してください。
HTMLコード
ここから先は
¥ 100
この記事が気に入ったらサポートをしてみませんか?