inventor のすべての投稿

JavaScriptを用いた観覧車

CSSだけで観覧車

前回、CSSによる観覧車を作りました。

地球が太陽の周りを公転しながら自転する如く、観覧車のゴンドラは1公転する間に1自転し、常に重力方向に姿勢を保ち続ける仕組みを理解しました。

今回は将来、Youtube Live配信を利用して100mにも及ぶ高低差をものともせず勇躍するゴンドラから生中継をめざすべく格段と難易度を上げた観覧車をお届けします。

生中継に道を拓く

生中継するにはYoutube動画配信で可能です。いきなり動画配信はハードルが高いです。まずは連続した静止画像、次に収録した動画、最後に生中継という順序が考えられます。

今回は、連続した静止画像をつなぎ合わせ、JavaScriptを含めた技術で観覧車を駆動します。

WiFiは神社仏閣においてもサポートされることが多くなっています。今やWiFiを使えば地球の裏側にいる友人や家族に、通信料金を心配することなく大観覧車の映像を楽しんでもらうことも可能です。これまでは音声が置き去りにされていました。音声もぜひ取り上げてみたいものです。

音声を含めた動画は自動で再生できなくなりました。このこともあり、このたびは開始ボタンを設けました。また、再実行できるようにリロード機能を付加してあります。

シースルーゴンドラ席

ニュースによればシースルーゴンドラ席が流行のようです。

また、高級料理にワインを提供するサービスもあります。

これらを考慮に入れてJavaScriptによる大観覧車にも、ゴンドラ座席に落ち着くとほのかな灯りがともり室内からの眺望が楽しめます。シースルー特殊機能により外界からは遮蔽された夢の空間が実現します。

発展途上JavaScript観覧車

Startボタンをクリックして観覧が始まります。観覧車が1回転すると巡行は終了します。Rerunボタンの押下でリロードされ再実行が可能になります。

JavaScriptを用いて新機軸の別画面で動作する観覧車を体験する

様々なワザが詰まった4割ほどのJavaScriptから成る98行のHTMLソースコードです。CTRL/Uでソースコードを見ることができます。お楽しみください。

おまけの雑感

他人の嗜好、好み、たしなみに論評は差し控えなければなりませんが、上記のような完全シースルーは大胆です。思い切って乗用車のガラスのように外から内は見えないが内から外は完全に見える方式にしたら観光客が倍増するのではないだろうか。

 

 

観覧車作成の研究

観覧車をHTMLで作る

現在のモーター駆動による機械式の観覧車は、意外と歴史は浅いようです。19世紀があと10年足らずに終わろうとする頃、アメリカ合衆国の技師ジョージ・ワシントン・ゲイル・フェリス・ジュニアにより開発されたとWikipediaにあります。考案者に因んで観覧車の英名は「フェリス・ウィール」と名付けられました。

ブログやホームページ記述言語のHTMLを用いて、観覧車の原型を作ってみます。画像を回転させるには多くの手法がありますがHTMLのCSS要素のひとつ、animationを採用しました。

CSSとは、HTMLファイルで作られた骨組みを装飾するものです。動きを付けるにはCSSに加えてJavaScriptを併用すると多彩な表現が可能とされていますが、CSSのanimationだけでも高級な観覧車を表現することができます。

画像を回転する

CSSアニメーションにはTransitionとAnimationの2つの機能があります。両方とも細かい動きのアニメーションを実装する時に利用しますが、基本的な機能は他の資料に譲ります。
1.CSS アニメーションの使用
2.CSS3 アニメーション    
3.JavaScript不要!CSSだけでアニメーションを作る方法 
4.CSSでアニメーション!「animation」と「keyframes」の使い方のおさらい 

画像を回転するにはanimationにkeyframesを連係させるとより効果的になります。

画像の予備知識

