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

CSSでカウントリーダー

レトロ映画風カウントリーダー

かつて、映画は娯楽の王様と言われていました。映画の冒頭、ロケット打ち上げ時のカウントダウンのように、10秒程度の『カウントリーダー』が流れるのが通例でした。

ハリウッド映画では100%映し出されますが、邦画では富士山や波の風景などが流れたように記憶しています。

以下はインターネットで見つけたサンプル動画です。見るボタンをクリックして閲覧し10秒後にはまた、戻ってきてください。再生ボタンを利用した方がいいようです。

カウントリーダーは動画形式ですぐれた作品がインターネット上にあふれていますが、メッセージを追加することは容易ではありません。そこで今回、CSSとHTMLによる映画フィルムが横移動する感じの10秒カウントリーダーを作りました。原本の「映画の上映開始っぽいカウントダウンのCSSアニメーションサンプル」を土台に築き上げました。

 

フィルムが縦(上下)方向に流れるのがほとんどですが、斬新デザインの横移動にしました。動きを制御する場合、JavaScriptと併用する方式がありますが今回、意識的にCSSだけにしてあります。

再生ボタンはありませんのでブラウザの再ロードボタンをクリックすれば何度でも動作します。

10

9

8

7

6

5

4

3

2

1

🎥
5さいの たんじょうび おめでとう
©2021 TacM, Ver0.01

あとがき

画像の横縦比率は16:9です。最新のデジカメやスマホ対応にしてあります。

カウントリーダーが目立つと本文が貧弱 化しますのでそこそこの機能でいいのではないでしょうか。

コロナ禍ではありますが、卒業式、入学式、結婚式などの記念作品に応用できます。お祝いのメッセージはソースコードを修正します。

超横長画像部分表示

アニメーション高度化

HTMLのCSSによってanimationを使って動的な表現をするとアピール度の高い情報発信をすることができます。そのとき、横方向に長い画像において空白が生じ、まだらっこしさを感じます。数珠のように隙間なく無限ループする表示を実現できましたので公開します。

CSSだけで数珠つなぎに無限ループするニュースティッカーを作ってみるを参考にしました。

制限事項など

公開される記事は取材、開発、確認などはローカル環境で行われれますが、公開サーバーにアップロードすると動作が異なり公開できる品質にならないことがあります。

このような場合、異なるサイトにアップロードしiframeで埋め込む方式があり、大方、解決方向に向かいますがこれも制限付きですれすれ合格ということもしばしばです。

iframeの最大横幅widthが500あるいは640の制限を受けることです。

多少の制限を受けながら、横長の集合画像を一つずつスキマなく描画するCSS、JavaScriptをまとめてみましたので公開します。

ねらい

30枚の超横長画像から1枚ずつ切り取って表示します。最後の画像を描画後に空白が生じることなく数珠つなぎに無限ループで表示されます。表示画像の上にカーソルをかざすと表示が一時的に停止します。カーソルが画像から離れると再開します。

サンプルコード


<style>				/* CSS */
.loopSlide {		/* マウスオーバーするとアニメーションが変化します */
	display:flex;
	width:204px;
	heigt:184px;
	overflow:hidden;
	background:#fff8ff;
	border:1px solid gold;
}
#first {
	animation: slide1 60s -30s linear infinite; animation-play-state:running;
}
#last2 {
	animation: slide2 60s linear infinite; animation-play-state:running;
}
@keyframes slide1 {
  0% {transform: translateX(100%);}
  to {transform: translateX(-100%);}
}
@keyframes slide2 {
  0% {transform: translateX(0);}
  to {transform: translateX(-200%);}
}
</style>
<!-- HTML -->
<div id="festa" class="loopSlide">										<!-- 空白を表示させないために同じもの二つ用意する -->
  <img id="first" src="https://aidesign.lolipop.jp/wp-content/uploads/2021/02/hinamatsu_30.png" width="6120" height="184">
  <img id="last2" src="https://aidesign.lolipop.jp/wp-content/uploads/2021/02/hinamatsu_30.png" width="6120" height="184">
