元気な鯉

日本人にとって鯉という魚には特別な思いが込められています。俎板の鯉、鯉の滝登りなど鯉を含む故事やことわざが多く存在します。

時の流れは留まることを知りません。もうすぐこどもの日、端午の節句が巡ってきます。翔君という仮名で毎年、お祝いの作品を掲載しています。今年も屋根より高いから始まる『こいのぼり』の唱歌とお祝いメッセージを連動して表示しています。ネット上を調べたらこの歌の歌詞は著作権付きですが、曲の著作権は消滅しているようです。

歌詞も載せたかったのですが遠慮して、鯉にちなんだ勢いのある演奏をMP3形式のAudio媒体に変換してBGMとして流しています。

お祝いメッセージはInkScapeを使ってサインの筆記体風に61文字の縁取り文字を作成し、それをLazyLinePainterにて遅延データを作成しています。作り方の概略は《手書き風アニメーション「愛」を込めて》を参照してください。

これまでは、LazyLinePainterが出力したhtmlソースコードにテキストエディタを使って手を加え、遅延秒数等を修正していましたが61文字はさすがに神経を集中して編集するのは体によくないです。コードは規則正しく出力されるのでじっくり解析を加えれば、動的に変更することは可能とわかり、setAttribute関数を用いて設定しました。

一度、完成させ手の内に入れてしまえば、ディレー時間を一律に変更するなどの無駄な作業を省くことができます。例として以下のような設定が考えられます。

function initialize(){					//ロード後に実行
  for(var i=0; i<61; ++i){
    var pn=document.getElementById("path"+(185+i*2));	//idとしてのpath名を作る
    delayTime=i * DELAY;				//ディレータイム
    pn.setAttribute('data-llp-duration', DELAY);	//data-llp-duration
    pn.setAttribute('data-llp-delay', delayTime);	//data-llp-delay
  }
}

ブログを閲覧するツールである多くのブラウザにおいて、ページを読み込んだあと自動的に音楽を鳴らすことは不許可になっているので閲覧者がボタンをクリックするなどの手順が必要です。今回は音楽の再生ボタンのクリックにメッセージの表示や画像の描画が開始するように設定しています。

動くお祝いメッセージ

再生ボタンをクリックすれば、音楽の鳴動、メッセージ表示、画像描画が開始します。それでは健やかな成長を祈ってこどもの日のお祝いを贈りましょう。