月別アーカイブ: 2014年11月

電子式福引き管理ソフト

開発の経緯

しばらく前に電子式福引き管理ソフトをスマートフォン用に開発しました。Javaでプログラムコードを作成し、ECLIPSE開発環境を構築し、Windowsパソコンによるクロス開発でした。久方ぶりに動作を確認するために開発環境に触れてみましたが、パーツとなるソフトウェアが新しくなり、バージョンの不整合で悩まされました。CHUSENKI

ECLIPSE開発環境の準備が骨であること、動作する環境ごとに実行ソフトを用意しなければならないことを嫌って、HTML5を利用した開発に宗旨替えしました。大規模システム構築の際には、またお世話になることでしょう。

HTML5もブラウザの仕様により動作が不ぞろいで万全というわけではありませんが、動作機種からの脱却は魅力的です。これからHTML5+CANVAS+enchant.jsによる電子式福引き管理ソフト開発を進めます。

10個ほどの画像と音声ファイルとenchant.jsライブラリファイルのほか、一つの電子式福引き管理HTMLファイルを用意します。今回はがらがらを回転したり停止するまでの初歩的な処理に留まっています。回を追って当選処理、設定、閲覧、解析処理などを追加します。

StartPic

サンプル動作

確認中

まとめ

商店街が静かでは元気が出ません。少しでも商店街のにぎわいに貢献できたらうれしい限りですが、過大な景品付きグレーゾーン販売に与(くみ)するものではありません。景品表示法も一読してください。アンケート、訪問者、他のビッグデータの解析に道を開くものと存じます。

Google chrome(バージョン 39.0.2171.71 m)とFirefoxでは動作できました。IE11ではカーソル位置の検出が他のブラウザと異なるようでがらがらを回転できません。調査中です。次回から実態に合った電子式福引き管理ソフトに進みます。

スクリプト言語を使ってみる3

前回までのあらまし

前回までは熊さんの絵を自在に動かし、その後、突然現れる障害物を避けてゴールするゲームでした。X方向、Y方向に目標物を移動できましたが臨場感に欠けました。

ゲーム概要

SHATEKI-0今回は今では数少なくなった温泉場の射的ゲームを模して作りました。この射的ゲームはコルク製の弾10発ほどで2~3m離れたところに飾られてある人形を撃ち落とすと景品がもらえるというものでした。照準の調整などは正確でないので遊びですが時々、的に当たり景品をゲットできる仕組みです。

ゲームの設計方針

SHATEKI-GAME標的の妖怪(hobgoblin)が66ミリ秒間隔でランダムに横移動し、矢印キーにより撃ち方が狙いを定めて弾を撃ちます。このようなゲーム開発にはライブラリを利用すると楽です。enchant.jsは簡単にゲームやアプリを開発できるHTML5+JavaScriptフレームワークであり、2011年に公開され、無料で利用できます。enchant(エンチャント)とは魔法をかける、人を魅惑するという意味ですが、JavaScriptライブラリの名称になっています。今回、enchant公式サイトからダウンロードしました。

ゲームの詳細設計

hobgoblin射的ゲームの処理を図に示します。処理の構成は前回と同様ですが、ファイルや画面の初期化、処理関数の登録の後は、enchant.js処理系により起動される射撃処理とキータッチにより移動する妖怪との衝突監視処理が動作します。

サンプルコード

サンプルコードの表示は省略しますが以下に示す9ファイルをダウンロードするにはここから。

 

ファイル一覧

HOBGOBLIN
│  hobgoblin.html         妖怪射的ゲームのHTML5ファイル
├─img
│      bar.png            弾の画像
│      se6.mp3            衝突音mp3ファイル
│      shootinggame.png   射的ゲーム画像
│      space0.png         撃ち手画像
│      take.png           垣根の画像
│      thunder.png        雷の画像
│      yuruch-3.png       ゆるキャラ妖怪の画像
└─js
        enchant.min.js     enchantライブラリコードファイル

動作の特徴

①妖怪は垣根を100分割した場所を乱数発生により左右に移動します。
②撃ち手は横方向キーにより移動し、重なったとき命中と判断されます。
③命中のとき、チャイムのような音が控えめに鳴ります。
④合わせて命中までの機会回数とかかった秒数が表示されます。
⑤命中すると動作が停止するので、再開するには再読み込みキーを押します。
⑥enchant公式サイトには様々なサンプルコードや音源ファイルが収録されています。

