johmonjin のすべての投稿

画像部分表示3

2018-06-21プログラミングjohmonjin

画像トリミング3

画像部分表示の第3弾です。少しずつ、高級化を図れるようになりました。これまで述べた正常動作条件が必ずしもすべて正しいとは限らないようです。

あとの記事がより信憑性が高いといえます。サイズ不ぞろいの集合画像から必要なものだけ抽出して表示する例を示します。

今回はJavaScriptコードに頼らず、HTMLコードだけで実現しています。

HTMLコード

<html>
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2016/08/0727.png" width="600" height="400">
<hr width="600px" align="left" style="border:0;border-top:4px solid green;">
<DIV style="position:relative; width:600px; height:135px; height:135px; border:1px orange solid; overflow:hidden;">
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2016/08/0727.png" width="600" height="400" style="float:left; position:absolute; left:-496px; top:-169px; clip:rect(169px 586px 303px 496px);">
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2016/08/0727.png" width="600" height="400" style="float:left; position:absolute; left:-50px; top:-320px; clip:rect(320px 230px 390px 140px);">
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2016/08/0727.png" width="600" height="400" style="float:left; position:absolute; left:-235px; top:-125px; clip:rect(125px 510px 180px 415px);">
</DIV>
</html>

杞憂

HTMLコードを見ていただくと、同一画像イメージを4ヶ所で指定しています。恐らく、言語処理系はすでに読み込んだ画像イメージがあれば、重ねて読み込みが行われないように最適化していると信じたいです。もしそうでなければ、このサンプルコードは最悪の見本となるでしょう。その節は反面教師にして決して参考にしないでください。

資源を有効利用するにはJavascriptにおいて var img4=new image();のように読み込んだデータを確保しておいて、他の3ヶ所でも再利用して描画したいものです。

雨と詩人

2018-06-19プログラミングjohmonjin

粋なセリフ

雨はほどよく万遍なく降ってくれれば最高の恵みとなりますが、近ごろは温暖化の影響か激しく集中的に降り、土砂崩れや堤防決壊などの災害になることがあります。

雨音はショパンの調べと古人はしゃれたコピーを考えてくれました。雨の降る様は多くの人にとって非日常であり、誰をも詩人にしてくれます。

「雨音はショパンの調べ」の原曲は1980年代、イタリアを含むヨーロッパの国々でヒットチャートの上位に輝き、松任谷由実、小林麻実のコンビによる日本語曲も人気を博しました。

雨にまつわる著作権保護期間終了の童謡：野口雨情作詞・中山晋平作曲《雨降りお月さん》をスクロール画像とともに描画し、雨を楽しむ試みをしました。

縦書きサポートh2vR.CSSとスクロールをサービスするMarquee with CSS二つのプラグインを使用しています。

下の▶開始ボタンをクリックしてください。野口雨情のふるさと情景が左にスクロールします。

動作例

画像部分表示２

2018-06-17ものづくり筆耕ブログjohmonjin

画像トリミング第2弾

画像の部分表示第2弾です。10枚の動物の画像を2行5列に並べたイメージがあります。これを順に1秒間隔で描画します。

作り方は前回、説明してありますがその肝は、親要素にposition:relativeや画像描画サイズとはみ出し部分の表示法を設定し、イメージ画像は孫要素に入れ、子要素のstyle属性にはposition:absoluteで切り抜く画像位置を指定し、widthとheightで幅と高さを設定することです。

動作サンプルコード

<html>
<body>
<img id="uenozoo" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/06/animals10.png" width="385px" height="160px"><BR><BR>
Ver0.01&emsp;<button onclick="if(v==0)setClip();">開始</button>　<span id="num" style="color:red">&#x277c;whale</span>
<DIV style="position:relative; width: 150px; height: 150px; overflow:hidden; border:0px solid green;">
<div id="sample" style="position:absolute; left:-300px; top:-150px; width:750px; height:300px;">
<img id="animal" src="https://aidesign.lolipop.jp/wp-content/uploads/2015/08/animal10.png">
</div>
</DIV>
<script type="text/javascript" charset="Shift_JIS">
const animal_10=['squirrel', 'bear', 'racoon-dog', 'lion', 'fox', 'giraffe', 'elephant', 'whale', 'koala', 'hippopotamus'];
var v=0;
function setClip(){																//animal10.png  original-size : 750*300
 document.getElementById( "sample" ).style.left = (-v % 5 * 150) + 'px';
 document.getElementById( "sample" ).style.top = (-Math.floor(v / 5) * 150) + 'px';
 document.getElementById("num").innerHTML="\u24ff\u2776\u2777\u2778\u2779\u277a\u277b\u277c\u277d\u277e".substr(v, 1) + animal_10[v];
 if(++v < 10) setTimeout(setClip, 1000);
 else v = 0;
}
</script>
</body>
</html>

動作例

