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

次世代キャッチコピー

新機軸の動くキャッチコピー

動くキャッチコピー第2弾をお届けします。ロダン作・考える人の静かな銅像から一転、軽やかな動きが加えられた次世代のキャッチコピーです。

中央のはじめボタンがくっきり描画されそこをクリックすると、未来のクリエーター・ウェブデザイナーを育てる学習塾のキャッチコピーが現れます。

最後まで閲覧していただいたお礼に、中心部の先生の画像が鮮明になったらそこをクリックして妖艶風な動画を描画申し上げます。

その場所は本当はもっとも見てもらいたいホームページのアドレスを置いておく場所なのです。商売の業績アップの一助になれば幸いです。

動くロゴマーク

動くキャッチコピー

キャッチコピーを再描画するにはブラウザの再ロードボタンをクリックします。

手づまり感を打破する

この頃、紙による表現に手詰まり感がある一方、インターネットを利用する表現は限りない広がりを感じます。いちいち目先の傾向にとらわれるのはどうかと思いますが、大きなうねりを無視すると気が付いてみれば一周遅れとなって取り残されることになります。

コロナ禍で失職の憂き目にあっている人が多いと聞きます。早く元に戻られるように祈っています。

とは言っても人手不足の分野は必ず存在します。当面、需要に応ずるにしても揺るぎない知識、技能、技術を身に着けるべく、IT技術者やウェブデザイナーを目指してはいかがでしょう。

頂上を極めるにはそれなりの努力が必要でしょうが、まずは登山口に行って緒に就くことになります。

本ブログは懇切丁寧とは言い難いですが、指針の一つになりますので閲覧していただきたいです。

電子媒体を活かす

会社や団体組織をアピールする端的なものとしてロゴマークがあります。有力どころはデザイナーに依頼してアピールの高いマークを作ります。今ではスマホを持っていることが一般化しているのでホームページで広報します。

なのにロゴマークは静止したままです。電子媒体を有効利用しないのはもったいないです。このたび、リサージュ曲線、正葉曲線などを基調にした動くロゴマークを作りました。

自前の会社名、キャッチコピーを承ります。ブログの問い合わせにてご連絡ください。

傾向は変化する

新しい傾向

これまですごろくの上がりのごとく、芸能人や知識人の究極のラスト職業として政治家(多くは県知事)を考えることができまし た。

県知事の元職業として中央官僚、大学教授、芸能人、弁護士、ジャーナリスト、スポーツマンなどが多かったように感じます。

会社や団体組織の長は黙々と中で組織に貢献した者がなるのが通例ですが、知事の場合は違っていたように感じていました。

最近、この傾向が崩れたようで新しい展開です。たたき上げの政策人、政治家がなるというより、著名人が候補に押されても中々、 承諾を受けられないからではないだろうか。



一方、『国家が諸君の為に何をしてくれるかを問うな。諸君が国家の為に何を成し得るかを問いたまえ。』と語って第35代アメリ カ大統領に当選したジョン・F・ケネディが受けた尊敬・敬慕が政治家に向けられなくなったことも一因となったいるようです。

選挙対策側から推薦を受けた著名人が冷徹な考えのもとに安易に立候補しなくなっているのかもしれません。政治の世界で、独裁 者が追放されたのに、後を継ぐ為政者がドングリの背比べから抜け出せず混沌・混乱を繰り返しているところも存在します。それ ほど現状を改革していくことが難しいと言えるでしょう。

’21知事選

 

 

 

 

 

 

多数決、民主主義などは古代ギリシャで芽生え、義務教育では最終的な仕組みとして「貝殻追放」の言葉で習ったと記憶していますが、一筋縄ではいかないようです。テレビの解説番組で取り上げてもらえるよう期待します。

おまけ

古い人間には「貝殻追放」と習いましたがそれは誤訳とか、今は「陶片追放」に改められているそうです。

HTMLのonClick属性の謎

評価は永遠でない

文書の作り方において、さまざまな表現法を体得すると楽しみが倍加しますが、今回は憂鬱になった話をします。

