月別アーカイブ: 2014年9月
抽選箱から宝もの
幻想的な万華鏡風花火
ファンタスティックな万華鏡風花火です。スピーカ音量は小さめに!
ウェブにおいて動的コンテンツの開発はFlashを採用することが当たり前でしたが、スティーブジョブズ氏の言葉を借りるまでもなく、Flashはバッテリーの消耗が激しいなどの問題を抱えているようでした。
ウェブアプリはブラウザの充実により、特別な専用ツールを使うことなくHTML5を主軸とした開発に移行しています。時流に乗るべくこのウェブアプリはHTML5canvas要素+Javascriptで開発されました。
《参考資料》『HTML5canvas要素+Javascriptで作る、動的コンテンツ』
秋の訪れ
新しいもの、よそ者への思い
EXEタイプのアプリケーションは機種、OS、端末などへの依存度が高いのに較べ、ウェブアプリケーションはそれらへの依存度が低いことが知られています。
ウェブアプリケーションにも泣き所はあり、ブラウザにより動作が異なるのも事実です。技術の進歩に現実が追い付かず新技術周辺で顕著です。規格が統一されなかったり、解釈が異なっているなどが原因です。
いつの世も新しいもの、若者、よそ者、ばか者は弾き飛ばされるものです。よそ者などと毛嫌いしているうちに人口減少になり、学校、コンビニ、病院などがなくなり限界集落となって引っ越さざるを得なくなり、自分自身がよそ者になるのが落ちです。
世界中の技術者から支援されているオープンソース化された無料のECLIPSEという統合開発環境 (IDE)に出会って感激しました。
その波はウェブ作成環境にも押し寄せて、WordPressの普及につながりました。WordPressによるサイト運用環境はWebアプリ開発にも適用度は高いと言えましょう。新しいものへの抵抗は大きいですが、少しずつ溶け込んで行くことでしょう。
二十四節気・白露
あみだくじを引く
“,$l; $m = $_GET[‘id’]; if(($m!=null) && ($l==”https://aidesign.lolipop.jp/amida/”)){ $l = strtoupper($m); // 小文字 -> 大文字 //echo(‘入力値(’.$m.’)
‘); //echo(‘変換値(’.$l.’)
‘); echo ‘《直前のくじ引き結果》
‘; for($i=0; $i
クリックするとすぐにあみだくじが実行されます。
あみだくじを引く取り扱い説明書
はじめに
あみだくじは当初、パソコンで動作するEXEタイプのアプリケーションをC言語で記述し発表しました。次にスマホで動作するAndroidアプリを開発して発表しました。
今回はパソコン、スマホ、タブレットで動作するウェブ上で動作するあみだくじを引くゲームをJavaScriptを用いて作成しました。ブログの利用規定をお読みいただいて無料でお使いください。あみだくじの由来や作成法については「あみだくじ作成法」をご覧ください。では取り扱い法を示します。
あみだくじの概要
ウェブサイトで動作するあみだくじです。動作画面は次の図に示すように、参加人数を設定するページとくじ引き結果を表示するページがあります。くじを引く前にくじ引き結果の使い方を取り決める必要がありますが、くじ引き参加人数を設定するだけというシンプルさが特徴です。
あみだくじの構成
あみだくじは3つの要素から成り立っています。
①あみだくじを引く
あみだくじを起動するページで参加人数を設定します。
②阿弥陀(Lottery)
あみだくじを実際に作成し実行結果を描画するページです。
③あみだくじを引く取り扱い説明書
あみだくじを引くため、取り扱い方法について記載された本ドキュメントです。
このくじはシンプルさが目玉であり、当たり人数や当たり先を設定しません。参加者の人数のみ入力します。くじは制御ソフトが自動的に引き、乱数を使って処理しますので毎回、異なる結果になります。参加者名を入力しないので、整理番号で管理されます。罰任務や褒賞はくじを引く前に参加者の間で決めておきます。
利用方法
①ブラウザでJavaScriptを有効にします。あなたのブラウザでJavaScriptを有効にする方法を参考にして設定しますが、すでに有効になっている場合が多いです。
②起動ページはあみだくじを引くです。
③参加者のIDを決定します。受け付け順、出席番号の若い順、年齢順、背の高さ順、名簿順、住所が北の順などで0から始まる連番です。出席番号の場合、欠番や不参加に留意ください。
④参加者を3~16の範囲で設定します。
・任務(ミッション)や褒賞の当たり先を決定します。例として大当たりはA、当たりはCなどとです。
・たとえば、12名の参加者を4人ずつ3チームに分ける場合、ABCD、EFGH、IJKLとグループ化すると決めてからくじを引きます。
・オレンジボタンをクリックするとあみだくじがすぐに描画されます。全員がそろってからクリックしたほうが公平です。
・クリックのタイミングは乱数を使うため結果への影響は皆無に近いです。
⑤あみだくじ参加人数を設定のオレンジボタンをクリックします。
⑥阿弥陀画面への移行を確認し、ファンファーレが鳴るまで待ちます。
⑦ファンファーレが鳴ったらあみだくじ上部の参加者番号や下部のくじ記号を見て結果を確認します。
⑧「前のページに戻る」をクリックすれば、参加者人数を変更してくじ引きを再実行できます。
⑨あみだくじを引くや阿弥陀をウィジェット欄のカレンダーあるいはサイト内検索から起動した場合、ヘッダータイトルにカーソルを当てクリックし選択を確定してください。ブラウザの仕様でカレンダーや検索からの起動では、複数記事が対象になることがあるため、ヘッダータイトルがクリックされるまで半確定状態です。半確定のままでは正常動作にならないことがあります。
⑩「あみだくじを引く」を経由せずにいきなり「阿弥陀」を呼び出しても、参加人数が不明であるため実行することはできません。
⑪「阿弥陀」から「あみだくじを引く」に戻ると《直前のくじ引き結果》が表示されます。画面の小さなスマートフォンではこの方が見やすいです。
利用例
①スピーチの発表順を決める
②合コンの席順を決める
③チーム分けをする
④部屋決めする
⑤掃除当番などの任務を割り振る
⑥焼肉パーティーの準備に用いる
⑦役員を選出する
⑧車の運転順番を決める
進行度
①ブラウザはインターネットエクスプローラとグーグルクロームで動作確認済みです。順次、他のブラウザを確認します。
②スマホでの動作確認はこれからです。
③16名を超える参加者のくじ引きは将来、別の方式にて発表されます。
まとめ
動作の確認については、環境構築が多岐にわたるため時間がかかります。よって多くのコメントをお待ちいたします。
あみだくじを引くに進みます。
阿弥陀
‘; //echo ‘2:’.$m.’
‘; echo ‘参加人数が未設定です。’; echo ‘規定のページ‘.”あみだくじを引く”.”から開始してください。”; exit(); } if(($m<3) || ($m>16)){ echo(‘入力値(’.$m.’)が正しくありません。’); echo ‘‘.”あみだくじを引く”.”に戻ります。”; exit(); } echo “最後にファンファーレが流れます。スピーカ音量を小にしましょう。”; echo “参加者は”,$m,”人です。
“; ?>
ウェブアプリケーション事始め
アプリケーションと言えば、パソコンやスマホ上のローカル環境で動作するスタンドアロン型アプリケーションが主流でしたが、ここにきてネットワークを介して使用するウェブアプリケーションの台頭が著しいです。前者はローカル環境であるのに対して後者は、サーバー環境とクライアントとの通信手段であるHTTPプロトコルが確立していれば、動作環境の構築はたやすいと思われます。
少し前までAndroidアプリケーションを追いかけていましたが、最近はウェブアプリケーションを探求しています。手始めにBasic,C,Javaで開発したことがある「あみだくじ」を取りあげました。あみだくじの開発法はブログにて公開しました。今回、開発言語としてHTML5,Javascript,Phpに変わっただけでアルゴリズムに変更はありませんがプログラミングのレベルでは多少の工夫や改善が行われました。
ウェブで画像や図形を動的に表示するためにImageMagickを採用しようと考えましたが最近、HTML5以上でcanvas要素が主要ブラウザに実装されましたのでcanvasに乗り換えました。統合環境のECLIPSEによりAndroidアプリケーションのクロス開発を経験しましたがブラウザで実行するこのたびの開発はECLIPSE利用に較べてずいぶん快適でした。
開発はデバッグ作業にかなりの時間が割かれますのでXAMPPを構築することはいうまでもありません。HTML5によるアプリ開発は、ハードルが高めのECLIPSEよりずっと楽です。これからは少しずつ開発方法について語っていきます。