ChromeのDNSキャッシュ機能が便利すぎる件

Chromeブラウザにはいろんな機能があるけど、中でもDNSキャッシュは個人的にはとてもありがたい機能。

とりあえずDNSキャッシュより先にChromeの各種機能の使い方

ChromeのURL入力欄に chrome:// と入力する。
入力候補が幾つか表示される。
おそらく候補の中に chrome://chrome-urls があるのでそれを選択。
(ちなみに、この記事内のchrome://で始まるURLのリンクはクリックしても何処にも飛ばない筈)

chrome-urls 1
利用できるURL一覧が表示される。結構多くて何が何だかだけど、おそらく chrome://settings/ (設定)などは多くの人が意識せずに使っているURLの筈。

chrome-urls 2
今回のDNSキャッシュは chrome://net-internals にある。
左列の「DNS」を選択する。最終的なURLはchrome://net-internals/#dnsとなる。

Chromeブラウザでページを表示しようとして名前解決を行った履歴が一覧となって表示される。例えば「がとらぼ」の中の人は「広告除去用HOSTSファイル」やコンテンツフィルタリング(ペアレンタルコントロール)用のホスト一覧(2月19日時点では未公開)を作ってたりするが、以前はtcpdumpやWireSharkを仕掛けてとかDNS Queue Snifferを使うだとか結構面倒な方法で名前検索履歴を収集していたのをChromeのDNSキャッシュみれば一発、すごい楽にホスト名&IPアドレスを収集できる。ブラウザ以外の名前解決で発生するゴミも混ざらないし。

上の方の[Clear host cache]を押すとキャッシュが消せるのでこまめに収集するのにも使い勝手が良い。

また、ページ別にソース(ページを構成する部品)のURL一覧も取得できる。

chrome-urls 3
こちらはURLはchrome://dns
一番左の列が閲覧したページのホスト。一番右がそのページの構成要素を表示しているホスト。もう便利すぎて涙出るくらい。
ついでにページに含まれるリンクのURL(ホスト)も全部一気に取れたらもう他には何も要らないくらいだけどそこまでは無理か・・

こちらは実質閲覧履歴なので消したいと思った時は[設定]から[詳細設定]、[閲覧履歴データを消去する]で[閲覧履歴データを消去]ボタンを押して履歴を消してやらなければならない。ちょっと面倒。

そして、本当に凄いなと思ったのは上に書いたのがPC版のChromeだけでなくモバイル版のChromeでもできること。

chrome-urls 4
これはAndroid版のChrome。画面が狭いということ以外、PC版と違うところが見つけられない。
何一つ満足にできないPC用ブラウザのEdgeよりモバイル版のChromeの方が正直全然凄い。

Flash Playerの有効化・無効化

ChromeでFlash

久々にChromeのFlash Playerの有効・無効を変更しようとしたら以前と変わっていたのでメモ。ついでにEdgeとIEも。

まずChrome。

ChromeでFlash 1
たしか以前はプラグインの設定画面で「常に実行を許可する」と共に「無効にする」というようなのが並んでいた筈だが見つからない。

ChromeでFlash 2
URL入力欄に chrome://settings と入力して[Enter]かURL入力欄の右端の団子3兄弟 [ ] をクリックして「設定」を選択。一番下の「詳細設定」をクリック。

ChromeでFlash 3
前の画像は何か俺のと違うぞという人もいるかもだけど、マテリアルデザインを選択していなければ従来とおりの設定画面(上の画像)が出る。デザインが違うだけで設定できることは同じ。以下もデザイン違いはあっても基本的には同じ。

ChromeでFlash 4
下にスクロールして「コンテンツの設定」をクリック。

ChromeでFlash 5
「Flash」をクリック。

ChromeでFlash 6
一番上のスイッチをオフ or オンにする。上の画像はオフ(無効)にした状態。

ChromeでFlash 7
Flashをオン(有効)にした場合は実行時の設定を確認・変更するのも忘れずに。
URL入力欄に chrome://flags を入力して[Enter]。
「Flashが「許可」の設定になっている場合にすべてのFlashコンテンツを実行する」の設定を自分の好みに合わせる。「既定」の設定内容は不明。「有効」は全てのFlashコンテンツを実行。「無効」は全てのFlashコンテンツを実行しない。

この画面で何かを変更したら一番下のボタンでChromeを再起動する。

正直、以前のプラグイン単位で有効・無効を選ぶ方式の方が良かったかも。

次はEdge。
Windows8以降ではFlashプレーヤーが標準搭載なので昔のように自由にインストール・アンインストールなどができない(ことになっている)ので有効化・無効化だけ。

EdgeでFlash 1右上の団子3兄弟 をクリック。

EdgeでFlash 2
「設定」をクリック。

EdgeでFlash 3
下にスクロールして「詳細設定を表示」をクリック。

EdgeでFlash 4「Adobe Flash Playerを使う」のスイッチをオフで無効化。(またはオンで有効化)

最後にInternet Explorer

IEでFlash 1
右上の をクリック。

IEでFlash 2
「アドオンの管理」をクリック。

IEでFlash 3
おそらくFlash Playerは表示されていない筈なので左上「ツールバーと拡張機能」を選択した状態で「表示」欄を「現在読み込まれているアドオン」から「すべてのアドオン」に変更。

IEでFlash 4
アドオンのリストから「Shockwave Flash Object」を選択し、右下の「無効にする」(または「有効にする」)を押す。

IEでFlash 5
Flashプレーヤーが有効 or 無効になったことを確認するためにhttps://helpx.adobe.com/jp/flash-player/kb/235703.htmlのページを開いてFlashが再生されること・再生されないことを確認する。これはChromeやEdge, 今回は出してないけどFirefox等でも同様に。

Flashはもう基本は無効で良い。っていうか脆弱性を押し固めて作った形成肉みたいなソフトウエアなので無効にしとかなきゃダメ。
今月のWindows UpdateでIEとEdgeのFlashの脆弱性対応入る筈だったのに更新ファイルの提供が延期?になったから危険な状態で放置になってるし。
そもそもFlashはもうオワコンだっていう話になってたのにWindows10でも何でOS標準で入って来てるの?Chromeも追加オプションとして用意するだけにして標準で入れるの止めてよね。

CSS アスペクト比を変えないで画像貼り付け

画像
こんな画像があるとする。これを正方形のエリアに特に何も考えずに貼り付ける(次)。

画像

縦横300pxのボックス要素に高さ・幅それぞれ100%指定で画像を貼り付けた。

<div style="width:300px; height:300px">
<img src="/images/example.jpg" style="width:100%; height:100%;" alt="画像" />
</div>

横長の画像を正方形に無理やり押し込めたので当然ながら横方向が潰れた(アスペクト比が狂った)変な画像になる。不自然すぎるのでワザとでなければ一番ダメな表示方法といえる。

画像

縦横300pxのボックス要素に幅AUTO・高さ100%指定で画像を貼り付けた。

<div style="width:300px; height:300px;">
<img src="/images/example.jpg" style="width:auto; height:100%;" alt="画像" />
</div>

アスペクト比は正しいが横長の画像を正方形に収めると画像の上下(上の例では画像の下側)に無駄なエリアが出来るのと画像がとても小さく見えるので迫力がなくなる。

じゃあ、高さは100%で画像の左右を切り取ってアスペクト比を崩さないようにすりゃいいじゃんってなるんだけど、以前はCSSだけでは結構面倒だった。今はかなり簡単になっているけど意外に使われていないかなというのがこの記事。
で、お約束っちゃあお約束だがIEはここから下の全てが正常に表示されない。

画像

縦横300pxのボックス要素にoverflow: hidden;で溢れた部分を非表示化、高さ100%・幅AUTO指定で画像を貼り付けた。

<div style="width:300px; height:300px; overflow: hidden;">
<img src="/images/example.jpg" style="width:auto; height:100%;" alt="画像" />
</div>

これだと元画像の左端しか表示されない筈。

画像

つまり親要素側のoverflow:hiddenを外すと実際にはこうなっている。

画像

縦横300pxのボックス要素にoverflow: hidden;で溢れた部分を非表示化、高さ100%・幅AUTO指定で画像を貼り付けた。その時、画像側にposition:relativeとright:121pxつまり right:calc(本来の画像表示幅 - 表示幅300px) / 2を追加して画像の中央が表示されるようにする。

<div style="width:300px; height:300px; overflow: hidden;">
<img src="/images/example.jpg" style="width:auto; height:100%; position:relative; right:calc((543px - 300px) / 2);" alt="画像" />
</div>

画像

親要素側のoverflow:hiddenを外すとこんな感じに切り抜いている。

ここまでは以前からあった方法だけどちょっと面倒くさい。
そこでCSS3で追加されたobject-fit。
で、Edgeはここから下は全て正常に表示されない。

画像
画像を縦横300pxで表示。object-fit:coverを追加。これだけ。

<img src="/images/example.jpg" style="width:300px; height:300px; object-fit: cover;" alt="画像" />
自動的に画像の真ん中が表示されるのはありがたいが、逆に画像中の任意の位置を指定したいならobject-positionを追加する。

画像
画像の右端を表示してみた。object-position: 100% 0%;  (左右の位置, 上下の位置)

<img src="/images/example.jpg" style="width:300px; height:300px; object-fit: cover; object-position: 100% 0%;" alt="画像" />

ところで、object-fitがcover以外の値だとどうなるか。(以下)

画像
object-fit: fill
アスペクト比を変更して指定範囲に合わせて表示する。この記事2番めの画像(ダメな例)と同じ。

<img src="/images/example.jpg" style="width:300px; height:300px; object-fit: fill;" alt="画像" />

画像
object-fit: contain
指定範囲に画像全体が表示される。つまり指定範囲に画像全体が入るまで拡大・縮小される。

<img src="/images/example.jpg" style="width:300px; height:300px; object-fit: contain;" alt="画像" />

画像
object-fit: none
画像を拡大縮小させないで指定範囲に表示させる。

<img src="/images/example.jpg" style="width:300px; height:300px; object-fit: none;" alt="画像" />

画像
object-fit: scale-down
containかnoneのどちらか小さい方の要素が表示される。

<img src="/images/example.jpg" style="width:300px; height:300px; object-fit: scale-down;" alt="画像" />

cssに馴染みがなくても使えるほど簡単で素晴らしいと思うのだが、例によって世紀の糞ブラウザ(IE,Edge)が対応していないのでそこだけ注意。というか、そのせいで普及してないのだろうけど。

スマホのブラウザでさえ表示できるものがPCのブラウザでできないってホントIE,Edgeは終わってるとしか言いようがない。