</div>
<img id="overall" src="https://aidesign.lolipop.jp/wp-content/uploads/2021/02/hinamatsu_30.png" width="665" height="20" style="margin-top:5px;">
<div style="margin-left:5px; font-size:10px; color:darkred;">&copy;2021 TacM, Ver0.01</div>
<script type="text/javascript" charset="utf-8">
const v = document.getElementById('first').style;						//前半:target要素1を指定
const w = document.getElementById('last2').style;						//後半:target要素2を指定
document.getElementById("festa").addEventListener('mouseover', () => {	//マウスが要素上に入った時
	v.animationPlayState = 'paused';									//前半
	w.animationPlayState = 'paused';									//後半
}, false);
document.getElementById("festa").addEventListener('mouseleave', () => {	//マウスが要素上から離れた時
	v.animationPlayState = 'running';									//前半
	w.animationPlayState = 'running';									//後半
}, false);
</script>

祝ひなまつり

さらなるお祝い

桃の節句2021にて一度、『蓮ちゃん』のひなまつりを祝いました。このたびは大幅に動きを加えて祝賀ムードを盛り上げています。目玉はHTMLのanimation機能を使っていることです。地球が太陽の周りを公転しながら自転するかのような動きをします。

そのほか、ひな祭りにまつわるおそなえものや飾り物を30種描画します。お祝いを受けるお姫様の名前は人気の高い『蓮ちゃん』にしました。

ちょっとしたHtml, Css, JavaScriptの知識があれば自分の関係者の名前に変更できます。

プロテニス選手の大坂なおみさんが筆記体で透明ボードにサインするような雰囲気にするにはそれなりに基本的な知識が必要でしょう。

プログラミングを初歩から本格的にマスターしたい場合は「音や映像が飛び出すプログラミングつぶやき本」を紐解いてください。

前にも取り上げましたがサンプルになるプログラムコードを変更して研究するやり方があります。

赤ちゃんが言葉を覚えるのに両親の話し方をひたすら真似します。多くのサンプルに触れれば親を凌駕することができます。

車を改造して公道を走らせることはできませんがひな型になるプログラミングを元にして動作させるのは著作権に触れない範囲であれば問題ありません。まずはローカル環境で動作させ、物足りなさを感じるようになったら公開してはいかがでしょう。

動作例

開始ボタンをクリックしてスタートです。停止ボタンで回転が止まります。

れん
ちゃん
しゅく
🎼
開始
©2021 TacM, Ver0.01

負うた子に教えられる

負うた子に教えられて浅瀬を渡る

年月は万人に平等に与えられます。歳、年は西洋よりも東洋で重く尊重されているように感じられます。

『亀の甲より年の功』『負うた子に教えられて浅瀬を渡る』 『老いては子に従え』『愚者もときには賢者に説法』『年寄りと金釘引込む程良い』『麒麟も老いては駑馬に劣る』『老いたる馬は道を忘れず』『経験は学問にまさる』などのことわざがあります。

先日、散歩中に成長著しい街路樹を発見し「生きとし生けるもの」の珍しい実態を写真に納めました。

4枚の写真は若木苗の植樹後、数十年の長きにわたって撮影したものに相当します。1本の木をそれほど長く観察できないので他の樹で代替したものです。

①の写真は苗木から成長間もない若木で添木(そえぎ)の存在が目立ちます。

②番目は成樹になりかけた状態です。

③番目は添木が目立たないほどに成長した街路樹を写真に納めたものです。添木は飾り物のようです。

④番目は添木の補強杭を押しのけて押しも押されぬ大木になった状態です。





 

人間も一つの生き物であり、樹木の生きざまは人生に置き換えることができます。

子育てではヨチヨチ歩きの子供を叱ったり励まして大きくしますが、育てられた本人は一人で大きくなったと思っています。

それを気づかされるのは自分が子育てをし始めた時です。かなり先のことです。子を育てた親は気が付いてみれば、年収や社会的信用なども子供に追い抜かれているのです。その有様を4枚の写真で表現しました。

