月別アーカイブ: 2021年1月

端午の節句2021

菖蒲の節句を祝う

翔君 こどもの日おめでとう
健やかな成長を祈ります
©2021 TacM, Ver0.01
50
 回転速度 

 

右下のはじめボタンをクリックしてスタートです。Low-speedHigh-speedボタンで矢車の回転数と風の効果音を制御することができますが回転球とこいのぼりの動きは一定です。

枠で囲まれたボタンの上にカーソルをかざし(マウスオーバー)てください。

矢羽根の付いた矢車は左図のように、画面に平行でなく垂直方向に回転するものですが、アピール度を上げるために90度傾けてあります。

小生の幼少時には見かけなかったものですが、中央の回転球や2つの矢車はいつ頃から普及したものなのか。経済生活が豊かになってひたすら子供の成長に心を配れる雰囲気が生まれた証でしょうか。

 

余談

回転球とこいのぼりの回転制御はanimation:rotateを使っていますが、矢車を回転させる制御はtransform:rotateを用いています。これは動的に遅滞なく矢車の回転を制御するためです。

一定間隔でrotateを指定する場合、setTimeoutかsetInterval関数を使いますが、今回のように回転スピードを動的に更新する場合は、setTimeoutを利用します。

尚、回転球はY軸の周りを回転するものであり、単なるrotateYによる制御は平らな板を回転するような感じで臨場感がありません。

ここでは立体感を出すためにサイコロを回転させるサンプルを例にして4枚の画像を重ね合わせています。

 

桃の節句2021

桃の節句を祝う

蓮ちゃん 🎎 桃の節句
©2021 TacM, Ver0.02

 

 

余禄

ひな祭りの歌が再生されると風車が回る仕掛けになっていますが、風の当たる面が凸形になっていました。風を受けるには凹面になっていないと具合悪いです。風車の画像を裏返しにしました。

次に、絵文字のユニコードU3297は祝を丸で囲った絵文字のはずですが、最新でないブラウザは未サポートです。🎎(ひな祭り)の絵文字に変更しました。

再生後、再生ボタンは停止ボタンの機能になります。停止機能には音楽の停止のほかアニメーション停止も含まれます。また、中断箇所から何度でも再開できます。

大願成就

大願成就を祈る

令和二年度はもうすぐ終了になります。皆様には学業、セミナー、塾などに励み十分な成果を上げられたことでしょう。

ねらい通りでなかったとしてもそれなりの効果が得られたのであればよしとしなければなりません。

今、大詰めの結末に向かっているのであれば大願成就(たいがんじょうじゅ)を祈っています。令和三年の早春にカラフルなメッセージを送ります。

Start!をクリックして応援メッセージを送ってください。

コロナ禍で様変わり

変えたかったこと

世の中、変化を望みながら変えられないことだらけです。短慮を起こさず後でホッと胸をなでおろすこともしばしば経験しておりいつも思い通りに事が運ぶことがいいとは言い切れません。

最近、今まで体験したことがない変化を見つけました。

①市役所に送る申請書を同封する封筒に切手を貼るようになったこと

②銀行の12:00~13:00昼休み時間、ATMを除き窓口が閉鎖になったこと

切手を貼ることについてはコロナ禍で税収が伸び悩んでいるので仕方ないかなと同情する部分もあります。

ただ、残念なことは申請書を出すと行政からの手当てが受けられるという知らせと申請書はメールで可能なことです。

メールによる連絡は公式には採用されていません。

また、申請書の受付も河野内閣府特命担当の旗振りを実行すれば、メールで受付可能になりそうです。そうすれば経費削減が一段と進むと思われます。高額医療などを受けたとき、市役所からの連絡方法を選択できるように考えてもらいたいです。

税額を一円多く請求されたとき、一円返納額振り込み先連絡封筒には切手を貼らずに済みました。市民に一円を戻すにあたり、かなりの税金の無駄遣いがあったように感じます。

工場などでは昼休みに照明のスイッチを切ったり減灯することは当たり前です。工場地帯周辺の銀行や郵便局は12:00~13:00の間は書き入れ時ですが、住宅地では昼休みどきに便宜をはかる必要はないでしょう。

それでも雇用者と被雇用者の力関係で労働者に気の毒な面が起きていなかったでしょうか。雇用者側から特別協力金が支払われていたように想定できますが。

サービス業では一斉に休みを取るのは難しく、昼休み時間の企業内クラブ活動には参加しにくいでしょう。コロナ禍で思い切ったことができました。

弱いところにしわ寄せ

物事を変えようとするとき、多くは弱者が犠牲になります。利益幅が小さくなったのに物の値段を上げられないときは、シュリンクフレーションという嵩を小さくしたりサービス回数を減らしたりします。

これらは消費者が気づきにくく後でわかったときはあきらめになります。残念なのは上げ底や隙間隠しで包装箱が大きくなる(従来サイズ)ことです。だまし討ちのようなステルス値上げは後で商品への思いが冷えてしまいます。

最初からコンパクトな設計ならば輸送費や倉庫料が削減なったのに付け焼刃では経費節減は微々たるものでしょう。

コロナの脅威は容易に収まりません。この際、開き直り根本、原点、起点、根幹に戻って考えたらいかがでしょうか。

蛇足

数年前、難病の高額医療で一回の注射30万円を受けたことがあります。

このような高額医療を受けるのはしのびないと思いましたが、研究機関や薬品会社は経済として回っており、安定治療前の臨床試験だったら勇気ある行為として褒められるところでした。

市役所への届け出において、交通費がかかる場合は郵便を使い、歩いて行ける場合は持ち込んで届けることが経費節減、健康上最適のように思われます。

