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

ものづくりに関する想い

画像を丸く縁どる

画像にインパクトを付ける

写真や図は縦、横の長さこそ異なるものの長方形で扱われます。時には丸、楕円形、雲形、ハート形で縁どられた写真を見かけることがありますが、通常のものに較べて目を引きます。

今回、重ね合わせの方法によって画像を丸く縁どってみます。

縁取りの仕組み
ameblo.jpより

下図のように、表示したい画像に透明色を持つ縁どった画像を重ね合わせます。手法は実際の写真立ての原理そのものです。

先に本命の画像を表示し、そのあとに縁取り用の画像を重ね合わせます。丸い部分は透明なガラスのような効果を生み下の画像が素通しになりますが、円の外は白色のため何も表示されません。

白色でなく淡いグレーにすれば曇りガラスのようにぼんやりした画像にすることができます。

HTMLによる表示例

<div style="float:left;"><img src="http://aidesign.lolipop.jp/wp-content/uploads/2018/04/P17_Amanohashidate.png" width="300" height="300"></div>
<div style="float:left;"><img src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/poly-98.png" width="300" height="300"></div>
<!-- ================ 【method】POSITION:ABSOLUTE ================ -->
<Div style="clear:both; position:relative; width:620px; height:660px; border:0px solid orange;">
<div style="position:absolute; top:50; background-image: url('http://aidesign.lolipop.jp/wp-content/uploads/2018/04/P17_Amanohashidate.png'); width:600px; height:600px;"></div>
<img style="position:absolute; top:50; width:600px; height:600px;" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/poly-99.png">
</Div>

画像に文字を入れる

夏を楽しむ

画像に文字を入れてみます。画像の説明文を画像の周辺や画像上に添えることがあります。今回は画像上に上書きしています。黒色による夏の風物詩は画像イメージであり、夏を楽しむがテキスト表示です。

画像エディタなどで画像に文字を入れて一体の表示物にする場合と、HTMLのテキスト表示機能によりテキストを入れる場合があります。双方に長所と短所があります。

タグ名は大文字と小文字を区別しません。入れ子になった開始タグと終了タグが明確になるようDivとdivを使い分けています。

夏を楽しむ

HTML表示コード

<Div style="width:640px; height:265px; border:1px solid blue;">
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2016/07/e4e718a86f9ae87f820a7909d0ee171e.png" width="640" height="260">
<div width="640" height="100" style="margin-top:-120px; margin-left:190px; font-size:80px; color:khaki;">夏を楽しむ</div>
</Div>

ひと夏の恋

情熱のサマー2019

夏は人を開放的に、大胆にさせます。タイトルに挙げたことは夏に始まり、季節が切り替わる前に終わる儚い出来事でしょうか。それでも永遠のエネルギーを燃やしたいものです。古典の秀歌、クラシックの名曲をお楽しみください。

また、若き力をたぎらせている活人におかれては、幻想的な電子万華鏡を自作してはいかがでしょう。作り方はこのブログを紐解いてください。

次の画像をクリックし、さらに切り替わった画面でBGM再生ボタンをクリックします。

 

 

動画を表示する

動画ファイル形式

動画を投稿して楽しむには動画形式に則ったファイルを作り動画を表示します。動画形式にはmp4, avi, wmv, flvなどたくんさんの種類があります。採用する形式はいつも使っているブラウザがサポートしているタイプがいいでしょう。

 

上の開始ボタンを押下してスタートです。

動画表示用HTMLコード

動画を表示するにはvideoタグを用います。autoplayを指定してもmuted以外の音声付き動画では記事のロードとともに開始にはなりません。一般にはcontrols属性を指定してコントロールバーを付加します。

poster属性は動作開始前に表示する動画内容を代表する静止画像を指定します。srcに指定するアドレスはyoutubeの投稿先アドレスやアップロードした公開サーバーアドレスを設置します。

<video id="wild" src='http://aidesign.lolipop.jp/wp-content/uploads/2016/02/WildAnimals.mp4' poster="https://www.crazyvector.com/wp-content/uploads/2018/11/Wildlife-Landscape-Illustration.jpg" controls width="100%" height="100%" controls></video>

動画の作り方

動画を利用するにあたってデジタルカメラで撮った画像を動画形式を確認してそのまま利用することができます。その形式をブラウザがサポートしていなければ変換します。