図に動きを付加するには、画像を重ね合わせたり、その順序、透過色による透過効果、透過率、回転位置、はみ出し部分の扱いなどを注視すると理解しやすいでしょう。

100行足らずのプログラムコードには、それらのエッセンスが詰まっています。精解するにはそれぞれのマニュアルに目を通すことが大切です。

右の図を参考にすれば、①背景図、②ゴンドラ、③支柱の3つの図から成り立っています。最後に残す画像を考慮して⓵②③の順序で重ね合わせることになります。

ゴンドラの窓から背景が透けて見えますが、窓の部分が透過色になっているためです。

単純に観覧車を回転

左図に示した8個のゴンドラが付いた観覧車を単純に回転してみます。

図をクリックすれば、別画面で表示されます。描画結果をよく見れば期待した動作でないことがわかります。

観覧車に付いているゴンドラが観覧車と全く同じ動きで回転するため、180度回転した時、すべてのゴンドラが真っ逆さまになっています。

一般にゴンドラは支柱軸を公転する間に、自らも自転します。この自転が欠如しています。

公転中に自転する

遊園地の観覧車は公転中にゴンドラは、観覧車の回転方向と逆方向に自転しています。

詳しくは不明ですが、観覧車の外輪枠にゴンドラ上部を吊り下げ回転可能にすれば、動力を使わずにゴンドラは常に水平方向を維持するでしょう。

右図をクリックして別画面で確認してください。

結果的に1公転中に1自転が保証されます。

プログラムコード17行~29行で処理されています。

自転を追加したコード例

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.swing1 {												/*--  0.大車輪 and 1.観覧車全体 --*/
    animation: swingEfect1 linear 30s 1;
    transform-origin: 10px -200px;
    display: block;
}
@keyframes swingEfect1 {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(90deg); }
    50% { transform: rotate(180deg); }
    75% { transform: rotate(270deg); }
    100% { transform: rotate(360deg); }
}
.swing2 {												/*-- 2.ゴンドラ --*/
    animation: swingEfect2 linear 30s 1;
    transform-origin: 20px 2px;
    z-index:4;
    display: block;
}
@keyframes swingEfect2 {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-90deg); }
    50% { transform: rotate(-180deg); }
    75% { transform: rotate(-270deg); }
    100% { transform: rotate(-360deg); }
}
</style>
</head>
<body>
<Div style="position:relative; width:540px; height:600px; font-size:12px; color:navy; overflow:hidden; border:1px solid green;">&copy;TacM,2019 Ver0.01
 <img src="http://aidesign.lolipop.jp/wp-content/uploads/2019/10/ferrisBack-1.png" style="position:absolute; left:0px; top:0px; width:600px; height:400px; z-ndex:1; opacity:0.2;">
 <div id="c1" class="swing1" style="position:absolute; left:260px; top:460px; width:20px; height:20px; z-index:1">
  <img id="c0" src="http://aidesign.lolipop.jp/wp-content/uploads/2019/10/en-00.png" style="position:absolute; left:-200px; top:-410px; width:420px; height:420px; z-index:2;">
  <img id="g0" class="swing2" src="http://aidesign.lolipop.jp/wp-content/uploads/2019/10/W0.png" style="position:absolute; left:-10px; top:0px;">			<!-- 0 -->
  <img id="g1" class="swing2" src="http://aidesign.lolipop.jp/wp-content/uploads/2019/10/W1.png" style="position:absolute; left:-151px; top:-59px;">		<!-- 1 -->
  <img id="g2" class="swing2" src="http://aidesign.lolipop.jp/wp-content/uploads/2019/10/W2.png" style="position:absolute; left:-210px; top:-200px;">		<!-- 2 -->
  <img id="g3" class="swing2" src="http://aidesign.lolipop.jp/wp-content/uploads/2019/10/W3.png" style="position:absolute; left:-151px; top:-341px;">		<!-- 3 -->
  <img id="g4" class="swing2" src="http://aidesign.lolipop.jp/wp-content/uploads/2019/10/W4.png" style="position:absolute; left:-10px; top:-400px;">		<!-- 4 -->
  <img id="g5" class="swing2" src="http://aidesign.lolipop.jp/wp-content/uploads/2019/10/W5.png" style="position:absolute; left:131px; top:-341px;">		<!-- 5 -->
  <img id="g6" class="swing2" src="http://aidesign.lolipop.jp/wp-content/uploads/2019/10/W6.png" style="position:absolute; left:190px; top:-200px;">		<!-- 6 -->
  <img id="g7" class="swing2" src="http://aidesign.lolipop.jp/wp-content/uploads/2019/10/W7.png" style="position:absolute; left:131px; top:-59px;">		<!-- 7 -->
 </div>
 <img src="http://aidesign.lolipop.jp/wp-content/uploads/2019/10/ferrisWheel-BASE.png" style="position:absolute; left:45px; top:105px; width:450px; height:450px; z-index:6">	<!-- 支柱 -->