色好まざらん男

恋を知らない男は魅力的か

 

YouTubeの再生マーク(▶)を押下後、全画面モードを指定して拡大表示でお楽しみください。

徒然草から色好みを

徒然草(つれづれぐさ)は鎌倉時代に吉田兼好により綴られた随筆です。その人間観は700年たった今でも色あせることなく輝いています。

244段ある中のうちから「いろごのみ」にまつわる警句として第3段を取り上げました。

「英雄色を好む」と言いますが、「色を好むもの英雄なり」とは誰も言いません。先とは意味が少し違うようです。このあたりが凡人には言い表せない部分です。

電子媒体の表現

紙による表現には時間や音がありませんが、ここでは時間を含めています。時間差を採用してびっくり感で見るものを惹きつけてください。音による表現は今回、見送りました。

成人の日を祝う

ウェブ書道家からのプレゼント

ウェブ太郎(上部太郎)から成人の日を迎えた若者へお祝い申し上げます。

上部太郎はウェブ上で書道を極めるべく頑張っています。書道画面にて再び、動きを付けるにはブラウザのリロードボタンを押します。

毛筆のように時間差で表示するには、まずInKscapeを使ってテキストツールからVertical textで縦書きを指定し、フォントとしてHGPGyoshotaiを用いて行書体で表示できるSVGファイルを出力します。

その後、LazyLinepainterを利用して先に出力したSVGファイルを加工し時間差で描画するhtmlを作成します。

筆を使ったような臨場感を出すには、Strokeとfillのopacityを制御します。setTimeout関数を適切に使います。

 

コロナ禍を想う

人間の歴史において感染症の蔓延は数えきれないほど生じたことでしょう。個人が流れを大きく変えることはできません。できる範囲で最善を尽くすほかはありません。外出を極力控え自分でできる専門知識の習得も人類への一つの貢献でしょう。

おまけ

せっかく習得した知識が宝の持ち腐れではもったいないです。子供の誕生日、桃の節句、端午の節句、卒園式等に毛筆で、動きを付けて、メールでプレゼントとして送ってください。

進捗インジケーター

ローディングアニメーション

制御装置が待ち状態にあるかどうかがきちんと表示される場合とそうでない場合はイライラ感に差が生まれます。

パソコンやスマホにおいて爆発的に利用者が集中した時には動作が重たくなります。その時、処理中などの告知を出すことがあります。

その処理は小負荷で実現可能なGIFファイルを利用するのが定番ですが動作を停止するには不向きです。準備中が完了したとき、アニメ動作を止めたいことがあります。今回、ここに焦点を当てます。

アニメ動作を停止する方法

GIF画像のアニメ動作を止めるには、GIF画像を制御するプラグインを利用する方法がありますが少し大掛かりになります。

ここでは簡便方法としてGIF画像同等の静止画像に切り替える方法を示します。

切り替えるタイミングで、該当するCSSを設定しなおす例を挙げます。

制御サンプルコード

8.6秒後にアニメ動作を停止する例です。

<p><img id="wait" src="https://aidesign.lolipop.jp/wp-content/uploads/2021/01/loading-arrow.gif" width="240" height="240" style="opacity:1.0;"></p>
<script type="text/javascript" charset="utf-8">
  setTimeout(function(){							//回転を制御する関数, 8.6秒後に停止する処理
	document.getElementById("wait").src = "https://aidesign.lolipop.jp/wp-content/uploads/2021/01/loading240x240.png";
  },8600);											//delay
</script>

Result

メタスライダーの使用例

metasliderの使用例

ここでは写真などの静止画像を複数枚まとめ、キャプションや画像効果(エフェクト)を付加してスライドショーの作成例を示します。Wordpressにインストールする方法は、【初心者向け】サイト内に簡単にスライドショーを設置できるプラグイン「Meta Slider」の使い方が参考になります。

プラグインしてスライドショーを作ったのに動作しませんでした。それは設定値があまりにも突飛だったためでした。

今後の備忘録として動作した例を書き記し将来の再掲に備えることにします。

今回は6枚の画像を同一サイズにしましたが、小サイズの画像の扱いを設定しておけば同じ大きさにこだわることはないようです。基本的な動作を体験できたら挑戦してはいかがでしょう。

音楽と同期する機能は持ってないようですが、JavaScriptを紐解き自分で同期することも可能でしょう。

 

ワードプレスプレスのダッシュボードのメニューからmetaSliderースライドを追加を選択します。そして、必要枚数の画像をアップロードします。最後に、高度な設定スライドの遅延、アニメーションの速度、スライスの数、スクエアの数(高さ)、スクエアの数(幅)、前のテキスト、後のテキストなどのパラメータを設定します。

最後に、metaslider idを確認し、ショートコードをコピーして記事に挿入してスライドショーを描画します。

 

スライドショーや動画を編集するツールはたくさん、出回っていますが一長一短です。

Windows Movie Makerなどサポート終了になったものもあります。

それぞれに長所を見つけて使いこなすことが必要です。

 

冬の風景2021

歳のはじめに

丑年の始めにあたり、正月の風物詩や年頭のほのかな決意などをスライダーで表示しました。WordpressにmetaSliderをプラグインしています。

スライダーを作るための設定は多くありませんが、標準から離れた値では見栄えある表示にはなりません。それらの設定例は次回に譲ります。まずは牛、正月の情景、初詣などを雅に詠んだ古(いにしえ)の歌をお楽しみください。

準備中です。回転が止まるまでしばらくお待ちください。その後、自動スタートします。

🌐