晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

神戸)しあわせの村。野鳥撮影できず。

6月16日。神戸しあわせの村。

バードウォッチングができる自然歩道があるということで、行ってみた。

鳥の鳴き声は良く聞こえたが写真には撮れなかった。葉っぱが生い茂っているこの季節、素人(?)には難しい。

下の地図の自然歩道[1]は、立ち入り禁止になっていた。

自然歩道[2]、[3]はかなりアップダウンがきつい。

f:id:art2nd:20190617160229j:plain

f:id:art2nd:20190617160725j:plain

f:id:art2nd:20190617160728j:plain

f:id:art2nd:20190617160732j:plain

f:id:art2nd:20190617160735j:plain

f:id:art2nd:20190617160739j:plain

f:id:art2nd:20190617160742j:plain

f:id:art2nd:20190617160744j:plain

f:id:art2nd:20190617160748j:plain

f:id:art2nd:20190617160750j:plain

f:id:art2nd:20190617160753j:plain

f:id:art2nd:20190617160756j:plain

f:id:art2nd:20190617160801j:plain

CSSのflexbox(display:flex;)で、写真/画像を横並びにする。inline-blockやfloat:leftは使わない。+ <div>の横幅一杯に画像を並べてリサイザブル(レスポンシブ)にする。

Webページで写真/画像を横並びにする方法として、以前は

  • display: inline-block;
  • display: table-cell;
  • float: left;

などを使っていた。どれもあまり使いやすいとは言えなかった。

CSS3から新しいレイアウトモジュールとして、flexbox

が追加された。この「display:flex;」を使えば、画像を簡単に横並びにできる。<div>に「display:flex;」を指定するだけで<div>内の画像は横並びになる。

<style>
.box-row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
</style>
<div class="box-row">
	<img src="img/001.jpg">
	<img src="img/002.jpg">
	<img src="img/003.jpg">
	.....
</div>

更に、<div>の横幅一杯に画像を並べて表示し、ブラウザウィンドウのリサイズに合わせて画像がリサイズするようにするのも簡単。サイズの大き目な画像を用意し、<img>それぞれを<div>で囲み、<img>に「max-width:100%;」を指定するだけ。画像の個数に関係なく、<div>の横幅一杯に画像が並ぶ。

<style>
.box-row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.box-row img {
	max-width: 100%;
}
</style>
<div class="box-row">
	<div><img src="img/001.jpg"></div>
	<div><img src="img/002.jpg"></div>
	<div><img src="img/003.jpg"></div>
	.....
</div>

↓↓↓ 作成したサンプルHTMLが以下。

HTML/CSS「flexbox」サンプル

f:id:art2nd:20190615105903j:plain

【補足】display:flex;内のアイテムをブラウザ横幅で折り返したい場合は、「flex-wrap : wrap;」を指定する。

#div-id {
	display: flex;
	flex-wrap: wrap;
}

flex-wrap : wrap;」を使ったサンプル(↓)。

写真をビビッドに加工する。彩度調整を「GIMP」と「JTrim」で試してみる。

写真をビビッドに加工するのにとりあえず手っ取り早いのは、彩度を上げること。

彩度調整をWindowsアプリ「JTrim」と「GIMP」で試してみた。GIMPでは彩度調整のパラメーターが複数ある。

検証のため、彩度をかなり大幅にアップさせてみた。

※ 英語で彩度は「chroma」と「saturation」の2つの言い方があるようだ。

【オリジナル画像】

f:id:art2nd:20190614144946j:plain

1.「JTrim」で調整

  • メニュー[カラー]→[HSVカラー調整]

で、彩度をアップさせる。

f:id:art2nd:20190614145316j:plain

JTrimで彩度をアップさせた結果が以下。画像上部の青空のあたりが違和感のある画質になってしまった。

f:id:art2nd:20190614145412j:plain

2.「GIMP」パラメーター「Hue-Chroma」で彩度調整

  • メニュー[色]→[Hue-Chroma]

で、彩度をアップさせる。

