【Google Chrome】検証ツールの小ネタ（レスポンシブ編）

コーディングや開発をする方なら、日頃からGoogleChromeの検証ツールはよく使われていると思います。
今回はレスポンシブデザインを確認する時に、個人的に便利だと思っている検証ツールの小ネタを紹介したいと思います。

レスポンシブモードを有効にする🖥️

右上の「デバイス切り替え」アイコンをクリックします。
ブラウザ表示がレスポンシブ表示に切り替わります。

レスポンシブモードのオプション🛠️

デバイスのフレームを表示

右上の縦の三点リーダーアイコンをクリックして「デバイスのフレームを表示」を選択します。
対応している一部の機種に限りますが、表示しているデバイスのフレームが表示されます。

メディアクエリを表示

右上の縦の三点リーダーアイコンをクリックして「メディアクエリを表示」を選択します。
この機能を有効にすると、サイト上で使用しているメディアクエリを視覚的に表示してくれます。
サイズの指定方法の違いが色ごとにわかりやすく表示されます。

青 max-width（**px以下）
緑 max-widthとmin-widthを使用（**px以上、**px以下）
オレンジ min-width（**px以上）

スクリーンショットをキャプチャ

表示中のレスポンシブサイズのスクリーンショットを撮影してくれます。
ブラウザ拡張などでスクリーンショットを撮影している方も多いかと思いますが、ブラウザのデフォルト機能だけでスクリーンショットを撮影できるので手軽に使えます。
また「デバイスのフレームを表示」が有効で、フレームが表示されている場合、フレーム込みでスクリーンショットが撮影されるので、撮影後に別アプリなどでモックにはめ込む作業も必要ありません。

表示端末の追加📲

レスポンシブモードでシミュレートできるデバイスの追加も可能です。
ツールバー上部の[サイズ]をクリックしてデバイス一覧を開き、[編集]をクリックします。
好きなデバイスや自分でカスタマイズしたデバイスを追加することもできます。
特殊な環境やサイズのデバイスを追加する際に、非常に便利な機能になっています。

検証ツールは奥が深い…

レスポンシブのデザインやコーディングをする機会は多いと思います。
地味な機能の紹介ばかりですが、少しでも検証ツールの機能を活用して効率よい作業の手助けになればと思います。
そして、検証ツールには他にも数え切れないほどの機能があるので、今後も少しずつ紹介していけたらと思います…🫠

[Javascript] 元のエラーを渡せる Error Cause

ES2022 で Error に cause がオプションとして追加され、再スローするときに元のエラーを渡すことができます。

以下、MDNのドキュメントより。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause

サンプル

fetch でエラーになるサンプルを作りました。


function UserException(message, options) {
	this.message = message;
	this.name = 'UserException';
	this.cause = options.cause;
}

async function test() {
	try {
		const response1 = await fetch('http://example.co.jp/')
			.catch(err => {
				throw new UserException('fetch1回目でエラー', { cause: err });
			});
		const text1 = response1.text();

		const response2 = await fetch('http://example.co.jp/', { method: 'POST', body: text1 })
			.catch(err => {
				throw new UserException('fetch2回目でエラー', { cause: err });
			});
		return response2.json().catch(err => {
			throw new UserException('json()でエラー', { cause: err });
		});
	} catch (err) {
		throw new Error('エラーです', { cause: err } );
	}
}

test().catch(err => {
	console.log(err);
	console.log(err.cause);
})

console.log に出力された内容

fetch2回目でエラーになった場合の Devtools の表示

// Error: エラーです at test (sample:24:9)
// UserException {message: 'fetch2回目でエラー', name: 'UserException', cause: TypeError: Failed to fetch at test (sample:16:27)}

response2.json() で失敗した場合

// UserException {message: 'json()でエラー', name: 'UserException', cause: SyntaxError: Unexpected token 'T', "Text" is not valid JSON}
// SyntaxError: Unexpected token 'T', "Text" is not valid JSON

cause に渡すことで再スローされた先で簡単に元のエラーを受け取ることができました。

エラーの再スロー自体は一般的ですが、ES2022 以前には元のエラーを得る手段が標準で用意されていなかったのが不思議なくらいです。

エラー処理には悩まされることがよくあり、その場で処理することが難しい場合やまとめて処理しても問題ない場合などに使えそうです。

●●●

