グラビカ学習帳～新宿のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

VSCodeを少しずつ触り始めているのですが、Atomで使用していたEmmetと「bg+」「bd+」が使用できないことに気づきました。
わりと頻繁に使用していたため、これは困る・・と思い調べてみることに。
（検索してもあまり出てこなかったのですが、もしかしてあまり使われていない・・？）

2023.7.12 追記
borderについては、「bd」と入力してTabを押すことで「border: 1px solid #000;」と出力されることに気づきました。
backgroundについても実はbg+に変わる何かがあるのかもしれません。

●Emmet2.0でサポートされなくなった
VSCodeのドキュメントによると、「+」で終わるEmmetはEmmet2.0からサポートされなくなったようです。

Emmet in Visual Studio Code

My HTML snippets ending with + do not work
HTML snippets ending with + like select+ and ul+ from the Emmet cheatsheet are not supported. This is a known issue in Emmet 2.0 Issue: emmetio/html-matcher#1. A workaround is to create your own custom Emmet snippets for such scenarios.

「既知の問題」と書かれているのにサポートされなくなりましたというのがどういう扱いなのかいまいちわからないのですが、とにかく使えないようなので回避策として提示されているカスタムEmmetスニペットを設定することにしました。

●カスタムEmmetスニペットを設定する

※メニューは日本語化しています
（1）「ファイル」＞「ユーザー設定」＞「ユーザースニペットの構成」を開きます
（2）「新しいグローバルスニペットファイル...」をクリックし、適当な名前を入力します。
（3）新しいスニペットが作成されるので、{}内に以下のように入力します。

"bg+": {
  "prefix": "bg+",
  "body": [
    "background: #fff url() 0 0 no-repeat;"
  ],
  "description": "Set background style with URL"
}
"bd+": {
  "prefix": "bd+",
  "body": [
    "border: 1px solid #000;"
  ],
  "description": "Set border style"
}

（4）保存して閉じます。

これで使えるようになります。
他にも必要なEmmetがあれば同様に追加できます。

外付けのHDDを正しい手順で外さないと、次回ちゃんと認識しないことがあります。
そんな時にまずディスクユーティリティで確認するのですが、全くないもできない場合下記の方法が有効でした。

1)アクティビティモニタを開く
2)右上の検索ボックスに「fsck_exfat」と入力
3)検索結果を選択しウィンドウ上にある「×」をクリック

htmlメール制作の際に役立ちそうな、メールクライアント毎のCSS対応状況が確認できるサイトです。
CSSだけでなく、CSSに関連するhtmlの記述形式についても対応しているか確認できます。

CSS Support Guide for Email Clients [+Checklist] | Campaign Monitor
https://www.campaignmonitor.com/css/style-element/style-in-head/

すべての環境で確認することは難しいため、対応状況を見てなるべく崩れにくい作り方ができるのはとても助かります。

iPhone端末でデバッグしていたところ、ボタンをタップしても1回ではJavaScriptが動作せず、2回目のタップで動作するという現象に遭遇しました。
記述の問題かと思いましたがどうやらclickイベント自体発火していないようで、困っていたところ以下の記事を見つけました（ありがとうございます！）。

【iOS】リンクをタップしても1回では挙動しない原因とは？
https://on-ze.com/archives/3066

CSSで:hoverの設定をしていると起こるようです。

スマホ用のスタイルで打ち消しても解決しない場合があり、メディアクエリでPCのみ:hoverを当てるようにして解決しました。

これまで同様の現象に出会ったことはなかったのですが、条件としてはレアケースでもないと思うので気をつけたいところです。

※当社の環境では「iPhoneSE（iOS15.5）のSafari」にて確認。

Responsive Viewer は様々な画面サイズでの表示確認を同時に行うことができる、便利なGoogle Chrome拡張です。

確認したい画面サイズをいくつか選んでプリセットを作っておくのですが、ワンクリックですぐに呼び出して確認することができます。
今は主にPCとスマホを並べて同時確認、というような使い方をしています。

また、スクロールやクリックも全画面で連動するため操作の手間を省くことができます。
（画面サイズによって結構ズレますが・・そのあたりはご愛嬌ということで）

画面が並んだ状態で確認することで崩れに気づきやすくなるかも？という期待もあります。

まだ使い始めですが、少しずつ機能を確認していこうと思います。

開発でよく使用するちょっとしたツールをまとめた、「ディベロッパーの十徳ナイフ」というDevToysがちょっと便利です。

ちょっとというのは自分の作業的にあまり多くの機能を使用していないからなのですが、人によってはもっと便利に使えると思います。

2022年11月時点での機能はざっと以下のようなものがあります。

●変換ツール
JSON <> YAML
Unix時間
基数
Cronパーサ