f:id:art2nd:20190614151758j:plain

GIMP」パラメーター「Hue-Chroma」で「Chroma」を調整して彩度をアップさせた結果が以下。空や窓枠などに水色が強く出て違和感のある画質。

f:id:art2nd:20190614151817j:plain

3.「GIMP」パラメーター「Saturation」で彩度調整

  • メニュー[色]→[Saturation]

で、彩度をアップさせる。

f:id:art2nd:20190614150852j:plain

GIMP」パラメーター「Saturation」で彩度をアップさせた結果が以下。自然な感じ。

f:id:art2nd:20190614150903j:plain

4.「GIMP」パラメーター「Hue-Saturation」で彩度調整

  • メニュー[色]→[Hue-Saturation]

で、彩度をアップさせる。

f:id:art2nd:20190614152556j:plain

GIMP」パラメーター「Hue-Saturation」の「Saturation」で彩度をアップさせた結果が以下。自然な感じ。3.の「Saturation」に比べて芝や樹々の緑が明るい。

f:id:art2nd:20190614152633j:plain

結果としては、「JTrim」での彩度調整は画質に違和感が生じた。

GIMP」の複数あるパラメーターでも、画質に違いが生まれた。オリジナル画像によって、どのパラメーターを使うのが良いのかは違うのかも知れないが、パラメーター「Saturation」か、パラメーター「Hue-Saturation」が良さそうな感じ。

パラメーター「Hue-Saturation」なら、色相(Hue)や明度(Lightness)も併せて調整ができる。

GIMP」の「Hue-Saturation」で他の写真でも試してみた。大幅に彩度をアップさせても、比較的自然な色に仕上がる。

RAWデータを使わなくてもJPEGでも十分に調整が効く。

f:id:art2nd:20190614162551j:plain
f:id:art2nd:20190614162554j:plain
f:id:art2nd:20190614162920j:plain
f:id:art2nd:20190614162923j:plain
f:id:art2nd:20190614163035j:plain
f:id:art2nd:20190614163037j:plain
f:id:art2nd:20190614164126j:plain
f:id:art2nd:20190614164130j:plain
f:id:art2nd:20190614164515j:plain
f:id:art2nd:20190614164519j:plain
f:id:art2nd:20190614164714j:plain
f:id:art2nd:20190614164718j:plain

「OLYMPUS Tough TG-6」日本国内でも正式発表。オリンパスにはToughシリーズを続けていって欲しい。

OLYMPUS Tough TG-6が、日本国内でも正式発表された。

f:id:art2nd:20190613162642j:plain

現在、TG-5を所有している。

防水・耐衝撃が一番のセールスポイントだが、顕微鏡モードでズーム全域で1cmまで寄れるマクロ機能も大きなポイント。

それだけではない。フィッシュアイコンバーターやワイドコンバージョンレンズを付けたり、宙玉レンズを付けたりして楽しむこともできる。

ある意味、唯一無二のコンデジオリンパスは、この機種以外のコンデジから撤退してしまったが、このシリーズだけは長く続けていって欲しい。

TG-6は、TG-5から基本スペックに大きな違いはないが、細かい点で改善されている。

【主な改善点】

  • 液晶モニターの解像度が46万ドットから104万ドットに向上。
  • 顕微鏡モードが、PモードとAモードでも使用可能になった。(大きなポイント)
  • 新しい水中顕微鏡モードが搭載。
  • 通常時でも2倍テレコンが利用可能。
  • センサー保護ガラス面にARコーティング。
  • 新しいフィッシュアイコンバータ「FCON-T02」が追加。
  • レンズバリア「LB-T01」が追加。

【残念な点】

  • TG-5と同じく、シャッタースピード優先がない。
  • タッチパネルは非搭載(水中利用を想定すると多分難しい)
  • 手ブレ補正が進化していない。(2.5段分のまま?)
  • 画像処理エンジンはTG-5と同じ。進化なし。

以下、TG-5がらみの過去のブログ記事抜粋。