七五三を祝う
当事者にとって子供の成長はうれしいものです。子育てが終わってかなりの時間が経過している世代には、懐かしく安心な対応にはまた違った幸せを感じます。
11月には様々なイベントがありますが、子育て真っ最中の世代には七五三は気合の入るイベントと言えましょう。
当方には着物などの高価なプレゼントはちょっと難しいです。得意のプログラミングで世界に二つとない贈り物を発表します。CTRL+Uにてソースコードを取り出すことができるので参考になれば幸いです。
個別対応にするには
ここでは個人情報でお祝いするわけにはいきませんので、名前や写真は仮のものです。
個別対応にするには基本をしっかり押さえなければなりません。通常、名前などはソースコードで
const grandChildName “山田太郎”; //孫の名前を定義する
上記のようなコードを見つけて個別の名前に変更するだけでは解決になりません。縁取り漢字を時間遅れで表示するにはpathデータを作る必要があります。
pathデータを手作りするにはかなりの労力が必要です。InkscapeとLazy Line Painterを利用すれば割と楽にpathデータを作ることができます。
自前で開発する意欲のある方は最後までブログを読んでいただけるとありがたいです。七五三の特別なプレゼント
下右の七五三お祝いのメッセージ 開始ボタンをクリックしてスタートです。ブラウザChrome, Edge, FireFox, Operaでお楽しみください。
自作するには
ここで発表したサンプルコードはHTMLで記述されていますので、開発環境を構築するにはほとんど予算を必要としません。知識を吸収したり根気強い継続の気持ちの方がものを言いそうです。
ソースコードは100行あまりですが、LazyLinePainterを中心に据えておりそのライブラリを利用しています。
LazyLinePainterはSvgを使っているのでSvgの知識を紐解いてください。
それに加えて画像や音声データの扱いに慣れることも必要です。
その他、イベントについて知っておくと処理の制御を理解するのに役立つでしょう。これらについては当ブログで過去に何度も述べています。また、JavaScriptに関する解説書Amazonキンドル本を256円で発表していますので参考にしてください。
かつて、「水と安全はタダ」と言われていましたが水はスーパーで買う時代です。他人が作ったものをタダで拝借するのは実力が付きません。先日、ITを始め多くの分野で日本は先進国から脱落しているとのテレビ番組がありました。
自ら考える習慣を持ち、ちょっとした予算でもいいので先人を評価する気持ちを育てて欲しいです。
参考資料
①アニメーションを語る
②手書き風アニメーション
③多目的時計
④Vivus Instant
⑤SVGでハンドライティングアニメーションを実装する
⑥Lazy Line Painter