<h2>IE を取り巻く背景</h2>
Microsoft が Internet Explorer 11（IE11）のサポート終了を発表した。
<a href="https://blogs.windows.com/japan/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/" target="_blank" rel="nofollow noopener">Internet Explorer は Microsoft Edge へ – Windows 10 の Internet Explorer 11 デスクトップアプリは 2022 年 6 月 15 日にサポート終了</a>
<ul>
<li>2021 年 5 月 19 日： Internet Explorer デスクトップアプリの提供終了を発表</li>
<li>2021 年 8 月 17 日： Microsoft 365 および他アプリでの IE11 サポート終了</li>
<li>2022 年 6 月 15 日： Internet Explorer デスクトップアプリの提供終了</li>
</ul>
2021 年 6 月 15 日移行、IE11 を起動すると Edge が立ち上がるようになるらしい。単体のアプリとして起動はできなくなるが、IE でしか動作しないサイトのために Edge には「IE モード」があり、IE11 で表示したい場合は、Edge の IE モードを利用する必要がある。この IE モードに関しては 2022 年ではなく、 2029 年 1 月 9 日までのサポート期間があるので注意。
<h2>IE モードとは</h2>
Edge のタブ内で Trident MSHTML エンジンを使った表示ができる。IE とほぼ同じ機能が使えるが、IE のツールバーや開発者ツールなどは使用できない。
<a href="https://docs.microsoft.com/ja-jp/deployedge/edge-ie-mode" target="_blank" rel="nofollow noopener">Internet Explorer (IE) モードとは</a>
<h2>IE モードを有効にする</h2>
以前は、Edge の<code>edge://flags</code>から有効化できたのだが、現在はグループポリシーエディタかレジストリエディタを利用して有効化する必要がある。
<ol>
<li>レジストリエディタを起動</li>
<li><code>HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft</code> を表示</li>
<li>新規キーで<code>Edge</code>を追加</li>
<li><code>InternetExplorerIntegrationLevel</code>を<code>REG_DWORD</code>で作成（値は <code>1</code>） 
<img src="/images/Edge-IE-Mode_1.png" alt="レジストリエディタ" loading="lazy"> 
<a href="https://docs.microsoft.com/ja-jp/DeployEdge/microsoft-edge-policies#internetexplorerintegrationlevel" target="_blank" rel="nofollow noopener">https://docs.microsoft.com/ja-jp/DeployEdge/microsoft-edge-policies#internetexplorerintegrationlevel</a></li>
<li><code>"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --ie-mode-test</code>から Edge を起動（ショートカットなど登録しておくと良い） 
ブラウザには<code>サポートされていないコマンドラインフラグ：--ie-mode-testを使用しています。これにより、安定性およびセキュリティに関するリスクが生じます。</code>と表示される</li>
<li>Edge のメニューの「その他のツール」に「サイトを Internet Explorer モードで開く」が追加されている 
<img src="/images/Edge-IE-Mode_2.png" alt="Edgeのメニュー（サイトをInternet Explorerモードで開く）" loading="lazy"></li>
<li>表示したサイトが IE モードで表示される</li>
</ol>
<h3>IE モードの UserAgent</h3>
<img src="/images/Edge-IE-Mode_3.png" alt="診断くん" loading="lazy">
<pre><code>Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko
</code></pre>
IE モードの状態で UserAgent を確認すると IE11 と同じ UserAgent になっている。
<h2>関連</h2>
<ul>
<li><a href="https://b.0218.jp/202012162243.html" target="_blank" rel="nofollow noopener">IE から Edge への強制転送設定を個人サイトに適応してもらった話</a></li>
<li><a href="https://qiita.com/hiro0218/items/f55dfe79294489c00e9e" target="_blank" rel="nofollow noopener">ここ近年、IE をサポート外にしたサービス一覧</a></li>
</ul>

ランチタイムに社内LT会を運営していた話

[Edge] Internet Explorer（IEモード）を有効にする方法

