VSCode の Emmet で自作スニペットを登録し img 要素に loading=”lazy” を付与する

画像遅延読み込みの loading 属性がウェブ標準となった。

2.6.7 Lazy loading attributes | HTML Standard

なので Visual Studio Code(以下 VSCode)の Emmet での img 要素展開時に自動的に loading 属性を付与したいが現時点(2020/10/26)では以下の通り src 属性、alt 属性しか付与されないようなので自作スニペットを登録して対応する。

// Emmet 標準で img 要素を展開した場合
<img src="" alt="">

VSCode のスニペット登録は “ファイル > ユーザー設定 > ユーザースニペット” を選択。
上部にコマンドパレットが出てくるのでそこから html.json を選択。

“ファイル > ユーザー設定 > ユーザースニペット”
html.json を選択

html.json の例にならって独自のスニペットを記述する。

{
	// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"

	// 以下を追加
	// body 部分、html 要素内のダブルクォーテーションの前には \ を付ける
	// $1, $2, $0 は展開後のタブ移動の際にフォーカスされる場所 
	"insert image loading": {
		"prefix": "img",
		"body": [
			"<img src=\"$1\" alt=\"$2\" loading=\"lazy\">$0"
		],
	},
}

スニペットに記述した内容は即反映されるので img 要素を展開すると loading=”lazy” が付与される。

<img src="" alt="" loading="lazy">

※ loading 属性の値として auto, lazy, eager があるが lazy の使用頻度が高いと思われるためスニペットでは lazy を付与するようにしたが、ファーストビューの画像のように遅延読み込みが望ましくないものについては手動で loading 属性削除、もしくは auto に変更することで対応。

Settings Sync で Visual Studio Code の設定を複数マシンで同期

他にも同内容の記事いくつもあったけど自分用にメモ。

Visual Studio Code(以下 VS Code)の設定(エディタ設定や拡張機能等)を複数のマシンで同期させる。
同期は VS Code の Settings Sync 拡張機能を用い GitHub Gist を介してアップロード/ダウンロードが行われる。(なので要 GitHub アカウント)

環境:Windows 10 + Visual Studio Code(1.26.1) + Settings Sync(3.0.0 – 3.1.0)

INDEX

  1. Settings Sync インストール
  2. アップロード(初回はセットアップが実行される)
  3. ダウンロード(未設定マシンではセットアップが実行される)
  4. エラー発生時の再設定方法
  5. 参考

VS Code サイドバー拡張機能より「Settings Sync」を検索しインストール。
有効化のため再読み込み。

2. アップロード(初回はセットアップが実行される)

以下ショートカット、またはコマンドパレット実行時に VS Code の設定が Gist へアップロードされる。
初回実行時は GitHub の Personal Access Tokens が開くので token を生成し Settings Sync の設定を行っていく。

ショートカット

Shift + Alt + U

コマンドパレット(Ctrl + Shift + P)

> Sync Update / Upload Settings
VS Code ショートカット Shift + Alt + U もしくはコマンドパレットから Sync Update / Upload Settings 実行で GitHub Personal Access Token 生成ページが自動的に表示される

Generate new token クリック。

必要な項目を入力する

Token description に任意の説明文を入力(今回はドキュメントに沿って code-settings-sync とした)。
Secret scopes > gist をチェックし Generate token ボタンをクリック。
repouser も必要という記事もあったが gist のみでいけた)

token が生成される

token が生成されるので控えておく。

VS Code で token の入力を求められているので先程の token をペースト

VS Code 側で Enter GitHub Personal Access Token と token の入力を求められるので先程生成した token をペースト Enter。

設定が完了し VS Code の設定が Gist にアップロードされた旨の通知、及びログが出力される。

Gist に追加されていることが確認され、ひとまず設定及びアップロード完了。

3. ダウンロード(未設定マシンではセットアップが実行される)

以下ショートカット、またはコマンドパレット実行時、2. アップロード の項で token を登録した VS Code であればそのまま Gist から設定がダウンロードされ VS Code に反映される。
別のマシンの場合セットアップが行われていないため上記で生成した token 及び Gist id の入力が必要となる。