</Div>
</body>
</html>

考察

ここで示したコードは研究用です。実際の観覧車は1回転するのに30~60分でしょうが、ここでは30秒にしています。

ご覧のとおりJavaScriptを使わないでCSSだけで観覧車を制御しています。

最初のゴンドラが1回転すれば終了にしてあり、8個目のゴンドラに乗った場合、すぐ終了になります。

次回にはゴンドラに乗ったら室内が明るく点灯したり、画像が見つかれば高度に応じて眺望がオンライン描写されるような観覧車に挑戦したいものです。

 

 

イベント盛り上げ装飾品

イベントを盛り上げるツール

結婚式や創業祭などは人生の中でそう何度も体験しないものです。記念のイベントを催すに当たり、特注のビンゴゲームで盛り上げてみませんか。それを制御する中核はスマホに収納されています。

会場の映像設備がユーザーに開放されるかどうかにもよりますが、スマホの画像をオンラインで表示できる時代です。

スマホ、パソコン用に開発したオンラインゲームで人生の節目にインパクトを付けて見ましょう。

今回、オリジナル画像は開始時、終了時には主催者を称える動画が表示されます。ビンゴ番号が更新されるタイミングで参加者をクローズアップして描写する演出が可能です。

主催者のアイデアに寄り添い世界に二つとない企画でイベントを盛り上げよう。

ビンゴ籠をクリックして開始です。ビンゴ籠の回転はChromeブラウザが脈動なしでスムースです。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

日本の伝統美2019

日本の伝統美を巡る

帝国ホテルバイキングと東京湾クルーズ(はとバス定期観光)

日本には多くの外国人が訪れるようになりました。以前に巡った大阪城は韓国、中国の旅行者が多かったと記憶していますが、東京の観光地は母国を特定することが難しいほど多くの国からの旅行者であふれていました。

今回、初めて訪問したところが多く、近くにいて日本の良さを放置していたのが恥ずかしいです。

デジカメを初めて持った時はめっぽう写真に収めましたが今では必要なぶんだけ撮ります。

自撮り棒で名所と一緒に自分を写した写真を撮る外国人がいましたが、今回はそれほど見かけませんでした。

写真をスライドショーに加工してYoutubeに投稿しました。厳選した16景です。久々にYoutubeを利用しアップロードの仕方を忘れるほどでした。ご覧ください。

 

ビンゴゲーム管理ソフトA

Aバージョン

ビンゴゲーム管理ソフトでAバージョンをリリースします。まだ改良点はたくさんあるようですがを一応の区切りです。アメリカの半導体ビジネスでは製品化済みの商品の改訂版にはA,B,Cと枝番を振る慣わしがありました。

画期的なマイコン8ビットCPU Intel8080が世に出ましたが、使いにくい点を改訂したのがIntel8085でした。更に改良して8085Aが出荷されたと記憶しています。それに因んでAを使ってみました。

