月別アーカイブ: 2015年9月

2015秋の花々

概要

supermoon中秋の名月、スーパームーンが過ぎて、秋が深まってきました。秋の花々を24枚の写真に収めました。デジカメ販売会社製やパソコン、スマホ備付けのスライドショーで閲覧することができます。

BGMが流れ、切り替え効果で味を付けながら思い出の写真を見ることができますが、既存の表示には飽きを感じているマニア向けにスライドショーを自作しました。発展途上で既存のものと勝負する段階ではないので、スライドビューと呼ぶことにしました。

作り方

1200-2400➊写真枚数が24枚と多くないので、規則正しい6行4列の集合写真にする。ペイントの表示タグでルーラー、グリッド線、ステータスバーにチェックマークを入れ合成写真を作成する。

➋ブログやホームページでアップロードする画像サイズは2MBに制限されているので、デジカメで作成した画像を1%に縮小する。リサイズ超簡単などのフリーソフトでリサイズする。

➌リサイズしても2MBを超えることがあり、レンタルサーバーのユーザー専用ページからログインし、PHP.INIを修正してアップロード可能画像サイズを20MB等に変更する。

➍集合写真をアップロードし、URLアドレスを抑える。

➎drawImage関数を使って1枚の集合写真からトリミング画像を取り出す。

➏input type=”number”を使って、表示時間と表示枚数を設定するコードを作成する。

➐1ページに1~4枚の写真を同時表示するコードを作成する。

➑同時表示枚数に応じた画像サイズを処理する。

➒主要ブラウザの最少機能に合わせた描画仕様を決定する。

サンプル実行例と操作方法

表示時間 上図の〇印付近にカーソルを当てると、上下マークが現れます。上下スイッチにより数値を変更して右の決定キーをクリックして表示時間や表示枚数を入力します。上下マークが現れないブラウザでは左端で数字をキー入力します。

 

 

 


      

参照

音楽は怪しくコミカルな甘茶の音楽工房の『夜のワルツ』です。

終わりに

Webプログラミング書法関連で多くのプログラムコードを公開しました。今回、サンプルコードは公開されませんが、WebProg5をひな形にして作成されました。

順を追って作成すれば、スライドビューにたどり着くことでしょう。表示画面はウィジェット欄への表示を抑制したフルサイズ仕様です。

 

生命力あふれる萩の花

萩-3秋にはが似合います。

萩の花言葉には「思案」「内気」「想い」「柔軟な精神」「柔らかな心」と面映ゆさ・奥ゆかしさを基調としていますが最後に「前向きな恋」があります。

多くの花々が万葉集に登場します。「萩」はことのほかよく詠まれています。ここではラストイメージに響いた話に進むことにします。

萩の紅い花びらは女性器のデリケートゾーンに似ていて、ある地区ではまさに女性器そのものに近い呼称もあるようです。

秋萩の歌

 

鹿の角萩-1萩とともに取り上げられる牡鹿の角は男性生殖器を象徴しています。

万葉集には艶っぽくポルノチックで深遠な和歌が多く謳われています。

万葉集から2句、取り上げました。深まる秋の夜長にまんようびとの心意気と風流を偲ぶことにします。

WebProg6

親しみのある動物の絵柄をモチーフにした絵そろえゲームです。同じ絵が2つないし3つ現れたらファンファーレが鳴ります。くじらは幸運を呼びます。ゲームの作り方はWebプログラミング書法を参照してください。


切り換えスピード     

