「ものづくり筆耕ブログ」カテゴリーアーカイブ

ものづくりに関する想い

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個目のゴンドラに乗った場合、すぐ終了になります。

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

 

 

日本の伝統美2019

日本の伝統美を巡る

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

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

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

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

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

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

 

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>

 

サバイバル生活になじむ

自然に根付いた生活

台風15号による千葉県の災害復旧が思うように進んでいないと報道されています。最近、温暖化の影響か台風でなくともちょっとした暴風雨で大きな災害が起きます。

現代住民は文化的な生活に慣れ過ぎて普段と異なる生活には耐えがたくなっています。

電気、水道、ガスなどのインフラが一つでも欠落すると生きていけないと嘆きます。衣食住が自給自足で回っているわけではないので致し方ありません。

サバイバルの知識が備わっていないのです。トイレが水洗になり清潔になって蚊やハエなどが発生しなくなり伝染病が蔓延することもなくなりましたが、急激な文化的生活の定着は脆さを内包しています。

2011.3.11の東日本大震災の経験が大して活かされていないようです。電気がなくてもしばらくは生活できるようにとは現実、難しいです。

コンロや七輪の扱い方をできる人は少ないです。キャンプ生活などのリクレーションは遠くなり、カセットガスボンベを使った料理をできる人は多くありません。

国土強靱化担当大臣が存在するのにサバイバル人材が育たないのは残念です。一億総右習えのもと、自給自足を目指す人を変わった人間などと評する風潮では難しいでしょう。

多彩な価値観の尊重を!

「500 Internal Server Error」で悩んだら

・htaccessの編集ミス

久しぶりに「500 Internal Server Error」が発生しました。.htaccessファイルを編集した直後に起きたので編集ミスを疑いました。かつては生命に関わるほどの大事故を起こしたようにアタフタしたことがありました。

以前に復旧を急ぐあまり確信を持てぬままに行動に移して大やけどしたことがありました。ブログの内部を更新する場合、サーバーにログインしなければなりませんが、WEBの通信環境を変更するにあたり、いつもと違うパソコンからログインしようとしたりした時には、ロック状態になることがあります。

これは繰り返しの攻撃から保護するものであり、やむを得ぬ仕儀です。上記の図でCGIに関する記事は、許可を得ずにブログの内部を更新しているという状況です。

落ちついた行動

ブログの内部更新のみならず、ブログの閲覧もできない現象にはびっくりするものですが、今回はレンタルサーバーのFTPにより.htaccsessを確認したところ、ファイルの内容が明らかに異なっていたので正しい形式に直し、ブログが正常に復旧しました。

内部ファイルを更新する場合、元のファイルをバックアップするという基本を端折ったのが躓きの始まりでした。初心忘れるべからずを守るべきでした。反省!

暑かった夏に別れを

夏休みの総括

梅雨さむが続き、待ち焦がれた夏もあっという間に過ぎ去ろうとしています。猛暑もお盆までです。お盆を過ぎると土用波が立ち込めて海水浴は注意するようにとの言い伝えがあります。

長い休みには『ノルマ』が課されます。宿題を急ピッチで消化していることでしょうか。自由研究はまとまったでしょうか。今年は9月1日が日曜日なので2学期の始業式は2日になり一日、長い夏休みになっています。

以前に《電子絵日記》の作り方をブログに載せたことがあります。小学校で宿題として《電子絵日記》を課している学校はどの程度あるでしょうか。作り方の一例を以下に挙げます。

電子絵日記の一例

夏休み2019自由研究 参照音楽=『花火』作詞:井上赳、作曲:下総皖一
夏休み・自由研究
題名《夏祭り》
「ドッカーン!ドッカーン!」
これは、夏祭りの花火の音です。
毎年、祭りの最後に打ち上げ花火があります。
きれいな花火がいくつも上がるので、
わたしは花火が大好きです。

今年の夏祭りは、おじいちゃんと弟と行きました。
出店がたくさんあって、何を買おうか迷いました。
かき氷とたこやきをおじいちゃんが買ってくれました。
たこ焼きは弟といっしょに食べました。
大きなタコが入っていておいしかったです。

金魚すくいを弟がしました。
大きな金魚をすくいたいとねらったけれど、
逃げてしまいました。でも、お店の人が同じ
くらい大きな金魚をくれたのでよかったです。
また来年も夏祭りに行きたいです。

https://manabi-enjoy.com/syogakkouseikatu/archives/2447
絵日記の文は『学びエンジョイ』「小学生の子育てを中心として、
くらしの中で学んだことを伝えていきます!」を引用
絵日記の背景画はそれぞれのフリーサイトを参照
再生ボタンをクリックして開始です。

 ©TacM,2019 Ver0.02

 

 

電子絵日記サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<style type="text/css">
.markey{
  width: 600px;
  height: 450px;
  overflow: hidden;
}
.balloon3-left-btm {
	position: relative;
	display: inline-block;
	margin: 3px 0px 10px 0px;
	padding: 0 5px;
	width: 360px;
	height: 50px;
	line-height: 60px;
	vertical-align: middle;
	text-align: center;
	color: #FFF;
	font-size: 20px;
	font-weight: bold;
	background: orchid;
	border-radius: 15%;
	box-sizing: border-box;
}
.balloon3-left-btm:before{
	content: "";
	position: absolute;
	bottom: -24px;
	left: 20px;
	margin-top: -15px;
	border: 15px solid transparent;
	border-left: 15px solid orchid;
	z-index: 0;
	transform: rotate(90deg);
}
</style>
</head>
<body>
<div style="font-size:24px; font-weight:bold; font-family:'MS 明朝'; margin-left:10px; margin-top:0px;">夏休み2019自由研究<span id='num' style='font-size:14px; color:maroon;'> 参照音楽=『花火』作詞:井上赳、作曲:下総皖一</span></div>
<DIV id="w0" style="width:600px; height:450px; border:0px blue solid; display:block;">
<img id="w1" src="http://aidesign.lolipop.jp/wp-content/uploads/2019/08/Summer-2019A.png" style="width:600px; height:450px; opacity:1.0;">
<Div id="w2" class="markey" data-direction="right" style="clear:both; margin-top:-450px; border:0px green solid; background:seashell; opacity:0">
<div id="w3" class="h2vr_30" style="float:left; font-size:18px; margin-top:10px; line-height:1.8em; width:960px; height:500px; color:navy; border:0px red solid;">
<span style="font-size:48px; color:deeppink;">夏休み・自由研究</span><BR>
題名《夏祭り》<BR>
「ドッカーン!ドッカーン!」<BR>
これは、夏祭りの花火の音です。<BR>
毎年、祭りの最後に打ち上げ花火があります。<BR>
きれいな花火がいくつも上がるので、<BR>
わたしは花火が大好きです。<BR>
<BR>
今年の夏祭りは、おじいちゃんと弟と行きました。<BR>
出店がたくさんあって、何を買おうか迷いました。<BR>
かき氷とたこやきをおじいちゃんが買ってくれました。<BR>
たこ焼きは弟といっしょに食べました。<BR>
大きなタコが入っていておいしかったです。<BR>
<BR>
金魚すくいを弟がしました。<BR>
大きな金魚をすくいたいとねらったけれど、<BR>
逃げてしまいました。でも、お店の人が同じ<BR>
くらい大きな金魚をくれたのでよかったです。<BR>
また来年も夏祭りに行きたいです。<BR>
<span style="font-size:14px; color:brown;"<BR>
<BR>
https://manabi-enjoy.com/syogakkouseikatu/archives/2447<BR>
絵日記の文は『学びエンジョイ』「小学生の子育てを中心として、<BR>
くらしの中で学んだことを伝えていきます!」を引用<BR>
絵日記の背景画はそれぞれのフリーサイトを参照</span>
</div>
</Div>
</DIV>
<Div style="width:600px; height:120px; color:navy; border:0px solid red;">
<div class="balloon3-left-btm">再生ボタンをクリックして開始です。</div><BR>
<div style="float:left; width:300px; height:55px; color:yellow; border:0px solid red;">
<audio id="s35" src="http://aidesign.lolipop.jp/wp-content/uploads/2019/08/hanabi.mp3" controls controlslist="nodownload"></audio>
</div>
<div style='float:left; height:55px; font-size:14px; line-height:1.6em; color:navy; border:0px solid gold'>&nbsp;&copy;TacM,2019 Ver0.02</div>
</Div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://aidesign.lolipop.jp/wp-content/uploads/2016/09/jquery.marquee.min_.js"></script>
<script type="text/javascript" charset="utf-8">
var songNum=0;
var evnt = document.getElementById("s35");					//BGMのイベントオブジェクト
var w1Obj = document.getElementById("w1");					//画像オブジェクト
var w2Obj = document.getElementById("w2");					//holizontal-scroll-windowsオブジェクト
  window.onload = function(){								//読み込み完了のイベント関数//console.log('ページ読み込み完了');
	evnt.addEventListener('play', function(){				//プレイイベント//console.log("PLAY/PAUSE", j);console.log("START");
		song();
		jQuery(function () {								//marquee関数
			console.log("jQuery start");
			jQuery('#w2')
			.bind('finished', function(){					//マーキー完了処理
				jQuery('#w2').marquee('destroy');			//.marquee('toggle');
				w1Obj.src = "http://aidesign.lolipop.jp/wp-content/uploads/2019/08/Summer-2019A.png";
				w1Obj.style.opacity=1;
				w2Obj.style.opacity=0;
				console.log("markey is completed.");
			}).marquee({duration: 37000})					//50000,38000,35000
		});
	}, true);												//trueで本来のイベント処理を続行させる
	evnt.addEventListener('ended', function(){});			//再生完了を知らせる//再利用を可能にする
  };
function song(){  //http://aidesign.lolipop.jp/wp-content/uploads/2019/08/Summer-2019B.png
	w1Obj.src = "http://aidesign.lolipop.jp/wp-content/uploads/2019/08/Summer-2019" + "BCDE".substr(songNum,1) + ".png";
	w1Obj.style.opacity = 0.5;
	w2Obj.style.opacity = 1.0;								//console.log("backGround", songNum, w1Obj.src);
	if(++songNum < 4)	setTimeout("song()", 24000);
	else				songNum=0;							//再開用
}
</script>
</html>

 

 

くじ引きで楽しむ

運試し

ポイントカードで買い物したり、福引きセールでガラガラを回すときはちょっぴり胸がときめきます。市民生活における小さな息抜きは楽しいものです。

ダーツ、吹き矢、射的などで的めがけて矢を射るゲームは古今東西、多く見かけます。

ここでは、HTML、JavaScriptで小さなゲームを作って夏休みの宿題を盛り上げましょう。

▶ボタンを押下して運試しスタートです。ラッキーセブンを引き当てたらファンファーレが鳴り響きます。

7を出すコツの難易度はそこそこです。サンプルコードを末尾に挙げました。参考にしてください。

©2019 TacM,Ver0.01
🎯
🌸

サンプルコード

<!DOCTYPE html>
<html>
<body>
<Div id="top" style="width:600px; height:600px; border:1px solid blue; font-size:64px; color:mediumvioletred; background-color:lightyellow;">
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2019/08/kujibiki2.png" width="285" height="150" style="margin-left:150px;">
<span style="font-size:10px; color:blue;">&copy;2019 TacM,Ver0.01</span>
<img id="disc" src="http://aidesign.lolipop.jp/wp-content/uploads/2017/10/turnTable.png" style="width:360px; height:360px; margin-left:110px; margin-top:15px; transform:rotate(90deg);">
<div style="margin-left:470px; margin-top:-205px; font-size:32px;">&#x1F3AF;</div>						<!-- &#x21e6; -->
<a href="javascript:void(0)" onclick="startStop();return false;" style="text-decoration:none;">
<div id="playstop" style="margin-left:10px; margin-top:130px; font-size:64px;">&#x25b6;</div>
</a>
<div id="luckyNo" style="margin-left:460px; margin-top:-140px; font-size:96px; color:blueviolet;">&#x1F338;</div>
</Div>
<audio id="atari" src="http://aidesign.lolipop.jp/wp-content/uploads/2017/10/1tosho.mp3"></audio>
<script type="text/javascript" charset="utf-8">
var interval=40;														//回転スピード, 74 ~ 10
var clickCount=degree=-1;												//clickCount:開始/停止, degree:回転角
function startStop(){													//開始あるいは停止を制御する関数
	var k = ++clickCount % 2;
	document.getElementById("playstop").innerHTML = "\u23f9\u25b6".substr(k, 1);
	if(k==0){setTimeout('revolution()', interval);document.getElementById("top").style.backgroundColor="lightyellow";}		//停止中から開始
}
function revolution(){													//回転を制御する関数, intervalの間隔で起動
	var d=(++degree)%36*10+90;											//0 5 10 15 20 ~ 355,   90 ~ 440
	var e=Math.floor((d-72)/36) % 10;									//0 ~ 9
	document.getElementById("luckyNo").innerHTML = e;					//console.log("Degree=", degree, d,e);
	document.getElementById("disc").style.transform="rotate("+d+"deg)";	//回転を制御
	if((clickCount % 2)==0)	setTimeout('revolution()', interval);		//引き続き回転を制御する
	else{																//停止指令を受けた
		if(e==7){document.getElementById("atari").play();document.getElementById("top").style.backgroundColor="hotpink";}	//大当たり
	}
}
</script>
</body>
</html>