改良点

改良点は実際のビンゴマシンの動きに近づけて一度使ったビンゴボールを使わないようにして空(から)くじをなくしたことです。ビンゴボールの番号は1~75の75種ですが、一度出現した番号は二度と現れないような処理を追加しています。抽選回数が増えるごとに動きが軽くなります。

 

これら動作は電子的システムの得意とする分野です。また、参加者ごと、抽選回数ごとの処理の切れ目が分かるように間を置いたり背景色を変えています。背景色変更の効果が記事全体に及ぶのはやり過ぎでしょうか。「あちら立てればこちらが立たず」一筋縄ではいかぬものです。

将来への布石

 

結婚式場などのイベント会場には巨大モニタ画面が備わっているようです。また、パブリックビューイングでスポーツなどが観覧できるようになりましたので、紙による抽選ゲームからエレクトリックゲームへの転換が一段と進むことでしょう。

さらなる改良点

①参加人数の入力
②カード番号と参加者の対応付け
③抽選タイミングの指定
④ゲームの記録を残す

管理機能付きビンゴゲームの動作例

ゲーム画面の左上にあるビンゴ籠をクリックし回転させて開始です。リーチが叫ばれるまで時間がかかりますが一度、リーチやビンゴが起きればにぎやかになります。

複合システムの難解な問題

今回、抽選のタイミングで背景色を変更しましたがウィジェット欄を含むすべての背景色に及び期待した動作ではありません。

ローカル環境では問題が起きてないので、調査を進めると当記事のJavaScriptオブジェクトidに”main”という名付けをしていることが原因でした。

この名前はウィジェット欄を表示させるコードで既に使用されているようです。id名をユニークな名前に変更したところ、期待した動作が得られました。

ウィジェット欄のコードはWordPressなどのサポートシステムが管理しているので個別に確認することはできません。ウ~ムなかなか難しい問題と言えるでしょう。

ビンゴゲーム管理ソフト

追加された新機能

ビンゴゲームを作って楽しく遊ぶための研究用記事です。今回、20人のビンゴゲーム参加者のゲーム完成状況を時々刻々、表示する機能を追加しました。

ひとりのビンゴカードにおいて縦、横、斜めの12組がビンゴマシンが発する番号と如何に合致しリーチやビンゴ状態に達したかを一目で把握します。

ビンゴマシンが1~75の数を決定すると参加者はビンゴカードにその番号があるかどうかチェックし、あればその部分に穴をあけます。

12組のどれかに4個の穴がそろったらリーチと、5個の穴がそろったらビンゴと叫びます。確率的には少なくなりますが2組、3組、4組が同時に成立することもあります。

その時は一段と気張ってダブルリーチ、トリプルビンゴなどと声を出してもいいかもしれません。

これら一連の動作をビンゴゲーム管理ソフトが処理します。カードマシンの籠から出たボールは再び籠に戻ることはなく、そのため空(から)くじが起きることはないでしょう。

このチェックはまだ施されてないのでたびたび空くじが起きています。空くじなしにする方法で可能ですが実施は次回以降になります。

空くじなしにする方法

空くじなしというか必ずどれかにヒットする完全な方法は、20人全員の発番に用いたボールのみをビンゴマシンの籠に用意します。加えて使い切ったボールを削除する処理を追加すればいいようです。

処理的には1~75のうち、利用したボールの値を、例えば999などと改変し、ソーティングして小さい順に並び替えその上、発生する乱数を1~74と小さくしていきます。

それをインデックスにして先ほど並び替えたテーブルを参照してマシンが発番する番号にします。これを繰り返せば空くじはなくなるでしょう。

それにしても空くじはしらけます。早めの対応が課されているようです。

管理機能付きビンゴゲームの動作例

ゲーム画面の左上にあるビンゴ籠をクリックし回転させて開始です。リーチが叫ばれるまで辛抱強く待ってみましょう。一度、リーチやビンゴが起きれば声が重なるほどにぎやかになります。