コロナ禍以前ではあるが、月イチで社内 LT 会を運営していたことがあるので、概要と運営フローを覚え書きする。
<h2>概要</h2>
<ul>
<li>ランチタイム（業務時間外）に社内 LT 会を開催
<ul>
<li>ランチタイムなので業務後に実施するより時間が合わせやすい</li>
<li>業務時間外なのでタスクに影響ない</li>
<li>昼休みの時間に行うので登壇時間はだいたい 15 分前後</li>
</ul>
</li>
<li>LT の内容は何でも良い
<ul>
<li>とにかく LT したい人が集まっていた</li>
<li>社外イベントでの登壇の"慣れ"にも繋がる</li>
</ul>
</li>
<li>社内デザイナーによって LT 会のロゴ画像を作ってもらえたので社内ブランディングも出来ていた</li>
<li>基本的に有志での運営
<ul>
<li>私ひとりでやっていたが、新卒などが設営手伝ってくれていた</li>
</ul>
</li>
</ul>
<h2>開催までの流れ</h2>
<h3>1 か月前までに登壇者募集</h3>
発表の立候補があったり、人数が足りなければ個別でオファーをした。
<ol>
<li>Google カレンダーで予約
<ul>
<li>登壇者の予定</li>
<li>社内のホール（登壇場所）</li>
</ul>
</li>
<li>登壇者と開催日の調整</li>
<li>Slack にてエンジニアや LT 専用のチャンネルで開催告知</li>
</ol>
<h3>1 週間前</h3>
発表者にリマインドする。
<h3>前日</h3>
Slack にてエンジニアや LT 専用のチャンネルで開催リマインドする。
<h3>当日</h3>
<ul>
<li>会場の設営（自分）
<ul>
<li>イスとテーブルの配置、プロジェクターの準備</li>
<li>片付け</li>
</ul>
</li>
<li>プロジェクターでオープニングスライド投影
<ul>
<li>LT 会のロゴを移していた</li>
</ul>
</li>
<li>司会（自分）
<ul>
<li>司会進行とタイムキーパーをやる</li>
<li>登壇時の写真を撮影（後日テックブログに公開する用）</li>
</ul>
</li>
<li>登壇者
<ul>
<li>発表・質疑応答（15 分前後）</li>
</ul>
</li>
<li>開催後、登壇資料を Google ドライブにアップしてもらう
<ul>
<li>社内共有</li>
</ul>
</li>
</ul>
<h3>後日</h3>
<ul>
<li>発表者内容をまとめて、テックブログで公開
<ul>
<li>基本的に運営側で書いて、登壇者に内容レビューしてもらい公開</li>
</ul>
</li>
</ul>
<hr>
<h2>〆</h2>
オフィス勤務前提の世界ではこういう流れで LT 会を運営していた。会場設営など物理的な準備が昨今のリモートワーク前提の LT 会とは考慮する点など異なってくるだろう。各回の準備が大変だったので、オンラインはそういった物理的な負荷軽減されそうな印象がある（接続の不調などはありそうだが）。

[アクセシビリティ] 画像に代替テキスト（alt）を追加するときの観点