●エンコーダー/デコーダー
HTML
URL
Base64（テキスト）
Base64（画像）
GZip
JWT

●フォーマッター
JSON
SQL
XML

●生成ツール
ハッシュ
UUID
Lorem lpsum（ダミーテキスト）
チェックサム

●テキスト
エスケープと解除
文字列の検査と変換
XMLの検証
正規表現テスター
文字列の差分
Markdownプレビュー

●グラフィック
PNG/JPENの最適化
カラーピッカーとコントラスト
色覚異常シミュレーション
画像フォーマット変換

どれもいざ使おう！となると毎回検索したり個別のアプリを使っていたりするので、ひとまとめになっているとスッキリして良い感じです。

Photoshopでデザインを作成する際、素材をスマートオブジェクト化しておき、アセット書き出しの際にサイズを変えて（Retina用など）書き出すということがあると思います。

このとき、スマートオブジェクトで高解像度のデータを使っているにも関わらず、書き出した画像がぼやけることがあります。
ぼやける条件としては以下のようなものです。

・スマートオブジェクトにシャープ等のフィルターをかけている場合
・外部ファイルを直接スマートオブジェクトにした場合

特に2つ目の操作はあまり行うことがなかったため、遭遇した際に少し困りました。

●外部ファイルを直接スマートオブジェクトにした場合にぼやける
レイヤーを選んでスマートオブジェクト化するのではなく、「ファイル」＞「埋め込みを配置」や、ファイルを直接ドラッグ＆ドロップすることで、外部ファイルをスマートオブジェクト化することができます。
このとき、読み込むファイルの形式によって書き出しの際にぼやけます。



【ぼやける】
JPEG、PNG、GIF

【ぼやけない】
PSD、PSB

確認した形式は上記だけですが、外部ファイルを読み込む場合はPSD・PSBにしておくのが良さそうです。

日本語フォントと英語フォントを同時に指定した場合、フォントによっては和文と欧文でのサイズ差が気になる場合があります。（基本的には欧文が小さくなりがちです）
そういう場合に、欧文を判別してクラスを当ててくれる JavaScript があります。

wrapSingleByteTexts.js

デモを作成してみました。

欧文のみフォントサイズを調整して大きくしています。
判別できるのは 半角英文字、半角数字、半角記号 の3つで、spanで囲みクラスを当てることができます。

横に長いコンテンツ（表組みなど）を表示させる場合、画面のサイズによっては横スクロールがでてしまいます。
特にスマホで見ている場合、スクロールバーがみえずらく、横にスクロールできることがわかりずらい場合があります。

横長コンテンツの上には下記のような画像を表示させるようにしていました。



画像でもわかると思いますがScrollHintを使うと、動きを加えてよりわかりやすく横スクロールがあることを表示できます。
ScrollHint 公式サイト

設定はすごく簡単です。

（1）
上記ScrollHint公式サイトからダウンロードしたscroll-hint.cssとscroll-hint.jsをhead内でリンクする。
※CDNを利用することもできます。

（2）
横スクロールが出るコンテンツを下記divで囲う。

<div class="js-scrollable">〜</div>

（3）
下記スクリプトをコンテンツより後に記述。

<script>new ScrollHint('.js-scrollable');</script>

【例】


※オプションで色々と表示を変更できます。
公式サイト オプション↓
https://appleple.github.io/scroll-hint/#options

jQuery UI を利用することで、つまみを左右にドラッグして操作するスライダーUIを簡単に作成することができます。 jQuery UI は2021年10月の時点で開発終了してしまいましたが、メンテナンスは継続されるようです。




基本の実装

●jQuery UI をダウンロード
以下のサイトからjQuery UI をダウンロードします。
その際、不要な機能を除外したり、好みのテーマを選ぶこともできます。
https://jqueryui.com/

●HTML
・ダウンロードした以下のファイルを任意の場所に格納し、jQueryと併せて読み込みます。
　また、imagesフォルダも同じ場所に格納しておきます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="jquery-ui.min.css" rel="stylesheet" />
<script src="jquery-ui.min.js"></script>


・<body>内に以下のタグを記述。

<div id="jquery-ui-slider"></div>

●JavaScript

<script type="text/javascript">
  $(function() {
    $('#jquery-ui-slider').slider({
      min: 0,
      max: 10,
      value: 0,
      slide: function( event, ui ) {
        /* ここに処理を記述 */
        console.log(ui.value);
      }
    });
  });
</script>

以上で実装完了です。

実装デモ


スマホ対応

スライダーはそのままではスマホで操作することができません。
「jQuery UI Touch Punch」を使うことで、スマホでの操作に対応させることができます。
ダウンロードサイトからダウンロードし、読み込みます。

<script src="jquery.ui.touch-punch.min.js"></script>

こちらは読み込むだけで完了です。