まとめ

今回のゲームは移動体が縦、横に動作するシンプルタイプです。enchant.jsには高度なテクニックのサンプルもあるようです。表現豊かなウェブサイト構築の一助になればありがたいことです。『スクリプト言語を使ってみる』は、今回で一応の完結です。

変幻自在なウェブサイト例

electronic小売業において多彩な商品を扱っている場合、店頭の販促モニター電子ポップの文言、画像の表現を外気温、曜日、季節などに応じて自動的に変更したいことがあります。USB温度計

HTML5を使えば、簡単に実現することができます。と言ってもインターネット接続で、外部からの情報を入手できることが条件です。

外気温では気象庁からのピンポイント発表でも対応できることがありますが、店先に設置された温度計からの温度・湿度の取得できる環境が理想です。

WEEK8B

インターネットに接続されていれば曜日、季節の入手は容易です。曜日に応じて適切な画像を表示する例を以下に示します。

今日の日付を出力します。

サンプルコード

<html>
<script type="text/javascript"> // <![CDATA[
var youbi = ["<img src='https://aidesign.lolipop.jp/wp-content/uploads/2014/11/week0.png' width='80' height='80' />",
             "<img src='https://aidesign.lolipop.jp/wp-content/uploads/2014/11/week1.png' width='80' height='80' />",
             "<img src='https://aidesign.lolipop.jp/wp-content/uploads/2014/11/week2.png' width='80' height='80' />",
             "<img src='https://aidesign.lolipop.jp/wp-content/uploads/2014/11/week3.png' width='80' height='80' />",
             "<img src='https://aidesign.lolipop.jp/wp-content/uploads/2014/11/week4.png' width='80' height='80' />",
             "<img src='https://aidesign.lolipop.jp/wp-content/uploads/2014/11/week5.png' width='80' height='80' />",
             "<img src='https://aidesign.lolipop.jp/wp-content/uploads/2014/11/week6.png' width='80' height='80' />"];

myWeek = new Date();
myYear = myWeek.getFullYear();
myMonth = myWeek.getMonth() + 1;
myDate = myWeek.getDate();
myDay = myWeek.getDay();
myHour = myWeek.getHours();
myMinute = myWeek.getMinutes();
mySecond = myWeek.getSeconds();

myMess1 = myYear + "年" + myMonth + "月" + myDate + "日";
myMess3 = myHour + "時" + myMinute + "分" + mySecond + "秒";
myMess = myMess1 + " " + myMess3;
document.write( myMess + "<BR>曜日の画像:"+youbi[myDay] ); // ]]>
</script>
</html>

まとめ

あるデパートでは入り口で秘かに買い物客の全身画像をカメラに収め、過去の買い物歴などを瞬時に取り出し、接客の参考に利用始めているようです。また、外の天気が雨ならば元気の出るBGM、晴れならばしっとりとした曲と天気によって流す音楽を変えたりすれば販売促進につながりそうです。

このように外界の情報にすばやく対応するシステム構築の参考になれば幸いです。

ゲーム考

Jokerゲームやスポーツの起源は戦争に起因するものが多いです。サッカーなどは残酷な実体験をゲーム化したとの説もあります。戦略、戦術、駆け引きが争いよりは娯楽で利用される方が平和的です。

ゲームはひととおり体験しました。マージャン、花札、ナポレオン、ブラックジャック、ポーカーなどです。解説書や道場通いで腕を磨いたものに伝統的ゲームである囲碁・将棋があります。

ゲーム史経験を積み、定石・定跡をマスターすることによって勝負に勝つ確率が高くなります。勝負事では幅広い知識よりもビギナーズラックと言われる無心さで勝つことがあり、自分には並外れた博才が備わっていると勘違いし良からぬ方向にハマることもあるようです。

ゲームはコンピュータを理解するために利用されます。知識の習得の合間に息抜きとしてゲームに目を向けてみましょう。

立冬2014

椿本日は立冬。

試練を乗り越えたときに来る春、労苦が実る秋に較べ地味な冬が訪れました。

