タイマーで複数の音を一定時間に繰り返し再生

前回の「タイマーで音を繰り返し再生」のときに、JavaScriptを使って1つの音を一定時間に繰り返し再生させることができた。

ところで、「iOS/Android で HTML5 の audio/video を任意のタイミングで再生する方法」に、次のように書かれていた。

ここで必要なオーディオファイルを全部ロードしてしまうと良さそうです。そうすれば後は好きなタイミングで音声を再生できます。


ということは、複数の音声ファイルをロードしておけば、後から複数の音を順番に再生することが可能なのでは?

5秒前後の音声データを3種類(それぞれOgg形式とACC形式で6つのファイル)を用意し、「playlist」という配列に曲順を覚えさせて、3曲を順番に繰り返し再生させた。

<!DOCTYPE html>
<HTML lang="ja">
<HEAD><TITLE>練習</TITLE></HEAD>
<BODY>
音楽再生<BR>
<AUDIO id="music1">
<SOURCE src="sample1.ogg" type="audio/ogg">
<SOURCE src="sample1.m4a" type="audio/mpeg">
</AUDIO>
<AUDIO id="music2">
<SOURCE src="sample2.ogg" type="audio/ogg">
<SOURCE src="sample2.m4a" type="audio/mpeg">
</AUDIO>
<AUDIO id="music3">
<SOURCE src="sample3.ogg" type="audio/ogg">
<SOURCE src="sample3.m4a" type="audio/mpeg">
</AUDIO>


<FORM name="musicform">
<INPUT id="playbutton" name="playbutton" type="button" value="再生" onClick="play()">
<INPUT id="stopbutton" name="stopbutton" type="button" value="停止" onClick="stop()" disabled><BR>
<INPUT name="timetext" type="text" value="" size="10" style="text-align: center">
</FORM>
<SCRIPT>
var repeatTimer;
var audio1 = document.getElementById("music1");
var audio2 = document.getElementById("music2");
var audio3 = document.getElementById("music3");
var playlist = [audio1, audio2, audio3];
var count = 0;

var button = document.getElementById("playbutton");
button.addEventListener("click",function() {
  for(var i = 0; i < playlist.length; i++) {
    if(i == 0) {
      playlist[i].play();
    } else {
      playlist[i].load();
    }
  }

}, false);
setInterval("displayTime()", 100);

function play() {
  document.musicform.playbutton.disabled = true;
  document.musicform.stopbutton.disabled = false;
  repeatTimer = setInterval(function() {
    count++;
    if(count == playlist.length) {
      count = 0;
    }
    playlist[count].play();

  }, 10000);
}

function stop() {
  document.musicform.playbutton.disabled = false;
  document.musicform.stopbutton.disabled = true;
  clearInterval(repeatTimer);
  count = 0;
  for(i = 0; i < playlist.length; i++) {
    playlist[i].pause();
    playlist[i].currentTime = 0;
  }

}

function displayTime() {
  var nowTime = new Date();
  document.musicform.timetext.value = setTwoDigit(nowTime.getHours()) + ":" + setTwoDigit(nowTime.getMinutes()) + ":" + setTwoDigit(nowTime.getSeconds());
}

function setTwoDigit(num) {
  var res = num;
  if(res < 10) {
    res = "0" + res;
  }
  return res;
}
</SCRIPT>
</BODY>
</HTML>


音楽再生



これで、10000ミリ秒(=10秒)ごとに「music1」「music2」「music3」と順に再生し、また「music1」に戻って…と繰り返し再生することができた。

ちなみに、今回の1つの音声データの長さが5秒以内、再生間隔は10000ミリ秒(=10秒)だが、試しに100ミリ秒(=0.1秒)に設定してみると、ほぼ一斉に3つの音声ファイルが再生されてぐちゃぐちゃになってしまった。

そして、今回もInternet Explorerでは、保存したHTMLファイルは再生できてもそれを埋め込んだこのページでの再生はできなかった。

タイマーで音を一定時間に繰り返し再生