ショートカット

Shift + Alt + D

コマンドパレット(Ctrl + Shift + P)

> Sync Download Settings
別マシンの場合別途 VS Code に token の入力を求められる

控えておいた token を登録。

token に続き Gist id の入力を求められる

続いて Gist id の入力を求められる。

Gist 個別ページ
https://gist.github.com/GitHubID/Gist id となっているので Gist id をコピー

Gist id は Gist > VS Code Settings 個別ページの URL に記載されているのでコピーして VS Code に登録する。

Gist から設定がダウンロードされ VS Code に反映される。
拡張をたくさんある場合それらのインストールである程度時間が掛かるかな。


以上で複数マシン間で VS Code の設定変更時にアップロード(Shift + Alt + U) / ダウンロード(Shift + Alt + D)を行う事で同期を行えるようになった。
その他の機能として
Toggle Auto Download :VS Code 起動時に Gist から自動的に設定をダウンロード(デフォルト無効)
Toggle Auto-Upload on change :設定を変更する度に自動的に Gist にアップロード(デフォルト無効)
等があるのでドキュメント参照。

また設定を誤るとアップロード / ダウンロード時にエラーとなり同期が行われいのでその際は以下より再設定を。

4. エラー発生時の再設定方法

token 生成時の設定ミス、VS Code へ誤った token を登録してしまうとアップロード時(Shift + Alt + U)以下のようなエラーが通知される。

token 生成の際に gist にチェックをし忘れたまま生成

Sync : Invalid Gist Id Entered. Verify your gist : https://gist.github.com/<your_userName>/<gist_id>.

VS Code へ 誤った token を入力

Sync : Invalid / Expired GitHub Token. Please generate new token with scopes mentioned in readme. Exception Logged in Console.

上記エラーはコマンドパレットから Settings Sync 設定リセット、再度セットアップを行う事により解決する。

コマンドパレット(Ctrl + Shift + P)

> Sync Reset Extension Settings

参考

WordPress REST API (Version 2) の posts エンドポイントにカスタムフィールドの値を追加する

WordPress REST API (Version 2) で出力される JSON でカスタムフィールドで登録した値を取得したいけど Post Meta エンドポイント (http://example.com/wp-json/wp/v2/posts/<parent_id>/meta) はセキュリティの関係上、認証[*1]されたユーザにしか出力されないので Posts エンドポイント (http://example.com/wp-json/wp/v2/posts/<id>) でカスタムフィールドの値を出力するメモ。
[*1] Authentication | WP REST API v2 Documentation

functions.php に以下を追加。
$response に出力される JSON のデータ(?)が入っているので rest_prepare_post をフックして値を書き換え。

function my_rest_prepare_post( $response, $post, $request ) {

$response-&gt;data['post_meta'] = array(
'hoge' =&gt; get_post_meta( $post-&gt;ID, 'key_hoge', true ),
'fuga' =&gt; get_post_meta( $post-&gt;ID, 'key_fuga', true ),
);

return $response;
}
add_filter( 'rest_prepare_post', 'my_rest_prepare_post', 10, 3 );

フィルターフックはプラグインディレクトリ内、 rest-api/lib/endpoints/class-wp-rest-posts-controller.php で定義されており post_type 毎に設定できるので pagesエンドポイント (http://example.com/wp-json/wp/v2/pages/<id>) に追加したいのであれば rest_prepare_page と。

/**
* Filter the post data for a response.
*
* The dynamic portion of the hook name, $this-&gt;post_type, refers to post_type of the post being
* prepared for the response.
*
* @param WP_REST_Response   $response   The response object.
* @param WP_Post            $post       Post object.
* @param WP_REST_Request    $request    Request object.
*/
return apply_filters( 'rest_prepare_' . $this-&gt;post_type, $response, $post, $request );

カスタマイズ方法を探していて WordPress › フォーラム » カスタムフィールドの内容をJSON REST APIで表示する を参考にしたのですがこの時は WordPress REST API (Version 1) で、 Version 2 になってフィルターフック名が変わっていたので躓いた…

参考サイト