<a href="https://waic.jp/docs/WCAG21/" target="_blank" rel="nofollow noopener">WCAG 2.1</a> の達成基準に「<a href="https://waic.jp/docs/WCAG21/#non-text-content" target="_blank" rel="nofollow noopener">1.1.1 非テキストコンテンツ</a>」がある。
<h2>概要</h2>
装飾ではない画像やアイコンは、代替テキスト（alt 属性）で説明する。
代替テキストの主な利用目的は以下の通り。
<ul>
<li>検索 bot やスクリーンリーダーを利用しているユーザーにも等しくコンテンツを提供する</li>
<li>ネットワークエラー時など、画像を表示できない場合にその画像の意図する内容を説明する</li>
</ul>
装飾目的の画像やアイコンには代替テキストは不要で、適宜 WAI-ARIA の aria-label 属性を設定する。
<h2>img 要素の alt 属性の入れ方</h2>
下記のような文章を意識して alt 属性を入れる。
<ol>
<li>電話で画像を説明して伝わる</li>
<li>画像が表示されなくても分かる</li>
<li>スクリーンリーダーで読み上げて何の画像か伝わる</li>
</ol>
画像を見て分かる範囲だけではなく画像を見たときに想像できる情報も書くべき。
<h3>alt に入れるテキストのルール</h3>
<ul>
<li>画像には必ず alt 属性を付ける 
alt 属性を省略するとファイル名が表示されたり、スクリーンリーダーがファイル名を読み上げてしまう場合がある</li>
<li>テキストが表示されても違和感のない文字を入れる</li>
<li>リンクの場合は alt 属性にはリンク先を示す内容にする</li>
<li>「イメージ画像」や「画像のすぐ側にキャプションがある」場合は、alt=""（値なし）で良い</li>
<li>画像がグラフや図表の場合、その要約を記述する 
すぐ側に説明がある場合は何のグラフ/図表なのかが示されていれば良い</li>
<li>画像がロゴや文字画像の場合、同等の文字列を alt 属性に入れる</li>
<li>画像に意味がない場合は alt=""（値なし）で良い</li>
</ul>
<h2>Alt 属性決定木</h2>
<a href="https://qiita.com/hibikikudo/items/f710933664094632540d" target="_blank" rel="nofollow noopener">もう alt 属性で迷いたくない</a>を参考に引用と改変をしている。
<ol>
<li>画像は文字を含んでいるか
<ol>
<li>文字を含む画像のすぐそばに本当のテキストもある 
→ alt 属性は空にする</li>
<li>画像は純粋に視覚的な装飾目的である 
→ alt 属性は空にする</li>
<li>画像には固有の機能がある（例：アイコン） 
→ alt 属性にはその画像の機能を伝える言葉を入れる</li>
<li>画像は他の何も表わさない文字そのものである 
→ 画像に書いてある文字をそのまま alt 属性に入れる</li>
</ol>
</li>
<li>画像はリンクやボタンか 
→ alt 属性にはリンクの飛び先ページの情報、またはボタンを押したときに何が起きるか（「リセット」「送信する」など）を入れる</li>
<li>画像はページや書いてある文脈に意味を与えているか
<ol>
<li>アイキャッチ目的の画像である 
→ 画像の意味を伝える簡単な説明 
→ alt 属性は空にする</li>
<li>グラフや複雑な情報を表している 
→ alt 属性には画像が表す情報を集約して入れる</li>
<li>その画像を表すテキストが近くに書いてあり、alt に書くと過剰な場合 
→ alt 属性は空にする</li>
</ol>
</li>
<li>画像は純粋に装飾が目的か 
→ alt 属性は空にする</li>
</ol>
<h2>実装</h2>
<h3>alt 属性</h3>
<pre><code class="hljs language-html">&#x3C;img src="google.png" alt="Google" width="150" height="100" />
</code></pre>
<ul>
<li>alt 属性がないと画像ファイル名が表示、読み上げられてしまう</li>
<li>代替テキストが不要な装飾的画像は空の alt 属性（値なし）を設定する</li>
</ul>
<h3>アイコン</h3>
ラベルのないアイコンには WAI-ARIA の <code>aria-label</code> 属性を設定する。
<pre><code class="hljs language-html">&#x3C;span class="c-icon--cart" aria-label="カートを見る">&#x3C;/span>
</code></pre>
アイコンにラベルが添えられている場合に aria-label 属性を設定すると、スクリーンリーダーに二重で読み上げられてしまうことがあるため、次のように<code>aria-hidden</code> 属性を設定する。
<pre><code class="hljs language-html">&#x3C;button type="button">
 &#x3C;span class="c-icon--cart" aria-hidden="true">&#x3C;/span>
 カートを見る
&#x3C;/button>
</code></pre>
テキストを視覚的には表示せず、スクリーンリーダー用のテキストとして用意したい場合は、CSS でテキストを隠す。
<pre><code class="hljs language-html">&#x3C;button type="button">
 &#x3C;span class="c-icon--cart" aria-hidden="true">&#x3C;/span>
 &#x3C;span class="sr-only">カートを見る&#x3C;/span>
&#x3C;/button>

&#x3C;style>
 .sr-only {
 border: 0 !important;
 clip: rect(1px, 1px, 1px, 1px) !important;
 -webkit-clip-path: inset(50%) !important;
 clip-path: inset(50%) !important;
 height: 1px !important;
 margin: -1px !important;
 overflow: hidden !important;
 padding: 0 !important;
 position: absolute !important;
 width: 1px !important;
 white-space: nowrap !important;
 }
