ものづくり筆耕ものづくり筆耕ものづくりを楽しむ。皇帝ダリアの栽培からオリジナルシステムの構築まで。プログラミングinventor開発の経緯しばらく前に電子式福引き管理ソフトをスマートフォン用に開発しました。Javaでプログラムコードを作成し、ECLIPSE開発環境を構築し、Windowsパソコンによるクロス開発でした。久方ぶりに動作を確認するために開発環境に触れてみましたが、パーツとなるソフトウェアが新しくなり、バージョンの不整合で悩まされました。ECLIPSE開発環境の準備が骨であること、動作する環境ごとに実行ソフトを用意しなければならないことを嫌って、HTML5を利用した開発に宗旨替えしました。大規模システム構築の際には、またお世話になることでしょう。HTML5もブラウザの仕様により動作が不ぞろいで万全というわけではありませんが、動作機種からの脱却は魅力的です。これからHTML5+CANVAS+enchant.jsによる電子式福引き管理ソフト開発を進めます。10個ほどの画像と音声ファイルとenchant.jsライブラリファイルのほか、一つの電子式福引き管理HTMLファイルを用意します。今回はがらがらを回転したり停止するまでの初歩的な処理に留まっています。確認中まとめ商店街が静かでは元気が出ません。商店街のにぎわいに貢献できたらうれしい限りですが、過大な景品付きグレーゾーン販売に与(くみ)するものではありません。景品表示法も一読してください。アンケート、訪問者、他のビッグデータの解析に道を開くものと存じます。m)とFirefoxでは動作できました。IE11ではカーソル位置の検出が他のブラウザと異なるようでがらがらを回転できません。次回から実態に合った電子式福引き管理ソフトに進みます。プログラミングinventor前回までのあらまし前回までは熊さんの絵を自在に動かし、その後、突然現れる障害物を避けてゴールするゲームでした。X方向、Y方向に目標物を移動できましたが臨場感に欠けました。今回は今では数少なくなった温泉場の射的ゲームを模して作りました。この射的ゲームはコルク製の弾10発ほどで2~3m離れたところに飾られてある人形を撃ち落とすと景品がもらえるというものでした。照準の調整などは正確でないので遊びですが時々、的に当たり景品をゲットできる仕組みです。標的の妖怪(hobgoblin)が66ミリ秒間隔でランダムに横移動し、矢印キーにより撃ち方が狙いを定めて弾を撃ちます。このようなゲーム開発にはライブラリを利用すると楽です。enchant.jsは簡単にゲームやアプリを開発できるHTML5+JavaScriptフレームワークであり、2011年に公開され、無料で利用できます。enchant(エンチャント)とは魔法をかける、人を魅惑するという意味ですが、JavaScriptライブラリの名称になっています。今回、enchant公式サイトからダウンロードしました。射的ゲームの処理を図に示します。処理の構成は前回と同様ですが、ファイルや画面の初期化、処理関数の登録の後は、enchant.js処理系により起動される射撃処理とキータッチにより移動する妖怪との衝突監視処理が動作します。サンプルコードサンプルコードの表示は省略しますが以下に示す9ファイルをダウンロードするにはここから。enchantライブラリコードファイル動作の特徴1妖怪は垣根を100分割した場所を乱数発生により左右に移動します。2撃ち手は横方向キーにより移動し、重なったとき命中と判断されます。3命中のとき、チャイムのような音が控えめに鳴ります。4合わせて命中までの機会回数とかかった秒数が表示されます。5命中すると動作が停止するので、再開するには再読み込みキーを押します。6enchant公式サイトには様々なサンプルコードや音源ファイルが収録されています。まとめ今回のゲームは移動体が縦、横に動作するシンプルタイプです。enchant.jsには高度なテクニックのサンプルもあるようです。表現豊かなウェブサイト構築の一助になればありがたいことです。『スクリプト言語を使ってみる』は、今回で一応の完結です。応じて自動的に変更したいことがあります。HTML5を使えば、簡単に実現することができます。言ってもインターネット接続で、外部からの情報を入手できることが条件です。外気温では気象庁からのピンポイント発表でも対応できることがありますが、店先に設置された温度計からの温度・湿度の取得できる環境が理想です。インターネットに接続されていれば曜日、季節の入手は容易です。曜日に応じて適切な画像を表示する例を以下に示します。今日の日付を出力します。]]></script></html>まとめあるデパートでは入り口で秘かに買い物客の全身画像をカメラに収め、過去の買い物歴などを瞬時に取り出し、接客の参考に利用始めているようです。外の天気が雨ならば元気の出るBGM、晴れならばしっとりとした曲と天気によって流す音楽を変えたりすれば販売促進につながりそうです。このように外界の情報にすばやく対応するシステム構築の参考になれば幸いです。ものづくり筆耕ブログinventorゲームやスポーツの起源は戦争に起因するものが多いです。サッカーなどは残酷な実体験をゲーム化したとの説もあります。戦略、戦術、駆け引きが争いよりは娯楽で利用される方が平和的です。ゲームはひととおり体験しました。マージャン、花札、ナポレオン、ブラックジャック、ポーカーなどです。解説書や道場通いで腕を磨いたものに伝統的ゲームである囲碁・将棋があります。経験を積み、定石・定跡をマスターすることによって勝負に勝つ確率が高くなります。勝負事では幅広い知識よりもビギナーズラックと言われる無心さで勝つことがあり、自分には並外れた博才が備わっていると勘違いし良からぬ方向にハマることもあるようです。ゲームはコンピュータを理解するために利用されます。知識の習得の合間に息抜きとしてゲームに目を向けてみましょう。歳時inventor本日は立冬。試練を乗り越えたときに来る春、労苦が実る秋に較べ地味な冬が訪れました。冬は人間を成長させてくれます。人生には華やかさだけでなく苦難も散りばめられているようです。掲載したサンプルの他、多くのHTML5の例題がインターネット上で参照可能です。javascriptのタグや一定時間で起動する関数、キーが押されたり離れるときに動作する関数の取り付け方などを理解する必要がありますが、実行結果から少しずつ慣れていきます。『習うより慣れろ』で進んでいきます。今回はゲームらしい機能を追加します。中間に赤丸で具象化された障害物が待ち構えていて進行を邪魔をします。矢印キーにより障害物を逃れゴールを目指しますが障害物に衝突すると爆音が轟きゲームは終了します。再読み込みキーを押して再開し、運よくゴールにたどり着くとファンファーレが鳴ります。/></body></html>説明ゲームの構成関数は前回とほぼ同じでstart(),draw(),keydownfunc(),ring()から成り、音声ファイルを参照して音を出力する関数が加わりました。その他、前回に追加された機能として33*nミリ秒間隔で動作するdraw関数に、障害物がランダムに現れ方向キーによって移動された熊画像が衝突するかどうかチェックされます。衝突した場合、爆発音を鳴動し衝突画像を表示します。keydownfuncでは、右端のゴールに到着したかどうか確認され、到着すればファンファーレを鳴らしdraw関数が定期的に動作することを停止し、終了処理をします。上記ファイルのダウンロードはここです。動作までの手順はXAMPPの代替策を参考にしながら、上記ZIPを展開し、7つのファイルを同一フォルダに収めます。次にEasyGame.htmlにカーソルを当てクリックします。Javaの実行を許可しますかのメッセージが出力されたら許可します。Explorerで動作を確認しました。次項に示した細かな調整をする場合、EasyGame.htmlをテキストエディタで編集します。動作の特徴133*nのnを大きくすればゴールへの到着確率が上がります。2赤円の半径Rを小さくしても衝突しにくくなります。3隠し技として最上端を移動させれば100%成功します。4障害物の位置は乱数で決まります。まとめ今回、検証したゲームは非常にシンプルですがHTML5+CANVASでここまでできるようになりました。このサンプルで障害物との衝突をくぐり抜けてゴールに到着する確率は20%程度です。ゲームの作り方を通じてHTML5とCANVASを理解され、表現豊かなウェブサイトが完成されることを祈っています。プログラミングinventorHTMLとはHTML(ハイパーテキストマークアップランゲージ)はウェブページを表現するために使用される言語です。インターネットで公開されるほとんどのウェブページはHTMLで記述されています。メールでより豊かな表現をするためHTMLを用いることもあります。紙による本では巻末にある用語索引に示されたページを引き当てて本文にたどり着いていましたが、ハイパーテキストに初めて出会ったとき、用語をクリックするだけで関連記事を読めたときは驚きました。HTMLによる表現ではテキストを始め、ハイパーリンク、色づけ、サイズ、イメージ、フォントなどを指定することができます。動的な動きを表現できるスクリプトを埋め込み、静的な表現に彩りを添え画像・リスト・表などの高度な表現力を可能にしました。サンプル以下に方向キーの操作により画像を移動させるjavascriptコードを示します。html,head,meta,script,body,canvasなどのHTMLタグやキーイベント,onloadなどの知識を必要としますが、ソースコードに示されたプログラムコードをCanvasKeyEvent.htmlとしてフォルダに格納します。フォルダにbear.pngも置いておかなければなりませんが、ダウンロードが大変ですのでサーバーにアップロードしてありますのでそのまま、利用可能です。“tiger.png”;に設定すれば自分で気にいった絵柄に変更可能です。CanvasKeyEvent.htmlをクリックすれば、図の画像が表示されます。4個の方向キーを押下して画像を動かすことができます。Evolvedで表示されています。/></body></html>このコードは図にあるように3つの関数から成り立っていて、表に示す機能と起動タイミングで動作します。start関数はこのファイルがロードされる際、ただ一度実行されdraw関数が33ミリ秒ごとに動作するように設定され、キーの押下があればkeydownfunc関数が起動するように組み込まれます。ロード後はdrawとkeydownfunc関数がイベントの発生により動作することになります。まとめここではJavaScriptの詳細な説明は省いてあります。多くの参考になる解説記事がウェブ上にそろっています。サンプルコードはhttp://www.sist.ac.jp/~kanakubo/programming/canvas/canvas1_3.txt等を参考にさせていただきました。コピー&ペーストを行い、上記に示した操作で問題なく実行に漕ぎつけられました。細かい言語の文法はさておき、結果を求めるには参考になるかと存じます。プログラミングinventorものづくりで巨万の富を手にするには至難の業です。みかんの売りさばきで成功した紀伊国屋文左衛門のように実現性の高いお金儲けは、良い商品を発見し交易することですが、その方面は他の方にお任せし、ここではものづくりについて語ります。農業において食料品を輸入すれば国民が飢えることはありませんが、アメリカ・フランスなどは農業国として農業を育成しています。不安をいだいているのは私だけではないでしょう。ものづくりは地道ですが、世界に2つと無い優れものが誕生したときの喜びは何ものにも代えられません。織り交ぜた表現豊かな手法は相手への訴え力が増大します。それらを組み合わせたり、参照する手段としてプログラミングします。プログラムはコンパイラ・ライブラリなどの知識が必要でしたが、今ではプログラムコードを記述するだけで実行可能なスクリプト言語が採用されるようになりました。スクリプト言語の仕組みを図に示しましたが、プログラムコードを記述するだけで実行することができます。従来のアプリケーションのようにパソコン、スマホ、Android、IOS用と実行機種ごとに用意することもありません。次回からスクリプト言語に触れていきます。多くの先駆者が講座形式でわかりやすい解説を展開していますので、ここでは簡単なゲーム等を作って実行する実践的手法で進めて参ります。