冬は人間を成長させてくれます。人生には華やかさだけでなく苦難も散りばめられているようです。

 立冬の歌BSCORPIO

 

 

スクリプト言語を使ってみる2

おさらい

前回は熊さんの絵が方向キーによって自在に動くシンプルなゲームでしgame2た。掲載したサンプルの他、多くのHTML5の例題がインターネット上で参照可能です。javascriptのタグや一定時間で起動する関数、キーが押されたり離れるときに動作する関数の取り付け方などを理解する必要がありますが、実行結果から少しずつ慣れていきます。『習うより慣れろ』で進んでいきます。

ゲーム概要

今回はゲームらしい機能を追加します。左端に熊さんがいて右端のゴーgame3ルを目指します。中間に赤丸で具象化された障害物が待ち構えていて進行を邪魔をします。矢印キーにより障害物を逃れゴールを目指しますが障害物に衝突すると爆音が轟きゲームは終了します。再読み込みキーを押して再開し、運よくゴールにたどり着くとファンファーレが鳴ります。

ソースコード

A game is starting.<BR>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
const XMAX = 800-40;
const YMAX = 500-80;
const R = 50;                         // 半径
xLocate = 0;
yLocate = 200;
x = y = xr = yr = StopFlag = 0;
var timerID;

function start() {                    // 開始モジュール
    canvas = document.getElementById ('canvas_e');
    ctx = canvas.getContext ('2d');   // キャンバスからコンテキストを取得
    img1 = new Image();
    img1.src = "bear.png";            // 熊さん
    img2 = new Image();
    img2.src = "goal.png";            // ゴール付近
    img3 = new Image();
    img3.src = "direction-key.png";   // 方向キー
    img4 = new Image();
    img4.src = "thunder.png";         // 雷
    timerID = setInterval ('draw()', 33*3); // 33*n秒間隔でdrawを実行する
    //キー操作イベントの設定
    window.addEventListener ('keydown' , keydownfunc , true);
}
// 描画モジュール
function draw() {                // 33秒*nごとに実行
    ctx.beginPath();
    ctx.clearRect (0 , 0 , 800 , 500);         // 描画をクリア
    ctx.drawImage (img1 , xLocate , yLocate);  // 熊さん
    ctx.drawImage (img2 , XMAX+5 , 0);         // ゴール付近
    ctx.drawImage (img3 , 10 , 10);            // 方向キー
    ctx.fillStyle = 'red';
    x = Math.floor(Math.random()*600)+50;      // 0~600->50~650までの乱数を発生させる
    y = Math.floor(Math.random()*400)+50;      // 0~400->50~450までの乱数を発生させる
    ctx.arc(x, y, R, 0, Math.PI*2, false);     // 円を描画
    ctx.closePath();
    ctx.fill();
      xr = x + 2 * R;                          // 円に衝突するかチェック
      yr = y + 2 * R;                          // 
      if((xLocate>x) && (xLocate<xr) && (yLocate>y) && (yLocate<yr)){// 障害物に衝突
        ring("g-sound2");        // 衝突音を鳴動
        clearInterval(timerID);  // 描画を停止する
        ctx.drawImage (img4 ,  xLocate, 320);  // 雷
        StopFlag = 1;            // 衝突に印を付ける
      }
}
function keydownfunc (event) {   // キー操作された時の処理
    var code = event.keyCode;    // どのキーが押されたかの情報を取得する
    if(StopFlag == 0){           // 衝突後は処理しない
      switch (code) {            // スイッチ文でケースにより処理を変える
        case 37:                 // ←キーが押された場合の番号
            if(xLocate < 5) break;
            xLocate -= 5;        // x座標を5px減らす(左に動かす)
            break;               // キーごとの処理完結
        case 39:                 // →キーが押された場合の番号
            if(xLocate >= XMAX) break;
            xLocate += 5;        // x座標を5px増やす(右に動かす)
            break;
        case 38:                 // ↑キーが押された場合の番号
            if(yLocate < 5) break;
            yLocate -= 5;        // y座標を5px減らす(上に動かす)
            break;
        case 40:                 // ↓キーが押された場合の番号
            if(yLocate >= YMAX) break;
            yLocate += 5;        // y座標を5px増やす(下に動かす)
            break;
      }
      if(xLocate >= XMAX){       // ゴールに到達か
        ring("g-sound1");
        clearInterval(timerID);  // 描画を停止する
        StopFlag |= 2;           // ゴールに印を付ける
      }
    }
}
    function ring(tune){
      document.getElementById(tune).play();
    }