&#x3C;/style>
</code></pre>
単純に<code>display: none</code>や<code>visibility: hidden</code>だと認識されないため、こういったハックが利用される。
<ul>
<li><a href="https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034" target="_blank" rel="nofollow noopener">Improved .sr-only · GitHub</a></li>
</ul>
<h3>背景画像</h3>
<pre><code class="hljs language-html">&#x3C;!-- 悪い例 -->
&#x3C;div style="background-image: url(google.png)">&#x3C;/div>
</code></pre>
<ul>
<li>印刷時やハイコントラストモードに背景画像は表示されないことがある（ブラウザの初期設定では背景画像は印刷しない）</li>
</ul>
<code>img</code>もしくは WAI-ARIA の <code>aria-label</code> 属性、role 属性を設定した要素を使う。
<pre><code class="hljs language-html">&#x3C;img src="google.png" alt="Google" width="150" height="100" />

&#x3C;!-- OR -->

&#x3C;div
 style="background-image: url(google.png)"
 aria-label="Google"
 role="img"
>&#x3C;/div>
</code></pre>
<h2>参考リンク</h2>
<ul>
<li><a href="https://waic.jp/docs/WCAG21/#non-text-content" target="_blank" rel="nofollow noopener">Web Content Accessibility Guidelines (WCAG) 2.1 - 1.1.1 非テキストコンテンツ</a></li>
<li><a href="https://a11y-guidelines.ameba.design/1/1/1/" target="_blank" rel="nofollow noopener">Ameba Accessibility Guidelines - 1.1.1 画像に代替テキストを提供する</a></li>
<li><a href="https://docs.google.com/presentation/d/10MjLH0mqXy3p4qTFNOPoaFz_PAOc0k9nLP_ID4mvnd0/edit#slide=id.p" target="_blank" rel="nofollow noopener">入門者向け alt 属性の書き方アドバイス</a></li>
<li><a href="https://accessible-usable.net/2007/01/entry_070120.html" target="_blank" rel="nofollow noopener">img 要素の alt 属性の入れかた</a></li>
</ul>

[JavaScript] オブジェクトのプロパティを条件指定で追加する方法