HTML実行環境の情報取得

動作環境を知るには

HTMLでブログ等を記述しているとき、JavaScriptのコードを入れて動的な表現をして魅力的な表現を試みます。そのとき、公開サーバーに上げる前にローカル環境で動作を確認するのが一般的です。

その場合、両者間で動作が異なることがあります。残念ながらこれは発展途上の分野では避けられないことです。がんじがらめに標準化、統一を目指すのはかえって進歩を阻害します。

そのとき、実行環境がどこにあるか知りたいことがあります。今回、location.hrefを用いた例を紹介します。

location.hrefについて

location.hrefとは、location.href=”URL”;のように設定して、指定したURLへジャンプするときに用いますが、console.log(location.href);のように参照すれば動作しているURLを取得することができます。

ローカル環境の場合は参照したHTMLの格納先、サーバー環境ではURLアドレスが得られるので、単にローカル/サーバーの違いを見分けるには以下のような簡便コードで実現できます。

動作環境を見分ける簡便法

以下にRunStantでHTML実行環境を構築して変数wに最適な値を設定する例を示します。

HTMLコードを入力し右上のPlayボタンをクリックすると左下にコンソール結果が表示されます。

左下部分を拡大します。「http://lite.runstant.com/?v=0.0.3」が表示されています。一方、ローカル環境で動作すると「file:///C:/xxx/yyy/examples/Info.html」のように表示されます。先頭の8文字を解析して動作環境がローカルかそれ以外かを判別しています。

このページの実行結果

開始

サンプルコード

<!DOCTYPE html>
<html>
<div>
<a href="javascript:void(0)" onclick="starting()"><span style="font-size:48px; color:orange;">開始</span></a>
<script type="text/javascript" charset="utf-8">
function starting(){
  document.write(location.href+"<BR>");           // file:///C:/xxx/yyy/examples/Info.html
  var x = location.href.substr(0, 8);             // http://lite.runstant.com/?v=0.0.3
  var w = 780;                                    // server
  if(x=="file:///")   w=440;                      // local
  document.write("X="+x+" W="+w);
}
</script>
</html>

 

音声ファイルの作り方

音声の作り方

ビンゴゲームを作るに当たり、MP3やWAV形式の音声を作るには、テキストを音声に変換してくれるサイトが便利です。今回、Sound of Textを利用させていただきました。

サイトを参照すると上図の①の画面が現れます。Text欄に変換する文言、Voice欄で言語を選択してSubmitをクリックすれば、②の画面が現れます。変換するテキストを確認してDOWNLOADをクリックすると、所定のフォルダにmp3ファイルがダウンロードされます。

テキストの設定例

「リーチ」、「ビンゴ」などの掛け声や感嘆詞音声はサイト上に多く存在し、ダウンロードフリーのものを用意できますが、ユーザーフレンドリーなメッセージは独自に準備します。『カード番号一番さん、ビンゴ完成です。あめでとうございます。』のようなメッセージ音声ファイルを作りました。

音声ファイルの利用例


《音声で意思疎通!》

けさ、ちょっと言い過ぎました。ごめんなさい!

サンプルコード

<!DOCTYPE html>
<html>
<body>
<DIV id="top" style="width:480px; height:400px; font-size:24px;  color:deeppink; border:1px solid green; display:block;">
<audio id="apology" src="http://aidesign.lolipop.jp/wp-content/uploads/2019/09/pardonme.mp3" controls controlslist="nodownload"></audio><BR>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTeIePErZuNGrIvnBBjYQoeTFz-DsGHMUV0ady7SMI3UltzSWsChQ" 
width="320" height="307" align="left" border="1">《音声で意思疎通!》<BR><BR>けさ、ちょっと言い過ぎました。ごめんなさい!
</DIV>
</body>
</html>