スカイツリー450ｍ展望台から隅田川方面の眺めを動画に収めました。遠くの視界はいまいちですが、真下の車の動きをとらえることができました。真下を見ると足がすくむ感じですが、蛇行する隅田川、皇居、富士山などを一望することができました。
月別アーカイブ: 2014年9月
抽選箱から宝もの
コンピュータの乱数発生でくじが決まるのは味気ないという方は、好きなくじを引いてください。半透明のアイコンをクリックします。これは16名固定版です。
幻想的な万華鏡風花火
ファンタスティックな万華鏡風花火です。スピーカ音量は小さめに！
ウェブにおいて動的コンテンツの開発はFlashを採用することが当たり前でしたが、スティーブジョブズ氏の言葉を借りるまでもなく、Flashはバッテリーの消耗が激しいなどの問題を抱えているようでした。
ウェブアプリはブラウザの充実により、特別な専用ツールを使うことなくHTML5を主軸とした開発に移行しています。時流に乗るべくこのウェブアプリはHTML5canvas要素＋Javascriptで開発されました。
《参考資料》『HTML5canvas要素+Javascriptで作る、動的コンテンツ』
秋の訪れ
短かすぎた夏が終り秋が訪れました。炎熱の夏を乗り越え、ようやく穏やかな日々が巡ってきました。歌を詠み花を愛でましょう。
芸術の秋、スポーツの秋、実りの秋、読書の秋にふさわしくアーチストっぽくまとめました。２部構成で後半にカジュアルガールズが登場します。
Canvas tutorial template
新しいもの、よそ者への思い
EXEタイプのアプリケーションは機種、OS、端末などへの依存度が高いのに較べ、ウェブアプリケーションはそれらへの依存度が低いことが知られています。
ウェブアプリケーションにも泣き所はあり、ブラウザにより動作が異なるのも事実です。技術の進歩に現実が追い付かず新技術周辺で顕著です。規格が統一されなかったり、解釈が異なっているなどが原因です。
いつの世も新しいもの、若者、よそ者、ばか者は弾き飛ばされるものです。よそ者などと毛嫌いしているうちに人口減少になり、学校、コンビニ、病院などがなくなり限界集落となって引っ越さざるを得なくなり、自分自身がよそ者になるのが落ちです。
世界中の技術者から支援されているオープンソース化された無料のECLIPSEという統合開発環境 (IDE)に出会って感激しました。
その波はウェブ作成環境にも押し寄せて、WordPressの普及につながりました。WordPressによるサイト運用環境はWebアプリ開発にも適用度は高いと言えましょう。新しいものへの抵抗は大きいですが、少しずつ溶け込んで行くことでしょう。
二十四節気・白露
今日は二十四節気の15番目である白露（はくろ）です。朝夕の冷え込みが本格化し、夏の蒸し暑さから解放され草花に付着した露が白く輝くころです。例年は九月六日、七日ころですが今年は九月八日です。
7月の猛暑で冷夏の予想が覆されて暑い夏がやってくると喧伝されましたが長続きしませんでした。台風とともにやってきた大雨で残暑の言葉を聞くこともなく夏は終わるのでしょうか。
7月の猛暑で冷夏の予想が覆されて暑い夏がやってくると喧伝されましたが長続きしませんでした。台風とともにやってきた大雨で残暑の言葉を聞くこともなく夏は終わるのでしょうか。
あみだくじを引く
このあみだくじは参加人数３人から１６人までを扱います。最初に『あみだくじを引く取り扱い説明書』をお読みください。
“,$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
クリックするとすぐにあみだくじが実行されます。
“,$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を決定します。受け付け順、出席番号の若い順、年齢順、背の高さ順、名簿順、住所が北の順などで０から始まる連番です。出席番号の場合、欠番や不参加に留意ください。
④参加者を3～16の範囲で設定します。
・任務（ミッション）や褒賞の当たり先を決定します。例として大当たりはＡ、当たりはＣなどとです。
・たとえば、12名の参加者を4人ずつ3チームに分ける場合、ＡＢＣＤ、ＥＦＧＨ、ＩＪＫＬとグループ化すると決めてからくじを引きます。
・オレンジボタンをクリックするとあみだくじがすぐに描画されます。全員がそろってからクリックしたほうが公平です。
・クリックのタイミングは乱数を使うため結果への影響は皆無に近いです。
⑤あみだくじ参加人数を設定のオレンジボタンをクリックします。
⑥阿弥陀画面への移行を確認し、ファンファーレが鳴るまで待ちます。
⑦ファンファーレが鳴ったらあみだくじ上部の参加者番号や下部のくじ記号を見て結果を確認します。
⑧「前のページに戻る」をクリックすれば、参加者人数を変更してくじ引きを再実行できます。
⑨あみだくじを引くや阿弥陀をウィジェット欄のカレンダーあるいはサイト内検索から起動した場合、ヘッダータイトルにカーソルを当てクリックし選択を確定してください。ブラウザの仕様でカレンダーや検索からの起動では、複数記事が対象になることがあるため、ヘッダータイトルがクリックされるまで半確定状態です。半確定のままでは正常動作にならないことがあります。
⑩「あみだくじを引く」を経由せずにいきなり「阿弥陀」を呼び出しても、参加人数が不明であるため実行することはできません。
⑪「阿弥陀」から「あみだくじを引く」に戻ると《直前のくじ引き結果》が表示されます。画面の小さなスマートフォンではこの方が見やすいです。
利用例
①スピーチの発表順を決める
②合コンの席順を決める
③チーム分けをする
④部屋決めする
⑤掃除当番などの任務を割り振る
⑥焼肉パーティーの準備に用いる
⑦役員を選出する
⑧車の運転順番を決める
進行度
①ブラウザはインターネットエクスプローラとグーグルクロームで動作確認済みです。順次、他のブラウザを確認します。
②スマホでの動作確認はこれからです。
③16名を超える参加者のくじ引きは将来、別の方式にて発表されます。
まとめ
動作の確認については、環境構築が多岐にわたるため時間がかかります。よって多くのコメントをお待ちいたします。
あみだくじを引くに進みます。
阿弥陀
あみだくじを描画します。
“;
$member = “abcdefghijklmnop”;
$m = $_GET[‘id’];
$h = “https://aidesign.lolipop.jp/kujihiki/”;
if ((substr($n, 0, 36)!=$h) || ($m==null)){
//echo ‘1:’.$n.’
‘; //echo ‘2:’.$m.’
‘; echo ‘参加人数が未設定です。’; echo ‘規定のページ‘.”あみだくじを引く”.”から開始してください。”; exit(); } if(($m<3) || ($m>16)){ echo(‘入力値（’.$m.’）が正しくありません。’); echo ‘‘.”あみだくじを引く”.”に戻ります。”; exit(); } echo “最後にファンファーレが流れます。スピーカ音量を小にしましょう。”; echo “参加者は”,$m,”人です。
“; ?>
‘; //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よりずっと楽です。これからは少しずつ開発方法について語っていきます。