年が明けてしばらく経ちますが。 - インストールレスプログラミング( ´ー`)

のんびりしてたらもう５日も経ってました。

最近はVBAからは離れていますが，仕事が始まればまたデータ処理で思い出すんだと思います。

VBAからはすこし離れていますが，しばらく前に興味を持ったJavaScriptの勉強をしているところです。

全然わからない　→　他人のコードを切り貼りしたり　ちょこっとずつ付け足していくとなんとなく物が作れるようになってきました。

とても役に立ちそうな言葉だと思いますし，ブラウザを基本とすれば大概いろいろつくれそうなものなんだなぁというところまでは来ています。

でも，ローカルのファイルの操作となると File API　とかいうやつを使わないといけないんだなぁ　面倒だなぁと思いながらそれでもいろいろといじってると，

HTA に出会いました。HTML Applications ってやつですね。

Windows10では少なくとも使えるみたいです。現在の職場ではOSはWindows10なので，少なくとも数年はいける。

JavaScript自身は HTML5 と CSS　とセットでたぶんずーっと使えそうな予感ですので，そちら側はブラウザを元とするものについてはいけそうです。

HTAになると，微妙に JScriptとかVBScriptになり，ちょこっとずつ仕様が変わるので，思った通りにいかないことも多々ありますが，

　ローカルファイルにアクセスできる
　セキュリティに関して制限が甘い(警告類があんまりでない)
　htmlで気軽に書いてるのになんか立派なアプリケーションぽく見える
　もちろんインストールとかいらない

など，私にとってはかなりの魅力を持ったもののようです。

数年戦えますし，JavaScriptの学習にも十二分にもなりますので，OfficeのVBAとJavaScriptと HTAで遊び続けてものにしようと思います。

JQueryもローカルにライブラリ落としとけば私の職場の環境でもつかえそうです。JQueryまで理解すればたぶん本職ではないプログラマには十分かなぁと思ったり。。

本はひたすら買い漁りました。かなり出費してしまいましたが，長く使える知識になってくれると思っています。

さて，作ったものを載せてみます。

元はPowerPointのVBAで作って授業中に使っていたタイマーと同じものなんですが，PowerPointってExcelのThisworkbookに相当するものがないので，他のスライドショーとの共存が難しいです。

基本はOneNote主体で授業を構成しているので，それでもいいんですが，PowerPointも使いたいよなぁと常々思っていました。

最初はブラウザで動くものをJavascriptで作り，満足していたんですが，表示の面でツールバーとかがいろいろ残るので不満が残るものが最初にできました。

CSSやJavascriptがフルに使えるという意味でそちらを優先するものも今後いろいろ試してはみますが，タイマーはコンパクトであってほしい。そこは譲れない。

なので，いろいろな制限をのむ形でHTAで作ってみました。メモ帳に張り付けて　文字コード UTF-8で保存します。拡張子はhtaで。。
音もなるように作ってるんですが，音を鳴らすためにはどこからかmp3を拾ってきて同じフォルダに pu.mp3 start.mp3 end.mp3 とリネームして入れてください。

www.kurage-kosho.info
こちらのページなどの音がおすすめかも。クレジット表示なしでも使っていいですよ，と書かれていますので，コンパクトさ優先の私にはありがたいです。

アプリケーションを聞いてきたら　Microsoft HTML アプリケーションホスト　みたいなやつを選んでください。

<!DOCTYPE HTML>
<html lang="ja">
<HTA:APPLICATION SCROLL="no" NAVIGABLE="yes" CAPTION="yes" />

<head>
  <title></title>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <!--CSS-->
  <style type="text/css">
    a.Link{
      text-decoration: none;
      display: block;
      width: 100%;
      height: 100%;
    }
    a.Timer{
      text-decoration: none;
      font-size:160px;
      color:red;
      display: block; 
      line-height: 1.1;
      font-family:"Comic Sans MS", "cursive";
      text-align:center;
    }
    a:hover{background-color:yellow;}
    table {
      border-collapse: collapse
    }
    table td{
      text-align:center;
      width:150px;
      height:50px;
      border:1px solid black;
      font-size: 40px;
    }
  </style>
  <!--JavaScript記述-->
  <script type="text/javascript">
    var spanMyTime;//時間 を 表示 する SPAN
    var spanlog;
    var time0;
    var timer;//経過時間のTimer
    var timeval;
    var pu= new ActiveXObject("MediaPlayer.MediaPlayer");
      pu.Volume=-10000; //音量を０に
      pu.FileName = "pu.mp3";
    var endSound= new ActiveXObject("MediaPlayer.MediaPlayer");
      endSound.Volume=-10000; //音量を０に
      endSound.FileName="end.mp3";
    var startSound=new ActiveXObject("MediaPlayer.MediaPlayer");
      startSound.Volume=-10000;
      startSound.FileName="start.mp3";
    //初期処理（各種DOMを取得）
    function init() {
      timer=null;
      resizeTo(480, 290);
      document.body.style.overflow = "hidden";
      spanMyTime = document.getElementById("mytime");
      spanlog=document.getElementById("log");
      var time = ['10:00', '8:00', '7:00', '6:00', '5:00','4:00', '3:00', '2:00', '1:00', '0:30', '0:20','0:10'];
      var timesec = ['600', '480', '420', '360', '300', '240', '180', '120', '60', '30', '20','10'];
      var html = ['<table>'];
      for (var c = 0; c < 4; c++) {
        html.push('<tr>');
        for (var r = 0; r < 3; r++) {
          html.push('<td><a class="Link" href="#" onclick="startTimer(' + timesec[c+4*r] + ',true)">');
          html.push(time[c + 4 * r]);
          html.push('</a></td>');
        }
      }
      spanMyTime.innerHTML = html.join('');
      spanlog.innerHTML="";
    }

    function startTimer(tm,flg) {
      pu.Volume=0;　　//音量最大に　　-10000～0 規定値 -600
      pu.stop();
      endSound.Volume=0;  //音量最大に
      endSound.stop();
      startSound.Volume=0;
      startSound.play();
      timeval = tm;
      if (flg==true) time0=tm;
      spanlog.innerHTML="";
      // 既に 開始 し て いる 場合 は、 何 も し ない
      if (timer!= null) {
          stopTimer();
          return;
      }
      spanMyTime.innerHTML = '<a class="Timer"  href="#" onclick="stopTimer()">'+ timeConv(timeval) +'</a>';
      timer = setInterval(interval, 1000);
    }
    function stopTimer() {
      if (timer!= null) {
          clearInterval(timer);
      }
      // timer に null を 代入 する
      timer = null;
      spanMyTime.innerHTML = '<a class="Timer"  href="#" onclick="startTimer('+timeval+',false)">' + timeConv(timeval) + '</a>';
      spanlog.innerHTML='<a href="#" onClick="init()"> BACK </a>　　　　<a href="#" onClick=startTimer('+time0+',false)> ReStart ' + timeConv(time0) + '</a>';
    }
    function interval() {
      // 経過 時間 を 表示
      timeval--;
      spanMyTime.innerHTML = '<a class="Timer"  href="#" onclick="stopTimer()">' + timeConv(timeval) + '</a>';
      if (timeval == 0) {
        clearInterval(timer);
        endSound.play();
        timer=null;
        spanlog.innerHTML='<a href="#" onClick="init()"> BACK </a>　　　　<a href="#" onClick=startTimer('+time0+',false)> ReStart ' + timeConv(time0) + ' </a>';
        spanMyTime.innerHTML='<a class="Timer"  href="#" onclick="startTimer('+time0+')">' + timeConv(timeval) + '</a>';
      } else {
        if (timeval % 5 == 0) pu.play();
        if (timeval < 5) pu.play();
      }
    }
    function timeConv(tm) {
      var fun;
      var byou;
      fun = Math.floor(tm / 60);
      byou = ("0" + tm % 60).slice(-2);
      return fun + ":" + byou;
    }
  </script>
<!--JavaScript ここまで-->
</head>
<body onload="init()">
    <span id="mytime"></span>
    <span id="log"></span>
</body>
</html>

ちなみに，音を鳴らすたびに微妙に時間はずれていきますので　１０分のを回すと音によるのかもしれませんが３秒くらいずれました。

気になる方は使えません。私は気にならないのでたぶん使います。

あとはBase64とかいうやつで文字列に直せば音もソースに組み込めるんでしょうか，そんな知識はないのでやってはいませんが，いろいろと奥は深いんでしょうね。。

今後もいろいろ試してみようと思っているところです。　