変換ツールは良質なフリー素材をダウンロードすることが可能です。写真をスライドショーのように動画風にまとめるときにはムービーメーカーを利用します。

表現豊かな動画を作るには

驚異的な閲覧数を期待するには、表現する題材もさることながら、編集技術などの知識が必須です。多数の閲覧者を誇るユーチューバ―と呼ばれる一部の人は多額の広告収入を得ていることが報道されています。

一定の訪問者数を長きに渡って保有し続けるには大変な努力が必要ですが誰にも開かれた門戸です。一念発起して頑張ってみてはいかがでしょう。

 

画像を表示する

写真やイラストを表示する

すでに作った画像、写真、イラストはimgタグを用いて表示します。

 

実際のHTMLコードは次のようになります。

<div>
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2016/08/season4.png" width="828" height="226" />
</div>

imgタグのsrc属性にて画像の格納先を指定します。ブログやホームページは多くの人々に見てもらうのが目的ですので公開サーバーのアップロード先をアドレスとして指定します。動作確認時には自分のローカル記憶装置のアドレスで構いません。

画像の多彩な表現方法

画像を横に並べたり、説明文を加えるにはimgタグの他の属性を指定しなければなりません。まずは簡単な表現をマスターします。

画像の作り方

画像やイラストをどのようにして作るのでしょうか。まずは既存の画像を表示してみます。公開することなく自分のローカル環境で表現するぶんには著作権の心配はありませんので、ネット上にある画像を表示してみます。

自信がついて友達に見せたいときには、フリー素材を探して表示するようにします。

魅力的な画像入り記事をつくるには

表現力の高い画像記事にするには画像編集ソフトやデジタルカメラの扱い方などの知識を吸収するとよいでしょう。

 

音楽を鳴らす

音楽を鳴らしてみる

音楽を鳴らす ©TacM,2019 Ver0.01
おんがく:オニのパンツ


開始ボタンを押してスタートです。

HTMLコード

<div style="font-size:26px; color:violet;">音楽を鳴らす<span style="font-size:12px; color:blue;">&nbsp;&copy;TacM,2019 Ver0.01</span></div>
<audio id='bgm' src="http://aidesign.lolipop.jp/wp-content/uploads/2019/04/oninopantsu.mp3" controls controlslist="nodownload"></audio>
<div id="kyoku" style="height:24px; font-size:14px; line-height:2.0em; border:0px solid navy;">おんがく:オニのパンツ</div>

説明

音楽を鳴らすにはaudioタグを用います。タグという言葉が出ましたが初めて出会う方は画像を表示したり音楽を鳴らすための仕組みと理解してください。タグは100を超える種類があり少しずつ理解していきます。タグや要素の意味を図にしてみました。



上記のように開始タグと終了タグがあります。divはdivision、hはheader、pはparagraphのように英単語の1字以上の短縮形から成り立っています。

タグの説明は図にする場合が多いです。説明のために小なり(Less Than)や大なり(Greater Than)の記号を本文記事の中に置くとタグとして機能し、説明文が乱れることがあるためです。

今回はタグの説明でした。

夏休みの宿題

時は巡る

梅雨がなかなか開けず、梅雨寒むが続きやきもきしていたら一気に猛暑の連続です。そこそこ、ほどほどとこちらの都合どおりには何事も進みません。

夏休みの真っ只中にあり、行楽地、博物館、図書館などは家族連れでにぎわっています。ハ月は夏休みの宿題について語ります。

道具を使いこなす

レストランでメニューを注文、駅で切符を購入するには会話よりもキー操作によって物事が決まっていく世の中です。

道具は人間特有の文明の利器と言われています。それらの仕組みや原理について知るきっかけになれば幸いです。

夏休みの宿題、特に電子絵日記に気を配りながら情報機器にまつわるあれこれについて触れていきます。

おかあさんへの感謝

先ず、おかあさんへ感謝の言葉を伝えてみましょう。それは以下のようにメッセージを入力するだけで十分です。

おかあさん、いつもありがとう



色や文字サイズを変えたり、BGMを流したりするにはちょっとした知識が必要になります。それを次に記します。

HTMLを理解する