サンプルコード6
<!DOCTYPE html>   <!-- 運試し6 -->
<html>            <!-- Fortune-06 -->
  <head>
    <script type="text/javascript">
    var img0 = new Image();   //はずれ画像、当たり画像、大当たり画像
    img0.src = "https://aidesign.lolipop.jp/wp-content/uploads/2015/07/hit012.png";
    var img3 = new Image();   //動物画像、0~9
    img3.src = "https://aidesign.lolipop.jp/wp-content/uploads/2015/08/animal10.png";
    var onsei = ['hazure', 'atari', 'ooata']; //はずれ、当たり、大当たり音声
    var ctx;
    var ch = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
    var color = ['red', 'green'];
    var timeInterval = 60;
    var timerid = setInterval('draw()', timeInterval);//!!!!!
    var a = b = c = -1;       //Count
    var x = [122, 232, 342];  //x-position
    var y = 106;              //y-position
    var m = 0;                //dispaly a char;
    var xd=12;
    var yd=0;
    var xx=160;
    var yy=y+50;
    function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          ctx = canvas.getContext('2d');
          ctx.font = "14px Arial";       //フォントにArial,14pxを指定
          var mm = m % 10;  //0-9
          var t = m % 60;                //t;minute
          var k = Math.floor(m / 60);    //60 time
          ctx.fillStyle = 'white';       //塗り潰し色を白に
          ctx.fillText(ch[mm], xx, yy);  //テキストを塗り潰しで描画, 0~9
          ctx.fillStyle = color[k % 2];  //塗り潰し色を設定
          ctx.fillText(ch[mm], xx, yy);  //テキストを塗り潰しで描画, 0~9
          if(t==0) {xd=12;yd=0;}
          if(t==18){xd=0;yd=12;}
          if(t==30){xd=-12;yd=0;}
          if(t==48){xd=0;yd=-12;}
          xx += xd;
          yy += yd;
          ++m;
          a = NumericDisplay(0);
          b = NumericDisplay(1);
          c = NumericDisplay(2);
        }
    }
    function StopStart(target){         //timeridが1以上で確定処理
      var timeInterval = document.getElementById(target).value;
      if(timerid){                      //確定処理
        var chr = 0;                    //はずれ音声およびcount=0;
        if(a==b) ++chr;
        if(b==c) ++chr;
        if(c==a) ++chr;
        if(chr>=2){/*alert("CHR="+chr+" A="+a+" B="+b+" C="+c);*/chr=2;}
        if(chr==1){                     //当たりのとき
            //alert("chr="+chr+" a="+a+" b="+b+" c="+c);
            if(a==7) ++chr;             //ラッキーセブンの処理
            if(b==7) ++chr;
            if(c==7) ++chr;
            if(chr >= 3) chr = 2;       //おまけで大当たりに格上げ
            else         chr = 1;       //当たり
        }
        ctx.drawImage(img0, 265*chr,0, 265,191, 150,y+10, 265,191);  //当たり、はずれ画像を描画
        ring(onsei[chr]);                  //音声を鳴らす
        ctx.fillStyle = 'deeppink';        //Copyright
        ctx.font = "16px Arial";           //フォントに16pxを指定
        ctx.fillText("version 1.0.0.6   copyright Aidesign, 2015", 10, 324); //Version, (c)
        clearInterval(timerid);
        timerid = 0;
      }
      else{                                //再開処理
        ctx.clearRect(150,y+10, 415,y+201);//当たり、はずれ画像を消す,201=10+191
        ctx.clearRect(10, 308, 380, 324);  //Version Numberを消す
        timerid = setInterval('draw()', timeInterval);//!!!!!
        m = 0;                //dispaly a char;
        xd=12;
        yd=0;
        xx=160;
        yy=y+50;
      }
    }
    function NumericDisplay(n){            //n:0~2
      r = Math.floor(Math.random()*10);    //0~9までの乱数を発生させる
      ctx.clearRect(x[n], y-96, x[n]+96, y+15);//前描画文字を消す
      var k = Math.floor(r / 5);           //0~1       2行5列
      var j = r % 5;                       //0,1,2,3,4
      ctx.drawImage(img3, j*150,k*150, 150,150, x[n],y-96 , 96,96);//回転ドラム画像
      return r;
    }
    function ring(tune){
      document.getElementById(tune).play();
    }
    </script>
    <style type="text/css">
      canvas { border: 1px solid #999; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="560" height="330"></canvas><BR>切り換えスピード
    <input type="number" id="step1" name="step1" min="50" max="5000" value="60"/>
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" onClick="StopStart('step1')" value="Stop(確定) Start(再開)"/>
  </body>
  <div><audio id="hazure" preload="auto">
    <source src="https://aidesign.lolipop.jp/wp-content/uploads/2015/07/se6.mp3"/> </audio>  </div>
  <div><audio id="atari" preload="auto">
    <source src="https://aidesign.lolipop.jp/wp-content/uploads/2015/02/ji_023.mp3"/> </audio>  </div>
  <div><audio id="ooata" preload="auto">
    <source src="https://aidesign.lolipop.jp/wp-content/uploads/2014/09/fanfare5.mp3"/> </audio>  </div>
</html>
関連ページ

➊Webプログラミング書法
➋あみだくじ作成法

WebProg5

負荷の軽減を実感するを実行します。コードサイズがWebProg4と較べて95行から80行に縮小されていることをご確認ください。


    

サンプルプログラムコード5

<!DOCTYPE html>   <!-- 運試し5 -->
<html>            <!-- Fortune-05 -->
  <head>
    <script type="text/javascript">
    var img0 = new Image();   //はずれ画像、当たり画像、大当たり画像
    img0.src = "https://aidesign.lolipop.jp/wp-content/uploads/2015/07/hit012.png";
    var img3 = new Image();
    img3.src = "https://aidesign.lolipop.jp/wp-content/uploads/2015/08/SlotMCN.png";//回転ドラム画像、0~9
    var onsei = ['hazure', 'atari', 'ooata']; //はずれ、当たり、大当たり音声
    var ctx;
    var timerid = setInterval('draw()', 50);
    var i = [-1, -1, -1];     //Count
    var x = [122, 232, 342];  //x-position
    var y = 106;              //y-position
    function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          ctx = canvas.getContext('2d');
          ctx.font = "96px Arial";      //フォントにArial,96pxを指定
          NumericDisplay(0);
          NumericDisplay(1);
          NumericDisplay(2);
        }
    }
    function StopStart(target){         //timeridが1以上で確定処理
      if(timerid){                      //確定処理
        var stepVal = document.getElementById(target).value;
        var chr = 0;                    //はずれ音声
        var j1 = i[1]*10+i[2];          //x77
        var j2 = i[0]*100+i[2];         //7x7
        var j3 = i[0]*100+i[1]*10;      //77x
        if((j1==77)||(j2==707)||(j3==770)){//当たり、ファンファーレを鳴らす
            chr = 2;                    //大当たり音声
        }
        else{
          if((i[0]==stepVal)||(i[1]==stepVal)||(i[2]==stepVal)){
            chr = 1;                    //当たり音声
          }
        }
        ctx.drawImage(img0, 265*chr,0, 265,191, 150,y+10, 265,191);  //当たり、はずれ画像を描画
        ring(onsei[chr]);                  //音声を鳴らす
        ctx.fillStyle = 'deeppink';        //Copyright
        ctx.font = "16px Arial";           //フォントに16pxを指定
        ctx.fillText("version 1.0.0.4   copyright Aidesign, 2015", 10, 324); //Version, (c)
        clearInterval(timerid);
        timerid = 0;
      }
      else{                                //再開処理
        ctx.clearRect(150,y+10, 415,y+201);//当たり、はずれ画像を消す,201=10+191
        ctx.clearRect(10, 308, 380, 324);  //Version Numberを消す
        timerid = setInterval('draw()', 50);
      }
    }
    function NumericDisplay(n){            //n:0~2
      i[n] = Math.floor(Math.random()*10); //0~9までの乱数を発生させる
      ctx.clearRect(x[n], y-96, x[n]+96, y+15);//前描画文字を消す
      var k = Math.floor(i[n] / 5);        //0~1
      var j = i[n] % 5;                    //0,1,2,3,4
      ctx.drawImage(img3, j*150,k*150, 150,150, x[n],y-96 , 96,96);//回転ドラム画像
    }
    function ring(tune){
      document.getElementById(tune).play();
    }
    </script>
    <style type="text/css">
      canvas { border: 1px solid #999; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="560" height="330"></canvas>
    <BR><input type="number" id="step1" name="step1" min="0" max="9" value="7"/>
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" onClick="StopStart('step1')" value="Stop(確定) Start(再開)"/>
  </body>
  <div><audio id="hazure" preload="auto">
    <source src="https://aidesign.lolipop.jp/wp-content/uploads/2015/07/se6.mp3"/> </audio>  </div>
  <div><audio id="atari" preload="auto">
    <source src="https://aidesign.lolipop.jp/wp-content/uploads/2015/02/ji_023.mp3"/> </audio>  </div>
  <div><audio id="ooata" preload="auto">
    <source src="https://aidesign.lolipop.jp/wp-content/uploads/2014/09/fanfare5.mp3"/> </audio>  </div>
</html>
関連ページ

➊Webプログラミング書法
➋あみだくじ作成法

WebProg4

さて、本日の運試しをやってみましょう。


    

サンプルプログラムコード4

<!DOCTYPE html>   <!-- 運試し4 -->
<html>            <!-- Fortune-04 -->
  <head>
    <script type="text/javascript">
    var img0 = new Image();
    img0.src = "https://aidesign.lolipop.jp/wp-content/uploads/2015/07/hit0.png"; //はずれ画像
    var img1 = new Image();
    img1.src = "https://aidesign.lolipop.jp/wp-content/uploads/2015/07/hit1.png"; //当たり画像
    var img2 = new Image();
    img2.src = "https://aidesign.lolipop.jp/wp-content/uploads/2015/07/hit2.png"; //大当たり画像
    var ctx;
    var chr;      //数字
    var txt ="0123456789";
    var timerid = setInterval('draw()', 50);
    var len = txt.length;
    var color = ['violet', 'blue', 'green'];
    var i = [-1, -1, -1];     // Count
    var x = [140, 250, 360];  // x-position
    var y = 90;               // y-position
    function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          ctx = canvas.getContext('2d');
          ctx.font = "96px Arial";      //フォントにSerif,96pxを指定
          NumericDisplay(0);
          NumericDisplay(1);
          NumericDisplay(2);
        }
    }
    function StopStart(target){         //timeridが1以上で確定処理
      //alert("saveValue="+timerid);
      if(timerid){                      //確定処理
        var stepVal = document.getElementById(target).value;
        var img7 = img0;
        var j1 = i[1]*10+i[2];          //x77
        var j2 = i[0]*100+i[2];         //7x7
        var j3 = i[0]*100+i[1]*10;      //77x
        //alert("stepVal="+stepVal+" j="+j);
        if((j1==77)||(j2==707)||(j3==770)){//当たり、ファンファーレを鳴らす
            chr = "ooata";                  //大当たり音声
            img7 = img2;
        }
        else{
          if((i[0]==stepVal)||(i[1]==stepVal)||(i[2]==stepVal)){
            chr = "atari";                 //当たり音声
            img7 = img1;
          }
          else{            //はずれ
            chr = "hazure";                //はずれ音声
          }
        }
        ctx.drawImage (img7 , 150, y+20);  //当たり、はずれ画像を描画
        ring(chr);
        ctx.fillStyle = 'deeppink';        //Copyright
        ctx.font = "16px Arial";           //フォントに16pxを指定
        ctx.fillText("version 1.0.0.4   copyright Aidesign, 2015", 10, 324); //Version, (c)
        clearInterval(timerid);
        timerid = 0;
      }
      else{                                //再開処理
        ctx.clearRect(150,y+20, 415,y+211);//当たり、はずれ画像を消す,211=20+191
        ctx.clearRect(10, 308, 380, 324);  //Version Numberを消す
        timerid = setInterval('draw()', 50);
      }
    }
    function NumericDisplay(n){            //n:0~2
      i[n] = Math.floor(Math.random() * 10);//0~9までの乱数を発生させる
      chr = txt.charAt(i[n]);              //0-9
      ctx.clearRect(x[n], y-96, x[n]+96, y+10);//前描画文字を消す
      ctx.fillStyle = color[n];   //塗り潰し色を緑に
      ctx.fillText(chr, x[n], y); //テキストを塗り潰しで描画
    }
    function ring(tune){
      document.getElementById(tune).play();
    }
    </script>
    <style type="text/css">
      canvas { border: 1px solid #999; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="560" height="330"></canvas>
    <BR><input type="number" id="stepper1" name="stepper1" min="0" max="9" value="7"/>
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" onClick="StopStart('stepper1')" value="Stop(確定) Start(再開)" />
  </body>
  <div><audio id="hazure" preload="auto">
    <source src="https://aidesign.lolipop.jp/wp-content/uploads/2015/07/se6.mp3"/> </audio>
  </div>
  <div><audio id="atari" preload="auto">
    <source src="https://aidesign.lolipop.jp/wp-content/uploads/2015/02/ji_023.mp3"/> </audio>
  </div>
  <div><audio id="ooata" preload="auto">
    <source src="https://aidesign.lolipop.jp/wp-content/uploads/2014/09/fanfare5.mp3"/> </audio>
  </div>
</html>
関連ページ

➊Webプログラミング書法
➋あみだくじ作成法

WebProg3

サンプルプログラムコード2でも、システムが持つ再読み込み機能を指定すれば、再開処理を実行できましたが、確定・再開ボタンを設けることによって処理をスピードアップすることができます。

ボタンは当初、確定を待つ状態にありクリックされると再開を待つ状態に切り替わります。クリックされるたびに状態が反転します。

サンプルプログラムコード3


    

<!DOCTYPE html>   <!-- 運試し3 -->
<html>            <!-- Fortune-03 -->
  <head>
    <script type="text/javascript">
    var img0 = new Image();
    img0.src = "https://aidesign.lolipop.jp/wp-content/uploads/2015/07/hit0.png"; //はずれ画像
    var img1 = new Image();
    img1.src = "https://aidesign.lolipop.jp/wp-content/uploads/2015/07/hit1.png"; //当たり画像
    var ctx;
    var chr;      //数字
    var i = -1;   // Count
    var x = 250;  // x-position
    var y = 100;  // y-position
    var txt ="0123456789";
    var timerid = setInterval('draw()', 50);
    var len = txt.length;
    function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          ctx = canvas.getContext('2d');
          ctx.font = "96px Arial";      //フォントにSerif,96pxを指定
          ++i;
          if (i >= len) i = 0;          //繰り返し条件
            chr = txt.charAt(i);
            ctx.clearRect(x,y-96, x+96,y);//前描画文字を消す
            ctx.fillStyle = 'violet';   //塗り潰し色を緑に
            ctx.fillText(chr, x, y);    //テキストを塗り潰しで描画
        }
    }
    function StopStart(target){         //timeridが1以上で確定処理
      //alert("saveValue="+timerid);
      if(timerid){                        //確定処理
        var stepVal = document.getElementById(target).value;
        var img7 = img0;
        //alert("stepVal="+stepVal+" i="+i);
        if(stepVal == i){//当たり、ファンファーレを鳴らす
          ctx.fillStyle = 'red';          //塗り潰し色を赤に
          chr = "atari";                  //当たり音声
          img7 = img1;
        }
        else{            //はずれ
          ctx.fillStyle = 'green';        //塗り潰し色を緑に
          chr = "hazure";                 //はずれ音声
        }
        ctx.drawImage (img7 , 150, 120);  //当たり、はずれ画像を描画
        ring(chr);
        clearInterval(timerid);
        timerid = 0;
      }
      else{                               //再開処理
        ctx.clearRect(150,120, 415,311);  //当たり、はずれ画像を消す,211=20+191
        i = 0;    // Count
        timerid = setInterval('draw()', 50);
      }
    }
    function ring(tune){
      document.getElementById(tune).play();
    }
    </script>
    <style type="text/css">
      canvas { border: 1px solid #999; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="560" height="330"></canvas>
    <br><input type="number" id="stepper1" name="stepper1" min="0" max="9" value="7"/>
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" onClick="StopStart('stepper1')" value="Stop(確定) Start(再開)" />
  </body>
  <div><audio id="atari" preload="auto">
    <source src="https://aidesign.lolipop.jp/wp-content/uploads/2015/02/ji_023.mp3"/> </audio>
  </div>
  <div><audio id="hazure" preload="auto">
    <source src="https://aidesign.lolipop.jp/wp-content/uploads/2015/07/se6.mp3"/> </audio>
  </div>
</html>
関連ページ

➊Webプログラミング書法
➋あみだくじ作成法

WebProg2

chusenkai

クリックして出る目は10種類あり選択した目が出る確率は10%です。10回に1回の大当たりは実際のところ、もっと低い確率に感じられます。


  

サンプルプログラムコード2

<!DOCTYPE html>   <!-- 運試し2 -->
<html>            <!-- Fortune-02 -->
  <head>
    <script type="text/javascript">
    var ctx;
    var chr;
    var i = -1;   // Count
    var x = 10;   // x-position
    var y = 100;  // y-position
    var txt ="0123456789";
    var timerid = setInterval('draw()', 50);
    var len = txt.length;
    function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          ctx = canvas.getContext('2d');
          ctx.font = "96px Arial";      //フォントにSerif,96pxを指定
          ++i;
          if (i >= len) i = 0;          //繰り返し条件
            ctx.clearRect(x,y-96, x+96,y);//前描画文字を消す
            chr = txt.charAt(i);
            ctx.fillStyle = 'violet';   //塗り潰し色を緑に
            ctx.fillText(chr, x, y);    //テキストを塗り潰しで描画
        }
    }
    function saveValue(target){         //確定、timeridが1以上で有効
      var stepVal = document.getElementById(target).value;
      ctx.fillStyle = 'red';            //塗り潰し色を緑に
      var pre = "当たり";
      if(stepVal == i){//当たり、ファンファーレを鳴らす
        chr = "atari";
      }
      else{            //はずれ
        chr = "hazure";
        pre = "はずれ";
      }
      ctx.fillText(pre, x, 250);        //前描画文字を消す
      ring(chr);
      //document.write("Value="+stepVal+" i="+i);
      clearInterval(timerid);
    }
    function ring(tune){
      document.getElementById(tune).play();
    }
    </script>
    <style type="text/css">
      canvas { border: 1px solid #999; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="560" height="330"></canvas>
    <BR><input type="number" id="stepper1" name="stepper1" min="0" max="9" value="7"/>&nbsp;&nbsp;<input type="button" onClick="saveValue('stepper1')" value="確定" />
  </body>
  <div><audio id="atari" preload="auto">
    <source src="https://aidesign.lolipop.jp/wp-content/uploads/2015/02/ji_023.mp3"/> </audio>
  </div>
  <div><audio id="hazure" preload="auto">
    <source src="https://aidesign.lolipop.jp/wp-content/uploads/2015/07/se6.mp3"/> </audio>
  </div>
</html>
関連ページ

➊Webプログラミング書法
➋あみだくじ作成法

WebProg1

幕開けに運試しのプログラミングに挑戦します。0から9までの数字が連続表示されます。たとえば、’7’を出すことを念じ、ころあいを見計らって’確定’ボタンをクリックします。’7’が出たら今日はついていると考え、そうでなければ、そこそこの一日と思って業務に励みましょう。

number10【性格診断】「0~9」数字を選ぶだけであなたにぴったりの結婚相手が分かるでは選んだ数字で結婚運を占っています。興味のある方は挑戦してください。

それでは運試しをどうぞ!

確定をクリックして好みの数字を表示させることができます。

次のコードをコピー&ペーストし、Fortune-01.htmlファイルを作成します。IE8、FIREFOX、OPERA12、SAFARI6、CHROMEなどの新しいブラウザが動作状態ならば、保存したFortune-01.htmlファイルにカーソルを当てクリックすれば実行に移ります。

<!DOCTYPE html>   <!-- 運試し1 -->
<html>            <!-- Fortune-01 -->
  <head>
    <script type="text/javascript">// <![CDATA[
    var i = 0;    // Count
    var x = 10;   // x-position
    var y = 100;  // y-position
    var txt ="0123456789";
    var timerid = setInterval('draw()', 50);
    var len = txt.length;
    function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
          ctx.font = "96px Arial";      //フォントにArial,96pxを指定
          if (i >= len) i = 0;          //繰り返し条件
            ctx.clearRect(x,y-96, x+96,y);//前描画文字を消す
            var chr = txt.charAt(i);    //表示文字を抽出
            ctx.fillStyle = 'violet';   //塗り潰し色を緑に
            ctx.fillText(chr, x, y);    //テキストを塗り潰しで描画
            ++i;
        }
    }
    function saveValue(){     //確定、timeridが1以上で有効
        clearInterval(timerid);
        timerid = 0;
    } // ]]>
    </script>
    <style type="text/css">
      canvas { border: 1px solid #999; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="560" height="330"></canvas>
    <input type="button" onClick="saveValue()" value="確定" />
  </body>
</html>
関連ページ

➊Webプログラミング書法
➋あみだくじ作成法

Webプログラミング書法

このページは本日の運勢を占うゲームを作りながら動きのある文書作りをするための手掛かりについて述べられています。

目次

はじめに
1.文書記述言語HTML
 HTML5の正式リリース
 プログラミングのいろは
 運試しのプログラミング
2.JavaScriptでプログラミング
 HTMLの構成例
 プログラミングの必要性
 運試し第2弾
 サンプルコード1からの改訂項目
 大当たりでファンファーレ鳴動
3.プログラミングの上質化
 運試し第3弾
 サンプルコード2からの改訂項目
 再開処理をスピードアップ
4.本格処理の追加
 運試し第4弾
 サンプルコード3からの改訂項目
 運試しをする
5.高品質化と負荷の軽減
 配列化を図る
 画像トリミングによる画像統合
 サンプルコード4からの改訂項目
 負荷の軽減実感
6.やわらかさを加える
 絵柄を選定する
 描画切り換え速度を設定
 改訂のポイント
 お子様と一緒に
終わりに
関連ページ

はじめに

以前にあみだくじ作成法を発表しましたが、動作デバイスはスマートフォンでJavaを用いて開発されました。今回は動作デバイスに限定せず、JavaScriptが動作する環境であればどのデバイスでも動作するように配慮されています。

今日の運勢を占うゲームを作り、楽しみながらJavaScriptで表現豊かな文書作りを目指します。個々のWebプログラミングは少しずつ進化し、リンクが貼られた独立したページ(例、《1》運試し…)に仕立てられています。

1.文書記述言語HTML

HeaderFooter世にはアプリケーションと称される利用者の業務を支援するプログラムが多く存在します。かつてそれらは専門知識を有する技術者の独壇場で、その上、複雑な手順を踏んで作成されていました。

ここではHTML,JavaScriptに的を絞って簡単なプログラムを作ってWebドキュメントに埋め込みます。

上図に示すようなドキュメントにおいて、全体的な構造に対するそれぞれの記事を表現するにはこれまでの記述法ではあいまいさがあったり、動画音声を織り交ぜたり、グラフィック描画は難しいものがありました。 html5structure

ウェブ上で動作する表現形式は文書記述言語HTMLを用います。その規格は改訂を続け5版をHTML5と言います。

HTMLは左図に示すように半角の<と>に挟まれた開始タグと終了タグに囲まれたブロックの集合体です。 説明文の中に、実際の半角<を入れるとタグの一部と見做されて正しい表現にはなりませんので全角<を使うことが一般化しています。

HTML5の正式リリース

2016年にHTML5.1が正式に勧告される予定ですが、それまでは使用できないのかというとそうではありません。主なブラウザにはすでに実行環境が実装され、動的なウェブサイト構築や、インターネットアプリケーションなど高度なユーザインタフェースの開発が可能になっています。

プログラミングのいろは

ウェブ上では当初、静的コンテンツ表現が中心でしたが、JavaScriptにより動的なコンテンツを制御する機能が備わり、スマートフォンやタブレット端末との相性の良さを好感しています。

JavaScript

JavaScriptとは、インターネット上のWebページを記述するプログラム言語の1つです。javaというプログラミング言語とは別ものです。Webページに、動きや対話性を付加することを目的に開発されたオブジェクト指向のスクリプト言語で、クライアント環境で動作します。

HTML5にはJavaScriptが使えるように仕様が策定されています。ここではJavaScriptを用いたプログラミングにスポットライトを当てていきます。当初は0~9の数字を表示し続ける簡単なプログラムから始め、だんだんと機能を追加していきます。

新しいことを始めるにあたり、いろいろな手法が考えられますが、当ブログでは難解な部分はとりあえず棚上げし、サンプルコードを参照しながら同じことを実践し体験していくことをお奨めします。

戻りキー

次のリンクからサンプルコードを実行します。簡素化のため、前のページに戻るコードは用意されていませんので上図の赤〇印キーをクリックしてこのページに戻ってください。

《1》運試しのプログラミングを実行

2.JavaScriptでプログラミング

すでに前項でJavaScriptでプログラミングが使われていますが、プログラムコードとHTML5との関連を述べ、HTMLドキュメントに厚みを加えていきます。

HTMLの構成例

HTML構成例

HTMLはテキストや写真などで構成されることが多いのですが、文書にJavaScriptなどのスクリプトを組み込むscriptタグがあります。ここからはプログラムコードを定義しますというタグです。/scriptまでの範囲です。

プログラミングの必要性

記事の中に、本日の日付、曜日、元日からの通算日や天気予報などを自動的に掲載したいときがあります。このような場合はプログラムコードを埋め込むことにより実現可能になります。紙媒体の百科事典では無理ですがWebページでは容易に実現できます。 筮竹・水晶

本日の運試しをするために、占い小道具の水晶や筮竹(ぜいちく)を用意した占い師に電話して吉兆を連絡してもらうのは現実的ではありません。

そこで前項では遊び心で、運を試す例を示しました。 プログラミングすることにより、グレゴリオ暦時間データやクリックタイミングなどを入力値にして、文書をその都度、改訂することなく、読者が納得する結果を提供することができます。

運試し第2弾

プログラムコードを少し進化させて、クリックタイミングで結果を出すように処理を加えていきます。

サンプルコード1からの改訂項目

❶0~9のうち好みの数字を選ぶことができる。
➋クリックして出た数字で当たりはずれに対応したメッセージが出力される。

《2》大当たりでファンファーレ鳴動を実行

3.プログラミングの上質化

日本製商品は心配りに富んでいると語られることがあります。他国製商品が雑かというと不明です。かなり前の話ですが、「ドイツアウトバーンにはブレーキ故障対策のため、上りこう配の横道が用意されている」と聴いたことがあります。

運試し第3弾

使い勝手・使いやすさのよい商品は体になじみます。プログラミングを上質化して使いやすさを向上させます。一度、記事を読み込むと2度目はシステムが保有する再読み込みをしなければなりませんが、再開を支援する処理を施せば使い勝手が向上します。 あまりにスピードアップされ、音声が鳴りやまないうちに再開を指定後に確定した場合、音声ファイルの処理が追いつかないくらいです。

高品質化

サンプルコード2からの改訂項目

❶確定ボタンを確定・再開ボタンに機能を変更する。
➋確定・再開ボタンの状態を記憶させる。
➌再開処理を追加する。
➍確定処理では、当たり・はずれを判定し、適切なメッセージを出力する。

《3》再開処理スピードアップを実行

4.本格処理の追加

回転ドラムゲームは難解さを含んでいないと飽きがきてつまらないものになります。数字付き回転ドラムは1桁より3桁がゲームとして面白味が増します。 最後に、バージョン管理や著作権所有のメッセージを設定します。

運試し第4弾

スロットマシンのように3桁の数字をそろえ、ねらった数字が出たらファンファーレを鳴らします。

サンプルコード3からの改訂項目

❶数字を1桁から3桁に拡大する。
判定基準 ➋当たり判定を3桁の数字にする。
➌桁ごとに表示色を変える。
➍当たる確率が高くなるように修正を加える。
➎数字は乱数を発生させて決定し表示する。
➏当たり種別をはずれ、当たり、大当たりの3種にする。
➐copyrightとVersion番号を追加する。
➑3桁処理になり処理の共通化のため、関数化を図る。

《4》運試しをするを実行

5.高品質化と負荷の軽減

品質の高い商品を目指すと嵩、重量、部品点数などが増大します。ウェブアプリケーションでは画像、音声データは別々であり、思った以上にシステムが巨大化します。0~9の数字を絵柄化すると10個の画像ファイルを用意し、事前に読み込んでおかなければなりませんが、工夫をすることによりプログラムコードのシンプル化を図ることができます。

配列化を図る

配列似たようなデータは配列化を図ることによってコードを縮小させることができます。似たデータでない場合はコード化をすることによって規則性のあるデータになります。

たとえば一クラスに40人のクラス員がいるとき、クラス員の氏名をコード化し配列に格納します。 10種の数字絵柄を1枚の画像にまとめ、添え字付きデータして扱えば、画像データと初期化処理が極端に小さくなります。

画像トリミングによる画像統合

トリミングとは写真の構図を整えるために、不要な部分を除くことを意味します。この機能を利用して個々の画像を横に並べ、まとまった大きな集合画像を作成し、必要な画像データを規則正しく変化させて複数画像のように扱い、負荷を軽減してシステムのシンプル化を図ります。

SlotMCN  
画像トリミング機能は9つの引数を持つdrawImage関数の拡張版フルスペック機能として用意されています。今回は10個の画像を上図のように2行5列にまとめ、drawImage関数にクローズアップ領域を指定して必要とする果実のみを描画させることができます。

hit012

ついでに、はずれ、当たり、大当たりの画像も1枚にまとめます。このようにプログラミングしておけば、当たり状態を3から5に増やした場合は、5枚の画像を1枚にまとめた画像ファイルを用意すれば済むことになります。

サンプルコード4からの改訂項目

❶はずれ、当たり、大当たり画像を統合したオブジェクトを作成。
➋音声参照IDテーブルを作成する。
➌確定/再開処理で当たり画像をトリミング描画する。
➍音声参照IDテーブルを使って音声を鳴らす。
➎回転ドラム画像をトリミング描画。

《5》負荷の軽減実感を実行

6.やわらかさを加える

乗り物や動物を見ると童心に戻ったような気分になります。スロットマシンを思い浮かべる絵柄から親しみが湧く絵柄に改訂しましょう。

絵柄を選定する

絵柄の候補には菓子、乗り物、都市、花、鳥、スポーツなどを挙げることができますが、親しみのある動物を選ぶことにしました。 animal10

描画切り換え速度を設定

自分の使い勝手に合わせられる機能を持つ商品は高級です。利用者の年齢や習熟度に合わせて描画切り換え速度を変更してみます。50ms~5000msの間で変更可能です。数字を直接入力するか上下の矢印キーを押下して設定します。

大当たり

描画切り換え速度が1000msを超える大きな値では、後だしジャンケンのように、上の3つの画像の揃い具合を見て確定ボタンをクリックすれば、当たり、大当たりが得やすくなります。 利用者の運勢を占う様から遠のきますが、小さなお子様が遊びやすいように配慮されています。

当たり判定テーブル改訂のポイント

❶回転ドラムの絵柄を変更する。
➋描画切り換え速度を可変に。
➌時計方向に数字を回転表示。
➍大当たり、当たり確率アップ。

回転数字

《6》お子様と一緒にを実行

終わりに

JavaScriptを用いて小さなゲームを作ってWebプログラミングの楽しさをまとめてみました。

動的なHTML5文書を作成してブログ、ホームページに公開するには、プログラムコードが含まれます。 記事は一般に、ビジュアルモードで作成されますが、プログラムコードを含む場合はテキストモードにして詳細な設定をします。

テキストモードでの記事作成には、細かなノウハウを要します。折を見て今回の記事作成手順を発表したいと考えています。

関連ページ

➊あみだくじ作成法
➋2015秋の花々

秘密主義

一子相伝

一子相伝、秘密主義などで高い技量や知識を独り占めすることがあります。苦労して磨き上げたものを模倣され規模の大きさで圧倒されたりするとかたくなに秘密主義に向かいます。元祖、本家、家元、宗家、本邦初などをめぐって争いも絶えません。

免許皆伝

オリンピックのエンブレム問題で揺れていますが、著作権が確立した時代でもすんなりと事が運ばないようです。

事をなすとき、弟子入り、講習会、各種学校などで修行することになります。一方、今ではネット上に大量の情報があふれていて、選択すれば独力で何かを成し遂げることが可能です。

Webプログラミングについても然りですが、経験豊富な先人に教わらないと無駄なことをしていたと後で気づくことがあります。

失敗例

その失敗例を示します。

落とし穴

カウントダウンとして1秒ごとに99,98,97…のように画面に表示させる場合、99と表示させ1秒後に2個のバックスペースを表示して98と表示させたり、前の表示文字を消すため、同じ場所に白色で99を表示させ、その後、98を表示させる方法がありました。

BASICやCでは上記方法で問題なく表示されましたが、JavaScriptでは表示品質がイマイチです。試行錯誤でいろいろ体験するうち、clearRect関数が見つかり胸をなでおろしています。

原始的な方法と改良した方法の2つを示します。左(旧来方式)、右(改良方式)で品質の差にご注目ください。

動作例




プログラムコード

主関数部のみを以下に示します。

DrawFunction

おわりに

習うよりは慣れよ方式は最初から高いレベルは望めません。継続は力なり。徐々に改善をはかります。