作成のきっかけ
ピョンチャン冬季オリンピックでは日本人選手が大活躍し国中が興奮のるつぼと化しました。
凱旋パレードではメダリストが熱い応援に感謝の意を表して車から手を振って声援に応えていました。
中でも仙台での羽生結弦選手のパレードは圧巻で10万を超える参加者があったと報じられています。プロ野球日本シリーズ優勝パレードに見られるような紙吹雪が間断なく降り注いでいました。
一方、冬が近づくと雪景色を背景にした画像が多く見られ、「雪または花びらなどの画像を降らせる方法」の記事が目に留まるようになります。ネット上を 調査すると紙吹雪を降らせる記事が見つからなかったので紙吹雪を降らせる方法に挑戦しました。
合わせて、ウィジェット欄や左右の目次欄には降らせず、本文記事全般あるいは記事の一部にのみ降らせる仕組み、降らせる画像を複数種類にする方法を探求しましたので顛末を公開します。
雪や桜の花びらを降らせるには
インターネットをめぐる現象は日進月歩を重ね日々、進化しています。進歩が速すぎて正しい評価が追い付かずに様々な問題を抱えていますが、それは別の機会に触れることにします。
インターネットを利用して効果的な表現をしたい場合、その技術がおおむね確立されて公開されていることが多いです。その技術を有料あるいは無料で組み込んで使います。
その部分（ツール、行為など）をプラグインと言っています。世界的で強力なソフトウェア開発プロジェクトのための共有ウェブサービスにGitHubがあり、今回はそのプラグインを基本的に使わせていただいています。
この度の試みを実現するには、既存のjQueryライブラリーの導入、その一部改造、呼び出し方法を体得しなければなりません。これらの全体像を理解するにはほぼコピペするだけ！jQueryでWebページに雪（または花びらなどの画像）を降らせる方法などにも目を通してください。
準備するもの
最初に、雪を降らせるためのプラグインファイルをダウンロードします。ダウンロード先は次のURLアドレスです。『Makes it snow on any web page or specific element.』
英語版ですが設定は数字やアルファベットであり、すべて日本語に対応します。
URLにアクセスし、ページの右側にある「Clone or download」をクリックし、jQuery-Snowfall-masterを確保します。一般にはそのなかの縮小タイプであるdistフォルダーを利用しますが、今回は一部を変更するのでsrcフォルダのsnowfall.jquery.jsを使います。
プラグインを改造する
雪が舞うようなヒラヒラ落下する画像のスピードやサイズは随時、変化しますが画像は常に同じです。これを指定した画像のぶんだけ変化するようにSnowfall jquery pluginを複数画像対応に改造します。
この部分は雪が舞うようなヒラヒラ落下するSnowfall jquery pluginを複数画像対応に改造を参照しています。浅学の身にはたいへん役立ちました。コードは少し変更してあります。
Snowfall jquery pluginの138行付近をbeforeからafterに変更します。 変更内容は、画像を配列で指定すればそのなかから、乱数を発生させてひとつを選びます。従来のようにいつも決まった画像を指定した場合でも動作するように配慮されています。
before
[html]
if(options.image){
flakeMarkup = document.createElement("img");
flakeMarkup.src = options.image;
}else{
flakeMarkup = document.createElement("div");
$(flakeMarkup).css({‘background’ : options.flakeColor});
}
[/html]
after
[html]
if(options.image){
flakeMarkup = document.createElement("img");
var yn = Object.prototype.toString.call(options.image) === ‘[object Array]’;
flakeMarkup.src = yn ? options.image[Math.floor(Math.random()*options.image.length)] : options.image; //;2018-05-09
//console.log("flakeMarkup.src", yn, options.image, options.image.length);
}else{
flakeMarkup = document.createElement("div");
$(flakeMarkup).css({‘background’ : options.flakeColor});
}
[/html]
紙ふぶき画像を作る
紙ふぶきを降らせるために紙ふぶき画像を作ります。三角形、四角形、星形をそれぞれ4色ずつ12種類を作りました。
画像サイズは呼び出し側設定データで決まるので手ごろなサイズ400×400にしました。形は正方形が原則で、長方形や円形にするには外側を透明色にして実現します。
| ① |
４角形 |
赤 |
0度 |
| ② |
” |
青 |
-30度 |
| ③ |
” |
緑 |
45度 |
| ④ |
” |
黄 |
30度 |
| ⑤ |
星形 |
黄 |
0度 |
| ⑥ |
” |
紫 |
0度 |
| ⑦ |
” |
マゼンタ |
0度 |
| ⑧ |
” |
金 |
0度 |
| ⑨ |
三角形 |
オリーブ |
0度 |
| ⑩ |
” |
赤 |
30度 |
| ⑪ |
” |
orchid |
-30度 |
| ⑫ |
” |
coral |
180度 |
紙ふぶき画像は基本形を作り、他に3個のコピーを作ります。paint.netなどにより順に回転させ指定の色に設定します。
基本形の外は魔法の杖を使って透明色にします。
七夕飾りに付ける短冊形、円盤形などを用意すればいっそう華やかになることでしょう。
呼び出し側設定データ
[html]
jQuery(document).snowfall({
flakeCount : 60, // 落下物の数
//flakeColor : ‘#FFF’, // 落下物の色（画像を使用しないとき）
flakeIndex : 999999, // 落下物のz-index
minSize : 2, // 落下物の最小サイズ
maxSize : 20, // 落下物の最大サイズ
minSpeed : 1, // 落下物の最小落下スピード、値が大きいほど速く落下する
maxSpeed : 8, // 落下物の最大落下スピード、 ”
round : true, // 落下物に丸みを持たせる
shadow : false, // 落下物に影をつける？
//collection : ‘div’, // 落下物を指定の要素に積もらせる設定(画像を設定してもflakeColorで指定した落下物の色が積もります)
image : [ // 落下物を指定の画像に変更
"cofetti-0.png",
"cofetti-1.png",
"cofetti-2.png",
"cofetti-3.png",
"cofetti-4.png",
"cofetti-5.png",
"cofetti-6.png",
"cofetti-7.png",
"cofetti-8.png",
"cofetti-9.png",
"cofetti-10.png",
"cofetti-11.png"]
});
[/html]
動作例
BGMボタンをクリックすると津軽三味線のBGMが鳴動し、再びのクリックで停止します。
ライブラリー呼び出しソースコード
この使い方では記事全体に紙ふぶきが降り注ぎます。指定した要素内で雪などを降らせるにはさらなる設定をします。それには次のライブラリー呼び出しソースコードをアップロードし、URLアドレスを二つ目のJavaScriptコードのiframeタグのsrc属性に指定します。
[html]
<!DOCTYPE html>
<html>
<head><meta charset="Shift_JIS"></head>
<body bgcolor="aliceblue" text="indigo">
<audio id="bgm" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/05/festival.mp3"></audio>
<DIV id="msg" style="position relative; width:580px; height:400px; border:0px red solid;">
<span style="font-size:24px; color:darkslategray">2034年 </span><span style="font-size:34px; color:gold">仙台冬季オリンピック金メダル</span>
<span style="position: absolute; left:10px; top:48px; font-size:40px; color:green">羽田譲選手おめでとう<a id=’go’ onclick="starting();">🎼</a></span>
<div style="position: absolute; left:470px; top:55px; width:110px; height:40px; border:0px blue solid;">👈BGM<BR>
<span style="font-size:9px; font-weight:bold;">©2018 TacM, Ver0.06</span></div>
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2018/05/sendai580x290.png" style="position: absolute; left:10px; top:110px;">
</DIV>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/05/snowfall.jquery.js"></script>
<script type="text/javascript" charset="Shift_JIS">
var i=0;
jQuery(document).snowfall({
flakeCount : 60, //落下物の数
//flakeColor : ‘#FFF’, //落下物の色（画像を使用しないとき）
flakeIndex : 999999, //落下物のz-index
minSize : 2, //落下物の最小サイズ
maxSize : 20, //落下物の最大サイズ
minSpeed : 1, //落下物の最小落下スピード、値が大きいほど速く落下する
maxSpeed : 8, //落下物の最大落下スピード、 ”
round : true, //落下物に丸みを持たせる
shadow : false, //落下物に影をつける？
//collection : ‘div’, //落下物を指定の要素に積もらせる設定(画像を設定してもflakeColorで指定した落下物の色が積もります)
image : [ //落下物を指定の画像に変更
"https://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-0.png", "https://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-1.png",
"https://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-2.png", "https://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-3.png",
"https://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-4.png", "https://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-5.png",
"https://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-6.png", "https://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-7.png",
"https://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-8.png", "https://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-9.png",
"https://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-10.png","https://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-11.png"]
});
function starting(){
(i = 1 – i) ? document.getElementById("bgm").play() : document.getElementById("bgm").pause(); //音声再生, 音声停止, 0, 1 ==> 1, 0
document.getElementById("go").innerHTML = String.fromCodePoint(i*0x315+0x1f3bc); //0x1F3BC, 0x1F6D1
}
</script>
</body>
</html>
[/html]
本文記事に紙吹雪を降らせるソースコード
[html]
<!DOCTYPE html>
<html>
<body margin="0" padding="0">
<iframe id="nextName" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/05/throwConfetti.html?2018/05/14" width="600px" height="420px">iframeは未サポート</iframe>
</body>
</html>
[/html]
もっと良いものにする
- 枯葉がひらひら舞う感じを演出する
- ひらひら感を付加する
- 動画に紙ふぶきを降らせる
- くす玉を割る様を疑似体験できるようにする
- キラキラ光りながら落下する
- クリスマスツリーに雪を積もらせる
- たなばた飾りを模す
感想とおことわり
snowfall.jquery.jsライブラリーは記事全体に雪を降らせるものであり、ウィジェット欄を持つブログなどで本文記事にのみ雪を降らせるにはiframeタグなどを併用する必要があります。上に示したようにソースコードはほんの数行ながらなかなか思い通りに動作してくれず大いに悩みました。
もっと良いものにする項に挙げましたがこの改造をもってしてもひらひら感を出すことはできませんでした。枯葉が舞うときには回転しながら落下しますが、ここではサイズが変わるだけで回転は行われません。実態に合わせて自然な雰囲気を出す必要がありそうです。予算と時間が解決してくれると思われます。
この例題はすべてのケースに対応しているかは不明です。それぞれの責任においてご利用ください。参照させていただいた記事に感謝申し上げます。
福祉施設に用事があり出かけました。玄関口付近の利用度の高い洗面所がきれいに整っているのに、個別用洗面所の清掃にまで手が回らず不潔な思いをしました。深刻な人手不足が起きているようです。
エレベータを待っているとなかなか来ないので共用のトイレに入ったら、和式トイレでした。ホテルでは共用より個室のトイレを使うのが一般的です。個室のトイレを洋式に改装できても、共用トイレを改装するまでの余裕がなかったのでしょう。
ホテルの共同風呂に入ると、先客が二人いましたがスリッパがなく、登山靴に近い頑丈な靴が2足ありました。先客は外国人で浴衣に着替えてくつろいだ格好で風呂に入るという日本の習慣に精通してなかったようです。
ホテルの朝食はほとんどバイキング方式で食べ過ぎに気を付けなければなりません。団体旅行では競争心がちょっぴり入ると危険です。
ほとんどの自治体で人口減が進んでいます。閉鎖的、硬直的、閉塞感ただよう組織ほどその傾向が顕著です。
「大きいことはいいことだ！」とある作曲家がテレビCMに出ていました。素朴、ひっそりより大規模、豪華、金ぴかが貴（たっと）ばれました。
高度成長前の話ですが、ある中堅鉄道電車に破れを繕った座席を見つけ感心したことがありました。破れをガムテープで覆い隠すような補修でなく、目立たない糸で細かに破れを結んでいました。人件費がそれほどかからない時代だから可能だったかも知れません。
働いてお金を稼げる環境にある場合は、古いものは捨て新しいものを購入した方が効率的です。今は労働時間の短縮が叫ばれ、休みになる祝祭日が増えています。
仏教の寺院は寛永寺のように寺号で呼ばれます。その他に東叡山という山号を持っいます。東叡山寛永寺より上野の山の寛永寺が聞き慣れています。
