プログラミング教育必修化
来年の4月から小学校においてプログラミング教育が必修化になります。プログラミングを構えすぎると難解と言えますが、自然に使っていくと入りやすいでしょう。赤ちゃんは覚えたものだけを大胆に使います。
覚えたものを一つずつ使っていけばやがて高みに到達するでしょう。まずは臆せずに使いましょう。
動きのある書類
電子書類にちょっとした動きを付けるにはHTML, CSS, JavaScriptを使いこなすと多彩な表現が可能です。恐縮ですが以下のサンプルは難解の部に入ります。以下のような動くドキュメントを表現できる一つの例を挙げます。末尾にHTMLコードを示します。
個別に改造する方法
以前に、七五三お祝いのメッセージにおいて「玲依ちゃん」の七五三を祝いました。当事者の氏名を変更することは初心者には難儀であることを述べました。名前を一筆書きのように表示するには、独自のフォントを作成するに等しくLazy-Line-Painterなどの専門知識を必要とします。
ここでは「あかりちゃん」の仮名を使っていますが遅延表示をしていないので容易に関係者の名前に変更できます。また、BGMはフリー素材の音源を使っていますが家族で楽しむぶんには最新の人気曲に差し替えることも可能でしょう。
上の図は「あかりちゃん」を表示するコードの一部分です。赤字のところを置き換えれば個別に対応できます。BGMを独自のものに差し替えるにはaudio要素のsrcに音声オブジェクトの格納アドレスを指定します。
出来合いの作品だけでなくオリジナル作品をどしどし発表して存在感を発揮してください。
HTMLコード
<!DOCTYPE html>
<html>
<head>
<style>
body{
width: 100%;
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
#kisho6 {
width: 50vw;
height: 50vh;
overflow: visible;
}
</style>
<script type="text/javascript" charset="utf-8">
const day=["12/92kisho-0.png", "04/jitensha.png", "04/dokusho.png", 59, 63, 63, "04/f1-kaban.png",
"12/hirune.png", "12/sanpo.png", "12/otohsan.png", 50, 56, 68, "04/f2-hoikuen.png"];
var i=0;
function startPlay(){ //
var music = new Audio("https://aidesign.lolipop.jp/wp-content/uploads/2019/04/valse.mp3");
music.addEventListener("ended", closeProc, false);
music.play();
}
function closeProc(){ //BGMの終了イベント
renewal();
}
function renewal(){ //congratulateAdmission, closeProc
var j = (i++ % 2) * 7; //j : 0 or 7
f0.setAttribute("xlink:href", "https://aidesign.lolipop.jp/wp-content/uploads/2019/" + day[j]);
f1.setAttribute("xlink:href", "https://aidesign.lolipop.jp/wp-content/uploads/2019/" + day[j+1]);
f2.setAttribute("xlink:href", "https://aidesign.lolipop.jp/wp-content/uploads/2019/" + day[j+2]);
f0.setAttribute("height", day[j+3]);
f1.setAttribute("height", day[j+4]);
f2.setAttribute("height", day[j+5]);
setTimeout(function(){
console.log("finish", j, day[j+6]);
f3.setAttribute("xlink:href", "https://aidesign.lolipop.jp/wp-content/uploads/2019/" + day[j+6]);
if(i%2 == 0){
headmsg1.setAttribute("visibility", "visible");
}
},1500); //8000 ➡ 1500
}
function congratulateAdmission(){ //音符記号ボタンのクリックで起動
renewal();
headmsg1.setAttribute("visibility", "hidden");
document.getElementById('text814').style.fillOpacity = "1.0";
document.getElementById('text824').style.fillOpacity = "1.0";
startPlay(); //starting
}
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="297mm" height="210mm" viewBox="0 0 297 210" id="kisho6">
<g transform="translate(0,0)">
<g><image id="f0" x="10" y="70" width="78" height="59" xlink:href="https://aidesign.lolipop.jp/wp-content/uploads/2019/12/92kisho-0.png"></g>
<g><image id="f1" x="110" y="70" width="78" height="63" xlink:href="https://aidesign.lolipop.jp/wp-content/uploads/2019/04/jitensha.png"></g>
<g><image id="f2" x="200" y="70" width="78" height="63" xlink:href="https://aidesign.lolipop.jp/wp-content/uploads/2019/04/dokusho.png"></g>
<g><image id="f3" x="10" y="145" width="265" height="66" xlink:href="https://aidesign.lolipop.jp/wp-content/uploads/2019/04/f1-kaban.png"></g>
<text id="text814" x="15" y="25" font-size="14" fill="deeppink" fill-opacity="0.1">あかりちゃん</text>
<text id="text824" x="15" y="50" font-size="24" fill="cyan" fill-opacity="0.1">クリスマスおめでとう</text>
</g>
<g id="frame">
<path id="around" fill="none" stroke="pink" stroke-width="0.1rem" d="M5,5 L275,5 L275,220 L5,220 L5,5 Z"/>
<image id="f4" x="0" y="0" width="23" height="18" xlink:href="https://aidesign.lolipop.jp/wp-content/uploads/2019/04/elephant.png">
<animateMotion dur="20s" calcMode="linear" repeatCount="indefinite"><mpath xlink:href="#around" /></animateMotion>
</g>
<text id="headmsg1" x="140" y="20" font-size="10" fill="darkgreen">音符記号をクリックして開始</text>
<a onclick="congratulateAdmission();" style="text-decoration:underline;">
<text x="10" y="250" font-size="8">♫音楽:甘茶の音楽工房より 『ヴァルス』♫ ©2019 TacM, Ver0.01</text>
</a>
</svg>
</body>
</html>