<h2>背景</h2>
コンポーネントの Props で条件が合致した際に object を追加したいケースで必要になった。
<h2>方法</h2>
<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax" target="_blank" rel="nofollow noopener">スプレッド構文</a>と<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Logical_AND" target="_blank" rel="nofollow noopener">論理積</a>を使う。
<pre><code class="hljs language-js">const obj = {
 ...(condition &#x26;&#x26; { key: "value" }),
};
</code></pre>
<ul>
<li><code>condition</code>が<code>true</code>であれば、<code>{ key: 'value' }</code>が追加される</li>
<li><code>condition</code>が<code>false</code>であれば、何も追加されない</li>
</ul>
<h3>ユースケース</h3>
<code>a</code>要素に条件によって<code>target="_blank"</code>を付け外しをすることがあり、下記のような記述をした。
<pre><code class="hljs language-tsx">&#x3C;a href="#" {...(isExternal &#x26;&#x26; { target: "_blank" })}>
 Link
&#x3C;/a>
</code></pre>

[CSS設計] ITCSSとは

日本国内であまり言及のない CSS 設計手法である ITCSS（Inverted Triangle CSS）について基本情報を記述する。
<h2>TL;DR</h2>
<ul>
<li>CSS を実装上の問題点</li>
<li>ITCSS とはどういうアーキテクチャなのか</li>
<li>ITCSS が CSS 実装への課題へどういうアプローチをしているか</li>
</ul>
<hr>
<h2>CSS の問題</h2>
CSS の仕様（グローバルスコープや詳細度）により、スタイル定義は複雑化しやすく破綻しやすい。
<ul>
<li>カスケードと継承</li>
<li>ソースの順番に大きく依存する</li>
<li>詳細度</li>
</ul>
CSS の定義において、ソースの記述順と詳細度は非常に重要である。これらの関係性が複雑になっていくと、既存定義を上書きするためにまた新しい定義をしていく必要がでてきてしまい、多くの無駄や冗長性が発生し、破綻してしまう。
<h3>詳細度の解決方法</h3>
── CSS を詳細度順で書く。
コードの記述順をいきあたりばったりで記述していくとする。そうすると、下記の図のように詳細度（山なりになっている箇所）が意図しない部分で現れていき、あとから対応をしていく度にコードの複雑さが増してしまう。複雑性が増したコードの場合、コードの末端で上書きしたつもりでもコードの先頭部分での定義の詳細度が強いケースなどもあり得る。
<img src="https://user-images.githubusercontent.com/3617124/115998030-529b3600-a620-11eb-8d13-df770b06e925.png" alt="悪い記述順" loading="lazy">
対して、コードを詳細度を意識した順番で記述していくとする。そうすると、下記のように当然詳細度は徐々に上がっていく形になる。あとから対応が必要な場合、別の場所の詳細度に影響を受けずに後述していけば良くなり、コードの見通しも良くなる。
<img src="https://user-images.githubusercontent.com/3617124/115998026-5038dc00-a620-11eb-8c94-4992dfd09717.png" alt="良い記述順" loading="lazy">
大まかにいえば、ITCSS はこの詳細度での記述順を可視化するための枠組みである。
<h2>ITCSS</h2>
<a href="https://itcss.io/" target="_blank" rel="nofollow noopener">ITCSS</a>は、CSS のための健全でスケーラブルに管理されたアーキテクチャである。
<h3>ITCSS とは何か</h3>
<ul>
<li>逆三角形の CSS アーキテクチャ</li>
<li>健全でスケーラブルな管理されたアーキテクチャ</li>
<li>ライブラリではなく、考え方の流儀</li>
<li>メタフレームワークであり、フレームワークのためのフレームワーク 
信じられないほどシンプル</li>
</ul>
<img src="https://user-images.githubusercontent.com/3617124/116028973-41d7d800-a693-11eb-8dd3-779f5bca4102.png" alt="ITCSS 逆三角形" loading="lazy">
CSS のスタイル定義を詳細度の広い順に記述（階層化）することを提唱している。その記述が逆三角形として視覚化されるため、この呼び名となっている。
<h3>レイヤー</h3>
ITCSS には、デフォルトで下記の 7 つの種別（レイヤー）で分類する。
<ol>
<li>Settings</li>
<li>Tools</li>
<li>Generic</li>
<li>Base</li>
<li>Objects</li>
<li>Components</li>
<li>Trumps</li>
</ol>
<img src="https://user-images.githubusercontent.com/3617124/116067628-48327800-a6c4-11eb-8663-a91e44f49a5b.png" alt="ITCSSの構造" loading="lazy">
必要に応じてレイヤーを追加や削除ができる。
<ul>
<li>CSS プリプロセッサを利用していない場合、<code>Settings</code>や<code>Tools</code>などのレイヤーを削除しても良い</li>
<li>OOCSS を使用していなければ<code>Objects</code>レイヤーを削除しても良い</li>
<li>テーマ性が必要であれば<code>Theme</code>レイヤーを追加しても良い</li>
</ul>
レイヤーの原則として、上位レイヤーを下位レイヤーが上書きできるような実装になっていなければ良い。そのため、プロジェクトに応じて必要なレイヤーを継ぎ足しすることも問題ない。
<h4>Settings</h4>
プリプロセッサなどで利用するグローバル変数や全体の設定を置く（SASS 変数や CSS Variables の定義）。
<pre><code class="hljs language-scss">$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
 "Segoe UI Symbol", "Noto Color Emoji" !default;

$color-ui: #bada55;
$spacing-unit: 10px;
</code></pre>
<h4>Tools</h4>
プリプロセッサで利用する<code>mixin</code>や<code>function</code>などの定義を置く。
<pre><code class="hljs language-scss">@function str-replace($string, $search, $replace: "") {
 $index: str-index($string, $search);

 @if $index {
 @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index +
 str-length($search)), $search, $replace);
 }

 @return $string;
}

@mixin font-brand() {
 font-family: "UI Font", sans-serif;
 font-weight: 400;
}
</code></pre>
<h4>Generic</h4>
リセットスタイル（normalize.css など）や固有のリセットスタイル定義を置く。低詳細度、広範囲に当たる初期のスタイルを定義する。
<pre><code class="hljs language-scss">@import "~normalize.css/normalize.css";

* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
</code></pre>
<h4>Base</h4>
素の HTML 要素（a, h1…6, ul…li など）のスタイルを定義する。クラスセレクターなどは使用せず、要素セレクターのみで定義する。
<pre><code class="hljs language-scss">ul {
 list-style: square outside;
}
</code></pre>
※ Base ではなく Elements という記述の資料もあるが、提唱者の資料をみると Base のようであった
<h4>Objects</h4>
OOCSS（Object Oriented CSS）の概念に基づいた定義をする。装飾を持たないレイアウトを定義する。
<pre><code class="hljs language-scss">.ui-list {
 margin: 0;
 padding: 0;
 list-style: none;
}

.ui-list__item {
 padding: $spacing-unit;
}
</code></pre>
<h4>Components</h4>
名前の付けられた明確なコンポーネント（UI パーツ）を定義する。
<pre><code class="hljs language-scss">.products-list {
 @include font-brand();
 border-top: 1px solid $color-ui;
}

.products-list__item {
 border-bottom: 1px solid $color-ui;
}
</code></pre>
<h4>Trumps</h4>
ヘルパー・ユーティリティ系のスタイルを定義する。1 つの DOM にのみ影響するものに焦点を置いて定義する。明示的なスタイル定義（テキストの中央寄せ等）などスコープがもっとも狭い定義になる。
<pre><code class="hljs language-scss">.one-half {
 width: 50% !important;
}
</code></pre>
最下層のレイヤーであるため、 ID セレクターや<code>!important</code>の定義が許容される。
<h3>レイヤーの特徴</h3>
<ul>
<li>詳細度はレイヤーが下位へいくごとに増す</li>
<li>一度に DOM のより小さな部分に影響を与えていきます</li>
<li>下のレイヤーを上のレイヤーが上書きすることはしない</li>
</ul>
<h3>ITCSS の成果</h3>
<ul>
<li>すべてのコードを置く場所がある</li>
<li>人々は、どこを見ればどんな種類のルールがあるか分かる</li>
<li>健全なソースの順序</li>
<li>無駄を省き、冗長性を高める</li>
<li>スケーラビリティの向上</li>
<li>詳細度戦争が終わる</li>
</ul>
<h2>参考</h2>
<ul>
<li>Managing CSS Projects with ITCSS - speakerdeck 
<a href="https://speakerdeck.com/dafed/managing-css-projects-with-itcss" target="_blank" rel="nofollow noopener">https://speakerdeck.com/dafed/managing-css-projects-with-itcss</a></li>
<li>Harry Roberts - Managing CSS Projects with ITCSS 
<a href="https://www.youtube.com/watch?v=1OKZOV-iLj4" target="_blank" rel="nofollow noopener">https://www.youtube.com/watch?v=1OKZOV-iLj4</a></li>
<li>itcss/itcss-netmag 
<a href="https://github.com/itcss/itcss-netmag/" target="_blank" rel="nofollow noopener">https://github.com/itcss/itcss-netmag/</a></li>
</ul>

husky v4 から v6 へ移行する手順の覚書

