ブログ記事にパラメーターを与える方法
ブログに『皆さん、おはようございます』のようなあいさつ文を、夕方には『皆さん、こんばんは』と表示したいときがあります。これにはDate関数などを用いれば想定した結果を得ることができます。
スマホやPCが持つシステム要因によらず、あらかじめ決めておいた動作にしたい場合はURLにパラメーターを付属する方法があります。この場合は記事の中でURLに付属されたパラメーターを解析して所定の動作になるようにプログラミングしておかなければなりません。
童謡『赤とんぼ』の再生位置を指定する方法によってその解析例を以下に説明します。
URLの設定例1 https://www.youtube.com/watch?v=WkCe9BpIcpU
URLの設定例2 https://〇〇〇△△△.html?currentTime=28
開始位置：0 👈の数値に注目し音声のユーザーインターフェースに反映されることを確認してください。
再生ボタンの押下で、URLに指定したcurrentTime位置から『赤とんぼ』が再生されます。
プログラミングコード
<html>
<body bgcolor="aliceblue">
<h2>ブログ記事にパラメーターを与える方法</h2>
<p>ブログに『皆さん、おはようございます』のようなあいさつ文を、夕方には『皆さん、こんばんは』と表示したいときがあります。これにはDate関数などを用いれば想定した結果を得ることができます。</p>
<p>スマホやPCが持つシステム要因によらず、あらかじめ決めておいた動作にしたい場合はURLにパラメーターを付属する方法があります。この場合は記事の中でURLに付属されたパラメーターを解析して所定の動作になるようにプログラミングしておかなければなりません。</p>
<p>童謡『赤とんぼ』の再生位置を指定する方法によってその解析例を以下に説明します。</p>
<p style="font-size:14px;">URLの設定例1 <span style="font-size:20px;">https://www.youtube.com/watch?v=WkCe9BpIcpU</span><BR>
URLの設定例2 <span style="font-size:20px;">https://〇〇〇△△△.html?currentTime=28</span></p>
<div>開始位置：<span id="currenttime" style="color:deeppink;">0</span> <span style="vertical-align:top;">👈</span>の数値に注目し音声のユーザーインターフェースに反映されることを確認してください。</div>
<div>再生ボタンの押下で、URLに指定したcurrentTime位置から『赤とんぼ』が再生されます。</div>
<audio id="bgm" src="https://aidesign.lolipop.jp/wp-content/uploads/2016/08/JASRAC_000-0391-3_AkaTombo_xf_Music_Box.mp3" controls></audio>
<script>
let ProcName=location.href; //現在ページURLを参照
var param = location.search; //URLパラメータ文字列を取得する
var par=param.indexOf("currentTime="); //開始位置
console.log(param, par, "location.href="+ProcName);
var cur=0;
if(par>0){ //?currentTime=23
cur=param.substr(par+12); //➡
console.log("param="+param, "CUR="+cur);
document.getElementById("currenttime").innerHTML=cur;
document.getElementById("bgm").currentTime=cur;
}
</script>
</body>
</html>