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

抽選箱から宝もの

コンピュータの乱数発生でくじが決まるのは味気ないという方は、好きなくじを引いてください。半透明のアイコンをクリックします。これは16名固定版です。

幻想的な万華鏡風花火

ファンタスティックな万華鏡風花火です。スピーカ音量は小さめに!

ウェブにおいて動的コンテンツの開発はFlashを採用することが当たり前でしたが、スティーブジョブズ氏の言葉を借りるまでもなく、Flashはバッテリーの消耗が激しいなどの問題を抱えているようでした。

ウェブアプリはブラウザの充実により、特別な専用ツールを使うことなくHTML5を主軸とした開発に移行しています。時流に乗るべくこのウェブアプリはHTML5canvas要素+Javascriptで開発されました。

《参考資料》『HTML5canvas要素+Javascriptで作る、動的コンテンツ

Canvas tutorial template

秋の訪れ

短かすぎた夏が終り秋が訪れました。炎熱の夏を乗り越え、ようやく穏やかな日々が巡ってきました。歌を詠み花を愛でましょう。 芸術の秋、スポーツの秋、実りの秋、読書の秋にふさわしくアーチストっぽくまとめました。2部構成で後半にカジュアルガールズが登場します。 Canvas tutorial template

新しいもの、よそ者への思い

web3-1-728EXEタイプのアプリケーションは機種、OS、端末などへの依存度が高いのに較べ、ウェブアプリケーションはそれらへの依存度が低いことが知られています。

ウェブアプリケーションにも泣き所はあり、ブラウザにより動作が異なるのも事実です。技術の進歩に現実が追い付かず新技術周辺で顕著です。規格が統一されなかったり、解釈が異なっているなどが原因です。

browser5

yosomonoいつの世も新しいもの、若者、よそ者、ばか者は弾き飛ばされるものです。よそ者などと毛嫌いしているうちに人口減少になり、学校、コンビニ、病院などがなくなり限界集落となって引っ越さざるを得なくなり、自分自身がよそ者になるのが落ちです。

世界中の技術者から支援されているオープンソース化された無料のECLIPSEという統合開発環境 (IDE)に出会って感激しました。

その波はウェブ作成環境にも押し寄せて、WordPressの普及につながりました。WordPressによるサイト運用環境はWebアプリ開発にも適用度は高いと言えましょう。新しいものへの抵抗は大きいですが、少しずつ溶け込んで行くことでしょう。

二十四節気・白露

今日は二十四節気の15番目である白露(はくろ)です。朝夕の冷え込みが本格化し、夏の蒸し暑さから解放され草花に付着した露が白く輝くころです。例年は九月六日、七日ころですが今年は九月八日です。

Hagi24

7月の猛暑で冷夏の予想が覆されて暑い夏がやってくると喧伝されましたが長続きしませんでした。台風とともにやってきた大雨で残暑の言葉を聞くこともなく夏は終わるのでしょうか。

あみだくじを引く

このあみだくじは参加人数3人から16人までを扱います。最初に『あみだくじを引く取り扱い説明書』をお読みください。
amidanyorai

  

クリックするとすぐにあみだくじが実行されます。

あみだくじを引く取り扱い説明書

はじめに

あみだくじは当初、パソコンで動作するEXEタイプのアプリケーションをC言語で記述し発表しました。次にスマホで動作するAndroidアプリを開発して発表しました。

今回はパソコン、スマホ、タブレットで動作するウェブ上で動作するあみだくじを引くゲームをJavaScriptを用いて作成しました。ブログの利用規定をお読みいただいて無料でお使いください。あみだくじの由来や作成法については「あみだくじ作成法」をご覧ください。では取り扱い法を示します。

あみだくじの概要

ウェブサイトで動作するあみだくじです。動作画面は次の図に示すように、参加人数を設定するページとくじ引き結果を表示するページがあります。くじを引く前にくじ引き結果の使い方を取り決める必要がありますが、くじ引き参加人数を設定するだけというシンプルさが特徴です。

あみだくじの構成

あみだくじは3つの要素から成り立っています。

①あみだくじを引く
 あみだくじを起動するページで参加人数を設定します。
②阿弥陀(Lottery)
 あみだくじを実際に作成し実行結果を描画するページです。
③あみだくじを引く取り扱い説明書
 あみだくじを引くため、取り扱い方法について記載された本ドキュメントです。

amidahiku

このくじはシンプルさが目玉であり、当たり人数や当たり先を設定しません。参加者の人数のみ入力します。くじは制御ソフトが自動的に引き、乱数を使って処理しますので毎回、異なる結果になります。参加者名を入力しないので、整理番号で管理されます。罰任務や褒賞はくじを引く前に参加者の間で決めておきます。

Lottery-0

利用方法

①ブラウザでJavaScriptを有効にします。あなたのブラウザでJavaScriptを有効にする方法を参考にして設定しますが、すでに有効になっている場合が多いです。
②起動ページはあみだくじを引くです。
③参加者のIDを決定します。受け付け順、出席番号の若い順、年齢順、背の高さ順、名簿順、住所が北の順などで0から始まる連番です。出席番号の場合、欠番や不参加に留意ください。
④参加者を3~16の範囲で設定します。
・任務(ミッション)や褒賞の当たり先を決定します。例として大当たりはA、当たりはCなどとです。
・たとえば、12名の参加者を4人ずつ3チームに分ける場合、ABCDEFGHIJKLとグループ化すると決めてからくじを引きます。
野外パーティー・オレンジボタンをクリックするとあみだくじがすぐに描画されます。全員がそろってからクリックしたほうが公平です。
・クリックのタイミングは乱数を使うため結果への影響は皆無に近いです。
あみだくじ参加人数を設定のオレンジボタンをクリックします。
阿弥陀画面への移行を確認し、ファンファーレが鳴るまで待ちます。
⑦ファンファーレが鳴ったらあみだくじ上部の参加者番号や下部のくじ記号を見て結果を確認します。
⑧「前のページに戻る」をクリックすれば、参加者人数を変更してくじ引きを再実行できます。
あみだくじを引く阿弥陀をウィジェット欄のカレンダーあるいはサイト内検索から起動した場合、ヘッダータイトルにカーソルを当てクリックし選択を確定してください。ブラウザの仕様でカレンダーや検索からの起動では、複数記事が対象になることがあるため、ヘッダータイトルがクリックされるまで半確定状態です。半確定のままでは正常動作にならないことがあります。
⑩「あみだくじを引く」を経由せずにいきなり「阿弥陀」を呼び出しても、参加人数が不明であるため実行することはできません。
⑪「阿弥陀」から「あみだくじを引く」に戻ると《直前のくじ引き結果》が表示されます。画面の小さなスマートフォンではこの方が見やすいです。

goukon

利用例

①スピーチの発表順を決める
②合コンの席順を決める
③チーム分けをする
④部屋決めする
⑤掃除当番などの任務を割り振る
⑥焼肉パーティーの準備に用いる
⑦役員を選出する
⑧車の運転順番を決める

進行度

①ブラウザはインターネットエクスプローラとグーグルクロームで動作確認済みです。順次、他のブラウザを確認します。
②スマホでの動作確認はこれからです。
③16名を超える参加者のくじ引きは将来、別の方式にて発表されます。

まとめ

動作の確認については、環境構築が多岐にわたるため時間がかかります。よって多くのコメントをお待ちいたします。

あみだくじを引くに進みます。