Ver0.01 　❼whale

画像の部分表示

2018-06-14プログラミングjohmonjin

画像トリミング

動物の毛を手入れする人のことをトリマーと言いますが、画像の周囲や映像の前後の不要部分を切り取って、必要な部分だけを抜き出すことをトリミング(trimming)と呼んでいます。

下に示した画像のように、ひとつひとつをパーツとみなし、集合写真のように一枚の画像に納め一括して管理すると画像の枚数を少なくすることができます。

個々の画像はサイズが一定でも異なっていても単独画像のように扱うことができます。よって、ここでは必要な部分だけを切り抜くテクニックについて語ります。

部分表示

大きな画像の一部を切り取って表示するには、CanvasのdrawImage関数が便利です。原画像の一部を拡大・縮小して描画できます。モダンブラウザならばCanvasサポートは万全です。その他にスタイルシート（CSS）のclip機能を使って画像を部分表示することができます。

Clipの使い方でHTMLコードをローカル環境ではいい感じの動作が得られたので、公開サーバーにアップロードしてみると毎回、期待を裏切られていました。よくあることですが今回はじっくり腰を据えて調査し、一定の結論が得られたので記録に残すことにしました。

動作環境を特定する

切り抜きをするとき、clip:rectを使うに当たりposition:relativeとposition:absoluteをセットで使います。このpositionプロパティの使い方に問題がありました。今回、部分表示するにはclip:rectを使わずに実現できました。失敗の核心と改良点を示します。

部分表示するとき、親要素にposition:relativeを、子要素にposition:absoluteを指定します。親要素でDIVにより領域を確定し、子要素にIMGで画像を指定した時に誤動作が起きることを突き止めました。

上左図の画像はサイズ100*100の画像を4つ集合したサイズ400*100の画像です。

1つの画像を切り抜いて表示するには親要素に100*100の領域を指定し、子要素に400*100を重ね合わせ、はみ出した3画像ぶん（黄色の背景）をoverflow:hiddenにすれば、１つの画像（ピンクの背景）を切り取ることができます。

重ね合わせると上右図のように子要素の画像が親要素のサイズに合わされてしまうことが誤動作の原因でした。これは試したモダンブラウザに共通して起きました。

子要素でwidthによりサイズを指定しても改善しません。ネット上のサンプルは子要素に画像ではなくテキストを表示する例がほとんどで、画像でない場合、期待した動作になります。

上の図で左のTEST6は誤動作例です。div要素でラップして画像要素を隠蔽すれば正常動作になると考え改訂した例を次に示します。

改良した内容と表示内容

子要素にはdiv要素で領域を確保し、画像は孫要素にしました。そして、absoluteによる働きかけは子要素にしたところ期待した動作が得られました。

たとえば、2番目の画像を切り抜くには、親要素の真上にくるようにleft属性により調整します。そして、overflow:hiddenによりはみ出し部を隠す指定を忘れずに設定します。

表示例は1週間の曜日画像を上図のように1つにし、日曜日から順に土曜日までを部分表示するものです。

動作コード

以下のコードで7行目のimg要素を6と8行目のDivにてposition:absoluteが有効に働くようにします。

<!DOCTYPE html> <!-- ※※※※※※※※ TEST7 ※※※※※※※※ -->
<html>
<body>
<button onClick="if(myDay==0)ImageGuide();">開始、ここをクリック</button>　　&copy;TacM,2018 Ver0.03<BR>
<DIV style="position:relative; width:120px; height:120px; overflow:hidden; border:0px solid pink;">
<Div id='week0' style="position:absolute; left:0px; top:0px; width:840px; weight:120px;">
<img id='week7' src="https://aidesign.lolipop.jp/wp-content/uploads/2018/06/positionRelative.png">
</Div>
</DIV>
<div id="imagemessage" style="margin-left:130px; margin-top:-110px; font-size:80px; color:green">準備中…</div>
<script type="text/javascript" charset="Shift_JIS">
var myDay=0;
function ImageGuide() {
	document.getElementById('week7').src = "https://aidesign.lolipop.jp/wp-content/uploads/2015/06/week8A.png";
	document.getElementById('week0').style.left = (-myDay*120) + "px";
	document.getElementById('imagemessage').innerHTML = '曜日（' + myDay + '）';
	if(myDay++ < 6)	setTimeout('ImageGuide()', 1000);
	else			myDay=0;
}
</script>
</body>
</html>

動作例

　　©TacM,2018 Ver0.03

準備中…

さいごに

スタイルシートでpositionを指定するとき、仕様書に沿った使い方をしても期待した動作になりませんでした。試行錯誤の結果、一ひねりして新しいことを追加して動作に漕ぎつけました。

clip:rectを使わずにoverflow:hiddenにより部分表示を実現できたことは大きな発見です。clip:rectを用いて思うように画像トリミングができない場合、当記事が参考になれば幸いです。