HTMLではdiv, span, pなどの要素を組み合わせて記事を作成します。重ね書きするときにはposition relative/absoluteを使えば多彩な表現が可能です。

他の手法ではmarginにて負の値を指定して重ね書きを実現することができます。absoluteは絶対的な位置決めを思い起こさせ柔軟性が欠けるのではと考え、marginを多用していましたが、a要素のonClick機能との相性がよくないことがわかりましたので記録に残します。margin指定による重ね書きの評価を最小に変更します。

実現したいこと

a要素によるハイパーリンクは電子媒体が紙媒体を凌駕する絶大な機能の一つです。実現したいことは下図の左に示すように、『図を複 数領域に細分化し指定された領域に応じた表現をする』ことです。

position relative/absoluteによる重ね書き

<Div style="position:relative; width:240px; height:300px;">
<a onclick='s1()'><div id="d1" style="width:240px; height:200px; position:absolute; left:0px;   top:0px;   z-index:20; background:lightcyan;     border:1px solid red;">A</div></a>
<a onclick='s2()'><div id="d2" style="width:240px; height:200px; position:absolute; left:0px;   top:200px; z-index:40; background:palegoldenrod; border:1px solid blue;">B</div></a>
<a onclick='s3()'><div id="d3" style="width:100px; height:230px; position:absolute; left:140px; top:100px; z-index:50; background:lavender; border:2px solid green;">C</div></a>
</Div>
<script type="text/javascript" charset="utf-8">
function s1(){console.log("A(20)");}
function s2(){console.log("B(40)");}
function s3(){console.log("C(50)");}
</script>

margin-left/margin-topによる重ね書き

<Div style="width:240px; height:300px;">
<a onclick='s1()'><div id="d1" style="width:240px; height:200px; z-index:20; background:lightcyan;     border:1px solid red;">A</div></a>
<a onclick='s2()'><div id="d2" style="width:240px; height:200px; z-index:40; background:palegoldenrod; border:1px solid blue;">B</div></a>
<a onclick='s3()'><div id="d3" style="width:100px; height:230px; margin-left:140px; margin-top:-300px; background:lavender; border:2px solid green;">C</div></a>
</Div>
<script type="text/javascript" charset="utf-8">
function s1(){console.log("A(20)");}
function s2(){console.log("B(40)");}
function s3(){console.log("C(50)");}
</script>

期待した結果にならない事

margin-left/margin-topによる重ね書きをして、その領域にa要素にてハイパーリンクを設定したとき、図の右のような結果になりました。具体的には、左図のlightcyan領域の左下部をクリックすると、右labender領域をクリックしたように評価されるのです。加えて、下palegoldenrod領域の左上部をクリックしても同じ結果になります。

以上のことからmarginによる描画とa要素のonclick機能は相性が悪いという結論です。重ね書きはオーソドックスな方法であるposition relative/absoluteを使った方が発展性があるといえます。

大きな古時計

アニメーションによる表現

作成内容

『大きな古時計』は作詞・作曲ヘンリー・クレイ・ワークによるアメリカ合衆国のポピュラー・ソングです。かつて公会堂などに大きな柱時計が置いてありましたが、今では見かけなくなりました。

 

この記事はHtmlで記述されていて画像や歌詞がスクロールする機能はjQueryを使っていますが、時計振り子のスウィングだけはanimationを用いています。振り子は限りなく揺れ動きますが時計の分針、時針に波及しません。正確な時計表示は別の機会になります。

画像とテキストはposition:relativeとposition:absoluteで位置決めされて表現されます。visibilityで表示・非表示を切り替えたりopacityを調整して重ね書きに対応しています。

余白なし画像スクロール描画法

画像を数珠つなぎに連続して横スクロール描画するときや一枚の画像を繰り返して表示するとき、大きな余白が出現してかったるさを覚えます。そのような場合、同じ画像をもう一枚、用意することによって空白をなくすことができます。

画像Aを横にスクロールして連続表示すると同じサイズの空白が生じます。このようなとき、同じ画像Bを時間差で表示させることによって上のような空白のない表現が可能になります。ページ初頭の雲が右に流れるアニメーションも同じ手法を用いています。

サンプルコード

<div id="d1" data-direction="left" data-duration="6000" style="width:600px; height:200px; z-index:30; overflow:hidden;">
  <img src="http://aidesign.lolipop.jp/wp-content/uploads/2021/03/picture30.png" width="600" height="200">
</div>
<div id="d2" data-direction="left" data-duration="6000" style="width:600px; height:200px; margin-top:-200px; z-index:30; overflow:hidden;">
  <img src="http://aidesign.lolipop.jp/wp-content/uploads/2021/03/picture30.png" width="600" height="200">
</div>
<div style="margin-left:-35px;"><img src="IMG/picture30AB.png"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.6.0/jquery.marquee.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$('#d1').marquee({delayBeforeStart: -6000});
$('#d2').marquee({delayBeforeStart: 0});
</script>

さいごに

当ブログでもjQuery.Marqueeを何度も掲載しています。すぐ上のサンプルコード一部にある8行と9行のjquery.min.jsとjquery.marquee.jsリンクアドレスは貴重な情報になります。ライブラリーのダウンロードを面倒と感じる人には打って付けです。



また、スクロール表現を初心から紐解くにはテキストを流れるように表示するjQueryプラグイン「jQuery.Marquee」が参考になるでしょう。

animation.cssの使用例

アニメーション表現例

animation.css使用の具体例です。再実行はブラウザの再ロードボタンをクリックします。

びっくり箱 Jack-in-the-box(zoomIn) ©2021 TacM, Ver0.01

サンプルコード

<head>								<!-- びっくり箱をアニメーション表示 -->
  <meta charset="utf-8">
  <style>
  #container{						/** 画面の左右の中央に表示 **/
	width: 640px;
	margin: 0 auto;
	padding: 0.6em 2em 2em 2em;
	color: mediumvioletred;
	font-size:22px;
	font-weight: bold;
  }
  </style>
  <link rel="stylesheet" href="http://aidesign.lolipop.jp/wp-content/uploads/2021/03/animate.css">		<!--Animate.css(V4.1.1)を読み込む-->
</head>
<div id="container">&emsp;びっくり箱&emsp;Jack-in-the-box(zoomIn)
  <img class="animate__animated animate__zoomIn" style="animation-duration:0.8s; animation-delay:0.2s; animation-iteration-count:3; border:2px solid blue; border-radius:20px; display:block;" src="https://thumb.ac-illust.com/56/56146a30d96665280ff4dd5d52a454b4_t.jpeg" width="480" height="340">
</div>
16行目を細分化して再掲
<img class="animate__animated animate__zoomIn"
 style="animation-duration:0.8s; animation-delay:0.2s; animation-iteration-count:3;
 border:2px solid blue; border-radius:20px; display:block;"
 src="https://thumb.ac-illust.com/56/56146a30d96665280ff4dd5d52a454b4_t.jpeg"
 width="480" height="340">

css使い方を深掘りする

前回、『入学を祝う2021』において、animation.cssを使ったアニメーション10例を取り上げました。バージョン4に強化されたcssは巧妙なアニメーションをたやすく実現させてくれます。ライブラリーとしてのcssはバラエティに富む表現を提供してくれますが、class, styleへの指定で思い通りにならずたいへん悩みました。これからのために記録に残します。

animate.cssには100を超えるclass名が内包されています。そのすべてを解説した記事は見当たりませんが、class名の一部swing, shake, zoom, bounce, fadeなどの意味から機能を類推することができます。

今回、その指定方法が思うように行かず戸惑ったことを以下にまとめました。

一般に、div, span, p要素などで参照するclassやstyleに示された情報の本体は別ファイルで用意されたcssや同一ファイルに定義されたstyleブロック内に存在します。それらはhtml内のdiv, imgで参照されますが個別的に指定されていればこの値が最終的に適用されます。

たとえば、アニメーションの繰り返す回数が永久的(infinite)と定義されていてもhtml内のstyleでanimation-iteration-countが再定義されていればこちらが有効になります。上記例はびっくり箱のアニメーション例としてzoomInを使った例です。

補足説明

【フリー素材】金魚が泳ぎまわるGIFアニメ  を参照

animate.cssに定義されているスキルを引き出すに当たり、class名には該当する機能名を指定するに留め、細かい設定はstyleで定義することによって解決しました。animate.cssで定義している繰り返し回数は1~3、遅延秒数は1~5秒です。

cssに規定されていない繰り返し回数:7、遅延秒数:2.6秒を設定するために当初、大いに悩みました。16行目を細分化して再掲に表示したようにanimation-durationなどのパラメーターはstyleに定義します。属性名に続きコロンの後に値を指定します。

入学を祝う2021

アニメーション事情

電子媒体でメッセージを表すとき、動きを入れると豊かな表現になります。今回、animate.cssを用いて小学校入学をお祝いしました。

HTMLにアニメを加えるとき、CSSにanimationプロパティを定義する方法とanimate.cssの中のanimate__から始まるclass名を参照する方法があります。

animationプロパティについて多くの解説記事があふれていますが、animate.cssがバージョン4に更新されバージョン3との互換性がないことからanimate.css使い方の情報不足は否めません。

バージョン3で定義したclass名にanimate__を付加すれば互換性がとれるものもありますが少ないです。バージョン3 animate.cssの解説記事は参考になりますが、バージョン4 animate.cssとリンクしたバージョン3サンプルコードは動作しません。

マイクロソフトが開発したビデオの製作・編集に使用するソフトウェアであるWindows Movie Makerは、画像に切り替え効果を加えた高度な機能を有していましたが、システム的な細工が施されたようで古いソフトウェアを大事に使うことができなくなりました。

そのクォリティーに近づけるべく渾身の力を込めて、バージョン4 animate.cssアニメーションを基礎にしたムービーメーカーを作りましたので公開します。

バージョン4 animate.cssのあらまし

バージョン4 animate.cssについては Animate.css バージョン4がリリース!v3と非互換なので注意! を参照しました。CSSを参照するにあたり、自分のコードに取り込む場合は圧縮されたanimate.min.css、ドキュメントとして読むにはanimate.cssを参照します。アニメーションclass名は前バージョンと異なりその上、class名の数がかなり増えています。



animate.css(Version4.1.1)のなかのclass名接頭語をサーチしてclass名一覧表を以下に示します。111個が確認されました。

animate.css(Version4.1.1)のclass名一覧表

.animate__animated {}                     .animate__fadeInBottomRight {}        
.animate__animated.animate__infinite {}   .animate__fadeOut {}                  
.animate__animated.animate__repeat-1 {}   .animate__fadeOutDown {}              
.animate__animated.animate__repeat-2 {}   .animate__fadeOutDownBig {}           
.animate__animated.animate__repeat-3 {}   .animate__fadeOutLeft {}              
.animate__animated.animate__delay-1s {}   .animate__fadeOutLeftBig {}           
.animate__animated.animate__delay-2s {}   .animate__fadeOutRight {}             
.animate__animated.animate__delay-3s {}   .animate__fadeOutRightBig {}          
.animate__animated.animate__delay-4s {}   .animate__fadeOutUp {}                
.animate__animated.animate__delay-5s {}   .animate__fadeOutUpBig {}             
.animate__animated.animate__faster {}     .animate__fadeOutTopLeft {}           
.animate__animated.animate__fast {}       .animate__fadeOutTopRight {}          
.animate__animated.animate__slow {}       .animate__fadeOutBottomRight {}       
.animate__animated.animate__slower {}     .animate__fadeOutBottomLeft {}        
.animate__bounce {}                       .animate__animated.animate__flip {}   
.animate__flash {}                        .animate__flipInX {}                  
.animate__pulse {}                        .animate__flipInY {}                  
.animate__rubberBand {}                   .animate__flipOutX {}                 
.animate__shakeX {}                       .animate__flipOutY {}                 
.animate__shakeY {}                       .animate__lightSpeedInRight {}        
.animate__headShake {}                    .animate__lightSpeedInLeft {}         
.animate__swing {}                        .animate__lightSpeedOutRight {}       
.animate__tada {}                         .animate__lightSpeedOutLeft {}        
.animate__wobble {}                       .animate__rotateIn {}                 
.animate__jello {}                        .animate__rotateInDownLeft {}         
.animate__heartBeat {}                    .animate__rotateInDownRight {}        
.animate__backInDown {}                   .animate__rotateInUpLeft {}           
.animate__backInLeft {}                   .animate__rotateInUpRight {}          
.animate__backInRight {}                  .animate__rotateOut {}                
.animate__backInUp {}                     .animate__rotateOutDownLeft {}        
.animate__backOutDown {}                  .animate__rotateOutDownRight {}       
.animate__backOutLeft {}                  .animate__rotateOutUpLeft {}          
.animate__backOutRight {}                 .animate__rotateOutUpRight {}         
.animate__backOutUp {}                    .animate__hinge {}                    
.animate__bounceIn {}                     .animate__jackInTheBox {}             
.animate__bounceInDown {}                 .animate__rollIn {}                   
.animate__bounceInLeft {}                 .animate__rollOut {}                  
.animate__bounceInRight {}                .animate__zoomIn {}                   
.animate__bounceInUp {}                   .animate__zoomInDown {}               
.animate__bounceOut {}                    .animate__zoomInLeft {}               
.animate__bounceOutDown {}                .animate__zoomInRight {}              
.animate__bounceOutLeft {}                .animate__zoomInUp {}                 
.animate__bounceOutRight {}               .animate__zoomOut {}                  
.animate__bounceOutUp {}                  .animate__zoomOutDown {}              
.animate__fadeIn {}                       .animate__zoomOutLeft {}              
.animate__fadeInDown {}                   .animate__zoomOutRight {}             
.animate__fadeInDownBig {}                .animate__zoomOutUp {}                
.animate__fadeInLeft {}                   .animate__slideInDown {}              
.animate__fadeInLeftBig {}                .animate__slideInLeft {}              
.animate__fadeInRight {}                  .animate__slideInRight {}             
.animate__fadeInRightBig {}               .animate__slideInUp {}                
.animate__fadeInUp {}                     .animate__slideOutDown {}             
.animate__fadeInUpBig {}                  .animate__slideOutLeft {}             
.animate__fadeInTopLeft {}                .animate__slideOutRight {}            
.animate__fadeInTopRight {}               .animate__slideOutUp {}               
.animate__fadeInBottomLeft {}                                                   

New Movie Maker

カウントリーダー画面をクリックし多彩な画像切り替え効果をお楽しみください。

100個を超す機能のうち、ほんの10個のアニメーションサンプルですが呼び水としては十分と考えられます。

あとは参照者・利用者の頑張りによるでしょう。不明点はブログを通して問い合わせてください。

追加

最初の画像を左からズームインアニメーションさせるには以下のように指定します。画像アドレスは仮りのものです。animate.cssはアニメーションテクニックの宝庫です。

<img id="p10" class="animate__animated animate__zoomInLeft 3.0s 0.5s 1"
 src="20214-0.png" width="480" height="270" style="border:1px solid navy; display:block;">

贈ることば2021

旅立つ若者へ贈る

  友人を送る李白
青山せいざん 北郭ほっかくよこたわり
白水はくすい 東城とうじょうめぐ
 ひとたびわかれを
孤蓬こほう 萬里ばんり
浮雲ふうん 遊子ゆうし
落日らくじつ 故人こじんじょう
ふるって 茲自ここよれば
蕭蕭しょうしょうとして 班馬はんばいなな

現代語訳
青い山々が 街の北側に横たわっていて、
川は白く街の東側を取り囲むように巡り流れている。
ひとたび、この地に別れを告げれば、
孤独に生えるヨモギのように万里の彼方に旅立ってしまう。
空に浮かび流れる雲は 旅にさすらうあなたの心だ。
沈む夕陽は見送る私の気持ち、そのものだ。
手を振って 旅立とうとすると、馬が寂しそうにいなないた。

