月別アーカイブ: 2018年6月

画像部分表示2

画像トリミング第2弾

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

 

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

動作サンプルコード

<html>
<body>
<img id="uenozoo" src="http://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="http://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

 

画像の部分表示

画像トリミング

動物の毛を手入れする人のことをトリマーと言いますが、画像の周囲や映像の前後の不要部分を切り取って、必要な部分だけを抜き出すことをトリミング(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にすれば、1つの画像(ピンクの背景)を切り取ることができます。

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

子要素で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="http://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 = "http://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を用いて思うように画像トリミングができない場合、当記事が参考になれば幸いです。

 

今日という日

繰り返し行動

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

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

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

こういう場合、元日からの通算日(0~364あるいは365)を求め、その値を5で割り、その剰余が4の場合を該当日にすれば、厳密に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

余談

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

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

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

メーカーへのお願い

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

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

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

 

梅雨の季節が到来

梅雨入り2018

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

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

参照音楽:H/MIX GALLERYから「Breeze2」
【現代語訳】
雨が降ってうっとうしい日に
ただひとり山辺にいると、
気分がふさぎこんでくるよ。
ひさかたの
 あめを ただひと
山辺やまべにをれば
 いぶせかりけり
 万葉集 巻四-七六九 大伴おおとも家持やかもち
©TacM,2018 Ver0.01

マガジンリーダー

この記事の概要

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

自動ページめくり器

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

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

電子書籍をめくる

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



その中で実際に本をパラパラめくる効果を出せるjQueryプラグイン「turn.js」に出会いました。サンプルコードはここから入手しました。HTML、CSS、JavaScriptをコピー&ペーストしそのまま実行可能です。

試作版の概要

この基本ソースにsetTimeoutによる自動めくり機能を追加してあります。動作はまだ、納得いかない部分があり落ち着いたら公開する予定です。

設定機能

  1. めくり速度
  2. ページ移動
  3. 1ページ戻る
  4. 1ページ進む
  5. マガジン速読
  6. マガジン速読の停止・再開
  7. ←→キーによるページ移動

 

めくり速度はこの記事の起動時にただ一度、設定することができます。そのため、❷~❻の設定に先立ちパラパラ読みのスピードを500~5000ミリ秒で設定し、その80%をめくり速度にしています。その他の設定は適切なタイミングで複数回、設定することができます。

動作例

パラパラ読みの速度(500~5000)を設定後、マガジン速読をクリックすると指定されたスピードでパラパラ読みが開始します。停止/再開ボタンを使って途中で読み込みを停止し再び開始することができます。キーボードが付いているデバイスで読む場合は、←、→の矢印キーの利用が便利です。

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

終わりに

四隅をドラッグ&ドロップしページをめくる本来の操作で読むこともできます。

パラパラ読みで読みたい箇所を見つけマガジン速読の右にある停止ボタンをクリックして、そこからNext→ボタンを利用して精読することができます。速読と矢印ボタンを組み合わせて多様な講読をお楽しみください。

今回は試作版にて、PDFを読むのではなく、あらかじめ用意した画像を読んでいます。次にはPDFを読んで表示する機能を追加する考えです。