多くの人が会話をするには共通語を用います。くせのある方言では仲間うちだけの会話になります。そこで情報機器の効能を活かせる言葉を使います。それがHTMLです。

HTML(エイチティーエムエル、HyperText Markup Language)は、情報機器を用いてウェブ上で情報をやりとりするために開発された言語です。 現在、インターネット上で公開されてる文書は、HTMLに基づいた表現方法で作成されています。

文字だけでなく、画像、音楽、動画などの多彩な表現を実現するには従来の約束事では不十分であり、新しい仕組みが導入されています。

また、昼間の毎整時に鳩が飛び出す高度な柱時計を作るにはJavaScriptと併用します。それによって動きが加わった趣きのある表現が可能になります。

簡単な表現から始める

できることから始める

HTMLをすべてマスターするにはかなりの時間がかかります。あかちゃんが母語を完全に理解せずとも意志の疎通が図れるように、簡単なところから始めればよいのです。

新しいことを始めるには若い時が有利であるというのは的を射ています。自我が確立して常識を振り回す頭の固い御仁は不利になります。

それでも向上心や謙虚さを持ち合わせている80歳を超える高齢者でも新しいことに挑戦できます。

先の例題

<div style="border: 1px blue solid;">
<h2><span style="font-family: 'arial black', sans-serif;"><span style="color: cyan;">おかあさん、</span><span style="color: purple;">いつもありがとう</span></span></h2>
</div>

 

喫緊の安全対策

実施の優先順位

科学の発展が無条件に人間を幸福にしているわけではありません。利用の仕方が間違っていたり、応用することを躊躇していれば宝の持ち腐れです。車の追突やアクセルとブレーキの踏み間違いによる事故が後を絶ちません。

最近、農薬散布のヘリコプターが高圧電線に引っ掛かり墜落した事故が報道されています。高圧電線は急に設置されるわけでなく、設置場所の位置や高さは安定した情報です。

この情報をヘリコプターの運転者が共有していれば事故は防げるはずです。GPS技術が導入されてかなりの時間が経過した今、電線は運転者には見えにくくてもそれをサポートするシステムの構築が難しいとは思えません。

地下に埋設されている電線、通信ケーブル、ガス管、上下水道管が映し出される画像システムが稼働しています。

雪国における右図のようなスノーポールも運転席の画像に映るようになれば実際のポールは必要なくなるかもしれません。

車載カメラが大衆価格で設置できる時代です。

車に較べて高額なヘリコプターに危険物感知あるいは危険物に接近した情報を発信する装置を搭載するのは容易に実現可能と推測します。

車の自動運転だけがクローズアップされています。船舶なども含めた交通安全対策が実現されるように期待します。

経営者、国のリーダーは目先の利益だけを追求せずに高所大所からの判断を迫られているようです。

変わることへの力

変遷の歴史

コンビニの24時間営業がようやく見直されるようです。時代時代に合わせて変わる体力がないと取り残されます。人口集密地はいうに及ばず過疎地でも一律に24時間営業を強いられるのは理不尽です。

都市部では遅い時間のサービスは割高ですが、地方では行きかう人がまばらになる遅い時間のサービスは逆に割安になっています。それを全国一律に営業体制を守らせるのは実情にあっていません。

24時間戦えますかのキャッチコピーが一世風靡しました。その間、石油危機が複数回訪れ、時の副総理がアラブ諸国を訪問し油乞い外交を続けて国難を切り抜けました。一方、テレビ放送ではNHKが23時終了、民放放送は24時終了のやむなきに至りました。そうやって厳しいエネルギー政策を実行したのに、《喉元過ぎれば熱さを忘れる》で24時間営業につながりました。

数度のオイルショック

言いふらされた化石燃料の枯渇

石油は後、50年ほどで枯渇すると学校で習った人が多いことでしょう。その後、鉱物資源の探索技術が向上しその考えが退けられました。また、石油代替エネルギーが研究されて話題に昇るのも少なくなりました。急に枯渇するのは困りますが、化石燃料の枯渇はすでに織り込み済みなのです。

それはバラ色から始まった

政策は複合的要因で変わります。ソーラー発電への補助金も期限付きです。誰もが投機的行動をしているわけではありませんが、過当競争が業界全体を衰退させることはよく耳にすることであり、時代の趨勢を見守りながら変わり続けることが大切のようです。