検証の例

ブラウザ google chrome, edge, operaは好ましい表示になりましたが、firefox, safariは表示が崩れました。縦書きのプラグインを使うとうまくいくかも知れません。今回、プラグインの利用はありません。

記録を残すには

ドライブレコーダーの利用

この頃、いろんな事件や犯罪が目立ちます。交通事故において接触事故では事故の責任程度で両者間の保証等が違ってきます。

そのため、ドライブレコーダーの設置が一般化してきました。

あおり運転で生命を失う事件も発生しており、明白な証拠を残すことが大切です。

事実を証明する資料

不在証明は現場にいなかったことを証明するものであり、領収書は支払ったことの証(あかし)を受け取り側が証明するものです。メールの送受信記録は回答したことや通知した証明に使うことができます。

郵便でやり取りした案件が行き詰って音沙汰がないので先方に電話したところ、メール(電子メール、Eメール)で昨夜、回答したとの電話説明があり、あわててメールを開くと先方のいうとおりという体験をしたことがあります。

電子媒体は主張を裏付けます。自分で用意したメールのツールを使って商品の購入や取り消しをした場合はメールの送受信記録が残っていることが多いです。かなり古いものはわかりません。いつも使っている電子機器のメール保存状態を把握しておくと訴訟に役立つでしょう。

安心感のある方策

購入したチケットは解約による払い戻しには応じないのが通例です。2020オリンピックのチケットにもその旨が記載されていました。ただ、主催者側都合で状況が変わる時には別のようです。2020オリンピックマラソン競技が札幌開催を受けて有料観賞が取りやめになったことにより、全額を払い戻してもらいました。コロナで公演が中止になった場合も返金してもらいましたが、手続きに差がありました。

前者の場合は、メールで払い戻しを申し込み入場券(相当品)を郵便局に持ち込んで返金してもらいましたが、公演中止の払い戻しでは入場券を送付到着後に返金するとの手続きで信用してよいものか大いに悩みました。

封筒に公演チケットを半分入れた写真を撮って証拠物件を残し手続きをしたところ、きちんと返金してもらい写真を使うことなく胸をなでおろしました。

メールに記録されない操作を証拠に残す方法

通販で商品を購入する、会員になって定期的に専門的な情報を受ける時には主催社側が提供するツールを使います。

この時、申し込み情報の記録を残さないものが存在します。

あとで様々なオプションが付加されたように感じてもあやふやな場合は主催者との交渉に不安が生じます。

このような場合、送信データに誤りがないか確認する左のような画面がどのツールでも現れます。この画面を「スクリーンショット」で保存する方法を以下に示します。

スクリーンショットを「ピクチャ」に保存

Windows10において画面ハードコピーの方法があります。主催社に送信する直前の画面が出現したとき、「Windows」キーと「PrintScreen」キーを同時に押します。するとWindowsの「ピクチャ」フォルダー内の「スクリーンショット」フォルダーにPNG形式の画像ファイルが保存されます。

ファイル名は「スクリーンショット (1).png」になります。括弧は共に半角で左括弧の前には半角スペースが付きます。数字は順次、1ずつ上がっていきます。

このように最終送信画面を保存しておけば、後に確認するときに非常に役立つことでしょう。「Windows」キーと「PrintScreen」キーを同時に押すだけで自動的に保存されるのでわずらわしさを軽減できるでしょう。ファイル数が増えると管理することが困難になるので、ファイル名の変更やサブフォルダーへ振り分けることを忘れてはなりません。

自己防衛を強化する

専門的な操作を必要とするとき、先方に不備があっても証拠が残っていないときには、けむに巻かれて「臍を噛む」「悔しさを嚙みしめる」思いをさせられます。

そのときの対抗策は自分でしておかなければなりません。自社に都合悪い情報は残しにくいです。その対策に自分で保存しておきましょう。