iOSでのJavaScriptによる音の再生を調べていたときに、「iOS/Android で HTML5 の audio/video を任意のタイミングで再生する方法」内で気になることが書かれていた。

  • touch/mouseイベントの直接のハンドラ内でのみ有効で、タイマーを挟むとダメ

  • ユーザーイベント発生時に load() だけ呼び出し、後は任意のタイミングで play() すればよい

  • audio/videoの自動再生や再生タイミングはOSバージョンでコロコロかわる


  • とりあえず、「sample.ogg」や「sample.m4a」を5秒ほどの短い音声データにして、タイマー(今回はsetInterval)を使って10000ミリ秒(=10秒)間隔で再生させてみる。

    <!DOCTYPE html>
    <HTML lang="ja">
    <HEAD><TITLE>練習</TITLE></HEAD>
    <BODY>
    音楽再生<BR>
    <AUDIO id="music">
    <SOURCE src="sample.ogg" type="audio/ogg">
    <SOURCE src="sample.m4a" type="audio/mpeg">
    </AUDIO>
    <FORM id="musicform">
    <INPUT id="playbutton" type="button" value="再生">
    </FORM>
    <SCRIPT>
    var audio = document.getElementById("music");
    var button = document.getElementById("playbutton");
    button.addEventListener("click",function() {
      audio.load();
      setInterval(function() {
        audio.play();
      },10000);

    }, false);
    </SCRIPT>
    </BODY>
    </HTML>


    「再生」ボタンをクリックすると、10秒後に1回目の音が流れ、その後10秒間隔(再生時間も含む)で音が繰り返し再生される。

    …クリックしたときには音が再生されない?

    というわけで、次はINPUTタグにonClickを使って関数を指定して再生してみる。ついでに、タイマーの停止を行う処理を追加

    さらに、再生間隔を確認するために時計も表示させる。1秒間隔では実際の時計の秒針との表示誤差が大きいと考え、今回は100ミリ秒(=0.1秒)間隔で更新させる。

    <!DOCTYPE html>
    <HTML lang="ja">
    <HEAD><TITLE>練習</TITLE></HEAD>
    <BODY>
    音楽再生<BR>
    <AUDIO id="music">
    <SOURCE src="sample.ogg" type="audio/ogg">
    <SOURCE src="sample.m4a" type="audio/mpeg">
    </AUDIO>
    <FORM name="musicform">
    <INPUT id="playbutton" type="button" value="再生" onClick="play()">
    <INPUT id="stopbutton" type="button" value="停止" onClick="stop()"><BR>
    <INPUT name="timetext" type="text" value="" size="10" style="text-align: center">
    </FORM>
    <SCRIPT>
    var repeatTimer;
    var audio = document.getElementById("music");
    var button = document.getElementById("playbutton");
    button.addEventListener("click",function() {
      audio.load();
    }, false);
    setInterval("displayTime()", 100);

    function play() {
      audio.play();
      repeatTimer = setInterval(function() { audio.play(); }, 10000);
    }


    function stop() {
      clearInterval(repeatTimer);
    }


    function displayTime() {
      var nowTime = new Date();
      document.musicform.timetext.value = setTwoDigit(nowTime.getHours()) + ":" + setTwoDigit(nowTime.getMinutes()) + ":" + setTwoDigit(nowTime.getSeconds());
    }

    function setTwoDigit(num) {
      var res = num;
      if(res < 10) {
        res = "0" + res;
      }
      return res;
    }

    </SCRIPT>
    </BODY>
    </HTML>


    あれ?やはりボタンクリック10秒後に音がなる。

    では、ボタンのイベントリスナーで「audio.load()」でなく「audio.play()」にすれば、読み込みと再生を一度に行ってくれるので、それ以降は再生のみ行うことが可能なはず。

    ついでに、ボタンの有効化・無効化の設定にも挑戦。最初は「停止」ボタンを無効化しておき、ボタンをクリックするごとにそのボタンを無効化して相手のボタンを有効化させる。そのために、INPUTタグにname属性を追加

    <!DOCTYPE html>
    <HTML lang="ja">
    <HEAD><TITLE>練習</TITLE></HEAD>
    <BODY>
    音楽再生<BR>
    <AUDIO id="music">
    <SOURCE src="sample.ogg" type="audio/ogg">
    <SOURCE src="sample.m4a" type="audio/mpeg">
    </AUDIO>
    <FORM name="musicform">
    <INPUT id="playbutton" name="playbutton" type="button" value="再生" onClick="play()">
    <INPUT id="stopbutton" name="stopbutton" type="button" value="停止" onClick="stop()" disabled><BR>
    <INPUT name="timetext" type="text" value="" size="10" style="text-align: center">
    </FORM>
    <SCRIPT>
    var repeatTimer;
    var audio = document.getElementById("music");
    var button = document.getElementById("playbutton");
    button.addEventListener("click",function() {
      audio.play();
    }, false);

    setInterval("displayTime()", 100);

    function play() {
      document.musicform.playbutton.disabled = true;
      document.musicform.stopbutton.disabled = false;

      repeatTimer = setInterval(function() { audio.play(); }, 10000);
    }

    function stop() {
      document.musicform.playbutton.disabled = false;
      document.musicform.stopbutton.disabled = true;

      clearInterval(repeatTimer);
    }

    function displayTime() {
      var nowTime = new Date();
      document.musicform.timetext.value = setTwoDigit(nowTime.getHours()) + ":" + setTwoDigit(nowTime.getMinutes()) + ":" + setTwoDigit(nowTime.getSeconds());
    }

    function setTwoDigit(num) {
      var res = num;
      if(res < 10) {
        res = "0" + res;
      }
      return res;
    }
    </SCRIPT>
    </BODY>
    </HTML>


    音楽再生



    同じ内容をこのページに貼りつけたところ、上のボタンをクリックして分かるように、前回と同様Internet Explorerでは再生できないが、OperaやGoogle Chromeでは再生できる。HTMLファイルはInternet Explorerで動くのに、このページに貼って動かないのは何がいけないのだろう?

    さておき、思った通り、一度再生してしまえばあとはタイマーの中でも繰り返し再生できた。でも、「停止」ボタンを押して繰り返しは止まるが、なっている途中の音が止まるわけではない。

    JavaScriptプログラミング講座 オーディオについて(HTMLAudioElement)」によれば、音を止めるための処理が必要らしい。

    <!DOCTYPE html>
    <HTML lang="ja">
    <HEAD><TITLE>練習</TITLE></HEAD>
    <BODY>
    音楽再生<BR>
    <AUDIO id="music">
    <SOURCE src="sample.ogg" type="audio/ogg">
    <SOURCE src="sample.m4a" type="audio/mpeg">
    </AUDIO>
    <FORM name="musicform">
    <INPUT id="playbutton" name="playbutton" type="button" value="再生" onClick="play()">
    <INPUT id="stopbutton" name="stopbutton" type="button" value="停止" onClick="stop()" disabled><BR>
    <INPUT name="timetext" type="text" value="" size="10" style="text-align: center">
    </FORM>
    <SCRIPT>
    var repeatTimer;
    var audio = document.getElementById("music");
    var button = document.getElementById("playbutton");
    button.addEventListener("click",function() {
      audio.play();
    }, false);
    setInterval("displayTime()", 100);

    function play() {
      document.musicform.playbutton.disabled = true;
      document.musicform.stopbutton.disabled = false;
      repeatTimer = setInterval(function() { audio.play(); }, 10000);
    }

    function stop() {
      document.musicform.playbutton.disabled = false;
      document.musicform.stopbutton.disabled = true;
      clearInterval(repeatTimer);
      audio.pause();
      audio.currentTime = 0;

    }

    function displayTime() {
      var nowTime = new Date();
      document.musicform.timetext.value = setTwoDigit(nowTime.getHours()) + ":" + setTwoDigit(nowTime.getMinutes()) + ":" + setTwoDigit(nowTime.getSeconds());
    }

    function setTwoDigit(num) {
      var res = num;
      if(res < 10) {
        res = "0" + res;
      }
      return res;
    }
    </SCRIPT>
    </BODY>
    </HTML>


    音楽再生



    これで、タイマーによる繰り返しも再生中の音も止まった。

    そして、PC内に保存したHTMLファイルではInternet Explorerで再生できるのに、このページに貼りつけたものがInternet Explorerで再生できない問題は未だに解決できていない…。

    JavaScriptで音を再生

    JavaScriptとHTML5を組み合わせると、音が再生できるらしい。

    HTML5ってどうするのだろう?と思ったら、最初に文字を少し足すだけでいいようだ。

    音の再生には、AUDIOタグとSOURCEタグを使って音源となるファイルを指定する。

    HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット」や「iOS における HTML5 の audio 要素に関する制約を克服する」によれば、ブラウザごとに対応するファイル形式が違うようだ。

    二つのサイトで微妙に内容が異なる上、個人的に内容がよく理解できなところもあったものの、更新日を参考にまとめるとおそらくこんな感じか?

    ブラウザ名WAVE
    PCM
    [.wav]
    Ogg
    Vorbis
    [.ogg]
    MP3
    [.mp3]
    AAC
    [.m4a]
    Chrome×
    Firefox
    Internet Explorer××
    Opera×××
    Safari
    ※Chromiumを除く。Android版は不明。

    この表とMP3のライセンスの話から、Ogg VorbisとAACの二種類位のファイルを準備すればよさそう。

    とりあえず「音 素材 無料」で検索して適当な音源(WAV・MP3・OGGなど)を用意し、フリーウェア「Audacity Portable」で読み込んで、[ファイル] -> [オーディオの書き出し] をしてOgg VorbisとAACの二種類のファイル「sample.ogg」「sample.m4a」を作成し、これらと同じフォルダに以下のHTMLファイルを作成。

    赤字がHTML5の宣言。
    <!DOCTYPE html>
    <HTML lang="ja">
    <HEAD><TITLE>練習</TITLE></HEAD>
    <BODY>
    音楽再生<BR>
    <AUDIO id="music">
    <SOURCE src="sample.ogg" type="audio/ogg">
    <SOURCE src="sample.m4a" type="audio/mpeg">
    </AUDIO>
    <SCRIPT>
    var audio = document.getElementById("music");
    audio.load();
    audio.play();
    </SCRIPT>
    </BODY>
    </HTML>


    Windows + Internet Explorer では無事音が流れたが、iPad + FileExplorer では音は流れない。

    よくよく調べてみると、先ほどの「iOS における HTML5 の audio 要素に関する制約を克服する」の中に次のように書かれていた。

    自動再生
    モバイル版 Safari では、オーディオ・ファイルをページのロード時に自動再生することはできません。オーディオ・ファイルをロードできるのは、ユーザーによるタッチ (クリック) イベントによってのみです。以下のように HTML マークアップ内で autoplay 属性を指定しても、モバイル版 Safari はこの属性を無視し、ページのロード時にファイルを再生しません。
    <audio id="audio" src="audio_file.mp3" autoplay></audio>


    ではどうする?と調べていたら、「iOS における HTML5 の audio 要素に関する制約を克服する」のページ中ほどの「オーディオ・ストリームのロード」の項目や、「iOS/Android で HTML5 の audio/video を任意のタイミングで再生する方法」によれば、ボタンにリスナーをつけて、クリックのタイミングで実行させればよいらしい。また、「audio.load();」は書かなくても再生するようだ。

    <!DOCTYPE html>
    <HTML lang="ja">
    <HEAD><TITLE>練習</TITLE></HEAD>
    <BODY>
    音楽再生<BR>
    <AUDIO id="music">
    <SOURCE src="sample.m4a" type="audio/mpeg">
    <SOURCE src="sample.ogg" type="audio/ogg">
    </AUDIO>
    <FORM name="musicform">
    <INPUT name="playbutton" type="button" value="再生">
    </FORM>
    <SCRIPT>
    var audio = document.getElementById("music");
    var button = document.getElementById("playbutton");
    button.addEventListener("click",function() {
      audio.play();
    }, false);

    </SCRIPT>
    </BODY>
    </HTML>


    …あれ?ならない。

    Interenet Explorerで[F12]キーを押してコンソールを出したり消したりしていたせいか、「Webページエラー」なるダイアログが表示されるようになった。そして、次のように表示された。

    行: 16
    エラー: 未定義または NULL 参照のプロパティ 'addEventListener' は取得できません


    どうやら、「HTMLのname属性とid属性の違いについて」で質問された方と同じミスをしていたらしい。

    <INPUT name="abc"> なら getElementsByName

    <INPUT id="abc"> なら getElementById

    と使いわけなければならない。

    さらに(私にとってとてもありがたい)その返答を読み進めると、どうやら「getElementsByName」は配列扱いで、何番目の要素かを調べなければならないそうなので、「name」より「id」を使った方が分かりやすく作れそう。

    <!DOCTYPE html>
    <HTML lang="ja">
    <HEAD><TITLE>練習</TITLE></HEAD>
    <BODY>
    音楽再生<BR>
    <AUDIO id="music">
    <SOURCE src="sample.m4a" type="audio/mpeg">
    <SOURCE src="sample.ogg" type="audio/ogg">
    </AUDIO>
    <FORM name="musicform">
    <INPUT id="playbutton" type="button" value="再生">
    </FORM>
    <SCRIPT>
    var audio = document.getElementById("music");
    var button = document.getElementById("playbutton");
    button.addEventListener("click",function() {
      audio.play();
    }, false);

    </SCRIPT>
    </BODY>
    </HTML>


    結果はこんな感じ。

    音楽再生


    このHTMLファイルを Windows + Internet Explorer で動作確認できた。

    しかし、このページに埋め込んだところ、なぜかInternet Explorerでは再生できない。OperaとGoogle Chromeでは再生できた。…謎である。

    また、やはり iPad + FileExplorer では、HTMLが表示されても音が出ない。

    あれこれ試した結果、WindowsPCの共有フォルダからFileExplorerを使ってiPadの「ローカル」内にHTMLファイルと音声データを保存し、保存したHTMLファイルを開くと音がなった。

    最終的にはHTMLファイルをiPadに入れて持ち歩く予定だったが、音声ファイルを扱うJavaScriptを含むHTMLファイルをWindowsPCで作成したときは、毎回iPad内にコピーをする必要があることがわかった。

    FileExplorerを使用して、更新前のファイルが存在する状態で更新したHTMLファイルをコピーをすると、iPad内で新しいファイルに連番をつけて保存してしまう仕様になっているようなので、保存前に古いファイルを消しておかなくてはならない。

    現時点でのFileExplorerでは、ファイル名の変更ができないようだ。

    とにかく、JavaScriptを使ってiPadでも音声ファイルを再生することができた。

    setInterval と function と配列の戻り値

    setInterval と function を複数組み合わせるとどうなるか確認。

    ついでに、function の戻り値を配列で受け取って処理してみた。

    <HTML>
    <HEAD><TITLE>練習</TITLE></HEAD>
    <BODY>
    <FORM name="timeform">
    現在時刻<BR>
    <INPUT name="timetext1" type="text" size="40"><BR>
    <INPUT name="timetext2" type="text" size="40"><BR>
    </FORM>
    <SCRIPT>

    setInterval("displayOne()",1000);
    setInterval("displayTwo()",1000);

    function displayOne() {
      var nowData = getNowData();
      document.timeform.timetext1.value = nowData[0] + "年" + nowData[1] + "月" + nowData[2] + "日(" + nowData[3] + ")" + nowData[4] + "時" + nowData[5] + "分" + nowData[6] + "秒";
    }

    function displayTwo() {
      var nowData = getNowData();
      document.timeform.timetext2.value = nowData[0] + "/" + setTwoDigit(nowData[1]) + "/" + setTwoDigit(nowData[2]) + "(" + nowData[3] + ")" + setTwoDigit(nowData[4]) + ":" + setTwoDigit(nowData[5]) + ":" + setTwoDigit(nowData[6]);
    }

    function getNowData() {
      var nowData = new Date();
      var yearStr = nowData.getFullYear();
      var monthStr = nowData.getMonth() + 1;
      var dateStr = nowData.getDate();
      var weekNum = nowData.getDay();
      var weekName = ["日","月","火","水","木","金","土"];
      var hourStr = nowData.getHours();
      var minStr = nowData.getMinutes();
      var secStr = nowData.getSeconds();
      var res = [yearStr, monthStr, dateStr, weekName[weekNum], hourStr, minStr, secStr];
      return res;
    }

    function setTwoDigit(num) {
      var res = num;
      if(res < 10) {
        res = "0" + res;
      }
      return res;
    }
    </SCRIPT>
    </BODY>
    </HTML>


    結果は次のような感じ。

    現在時刻


    リアルタイムで時刻表示

    JavaScriptにてリアルタイムで時刻表示を行う場合、どうやらFORMタグとINPUTタグを使うようだ。

    <HTML>
    <HEAD><TITLE>練習</TITLE></HEAD>
    <BODY>
    <FORM name="timeform">
    現在時刻
    <INPUT name="timetext" type="text" size="40">
    </FORM>
    <SCRIPT>
    setInterval(function() {
      var nowData = new Date();
      var yearStr = nowData.getFullYear();
      var monthStr = nowData.getMonth() + 1;
      var dateStr = nowData.getDate();
      var weekNum = nowData.getDay();
      var weekName = ["日","月","火","水","木","金","土"];
      var hourStr = nowData.getHours();
      var minStr = nowData.getMinutes();
      var secStr = nowData.getSeconds();
      document.timeform.timetext.value = yearStr + "年" + monthStr + "月" + dateStr + "日(" + weekName[weekNum] + ")" + setTwoDigit(hourStr) + ":" + setTwoDigit(minStr) + ":" + setTwoDigit(secStr);
    }, 1000);

    function setTwoDigit(num) {
      var res = num;
      if(res < 10) {
        res = "0" + res;
      }
      return res;
    }
    </SCRIPT>
    </BODY>
    </HTML>


    結果はこんな感じ。

    現在時刻


    FORMタグのname属性値であるtimeformと、INPUTタグのname属性値であるtimetextを「.」でつなげ、valueに対して値を代入すればいいらしい。

    「setInterval(実行する内容,実行する間隔);」で、指定した「実行する内容」を「実行する間隔(ミリ秒=1/1000秒)」で繰り返してくれるらしい。今回は1000ミリ秒(1秒)に1回、現在時刻の更新をさせてみた。

    次のように実行内容を関数として書き出してもよいらしい。


    <HTML>
    <HEAD><TITLE>練習</TITLE></HEAD>
    <BODY>
    <FORM name="timeform">
    現在時刻
    <INPUT name="timetext" type="text" size="40">
    </FORM>
    <SCRIPT>
    setInterval("displayTime()",1000);

    function displayTime() {
      var nowData = new Date();
      var yearStr = nowData.getFullYear();
      var monthStr = nowData.getMonth() + 1;
      var dateStr = nowData.getDate();
      var weekNum = nowData.getDay();
      var weekName = ["日","月","火","水","木","金","土"];
      var hourStr = nowData.getHours();
      var minStr = nowData.getMinutes();
      var secStr = nowData.getSeconds();
      document.timeform.timetext.value = yearStr + "年" + monthStr + "月" + dateStr + "日(" + weekName[weekNum] + ")" + setTwoDigit(hourStr) + ":" + setTwoDigit(minStr) + ":" + setTwoDigit(secStr);
    }

    function setTwoDigit(num) {
      var res = num;
      if(res < 10) {
        res = "0" + res;
      }
      return res;
    }
    </SCRIPT>
    </BODY>
    </HTML>


    結果は…当然変わらない。

    現在時刻


    実行内容を「displayTime()」という関数名で定義して、「setInterval("実行する関数名",実行する間隔);」と書いて実行させる。

    「setInterval」は、関数名の前後を「"」で囲むこと、だそうだ。

    プログラムが動かない場所を特定する方法

    いつものことだが、ちょくちょくプログラム入力中に間違ってしまう。

    Javaなどはコンパイル時に何行目がこうだから悪いだの言うし、他の言語も実行中に止まったところを教えてくれるが、JavaScriptはスネてしまい(?)プログラムが実行できなくなった先を表示しないため、どこが悪いのかさっぱりわからない。

    そこで、ここまでは動いているんじゃないかな?というところに、以下の1行を入れてみた。

    document.write("ok");


    「ok」と表示されれば、そこまでは無事動いている、ということが分かる。もっとも、その先のどこでどのように間違っているか、少しずつずらして調べていくので時間がかかるが…。

    もしも長いプログラムになったら、きっと大変なんだろうな。

    自作関数内で止まった時は、さっぱり気づかず苦労した。

    JavaScriptのデバッグが捗る!コンソールにログを出力する方法」という記事を発見。Chromeでのコンソールの使い方と、コンソールへの出力方法がまとめられている。

    Internet Explorerでも、[F12]キーを押して「コンソール」をクリックすれば準備完了。

    …あとは、これを使いこなせるだろうか?

    JavaScriptで日時データ表示

    次に、JavaScriptで日時データの表示に挑戦。


    <HTML>
    <HEAD><TITLE>練習</TITLE></HEAD>
    <BODY>
    練習<BR>
    <SCRIPT>
    var nowData = new Date();
    var yearStr = nowData.getFullYear();
    var monthStr = nowData.getMonth() + 1;
    var dateStr = nowData.getDate();
    var weekNum = nowData.getDay();
    var weekName = ["日","月","火","水","木","金","土"];
    var hourStr = nowData.getHours();
    var minStr = nowData.getMinutes();
    var secStr = nowData.getSeconds();
    document.write(yearStr + "年" + monthStr + "月" + dateStr + "日(" + weekName[weekNum] + ")" + hourStr + "時" + minStr + "分" + secStr + "秒");
    </SCRIPT>
    </BODY>
    </HTML>


    「.getMonth()」で月数を得たときに「+1」するのは、月が0〜11で考えられているため。

    また、時間、分、秒を求めるときは、それぞれ最後に「s」がつくので忘れずに。

    結果は以下の通り。

    練習


    さらに、赤字の行を追加。

    <HTML>
    <HEAD><TITLE>練習</TITLE></HEAD>
    <BODY>
    練習<BR>
    <SCRIPT>
    var nowData = new Date();
    var yearStr = nowData.getFullYear();
    var monthStr = nowData.getMonth() + 1;
    var dateStr = nowData.getDate();
    var weekNum = nowData.getDay();
    var weekName = ["日","月","火","水","木","金","土"];
    var hourStr = nowData.getHours();
    var minStr = nowData.getMinutes();
    var secStr = nowData.getSeconds();
    document.write(yearStr + "年" + monthStr + "月" + dateStr + "日(" + weekName[weekNum] + ")" + hourStr + "時" + minStr + "分" + secStr + "秒");
    document.write("<BR>");
    var weekEName = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
    document.write(yearStr + "/" + monthStr + "/" + dateStr + "(" + weekEName[weekNum] + ")" + hourStr + ":" + minStr + ":" + secStr);

    </SCRIPT>
    </BODY>
    </HTML>


    結果はこんな感じ。

    練習


    うーん…秒が一桁の時、「:」でつないで表示する際には二桁で表示させたい。できれば、時や分も。

    functionを使えばよさそう。ということで、さっそく赤字を追加して確認。

    <HTML>
    <HEAD><TITLE>練習</TITLE></HEAD>
    <BODY>
    練習<BR>
    <SCRIPT>
    var nowData = new Date();
    var yearStr = nowData.getFullYear();
    var monthStr = nowData.getMonth() + 1;
    var dateStr = nowData.getDate();
    var weekNum = nowData.getDay();
    var weekName = ["日","月","火","水","木","金","土"];
    var hourStr = nowData.getHours();
    var minStr = nowData.getMinutes();
    var secStr = nowData.getSeconds();
    document.write(yearStr + "年" + monthStr + "月" + dateStr + "日(" + weekName[weekNum] + ")" + hourStr + "時" + minStr + "分" + secStr + "秒");
    document.write("<BR>");
    var weekEName = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
    document.write(yearStr + "/" + monthStr + "/" + dateStr + "(" + weekEName[weekNum] + ")" + setTwoDigit(hourStr) + ":" + setTwoDigit(minStr) + ":" + setTwoDigit(secStr));

    function setTwoDigit(num) {
      var res = num;
      if(res < 10) {
        res = "0" + res;
      }
      return res;
    }

    </SCRIPT>
    </BODY>
    </HTML>


    結果は次の通り。

    練習


    満足。
    (^v^)

    文字コードの設定

    さっそくJavaScriptの練習をしてみた。

    超シンプルに、Windowsのメモ帳で次のように書いた。

    <HTML>
    <HEAD>
    <TITLE>練習</TITLE>
    </HEAD>
    <BODY>
    練習<BR>
    <SCRIPT>
    alert("OK");
    </SCRIPT>
    </BODY>
    </HTML>

    名前を付けて保存するとき、ファイルの種類を「すべてのファイル」にして、「practice.html」という名前で保存した。

    WindowsでこのファイルをダブルクリックしてInternet Explorerで開くと、「練習」と画面に表示され、アラートに「OK」の文字が表示された。どうやら成功だ。

    このファイルを共有フォルダに置き、iPadでFileExplorerを起動してこのファイルを開くと…ん?「練習」という漢字が文字化けしている!

    いろいろ調べたところ、どうやら文字コードを明示する必要があるらしい。

    まずは、以下のように赤字部分を追加。

    いろいろ調べたところ、メモ帳標準の「ANSI」のままではiOSで表示する際に文字化けすることがわかった。

    <HTML>
    <HEAD>
    <TITLE>練習</TITLE>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </HEAD>
    <BODY>
    練習<BR>
    <SCRIPT>
    alert("OK");
    </SCRIPT>
    </BODY>
    </HTML>

    そしてそこで、再びメモ帳で「名前を付けて保存」を行い、ファイル名はそのまま、ファイルの種類は「すべてのファイル」、文字コードを「UTF-8」に変更して保存、上書き確認に「はい」と答える。

    iPadのFileExplorerは、一度その場所を開くとファイルが更新されても反映されないので、ひとまず別の場所にアクセスしてから、あるいは一つ上のフォルダに戻ってから、再びHTMLファイルのある場所を開き、目的のHTMLファイルにアクセスしなければならない。

    今度はちゃんと「練習」と表示された。

    <8/18追記>
    どうやら、METAタグで明示しなくても、単純にUTF-8で保存するだけでよいようだ。
    無事iPadでも文字化けすることなく表示するようになった。

    iOSで動くプログラムをつくりたい!JavaScriptに挑戦

    最近動きが悪くなってきたiPad第三世代だが、それでもまだまだ仕事で活躍してくれる。

    そんな中、大それたことはできなくてよいがちょっとした機能がほしい、と思うことがよくある。

    昔から多少のプログラム言語は扱ってきたがバリバリ作れるほどではないし、今からガッツリとプログラムの勉強をする時間はなかなかとれない。

    比較的簡単にできて、元手がかからず、できればWindowsやLinuxなどの他のOSでも利用したい。

    そんなことを考えているうちに、一つのプログラム言語を思いついた。

    それがJavaScriptだ。



    仕事で必要だったこともあり、無料アプリ大好きな自分が使用している数少ない有料アプリの一つ「FileExplorer」(今日の時点では600円)。

    無料版の「FileExplorer Free」もある。

    有料版と無料版の違いは、「iPhone・iPadからファイルサーバ上のファイルを開く」によると、次の通り。

  • 無料版は接続先が1つしか保存できない

  • 有料版は複数の外部サービス(WebDAV・Dropbox・Google Drive・OneDrive・box)に対応している


  • さらに同サイトでは、アプリ内課金によるアップグレードと有料版の購入との違いについても書かれている。

    接続先の保存が1か所でもよく、外部サービスを利用しないのなら、無料版でもよいかも。

    無料版の使い方について書かれた「【これは便利!】第3回 FileExplorerアプリ を利用して iPhoneから無線LANルータ経由でNASへアクセスする」や、有料版の使い方について書かれた「クラウドファイルの一括管理ができる!FileExplorerが便利すぎた「2014年版」」は参考になる。



    WindowsPCでキーボードを使ってJavaScript入りHTMLファイルを作成し、iPadでFileExplorerを使ってWindowsPCの共有フォルダからJavaScript入りHTMLファイルを得れば、作るのも楽だし複数のOSで動作確認もできる。

    JavaScriptによるプログラミングは、iPadではFileExplorerでHTMLファイルとして管理できるため、他のアプリと違ってインストール・アンインストールが不要な点もよい。

    昔覚えたHTMLと組み合わせればなんとかなりそうだ。



    さっそくJavaScriptについて調べると、まずはJavaScriptが動作するか確認が必要とのこと。

    あなたのブラウザでJavaScriptを有効にする方法」で、現時点でJavaScriptが有効かどうか、自分のブラウザのJavaScriptの有効化する方法が分かる。

    WindowsPC、iPad、Android携帯電話、いずれもJavaScriptは有効になっていた。

    また、「Windows標準のテキストエディタ「メモ帳」を使いこなそう」でメモ帳の使い方を、「JavaScript入門」でJavaScriptを、それぞれお勉強。

    なんとかなる…かな?



    ちなみに、「iPadだけでアプリ開発!アプリ&環境まとめ」にてiPadでJavaScriptを作成する方法も見つけたが、やはりキーボードで入力したいし、これまでに書いてきたようにiPadの動きも悪いし…ということで、今回はパス。

    マキノ高原キャンプ場の小川は気持ちいい

    今年は、「マキノ高原キャンプ場」へ行ってきた。

    ここでは、林間、高原、広場、展望、川、森の隠れ家と、6か所からサイトが選べる。

    やはり暑い8月なので、直射日光を避けることができるよう林間を選択した。

    すぐ隣には膝下までの水位の小川が流れていた。

    我が家の愛犬チワワは水が嫌いだが、飼い主に導かれるまま頑張って川に足先がつかるところまでは入ることができた。

    のんびりとした時間を過ごすことができた…が、とにかく暑かった。

    ここの標高は300mだそうで、他よりは気温が3〜5度低いようだが、全国で35度を超える日が続いていたこともあり、おそらく行った日も30度を超えていたものと思われる。

    そんな中、テニスコートを借りて2時間遊んでみた。
    (^-^;

    汗が止まらない。ドリンクはすぐ空になり、途中で買い足した。

    テニスコートはたくさんあったが、自分たち以外はだれも使用しておらず、おそらくこんな暑い日に借りたのは自分たちくらいではなかろうか…。

    ちなみに、テニスに参加しなかった仲間がチワワとともにテントでお留守番だったが、日が上がれば林間でも日が当たり、動く木陰を追いかけていても暑かったらしい。

    夜にはノコギリクワガタやコクワガタをゲット。

    網や虫かごを持つ少年や親だけでなく、ガッツリ虫採りの格好をした大人も何人も見かけた。

    そのガッツリ派を観察していると、暗い木々の方はほとんどチェックすることなく、灯りがついている炊事棟を中心に回っているようだった。

    持っている網を動かしているところを見ると、どうやら蛍光灯付近に止まっているターゲットを捕獲していたようだ。

    蜜と思しきものが出ている個所を昼間に見つけて、夜に何回か回って見たが、そこにいたのはゴキブリやカミキリなど、他の虫ばかりだった。

    羽化したばかりのセミや、超巨大なナメクジも見つけた。

    二晩とも、みんなですぐ近くの温泉へ行った。

    当然他の利用者も同じことを考えているようで、閉館1時間前に行くと、中は人であふれかえっていた。

    2日目の夕方、川遊びから戻ると、おそらく多くの人がそこから入って来たであろう通路入口に2台の車が停まっていた。

    その入り口から入り、そこから出ようとして車の向きを変えておいたのに、帰りの出口がふさがれてしまった。

    3日目の朝、こちらも向こうも片付けに入っていたが、その2台はなかなか出ようとしない。

    正午までに出ればよいが、5分前になっても向こうは動く気配がなく、のんびり片付けを続けているようだった。

    幸い周囲の車が別の出口から出て行ったようでスペース的にゆとりができていたこともあり、こちらも別ルートを探して出発した。

    確かにその日は利用者も多かったが、場所がまだあるにもかかわらず通路入口をふさぐのはいかがなものか。

    思いやりの心を大切にしよう、と改めて思った。


    calendar

    S M T W T F S
    1234567
    891011121314
    15161718192021
    22232425262728
    2930     
    << April 2018 >>

    selected entries

    categories

    archives

    links

    profile

    書いた記事数:87 最後に更新した日:2017/12/31

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM