月別アーカイブ: 2019年10月

前例主義は変わるか

悪しき慣習

令和元年も後2ヶ月です。月日はまわりの思惑に関わらず留まることを知りません。当方は電話不精、出不精を挽回すべく年に2度ほどの筆による挨拶を長年継続してきました。

ここへきて高齢化社会を反映し毎年、年初めの賀状では挨拶が憚れる状況です。郵便事業は民営化が図られましたが、日本郵政の株式は国が保有し続けており、残念ながら大胆な企業展開は難しいようです。

年賀状の利用は尻すぼみ

年賀はがきの発行枚数は2003年の44億5936万枚を頂点に年々、減少しています。人は高齢になると取り巻く周りも高齢化するので年末年始の欠礼ハガキの差し出しは毎年連続する可能性が大きいです。

賀状というめでたさを暗示する名称はいかがなものでしょう。お年玉付き年賀はがきの名称は止めて、景品付き記念はがきなどの名前にしてほしいです。

個人による印刷技術が進化している現況においては、あらゆる冠婚葬祭に使える当選番号のみがついたシンプルなデザインのものがあってもよいのではないだろうか。

特に赤みをなくした控えめな色のデザインがほしいです。スマホが全盛を誇る時代にこそ他人と異なるアピール法を採用する極め付き情報発信を始めませんか。

近況を連絡するだけの年初めの挨拶

年賀状は虚礼の最たるものと筆不精の言い訳が聞こえてきそうです。個人の考えが尊重される時代です。

様々な考えがあって当然ですが、一律に強制できるものではありません。

現役の時にはビジネスでいやおうなしににスケジュールで出していましたが、現役を終えると極端に出したりもらったりする枚数が減ります。

金貨、金塊、高価な商品、高額商品券による贈賄罪が後を絶ちません。100円にも満たない年始の挨拶が虚礼とは情けないです。心のこもった挨拶状は実例の最高品といっても過言ではないでしょう。

郵便はがきに期待するもの

お祝いをイメージしないデザインを追加
当選番号のみ印刷されたデザインを追加
指定した日(元旦、1月4日)に配達されるはがき
今の当選方式などを踏襲しながら電子メールで届く
単なる近況挨拶への利用を啓蒙する
丸に3つ茶

梅花の宴

即位礼正殿の儀によせて

令和の誕生を祝って、雅な和風調雰囲気のなか『梅花の宴』をお楽しみください。祝日・即位礼正殿の儀10月22日(火)には間に合いませんでした。11月10日(木)の天皇即位パレード《祝賀御列の儀》にまた想い起してください。

オーディオ再生ボタン(▶)を押下してスタートです。福岡太宰府市の坂本八幡宮(いにしえの大伴旅人邸)をしのびつつ荘厳なBGMのもとご鑑賞ください。

梅花の宴・令和の誕生を祝って音源参照:obscured『著作権フリーbgm配布サイト hurt record』
©TacM,2019 Ver0.00
  梅花ばいかうたげ・即位礼正殿せいでんの儀によせて
    「万葉集 巻五-八一五 梅花の歌」の序文
天平二年正月十三日に、帥老そちらういえあつまりて、宴会をべたり。
時に、初春しょしゅんれいげつにして、気く風やわらぐ。うめ鏡前きょうぜんふんひらき、らん珮後はいごこうを薫らす。加以しかのみにあらずあさけみね雲移くもうつり、まつうすものを掛けてきぬがさかたぶけけ、ゆふへくきに霧結び、とりうすものぢられて林にまとふ。庭に新蝶舞ひ、空には古雁こがん帰る。
ここに、天をきぬがさにしつちしきゐにし、膝を ちかづさかづきを飛ばす。ことを一室のうらに忘れ、ころものくび煙霞えんかの外に開く。淡然たんぜんみずかゆる し、快然くわいぜんに自ずから足りぬ。
もし翰苑かんゑんにあらずは、何を以ってかこころをのべむ。ねがはくは落梅の篇をしるせ、古と今とれ何か異ならむ。園梅えんばいを賦して、いささかに短詠を成すべし。

【口語訳-解説】 富田敏子氏作品参照
天平二年正月十三日、太宰帥だざいのそち旅人たびと卿の邸宅に集まり、宴会を開いた。ちょうど初春正月の佳い月で、風は快く穏やか。梅花は化粧鏡前の白粉おしろいのように白く、蘭は匂い袋のように香る。それだけでなく、夜明けの峰に雲がかかり、松は雲のうすぎぬ天蓋てんがいをさしかけ、夕べの嶺には霧がかかり、鳥は霧に封じ込められ林をさ迷う。庭には春生まれた蝶が舞い、空には雁が南に帰る。
そこで天をきぬがさにし、地を座敷に、悠然とお互い膝を近づけ酒杯をくみ交わす。一同は言葉も忘れ、襟もゆったり外気に向けてくつろぐ。こだわらず気ままに振舞い、皆が快く満ち足りている。
もし文筆によらないなら、何をもって心中を述べることができるだろう。落梅の歌を詠んでほしい、唐の昔も今もその心は違わない。苑の梅の風情を思い、おのおの歌を作ってくれ。

 

余禄・天蓋について

天蓋(てんがい)という言葉があります。

①仏像などの上にかざされる傘状の仏具
②虚無僧が被る深編み笠
③貴人にさしかける長い柄がついた傘

の意味があります。ここでは三番目の意味が適切のようです。図にすれば右図のようなものと思われます。

 

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を利用しアップロードの仕方を忘れるほどでした。ご覧ください。