</script>
<audio id="g-sound1" preload="auto"><source src="success.mp3" /></audio>
<audio id="g-sound2" preload="auto"><source src="bakuon.mp3" /></audio>
</head>
<body onload="start()">
  <canvas id="canvas_e" style="background-color:pink;" width="800" height="500" />
</body>
</html>

説明

game4ゲームの構成関数は前回とほぼ同じでstart(),draw(),keydownfunc(),ring()から成り、音声ファイルを参照して音を出力する関数が加わりました。

その他、前回に追加された機能として33*nミリ秒間隔で動作するdraw関数に、障害物がランダムに現れ方向キーによって移動された熊画像が衝突するかどうかチェックされます。衝突した場合、爆発音を鳴動し衝突画像を表示します。

keydownfuncでは、右端のゴールに到着したかどうか確認され、到着すればファンファーレを鳴らしdraw関数が定期的に動作することを停止し、終了処理をします。

ファイル一覧

①EasyGame.html     簡易ゲームのソースコード
②bear.png          熊の画像    
③direction-key.png 方向キー画像JavaScript
④thunder.png       雷の画像
⑤goal.png          ゴール画像
⑥success.mp3       ファンファーレ音声
⑦bakuon.mp3        爆音音声

上記ファイルのダウンロードはここです。

動作までの手順

動作までの手順はXAMPPの代替策を参考にしながら、上記ZIPを展開し、7つのファイルを同一フォルダに収めます。次にEasyGame.htmlにカーソルを当てクリックします。Javaの実行を許可しますかのメッセージが出力されたら許可します。Google ChromeとInternet Explorerで動作を確認しました。次項に示した細かな調整をする場合、EasyGame.htmlをテキストエディタで編集します。

動作の特徴

①33*nのnを大きくすればゴールへの到着確率が上がります。
②赤円の半径Rを小さくしても衝突しにくくなります。
③隠し技として最上端を移動させれば100%成功します。
④障害物の位置は乱数で決まります。Versionup

まとめ

今回、検証したゲームは非常にシンプルですがHTML5+CANVASでここまでできるようになりました。このサンプルで障害物との衝突をくぐり抜けてゴールに到着する確率は20%程度です。ゲームの作り方を通じてHTML5とCANVASを理解され、表現豊かなウェブサイトが完成されることを祈っています。

スクリプト言語を使ってみる

HTMLとは

HTML(ハイパーテキストマークアップランゲージ)はウェブページを表現するために使用される言語です。インターネットで公開されるほとんどのウェブページはHTMLで記述されています。メールでより豊かな表現をするためHTMLを用いることもあります。

紙による本では巻末にある用語索引に示されたページを引き当てて本文にたどり着いていましたが、ハイパーテキストに初めて出会ったとき、用語をクリックするだけで関連記事を読めたときは驚きました。

Flower2HTMLによる表現ではテキストを始め、ハイパーリンク、色づけ、サイズ、イメージ、フォントなどを指定することができます。また、動的な動きを表現できるスクリプトを埋め込み、静的な表現に彩りを添え画像・リスト・表などの高度な表現力を可能にしました。

サンプル

以下に方向キーの操作により画像を移動させるjavascriptコードを示します。html,head,meta,script,body,canvasなどのHTMLタグやキーイベント,onloadなどの知識を必要としますが、ソースコードに示されたプログラムコードをCanvasKeyEvent.htmlとしてフォルダに格納します。そEasyGage1のフォルダにbear.pngも置いておかなければなりませんが、ダウンロードが大変ですのでサーバーにアップロードしてありますのでそのまま、利用可能です。たとえば80*80ピクセルの虎の画像(tiger.png)を同一フォルダに用意した場合、その行をimg.src = “tiger.png”;に設定すれば自分で気にいった絵柄に変更可能です。