『負うた子に教えられて浅瀬を渡る』については多くの解釈がありますが、「負んぶして育てた子供が自分を乗り越えるほどに成長して新しいことや親が知らないことを教えてくれる」というのも正解の一つでしょう。

おんぶする

最近、おんぶする姿はあまり見かけなくなりました。おんぶするという言葉もおんぶにだっこなどに使われるだけです。今はおんぶするよりもカンガルーのように前にだっこする形が一般化しています。

だっこする形は動きにくいです。背中に負う形の方が作業しやすいです。近代以前までは母親といえども子育てに加えて家事を含む作業が待ち受けていたことでしょう。赤ちゃんには向き合っている格好が安心できるので今のように変わってきたものと考えられます。

機種依存文字を避ける

機種依存を克服

丸囲み文字

丸囲み文字、例えば「㊓」「㊗」などの文字はユニコードとして定義されていますが機種依存文字として扱いが不安定な文字が存在します。上の例は祝の囲み文字を機種依存から抜け出す例を示しました。 機種依存・環境依存文字とはOS(Operating System)やブラウザに依存して表示が異なる文字をいいます。

☎ 📞

デザインが変わるだけならば大きな問題とはなりませんが、まったく表示されない文字が存在します。

機種依存文字の一部の丸囲み文字はdiv, spanタグのborder属性で丸囲み文字に似たような表現が可能になります。上例は「㊗」の機種依存克服の一例です。

時間をかければ特定のブラウザの丸囲み文字に酷似した表示が可能ですがすべてのブラウザ向けにデザインすることは困難です。丸囲みや四角囲み以外、♬のような文字を代替することも難しいです。

機種依存文字はなるべく利用すべきでないという人には、「機種依存文字チェッカー」サイトがあり調査してくれます。

以下の図はサイトにより調査した結果です。

機種非依存丸囲み文字表示例

<div style="width: 180px; height: 70px; border: 1px blue solid;">
<div style="float: left; margin-top: 5px; width: 80px; height: 50px; border: 0px purple solid;">
<div style="margin: 0 auto; vertical-align: middle; width: 38px; height: 38px; font-size: 34px; line-height: 1.1em; font-weight: 500; color: green; border: 3px pink solid; border-radius: 23px;">祝</div>
</div>
<div style="float: left; text-align: center; width: 80px; height: 60px; font-size: 50px; line-height: 1.2em; color: tomato; border: 0px gold solid;">&#x3297;</div>
</div>

余談

丸囲み文字の稿で左にアナログ式から少し進歩したデジタルまがいの電話機(☎)、右に古いタイプの受話器(📞)を機種依存文字で表示しました。

妙な表示になっている場合は環境の違いによるものとあきらめてください。

上図はローカル環境で表示したときの機種依存文字です。電話機はアナログ式の黒電話です。環境依存そのものです。

機種依存文字コード例

機種依存文字  機種非依存文字 機種依存文字コード16進数
明治 337E
㍽   大正 337D
昭和 337C
平成 337B
令和 32FF

 

春望2021

漢詩朗読

目算通りにならないときや挫折を味わったときは、ふるさとの自然や家族を思い浮かべて立ち直ってください。

朗読と漢詩の描写は「春望 杜甫」をクリックして開始します。後に左下のボタンを指定すると現代語訳が表示されます。

 

 

 

祝子供の日

再びのメッセージ

君、ちゃん こどもの日おめでとう
健やかな成長を祈ります
©2021 TacM, Ver0.06
左の画像はサッカーアニメ春夏秋冬を参照しました
50
 回転速度 

余談

前回の作品をバージョンアップしました。3月3日は「桃の節句」ですが祝日ではありません。よって、端午の節句5月5日、こどもの日は男女に共通な祭日であるべきです。

女性をないがしろにすると怖い結果が待ち受けていそうです。そこをかなり意識した作品が出来上がりました。

こどもの日を祝う

翔君、蓮ちゃん こどもの日おめでとう
健やかな成長を祈ります
©2021 TacM, Ver0.05
左のサッカー画像はサッカーアニメ春夏秋冬を参照しました
50
 回転速度