2020 年も<code>&#x3C;meta name="keywords"></code>を散見する 1 年であった。
<h2>TL;DR</h2>
<ul>
<li>検索エンジン（Google, Yahoo!, Bing）は meta keywords 情報を利用しない</li>
<li>SEO として meta keywords の記述はプラスにはならないが、マイナスにもならない</li>
</ul>
<h2>meta keywords とは</h2>
下記のような要素を<code>&#x3C;head></code>要素内に記述する。
<pre><code class="hljs language-html">&#x3C;meta name="keywords" content="メタタグ, keywords, seo" />
</code></pre>
<code>name</code>には<code>keywords</code>、<code>content</code>に単語（キーワード）をカンマ区切りで列挙する。
<h2>meta keywords と SEO との関係性</h2>
以前は SEO として効果があった。
しかしながら、ブラックハット SEO での乱用の影響で現在は Google 検索から評価されることはなくなった。2009 年 9 月には、「Google は、ウェブ検索ランキングで"keywords"メタタグを使用していません」と公式的に声明を出している。
<blockquote>
At least for Google's web search results currently (September 2009), the answer is no. Google doesn't use the "keywords" meta tag in our web search ranking. This video explains more, or see the questions below.
<a href="https://developers.google.com/search/blog/2009/09/google-does-not-use-keywords-meta-tag" target="_blank" rel="nofollow noopener">Google does not use the keywords meta tag in web ranking 
</a>
</blockquote>
<a href="https://developers.google.com/search/docs/advanced/crawling/special-tags?hl=ja&#x26;ref_topic=4617741&#x26;visit_id=637448893659733022-2818023169&#x26;rd=1" target="_blank" rel="nofollow noopener">Special tags that Google understands | Google 検索セントラル</a>にサポートしているメタタグの一覧があるが、「すべてではない」と但し書きがあるものの <code>&#x3C;meta name="keywords"></code> の記載はない。
<hr>
また、Yahoo! や Bing についてもほぼ同様の見解を示している。
<h2>meta keywords を記述したままで良いのか</h2>
ブラックハット SEO での乱用された背景があるが、「検索ランキングで使用していない」と言っているだけなので記述していても SEO に悪影響はない（記述のありなしで評価が変わることはなさそう）。ただし、今後 <code>&#x3C;meta name="keywords"></code> の記述をブラックハットの判定として使用する可能性も否定できない。逆に評価されるようになる可能性もあるが、その際はどうようのアルゴリズムを使われることはないと思うので、いずれにしても書き換えは必要なように思う。そのため、個人的には意味のない記述はせず、記述しているのであれば削除しておいた方が無難だと考える。
<h2>まとめ</h2>
記述するのは自由だが、現在主要となっている検索エンジンでは SEO として meta keywords の記述は評価されない。SEO 目的ではなく meta keywords をサポートするアプリケーション、また SEO として、サポートする新進気鋭の検索エンジンはあるだろう。
意味のない meta keywords に時間を使うより、コンテンツの良さを検索エンジンにヒットさせるようなコンテンツ作りをする方が有意義だろう。また、無意味な HTML を記述していることになるのでレスポンスのサイズも無駄である。
<h2>参考</h2>
<ul>
<li><a href="https://developers.google.com/search/blog/2009/09/google-does-not-use-keywords-meta-tag" target="_blank" rel="nofollow noopener">Google does not use the keywords meta tag in web ranking bookmark_border</a></li>
<li><a href="https://searchengineland.com/yahoo-search-no-longer-uses-meta-keywords-tag-27303#" target="_blank" rel="nofollow noopener">Yahoo Search No Longer Uses Meta Keywords Tag</a></li>
<li><a href="https://blogs.bing.com/webmaster/2014/10/03/blame-the-meta-keyword-tag/" target="_blank" rel="nofollow noopener">Blame The Meta Keyword Tag</a></li>
</ul>

[Next.js] Google Adsenseを表示させる方法

竈門炭治郎をCSSだけで再現する

[HTML] meta keywords の記述は SEO として不要

受け手は気にする必要はありませんが、送り手としては、これらを必要に応じて使い分けられると良いかもしれません。

<div class="more js-separate"></div>

<h2>違い</h2>
<ul>
<li><code>&#x3C;b></code>は太字（スタイル）</li>
<li><code>&#x3C;strong></code>は重要性を意味する（セマンティック）</li>
</ul>
テキスト読み上げ
<h3>strong</h3>
入れ子にして重要性を変えることができる。
<pre><code class="hljs language-html">&#x3C;p>&#x3C;strong>Warning.&#x3C;/strong> This dungeon is dangerous.
&#x3C;strong>Avoid the ducks.&#x3C;/strong> Take any gold you find.
&#x3C;strong>&#x3C;strong>Do not take any of the diamonds&#x3C;/strong>,
they are explosive and &#x3C;strong>will destroy anything within
ten meters.&#x3C;/strong>&#x3C;/strong> You have been warned.&#x3C;/p>
</code></pre>
<h2>参考</h2>
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-strong-element" target="_blank" rel="nofollow noopener">https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-strong-element</a></li>
<li><a href="https://momdo.github.io/html/text-level-semantics.html#the-strong-element" target="_blank" rel="nofollow noopener">https://momdo.github.io/html/text-level-semantics.html#the-strong-element</a></li>
<li><a href="https://web.archive.org/web/20091124170143/http://lists.evolt.org/archive/Week-of-Mon-20010521/032901.html" target="_blank" rel="nofollow noopener">https://web.archive.org/web/20091124170143/http://lists.evolt.org/archive/Week-of-Mon-20010521/032901.html</a></li>
</ul>