CanvasKeyEvent.htmlをクリックすれば、図の画像が表示されます。4個の方向キーを押下して画像を動かすことができます。

ソースコード

<!-- Plugin:SyntaxHighlighter Evolvedで表示されています。-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
xLocate = 100;
yLocate = 100;
// 開始モジュール
function start() {
    canvas = document.getElementById ('canvas_e');
    ctx = canvas.getContext ('2d');   // キャンバスからコンテキストを取得
    img = new Image();
    img.src = "https://aidesign.lolipop.jp/wp-content/uploads/2014/11/bear.png";
    timerID = setInterval ('draw()', 33);
    //キー操作イベントの設定
    window.addEventListener ('keydown' , keydownfunc , true);
}
// 描画モジュール
function draw() {
    ctx.clearRect (0 , 0 , 600 , 400);
    ctx.drawImage (img , xLocate , yLocate);
}
//キー操作された時の処理
function keydownfunc (event) {
    //どのキーが押されたかの情報を取得する
    var code = event.keyCode;
    //スイッチ文でケースにより処理を変える
    switch (code) {
        case 37:             // ←キーが押された場合の番号
            xLocate -= 5;    // x座標を5px減らす(左に動かす)
            break;           // キーごとの処理完結
        case 39:             // →キーが押された場合の番号
            xLocate += 5;    // x座標を5px増やす(右に動かす)
            break;
        case 38:             // ↑キーが押された場合の番号
            yLocate -= 5;    // y座標を5px減らす(上に動かす)
            break;
        case 40:             // ↓キーが押された場合の番号
            yLocate += 5;    // y座標を5px増やす(下に動かす)
            break;
    }
}
</script>
</head>
<body onload="start()">
    <canvas id="canvas_e" style="background-color:lightpink;" width="600" height="400" />
</body>
</html>
func

このコードは図にあるように3つの関数から成り立っていて、表に示す機能と起動タイミングで動作します。start関数はこのファイルがロードされる際、ただ一度実行されdraw関数が33ミリ秒ごとに動作するように設定され、キーの押下があればkeydownfunc関数が起動するように組み込まれます。ロード後はdrawとkeydownfunc関数がイベントの発生により動作することになります。

まとめ

ここではJavaScriptの詳細な説明は省いてあります。多くの参考になる解説記事がウェブ上にそろっています。サンプルコードはhttp://www.sist.ac.jp/~kanakubo/programming/canvas/canvas1_3.txt等を参考にさせていただきました。コピー&ペーストを行い、上記に示した操作で問題なく実行に漕ぎつけられました。細かい言語の文法はさておき、結果を求めるには参考になるかと存じます。

ものづくりの楽しさ

ものづくりで巨万の富を手にするには至難の業です。みかんの売りさばきで成功した紀伊国屋文左衛門のように実現性の高いお金儲けは、良い商品を発見し交易することですが、その方面は他の方にお任せし、ここではものづくりについて語ります。匠の知恵農業において食料品を輸入すれば国民が飢えることはありませんが、アメリカ・フランスなどは農業国として農業を育成しています。そのようにものづくりも基本的なものを外国から取り入れ、応用技術・創意工夫を盛り込んで輸出で賄っていけば日本の将来は明るいかのように感じますが、ぶどう不安をいだいているのは私だけではないでしょう。

ものづくりは地道ですが、世界に2つと無い優れものが誕生したときの喜びは何ものにも代えられません。

 サイトの記事作成には文字からなるテキストが基本ですが、画像、音声、動画などを織り交ぜた表現豊かな手法は相手への訴え力が増大します。

それらを組み合わせたり、参照する手段としてプログラミングします。プログラムはコンパイラ・ライブラリなどの知識が必要でしたが、今ではプログラムコードを記述するだけで実行可能なスクリプト言語が採用されるようになりました。ScriptLangauge

スクリプト言語の仕組みを図に示しましたが、プログラムコードを記述するだけで実行することができます。従来のアプリケーションのようにパソコン、スマホ、Android、IOS用と実行機種ごとに用意することもありません。

次回からスクリプト言語に触れていきます。多くの先駆者が講座形式でわかりやすい解説を展開していますので、ここでは簡単なゲーム等を作って実行する実践的手法で進めて参ります。