今日という日

2018-06-10プログラミングjohmonjin

繰り返し行動

6月10日は時の記念日であり、時にまつわる話になります。

人々の生活は繰り返し行動がほとんどです。3度の食事や通学や通勤は7日めぐりです。頭を洗うのは2日おき即ち3日に一度、ガソリンの補充は10日ごとなど等間隔で繰り返すことが多いです。

5日ごとに繰り返す場合は五十日（ごとおび）でおおむね、問題ありませんが2月の場合は2月25日から3月5日までは8日間、うるう年で9日間あり、正確さを欠きます。

こういう場合、元日からの通算日（0～364あるいは365）を求め、その値を5で割り、その剰余が４の場合を該当日にすれば、厳密に5日の繰り返しとすることができます。

割り算では被除数を除数で割って商を求めることが多いが、商よりも剰余が欲しいことがあります。C言語やJavaScriptでは剰余演算子が用意され％で記述されます。

剰余演算子の具体例を示します。10 % 3 → 結果1を返します。

通算日を算出

6日ごとに機械に油をささなければならない場合、カレンダーに〇を付けるときれいに斜めの列ができます。

パソコンやスマホを使いこなせる場合は、元日からの通算日を求め、繰り返し日数で除し剰余を求めれば、正確な繰り返し状況が明らかになります。

算出と利用例

以下に3～6日ごとに繰り返す算出結果を示します。2は通算日が奇数・偶数かで容易にわかり、7は曜日に関連付けることができるので省略しました。

6日ごとに油をさす場合、繰り返し間隔6の下に表示された識別数が0の日に実行します。3個の帽子を持っていて毎日被る帽子を順に変える場合、識別数0～2を帽子A~Cに置き換えます。

《今日という日》©TacM,2018 Ver0.03

準備中
今日は
日
曜日です
通算日を計算中
繰り返し間隔
3 4 5 6
🚿 🏃 🚮 ⛽
識別数
2 3 4 5

余談

四つある識別数がすべて０になることがあります。通算日が3, 4, 5, 6の最小公倍数の整数倍(0, 60, 120, 180, 240, 300, 360)になる日です。

年に7回、発生しすでに3回は体験したのであと、4回残っています。次は6月30日です。

それまで毎日、当ページにアクセスしてください。曜日ごとに表示色が変わることがわかります。

メーカーへのお願い

卓上デジタル時計は手ごろな値段で求めることができます。

そこには時刻、日付、曜日、温度、湿度などが表示されますが、これからは元日からの通算日を入れて欲しいものです。

見栄えのいいもの、売れるものもいいけれど、役立つものを作ってください。どんぶり勘定でやり過ごせる時代は終わりました。S社、C社などのメーカーさん、ぜひお願いします。

梅雨の季節が到来

2018-06-08歳時johmonjin

梅雨入り2018

6日、気象庁は近畿、東海、関東甲信地方の梅雨入りを発表しました。ほぼ全国的な梅雨の季節がやってきました。雨はほどよく降ってくれたら動植物には最高の恵みです。

いけいけどんどんから離れ、静かに思いめぐらすよい時期です。このあとには、ギトギト、ギラギラの猛暑が待っているのだから！

参照音楽:H/MIX GALLERYから「Breeze2」

【現代語訳】
雨が降ってうっとうしい日に
ただひとり山辺にいると、
気分がふさぎこんでくるよ。

ひさかたの

　雨あめの降ふる日ひをただ独ひとり

山辺やまべにをれば

　いぶせかりけり

　万葉集巻四-七六九大伴おおとも家持やかもち

©TacM,2018 Ver0.01

潦（にわたずみ）

2018-06-04歳時johmonjin

梅雨の訪れ

マガジンリーダー

2018-06-01ものづくり筆耕ブログjohmonjin

この記事の概要

ここでは雑誌を自動的に読む方法について語っています。後半の動作例で、用意した雑誌を読んでいます。そのため、ウィジェット欄を非表示にしてのびのびと表示しています。

自動ページめくり器

「本は読みたしページめくりはめんどうだ」とものぐさを決め込むことがあります。そこで自動ページめくり器が考案され発売されています。ものぐさというより福祉機器の観点から開発されているのが多いです。

メカニックを駆使したページめくり器は、本のセッティングに2～3分かかり、ページをめくるのに7～8秒かかるそうです。体が不自由ながら積極的な人生をめざす人々を応援する意気込みが感じられます。「自由気ままに読書を楽しむ楽らく読書生活」のサイトが参考になりました。

電子書籍をめくる

紙媒体の書籍を自動ページめくりしながら読むには、かなりの経費が掛かりそうです。ここでは電子書籍を自動ページめくりする方法について語ります。すでに多くの先駆者が開発され、格安料金あるいは無料で配布されています。GitHub等からJavaScriptを使ってページをめくるjQueryライブラリーが公開されています。