余談ですが、ブラウザによっては、cause とは別に stack が実装されているようですが、こちらは標準化はされなかったようです。stack という文字から Stack trace 的なものが格納されるのでしょうが、サーバーでの処理と違ってクライアント側なのでデバッグ後の消し忘れによる事故が多そうではあります。

[Solr]Admin UIでフィールドタイプの編集をできるようになった

Solr 9.1.0 から Admin UI でフィールドタイプの定義を編集ができるようになりました。
それ以前はフィールド定義の追加はできるもののフィールドタイプには手を付けることができない状態でした。

上のスナップショットは8.11.0のAdmin UIです。

9.1.0のAdmin UI。
“Manipulate Field Type” というボタンが増えています。このボタンを押すとフィールドタイプを追加するためのコマンドのテンプレートがテキストエリアとして表示されます。

プルダウンを”Delete FieldType Template”に変更したところ。
指定のフィールドタイプを削除するためのコマンドを編集できます。

プルダウンを”Replace FieldType Template”に変更したところ。
指定のフィールドタイプの定義を書き換えることができます。

従来から存在していたフィールドに対する操作が追加のみであったことを考えると、フィールドタイプに対する操作が一気に充実したことになります。

Solr 9.1.0 ではこれ以外にもAdmin UIへの機能追加がいくつかあったので、順次ご紹介していければと思います。

2022年に習得した新しい習慣

2022年も残す所あと僅か。
今年も色々あったと思うのですが、あっと言う間に過ぎ去ろうとしています。

厄年である私が新しい習慣を身につけることは中々ないのですが、珍しく新習慣を会得しました。

それは…。

　

トイレ掃除です。

　

2022年5月からですが、ほぼ毎朝トイレ掃除をしています。
ズボラな私が半年以上続けられるとはちょっとした奇跡かなと思ったりしています。

「トイレの神様」って歌が流行った時期もありましたが、改めて調べてみると存在するようで、「烏枢沙摩明王（うすさまみょうおう）様」というらしいです。

　

「それはそれはキレイな女神様がいるんやで〜♪」

　

と、聞いたことがあったので、どんな神様かなと期待して調べてみると「烏枢沙摩明王様」というらしく、めちゃくちゃ怖い顔をして、全身火炎に包まれた火の神様のようです。

最初のイメージと違うなと思ったのですが、昔のトイレは伝染病などの感染源になりやすい場所だったので、魔の入口のような考えがあったとのこと。

そのため怖い顔して、炎で浄化して、悪いものから守ってくれている存在として伝えられているようです。

　

私がトイレ掃除を初めたきっかけは、厄年だからだったからかもしれません。
今ではやらないと、落ち着かなくなっています。

　

まだまだトイレ掃除、初級者の私ですが、これからも続けてみようと思います。

NFC タグの有る生活

状況に合わせてスマートフォンで一連の操作をまとめて実行したいことがあります。

たとえば就寝前にマナーモードに切り替え、目覚ましをセットしてアラームの音量を設定する、といったことです。逆に起きた後はマナーモードを解除して音量を元に戻す必要があります。
こういった、定期的に必要になる一連の操作を手作業でやるのは、特に毎日となると意外に煩わしいものです。
これを NFC タグを使って自動化することができます。

NFC タグは Amazon で10枚500円くらいのものを買って使っています。
アプリは Android の Trigger を長く使っているのですが、どうも今は公開されていないようです。同じようなことができる Tasker というアプリもあります。

NFC タグは裏がシールになっていて必要な場所に貼り付けて使えますが、なかなか強力なシールなのであえて普通の両面テープを使っています。これを家の中のあちこちに置いています。

いくつか使い途を挙げてみます。

寝室
就寝時: 目覚ましセット、マナーモード切り替え、音量調整
起床時: マナーモード解除、音量調整
Trigger は1個の NFC タグでトグル動作させられるので、就寝<>起床の切り替えを1個でまかなえます。
スマホスタンドに貼ってあるので、立て掛けるだけで就寝モードになります。

玄関
外出時: マナーモード切り替え、Wi-Fiオフ
帰宅時: マナーモード解除、Wi-Fiオン
玄関の電源スイッチの横に NFC タグを貼り付けて、タッチしています。

自宅デスク
音楽自動再生。こちらもタグを貼ったスタンドに立て掛けると音楽をランダム再生するようにしています。

NFC タグをトリガにした自動操作は自分にとって地味ながら重要な機能なので、スマホ選びの際は NFC 搭載は必須の要件になっています。