[JavaScript] 簡単なlocalhostの判別方法

[Windows7] ファイルの関連付けを変更する方法

との違い

<h2>状況</h2>
手元に iPhone などの iOS 端末がなく、iOS 特有のバグ確認ができなかった為、シミュレータで検証を行うことにした。
<h2>確認した環境</h2>
<ul>
<li>macOS Sierra</li>
<li>macOS Catalina</li>
</ul>
<h2>方法</h2>
残念ながら Xcode のインストールをする必要がある。
<ol>
<li>Xcode をインストール</li>
</ol>
初回起動をしていない場合は起動しておく 
その時に<code>Installing components...</code>が走るが、それがないとシミュレーターが起動しない
<ol>
<li>Xcode.app を右クリック 
→ パッケージの内容を表示 
<img width="384" alt="Finder" src="https://user-images.githubusercontent.com/3617124/97997291-27cbe400-1e2c-11eb-89a2-993b0ed387a5.png"></li>
<li>以下のパスにあるので実行する</li>
</ol>
<code>/Applications/Xcode.app/Contents/Developer/Applications/Simulator.app</code>
エイリアスを作って、「アプリケーション」ディレクトリに入れておくと Lanchpad からもアクセスできて便利。

[WordPress] プレビュー時のみテンプレートを切り替える方法

[Amazonビデオ] 視聴中にレンタル期間が終了するとどうなるのか

[macOS] iPhoneシミュレーターをインストールする方法

<div class="more js-separate"></div>

<h2>状況</h2>
以下のようなページネーションがある。
<pre><code class="hljs language-html">&#x3C;ul class="pagination">
 &#x3C;li class="frist">&#x3C;/li>
 &#x3C;li class="previous">&#x3C;/li>
 &#x3C;li>01&#x3C;/li>
 &#x3C;li>02&#x3C;/li>
 &#x3C;li>03&#x3C;/li>
 &#x3C;li class="active">&#x3C;/li>
 &#x3C;li>&#x3C;/li>
 &#x3C;li class="last">&#x3C;/li>
&#x3C;/ul>
</code></pre>
<code>frist</code> <code>previous</code> <code>active</code> <code>last</code>以外の要素にスタイルを適応したい。こういう場合、<code>:not()</code>セレクタを使って指定を除外するが、複数指定する場合も同様に<code>:not()</code>セレクタを使う。
<h2>使用方法</h2>
Selectors Level 3 では、<code>:not(.frist, previous)</code>ように続けて指定できない。 
以下のように<code>:not()</code>を繋げて指定する必要がある。
<pre><code class="hljs language-css">&#x26;:not(.frist):not(.next):not(.previous):not(.last):not(.active) {
 /* style */
}
</code></pre>
Selectors Level 4 では、リスト形式を入れ込むことが出来る。
<pre><code class="hljs language-css">&#x26;:not(.frist, .next, .previous, .last, .active) {
 /* style */
}
</code></pre>
<a href="https://drafts.csswg.org/selectors/#negation" target="_blank" rel="nofollow noopener">https://drafts.csswg.org/selectors/#negation</a>

[Let's Encrypt] AndroidのGoogle Chromeでエラーになる場合の対処法

[iOS] Appストアに公開したアプリの証明書の有効期限が切れたらどうなるか

[CSS] :not()セレクタを複数指定する方法

さよなら IE。

<div class="more js-separate"></div>

<h2>条件付きコメント</h2>
条件付きコメントを利用。
<pre><code class="hljs language-html">&#x3C;!--[if IE]>
 &#x3C;style type="text/css">
 * {
 display: none;
 }
 &#x3C;/style>
&#x3C;![endif]-->
</code></pre>
ただし、条件付きコメントは IE9 以下のみで有効。
<h2>メディアクエリを利用して IE10〜IE11 に対応する</h2>
<pre><code class="hljs language-css">@media all and (-ms-high-contrast: none) {
 * {
 display: none;
 }
}
</code></pre>

Home

Recent Articles