しらべものドット宇宙 – HTMLコーダーが必死こいて〇〇〇を目指すブログ

ケイパビリティとは

capability

企業や組織が持つ能力や才能、可能性などを意味する言葉。

競争上の優位性を確立する源泉となる
事業の安定化や継続性強化に寄与する
経営の安定性が見込める
経営が外的要因に左右されにくくなる

制作会社が欲しい業務未経験の人材像（WEBデザイナー・コーダー編）

とあるきっかけで業務未経験の方に向けてWeb制作の実務を教える機会をいただくことになったので、制作会社に約8年在籍していた経験（※ 1）を元に、企業が求める業務未経験のウェブデザイナー・コーダーの人材像を考えてみました。

※ 1 … 印刷会社のウェブ部門に約5.5年・デザイン制作会社のウェブチームに約2.5年在籍。

【結論】制作会社が欲しい業務未経験の人材像

【スキル】日常的に行われている画像やテキストの差し替え・スタイル修正ができること。
【スキル】ページや簡単なサイトを新規構築することができること。
【資質】置かれている状況や環境の変化に対して、ポジティブかつ率直であること。

制作会社の日常業務

Web関連業務を行っている企業において、日常的に行っている保守・運用・制作業務は以下のようなものだと思います。

既存案件のページ内の情報更新・バナー更新・スタイルや文言修正
既存案件のサイト更新（CMSアップデート等）
既存案件の新規構築（サイト・ページ）
既存案件の機能開発
新規案件の新規構築（サイト・ページ）

ポータルサイトを運用しているような場合は、サイト内のバナー更新や新着情報の追加など、広告運用を行っているような場合は、出稿している広告の更新やスタイル・テキストの修正など、WordPressといったCMSでサイト運用を行っているような場合は、WordPressのコアアップデートやプラグイン・テーマのアップデートなどの業務があります。

上記業務リストの内容は下に行くほど作業の難易度は高いものになっていきますが、既存案件の簡単な更新でさえ、業務未経験の人材には難しく感じてしまうものです。

※ 既存案件の簡単な更新でさえ業務未経験の人材には難しく感じてしまう理由 … ①案件自体のクセ、②明文化されていない案件のルール、③明文化されていない会社・チームのルール、④そもそも前提となる業務に対する理解などがあると思っています。詳しくはまた別の機会に。

業務未経験の人材に求められる業務内容

こうした業務が行われている企業において、業務未経験の人材に任せる仕事としては以下のようなものが考えられます。

簡単なページやバナーの更新、テキストやスタイルの修正など
ページや簡単なサイトの新規構築

既存案件にアサインして機能開発を行ったり新規サイト構築案件に積極的にアサインするような、業界未経験の人の登用に積極的な企業もあるようです。

いずれにしても業務未経験の人には比較的簡単な業務をしながら作業に慣れてもらい、できることを増やしながら担うことができる役割を大きくしていくことが求められます。

業務未経験の人材に求められる「スキル」以外の重要な資質

専門学校や職業訓練校、オンラインスクールで学ぶことができる「スキル」としてのウェブ制作技術が重要なことは言うまでもでもありませんが「スキル」としてのウェブ制作技術と同じくらい重要な資質もあります。

必要に応じたコミュニケーションを取ることができる。（ロジカルシンキング）
チームや同僚が使っている用語が分かる。
新しい技術・トレンドや変化に対してポジティブ。

これらはチームとして「円滑に」「効率的に」業務を進めていくために必要な要素です。

業務に慣れ親しんでいる先輩や同僚にとって「前提」となってしまっている専門用語や情報の格納場所・アクセス権限、作業手順などは（業務経験がある場合でも）新しく入ってきた人にとって分かりづらいものが多いでしょう。

また、せっかく覚えた作業手順についても、ライブラリやフレームワークのアップデートに伴う機能の更新などで覚え直したり、新しいものを学び直す必要が出てくることもあります。

いずれにしても、置かれている状況や環境の変化に対して、ポジティブかつ率直なスタンスでいることは、自分自身の身体と心を保つ意味でもとても重要です。

無事に就職して業務を覚え、仕事に慣れて忙しくなればなるほど「（社内外を問わず）一緒に仕事をする人」や「仕事そのもの」に対してポジティブかつ率直な姿勢でコミュニケーションを取っていくことの重要性は増していくでしょう。

アトロク2『いつだって備えておきたい”頼れる”ライト特集2024』について

2024年9月2日に放送されたラジオ番組『アフター6ジャンクション2』の特集企画『いつだって備えておきたい”頼れる”ライト特集2024』が面白かったので、忘れないうちに記事として残しておこうと思います！

いつだって備えておきたい”頼れる”ライト特集2024 | アフター6ジャンクション2

出演：
ライムスター宇多丸さん
宇垣美里さん
多田遠志（ただとおし）さん

この企画は2023年1月に多田さんが行ったライト特集の精神的続編のような特集でした。

2023年1月から2024年8月までを振り返り、いかに地震が身近に起こっていたか、台風・大雨の被害がヒドいものだったか、停電が頻発していたかを思い返しつつ、非日常の備えを日常的にしよう！という主旨のものでした。

まずはテレビやラジオといったマスメディアでさえ、緊急時に対する備え・認識が甘すぎるという指摘が鋭く入り、『スマホのバッテリー残量を照明なんかに使うべきじゃない！』という、スマホバッテリー難民を経験したことがある人なら首がもげる程納得感のある解説、緊急時に緊急避難バッグにどう辿り着くか問題、『戦争と防災のことは1年中考えとけ』というエッジの効いた話が展開されました。

最終的には防災の要素を日常の中にシームレスに取り入れるという発想から『普段使いできるライト』の話へ。

ライトをタンスの肥やしにならないために、愛着が持てる、思い入れのギミックを楽しめるライトをいくつか紹介してくれていました。

紹介してくれていたライトのラインナップは割愛しますが、『防災の要素を日常の中にシームレスに取り入れる』という発想、『タンスの肥やしにしないために、愛着がモテる、思い入れのあるギミックを楽しめるライト』という視点がダイナミックに合理的で心を動かされました。

こーゆー特集を組んでくれるからアトロク2（アフター6ジャンクション2）って面白いんですよね！

jsでアコーディオン

		<details class="js-details">

			<summary class="js-summary">

				<span class="summary_inner">

					概要<span class="icon"></span>

				</span>

			</summary>

			<div class="content js-content">

				<div class="content_inner">折りたたまれている部分です。</div>

			</div>

		</details>

		<details class="js-details">

			<summary class="js-summary">

				<span class="summary_inner">

					概要<span class="icon"></span>

				</span>

			</summary>

			<div class="content js-content">

				<div class="content_inner">折りたたまれている部分です。</div>

			</div>

		</details>
<script>
'use strict';



{

	document.addEventListener('DOMContentLoaded', () => {

		setAccordion();

	});



	const setAccordion = () => {

		const details = document.querySelectorAll('.js-details');

		const RUNNING_VALUE = 'running';

		const IS_OPENED_CLASS = 'is-opened';



		details.forEach(element => {

			const summary = element.querySelector('.js-summary');

			const content = element.querySelector('.js-content');



			summary.addEventListener('click', event => {

				event.preventDefault();



				if (element.dataset.animStatus === RUNNING_VALUE) {

					return;

				}



				if (element.open) {

					element.classList.toggle(IS_OPENED_CLASS);



					const closingAnim = content.animate(

						closingAnimKeyframes(content),

						animTiming

					);



					element.dataset.animStatus = RUNNING_VALUE;



					closingAnim.onfinish = () => {

						element.removeAttribute('open');

						element.dataset.animStatus = '';

					};

				} else {

					element.setAttribute('open', 'true');



					element.classList.toggle(IS_OPENED_CLASS);



					const openingAnim = content.animate(

						openingAnimKeyframes(content),

						animTiming

					);

					element.dataset.animStatus = RUNNING_VALUE;



					openingAnim.onfinish = () => {

						element.dataset.animStatus = '';

					};

				}

			});

		});

	};



	const animTiming = {

		duration: 400,

		easing: 'ease-out',

	};



	// 閉じる

	const closingAnimKeyframes = content => [

		{

			height: content.offsetHeight + 'px',

			opacity: 1,

		},

		{

			height: 0,

			opacity: 0,

		},

	];



	// 開く

	const openingAnimKeyframes = content => [

		{

			height: 0,

			opacity: 0,

		},

		{

			height: content.offsetHeight + 'px',

			opacity: 1,

		},

	];

}

</script>
<style>
summary {

	display: block;

}



summary::-webkit-details-marker {

	display: none;

}



.summary_inner {

	cursor: pointer;

	display: flex;

	flex-direction: row;

	justify-content: space-between;

	align-items: center;

	padding: 16px 24px;

	border: 1px solid #d2beff;

	font-weight: bold;

	color: #002255;

}



.icon {

	display: block;

	position: relative;

	width: 24px;

	margin-left: 6px;

	flex-shrink: 0;

	transform-origin: center 43%;

	transition: transform 0.4s;

}



details.is-opened .icon {

	transform: rotate(180deg);

}



.icon::before,

.icon::after {

	content: '';

	position: absolute;

	display: block;

	width: 15px;

	height: 3px;

	background-color: #7050ff;

}



.icon::before {

	left: 0;

	transform: rotate(45deg);

}



.icon::after {

	right: 0;

	transform: rotate(-45deg);

}



.content {

	overflow: hidden;

	background-color: #f0f2ff;

}



.content_inner {

	padding: 24px 48px;

	display: flex;

	flex-direction: column;

	gap: 16px;

}

</style>

jsでタブ実装

<!DOCTYPE html>

<html lang="ja">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .tab-wrap {

            display: flex;

            flex-wrap: wrap;

        }

        .tab-label {

            color: White;

            background: LightGray;

            margin-right: 5px;

            padding: 3px 12px;

            order: -1;

        }

        .tab-content {

            width: 100%;

            display: none;

            box-sizing: border-box;

            border: solid 1px black;

        }

        /* アクティブなタブ */

        .tab-switch:checked+.tab-label {

            background: DeepSkyBlue;

        }

        .tab-switch:checked+.tab-label+.tab-content {

            display: block;

        }

        /* ラジオボタン非表示 */

        .tab-switch {

            display: none;

        }

    </style>

</head>

<body>

    <div class="tab-wrap">

        <input id="TAB-01" type="radio" name="tab" class="tab-switch" checked="checked" />

        <label class="tab-label" for="TAB-01">ボタン 1</label>

        <div class="tab-content">

            コンテンツ 1

        </div>



        <input id="TAB-02" type="radio" name="tab" class="tab-switch" />

        <label class="tab-label" for="TAB-02">ボタン 2</label>

        <div class="tab-content">

            コンテンツ 2

        </div>



        <input id="TAB-03" type="radio" name="tab" class="tab-switch" />

        <label class="tab-label" for="TAB-03">ボタン 3</label>

        <div class="tab-content">

            コンテンツ 3

        </div>

    </div>

</body>

</html>

よく使うmixin(sass)

// マップ型の変数でブレイクポイントを定義する

$breakpoints: (

	'xs': 'screen and (min-width: 320px)',

	'sm': 'screen and (min-width: 576px)',

	'md': 'screen and (min-width: 768px)',

	'lg': 'screen and (min-width: 1024px)',

	'xsl': 'screen and (min-width: 1200px)',

	'xl': 'screen and (min-width: 1366px)',

	'xxl': 'screen and (min-width: 1920px)',

) !default;



// メディアクエリ

@mixin mq($breakpoint: md) {

	@media #{map-get($breakpoints, $breakpoint)} {

		@content;

	}

}



// vwの算出（四捨五入）

@function getVw($elemSize: 10, $windowWidth: 375) {

	$vwValue: round(calc($elemSize * calc(100 / $windowWidth))) + vw;

	@return $vwValue;

}



// vwの算出（四捨五入）

@function getVwNoRound($elemSize: 10, $windowWidth: 375) {

	$vwValue: calc($elemSize * calc(100 / $windowWidth)) + vw;

	@return $vwValue;

}

名前解決

resolv.conf ファイルを編集する。

sudo vi /etc/resolv.conf

resolv.conf ファイル

nameserver 8.8.8.8

Google FontsのWebフォントをWordPressに読み込ませる

Google Fonts から発行されたURL

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cabin:wght@500&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">

Google Fonts を使うスタイル

font-family: 'Cabin', sans-serif;
font-family: 'Noto Sans JP', sans-serif;

いくつかの疑問

rel=”preconnect” をどうやって設定すればいいんだろう？

crossorigin をどうやって設定すればいいんだろう？

VSCode の拡張機能 [ Prettier – Code formatter ]の使い方

Prettier は、html, css, js ファイルをフォーマットします。

## 1. VSCode の拡張機能「Prettier – Code formatter」をインストール

サイドバー [ EXTENSIONS ] の検索窓から、「prettier」を検索し、「Prettier – Code formatter」をインストールします。

※ VSCode に「Prettier – Code formatter」をインストールしただけでは動きません。

## 2. VSCode の Prettier 設定

左下の歯車マークから [ Settings ] 画面を開き、以下の設定を行います。

> Format On Save : 有効

ファイルを保存するときに、ファイルをフォーマットします。

> Default Formatter: Prettier – Code formatter

デフォルトフォーマッターとして、ほかのフォーマッターよりも優先されるようになります。

## 3. 【重要】VSCode のウィンドウ画面をリロード

コマンドパレットを開き、[ Reload Window ] と入力すると、VSCode がリロードされます。

コマンドパレットのショートカット：

> ctrl + shift + p（Windows の場合）

> command + shift + p（Mac の場合）

## 4. Prettier 設定ファイルを作成

prettier を適用したいプロジェクトディレクトリの直下に.prettierrc.json（設定ファイル）をつくります。

.prettierrc.json ファイルに以下の内容を記述して保存します。

“`

{

“singleQuote”: true,

“bracketSpacing”: true,

“jsxBracketSameLine”: false,

“trailingComma”: “es5”,

“semi”: false

}

“`

※ .prettierrc.json ファイル内で javascript ファイルのようなコメントアウトを使うと、エラーが発生します。

## 5. 挙動確認

プロジェクトディレクトリ内に挙動確認用ファイル（test.js）ファイルをつくり、以下の内容を記述します。

“`

‘use strict’;

console.log( “prettier practice” );

“`

ファイルを保存した時、行末尾のセミコロンが削除されていれば設定完了です。

Git で.prettierrc.json ファイルを push しておけば、コードの書き方をある程度統一することができます。

## 参考サイト

[Prettier の導入方法フロントエンド開発で必須のコード整形ツール](https://ics.media/entry/17030/ ‘Prettier の導入方法フロントエンド開発で必須のコード整形ツール’)

[【自動整形】VSCode で Prettier を使う方法【設定必要です】](https://ralacode.com/blog/post/vscode-prettier/ ‘【自動整形】VSCode で Prettier を使う方法【設定必要です】’)

[VSCode でファイル保存時に Prettier を走らせる方法](https://zenn.dev/k_kazukiiiiii/articles/670ebae0005872 ‘VSCodeでファイル保存時にPrettierを走らせる方法’)

[【VSCode】Prettier の使い方＆おすすめ設定を紹介](https://ma-vericks.com/blog/vscode-prettier/ ‘【VSCode】Prettierの使い方＆おすすめ設定を紹介’)

[Prettier – Code formatter 【インストール・設定・使い方・機能しない時の対処方】](https://digitor.jp/textbook/vscode-prettier/ ‘Prettier – Code formatter　　【インストール・設定・使い方・機能しない時の対処方】’)

[Prettierの設定オプションについてまとめてみた](https://zenn.dev/rescuenow/articles/c07dd571dfe10f “Prettierの設定オプションについてまとめてみた”)

改行コードとは？

改行コードの種類の「CR」「LF」「CRLF」の意味と違い

https://atmarkit.itmedia.co.jp/ait/articles/1809/14/news025.html

CR：
キャリッジリターン
MacOS 9以前

LF：
ラインフィード
MacOS9以降

CR+LF：
キャリッジリターン+ラインフィード
Windows

【CSS】PurgeCSS を使って、不要なスタイルを削除する

参考サイト

PurgeCSS のシンプルな使い方

PurgeCSS

構文

purgecss --css style.css --content index.html --output style.purged.css

–css : 元のスタイルシートを指定。

–content : 参照するHTMLファイルを指定。

–output : 不要な記述を削除して書き出したスタイルシートを指定。

【WordPress】【MW WP Form】フォームを流用しつつ、投稿ページ固有の情報を確認画面やメールに表示させる方法

命題

フォームをカスタム投稿の中で流用する。
カスタム投稿の内容に紐づいている情報（例：職種名）を確認画面と送信メールに含ませる。

命題1の解決方法

（MW WP Formの）フォーム編集画面のURL設定のうち「入力画面URL」「確認画面URL」「エラー画面URL」を空欄にする。

命題2の解決方法とその手順

命題2の手順1. ）MW WP Form のフォーム編集ページで「URL引数を有効にする」にチェックを入れて保存する

命題2の手順2. ）MW WP Form のフォーム編集ページで投稿パラメータを埋め込む

MW WP Form の構文 :

{(投稿パラメータ)}

例：投稿のタイトルを表示する場合

{post_title}

命題2の手順3. ）MW WP Form のフォーム編集ページにhiddenフィールドを設置し、hiddenフィールドのvalue値に投稿パラメータを埋め込む

例：投稿タイトルを表示する場合（ name値は、適切なものに変更する）。

[mwform_hidden name="hidden-field" value="{post_title}"]

命題2の手順4. ）MW WP Form のフォーム編集ページに設置したhiddenフィールドをメール文面内に設置する

手順3. ）で設定したhiddenフィールドのname値を「自動返信メール設定」、「管理者宛メール設定」の本文に設置する。

MW WP Form の構文 :

{(hiddenフィールドのname値)}

例：hiddenフィールドの name値が「hidden-field」の場合。

{hidden-field}

参考サイト

【CSS】animation を指定する

.set-animation {
	animation-delay: 0s;
	animation-direction: normal;
	animation-duration: 500ms;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	animation-name: motion;
	animation-timing-function: ease-in-out;
}

@keyframes motion {
	0% {

	}
	50% {
		
	}
	100% {
		
	}
}

【WordPress】カスタム投稿のつくり方

参考サイト

投稿タイプ

register_post_type() | WordPress Developer Resources
https://developer.wordpress.org/reference/functions/register_post_type/

register_post_type 関数

カスタム投稿をつくりたい場合、functions.php に register_post_type 関数を記述します。

ただし、WordPress 側はテーマが切り替わっても変わらずカスタム投稿が使えるよう、プラグインで定義することを推奨しています。

テーマを切り替えた場合にカスタム投稿タイプがなくなってしまわないように、プラグイン（または mu-plugins ディレクトリ内のプラグイン）でカスタム投稿タイプを定義することを強くお勧めします。
https://ja.wordpress.org/support/article/post-types/#%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e6%8a%95%e7%a8%bf%e3%82%bf%e3%82%a4%e3%83%97

register_post_type 関数の使い方（コード）

function add_custom_post_type()
{
  register_post_type(
    'recruit_details',
    array(
      'label' => "カスタム投稿のラベル",
      'public' => true,
      'has_archive' => true,
      'menu_position' => 10,
      'menu_icon' => 'dashicons-edit',
      'supports' => array(
        'title',
        'editor',
        'thumbnail',
        'custom-fields',
      )
    )
  );
}
add_filter('init', 'add_custom_post_type');

【WordPress】All-in-One WP Migration プラグインによるデータ移行の手順

.wpress データによるデータ移行

.wpress ファイルは、All-in-One WP Migrationプラグインからエクスポートされたファイルです。

WordPressにアップロードできるファイルサイズを変更する

/.htaccess ファイルへアップロードファイルのサイズ変更を追記する。

php_value upload_max_filesize 2000M
php_value post_max_size 2000M
php_value memory_limit 128M
php_value max_execution_time 300
php_value max_input_time 300

All-in-One WP Migration プラグインをインストールする。

エクスポートされたデータを、All-in-One WP Migration プラグインからインポートする。

インポートが完了すると、WordPressサイトのデータ移行が完了する。

※ All-in-One WP Migration プラグインのデータインポートによって、以下の情報は変更されないようです。

データベース名
照合順序
データベースユーザー名
データベースユーザーパスワード
テーブル接頭辞

※ All-in-One WP Migration プラグインのデータインポートによって、以下の情報は変更されていました。

デフォルトテーマ
WordPressユーザー
インストール・有効化されているプラグイン
サイトのタイトル
キャッチフレーズ
管理者メールアドレス
ホームページの表示設定
パーマリンク等

上記は変更された情報の一部で、他にも管理画面からアクセスできる複数の情報が変更されるようです。

【Gulp】gulp 事始め

参考サイト

Quick Start | Gulp
https://gulpjs.com/docs/en/getting-started/quick-start

Node.js のバージョンを確認する。（執筆時 v18.12.1）

node -v

npm のバージョンを確認する。（執筆時 8.19.2）

npm -v

npx のバージョンを確認する。（執筆時 8.19.2）

npx -v

gulpをインストールする。

npm install gulp-cli

作業用フォルダをつくり、そこへ移動する。

mkdir practice-01
cd practice-01

作業フォルダに package.json をつくる。

npm init

作業フォルダの devDependencies に gulp をインストールする。

npm install -S gulp

Gulpのバージョンを確認する。（執筆時 CLI version: 2.3.0 Local version: 4.0.2）

※ git bash では、gulp　が Command not found. になったので、wsl に切り替えて実行した。

gulp --version

gulpfile.js をつくる。

touch gulpfile.js

つくった gulpfile.js ファイルに、以下を記述する。

function defaultTask(cb) {
  cb();
}
exports.default = defaultTask

gulpの挙動を確認する。

プロジェクトフォルダで以下のコマンドを実行する。

gulp

何も実行せずに以下のように表示されれば成功。

[11:53:18] Using gulpfile /mnt/c/_dev/2023-01-06_01_gulp/practice-01/gulpfile.js
[11:53:18] Starting 'default'...
[11:53:18] Finished 'default' after 1.16 ms

※ gulp に複数のタスクを含めた場合、以下のコマンドで実行する。

gulp <task> <othertask>

次のステップ

JavaScript and Gulpfiles | Gulp
https://gulpjs.com/docs/en/getting-started/javascript-and-gulpfiles

502 Bad Gateway エラーとは？

502 Bad Gateway エラーは、ウェブサイトのサーバーの通信状態に問題があることを示すメッセージ。一般的に「500」番台のエラーコードは、サーバー側の問題を示す。

502 Bad Gateway エラーの原因として考えられること

一時的なアクセスの集中
サーバのメンテナンス
サーバの異常
ドメイン（ DNS ）・IPアドレスの変更
サイト内のコード・サイト設定のミス
ファイヤーウォール設定のミス

502 Bad Gateway エラーの解決方法

サーバ接続状態やスペックを調べる。
DNSの設定・状況を確認する。
サーバログを調べる。
ファイヤーウォールの設定を調べる。
ウェブサイトのソースコードを調べる。

※ WordPressの場合、functions.php の記述ミスやプラグインの問題、PHPバージョンの不一致で起きることがある。

参考サイト

502 Bad Gatewayとは？エラーの原因と解決方法
https://blog.hubspot.jp/502-bad-gateway

502エラーとは？発生する原因と対処法
https://ferret-one.com/blog/502

【Javascript】Web制作に役立ちそうな Import / Export の使い方

mdn web docs や SAMURAI ENGINEER Blog をいくら読んでもピンと来なかったのですが、Qiita の記事を試してみたらうまく動かせました。

参考サイト

JavaScriptでのimport/export方法 | Qiita
https://qiita.com/koeri3/items/314ac7b9b73fc8c80a2d

import | mdn web docs
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import

前提

記事の中にもありましたが、ES2015（ES6）とNode.js（CommonJS）では書き方が異なります。

ウェブ制作においては、読み込んだスクリプトをモジュールとして扱うので、ES2015（ES6）の書き方が有用そうです。

また、HTMLファイルに埋め込む時は、<script type=”module”></script> を指定しないとモジュールとして使えません。（エラーになります）

あと、インポートされたモジュールは Strictモードで動作します。

【使い方 1】エクスポートしたい関数を export文で指定する

export文を指定して関数を宣言すれば、その関数はエクスポートされる。

複数の関数をエクスポートしても、import文で {} 内でモジュールを指定してインポートすれば、まとめてインポートすることができる。

practice-01.html

<script src="./import-01.js" type="module"></script>

import-01.js

import { add, minus } from './export-01.js';
console.log( add(1, 2) );
console.log( minus(1, 2) );

export-01.js

export const add = (num1, num2) => {
  return num1 + num2;
};

export const minus = (num1, num2) => {
  return num1 - num2;
};

【使い方 2】

practice-02.html

<script src="./import-02.js" type="module"></script>

Webデザインの参考サイト

Webデザインにインスピレーションをくれる31のサイト

何気なく知っているサイトを集めていたら31サイトになりました。

多いですよね。追いきれないです。

【Blender】Blenderでのクリエイティブを高めるロードマップ

昨日の記事（【Blender】3DCGの静止画像をBlenderでつくってみる）に引き続いて、Blenderでのクリエイティブな表現力を高めていく方法を模索したいと思います。

Blenderの初期状態のシーンのレンダリング画像は極めてシンプルで味気ないものでしたが、Blenderの初期状態からステップアップして、よりクリエイティブな表現を実現していく方法としては、以下のようなステップをクリアしていきたいと思います。

※ 便宜的に数字はつけているものの、習得する順番は順不同です。

Blenderでクリエイティブな表現を実現していくための8つのステップ

それらしいカタチのオブジェクトを置きたい。
複数のオブジェクトを組み合わせてスタイリッシュに表現したい。
色や質感をつけて、オブジェクトをよりそれっぽく表現したい。
画角を変えて、より立体的でスタイリッシュに表現したい。
文字も立体的に表現して迫力を出したい。
照明を変えて、より雰囲気を演出したい。
効果をつけて、よりそれらしい雰囲気を演出したい。
動画にして、迫力を増したい。

上記8ステップは少し概念的な言い方になりましたが、8ステップでよりクリエイティブな表現を実現していきます。

【Blender】3DCGの静止画像をBlenderでつくってみる

Blenderを起動

（検証環境：Windows 11 Pro / 検証バージョン：Blender 3.0.1 ）

Blenderは、起動時に既に立方体が配置されています。

この立方体を初期状態のままレンダリングします。

画像のレンダリング

レンダリング手順

（ウィンドウ上部）[レンダー] > [画像をレンダリング]

（画像エディターウィンドウ：ウィンドウ上部）[画像] > [名前をつけて保存]

画像の保存場所（初期状態では、Documentフォルダ内）
ファイルフォーマット（初期状態では、PNG）
ファイル名（初期状態では、untitled.png ）

灰色の空間に灰色の立方体が配置された立体的な静止画像をレンダリングすることができました。

次回以降、この変哲もない静止画像をクリエイティブな表現にするためのチャレンジをしていこうと思います。

【Sass】input要素でマウスホバー状態とチェック状態の両方で背景色と文字色を変更したい

input要素でマウスホバー状態とチェック状態の両方で背景色と文字色を変更したい。

結論（コード）

input {
  color: #333;
  background-color: white;

  :where( &:hover, &:checked ) {
    background-color: #333;
    color: white;
  }
}

【HTML】fieldset要素はdisplay:flexもdisplay:tableも効かない難あり要素

fieldset要素にはdisplay: flex; が効かない。

fieldset要素には、display: table; が効かない。

fieldset要素に、display: contents; は効く。しかし、多くのブラウザでサポートされていない。

fieldset要素に、display: grid; は効く。

参考サイト

CSSが効かない！？fieldset要素でも簡単にテーブルレイアウトを実現できるdisplay: contents; | MITUSE-LINKS
https://www.mitsue.co.jp/knowledge/blog/frontend/201806/28_0909.html

【Javascript】型を確認する

参考サイト

JavaScriptで型を判定する方法を現役エンジニアが解説【初心者向け】
https://magazine.techacademy.jp/magazine/35968

typeof | mdn web docs
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/typeof

結論（コード）

'use strict';
{
  typeof(型を調べる値);
}

【PHP】HTMLフォームから受け取ったチェックボックスの複数選択を受け取る方法

参考サイト

フォームの構築方法 | mdn web docs
https://developer.mozilla.org/ja/docs/Learn/Forms/How_to_structure_a_web_form

【PHP・HTML】フォームのチェックボックスの値を取得する方法【配列】
https://deco8.net/php-html-form-checkbox-array/

結論（コード）

送信元のHTMLフォーム

  <form action="/result-page" method="post">
    <fieldset>
      <legend>好きな動物</legend>
      <p>
        <input type="checkbox" name="favoriteAnimal[]" id="cat" value="猫">
        <label for="cat">猫</label>
      </p>
      <p>
        <input type="checkbox" name="favoriteAnimal[]" id="dog" value="犬">
        <label for="dog">犬</label>
      </p>
      <p>
        <input type="checkbox" name="favoriteAnimal[]" id="rabbit" value="兎">
        <label for="rabbit">兎</label>
      </p>
    </fieldset>
    <button type="submit">送信する</button>
  </form>

受け取り先PHPファイル

  <?php
    $favorite_animal = $_POST['favoriteAnimal'];
  ?>
  <p>
  <?php
    if($favorite_animal) {
      foreach($favorite_animal as $favorite_animal_item) {
        echo '<span>' . htmlspecialchars($favorite_animal_item) . '</span>';
      }
    }
  ?>
  </p>

勘所

HTMLフォーム側では、input要素のtype属性でcheckboxを使うこと。

HTMLフォーム側のcheckboxでは、name属性に配列（favariteAnimal[]）を渡すこと。

PHPファイル側では、$_POST[‘favoriteAnimal’] でPOSTリクエストを取得するんだけど、配列として扱うこと。

PHPファイル側では、POSTリクエストが空っぽだったことを考慮すること。

配列から取得したデータは必ずサニタイズして扱うこと。

mdn web docs に学ぶ、HTMLフォームのセキュリティ

参考サイト

フォームデータの送信 | mdn web docs
https://developer.mozilla.org/ja/docs/Learn/Forms/Sending_and_retrieving_form_data

基本姿勢は自分を含むユーザーを信用しなこと

HTMLフォームは、サーバにとって最もよく使われる攻撃の起点。
HTMLフォームからの攻撃を防ぐには、HTMLフォームから送信されたデータをサーバが適切に扱う必要がある。
HTMLフォームから送信されたデータを信用しないという基本姿勢を持つ。

HTMLフォームをセキュアに利用するための具体的なアクション

文字を常にサニタイズする。
必要な量までしか、入力データを受けつけない。
ファイルが送信された場合、ファイルは別のサーバに保管して別ドメインからのみアクセスを許可する。
適格な第三者からのセキュリティレビューを受ける。

【httpプロトコル】GETとPOSTの違い

GETリクエストとは？

・GETは、URLパラメータをつけてリクエストを送る方法。
・GETで送るURLパラメータには、文字数制限がある。
・GETで送るURLパラメータの文字列は、すべてユーザーに見えてしまっている。
・GETは、画面表示に必要なパラメータを送るときに使う。
・GETは、ページの表示情報をGETするためのリクエスト。

POSTリクエストとは？

・POSTは、送信ボタンを押してリクエストを送る方法。
・POSTは、URLパラメータをつけない。
・POSTは、機密情報（個人情報やパスワードなど）を送ることができる。
・POSTは、膨大なデータを送信することができる。
・POSTは、ユーザーが画面に入力して送信するときに使う。
・POSTは、情報をサーバにPOSTすつるためのリクエスト。

参考サイト

GETとPOSTの違いについて
https://qiita.com/kanataxa/items/522efb74421255f0e0a1

GET／POSTの違い＆実際の使い分け方
https://blog.senseshare.jp/get-post-method.html

【Javascript】iPhone の Safari / Chrome でブラウザバック（「戻る」もしくは「進む」）が動かない問題を解決した

ブラウザの「戻る」（もしくは「進む」）ボタンを押したとき、ページ遷移前にモーダルを起動する処理を行っていたんですが、iPhone の Safari / Chrome では、モーダルがうまく動かないことがありました。どうやら原因は2つあったようです。

原因1. ‘use strict’; を指定していなかった。

ウェブ上で拾える解決策をいくら試してもうまくいかなかったのですが「そういえば ‘use strict’; してなかった。」と思い出して追記したところ、あらゆる挙動が劇的に変化して戸惑いました。

MDNでも割とハッキリ言及されていたので「おまじない」という認識を改めたいと思います。

厳格モードは単なるサブセットではなく、通常のコードとは意図的に異なる意味を持っています。
厳格モード | mdn web docs

原因2. ページ読み込みのを ‘load’ で指定していた。

Safari では、Back-forward cache（bfcache）と呼ばれる独自のキャッシュの仕組みがあるため、ブラウザバックしてもブラウザの持っているキャッシュを考慮していなかったために、思ったような挙動をしてくれなかったようです。

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    // bfcache発動時の処理
  }
});

‘pageshow’ をトリガーにすると、キャッシュの有無に関わらず、関数を呼び出すことができ、キャッシュの有無自体は event.persisted によって判断することができるようになります。

参考サイト：

厳格モード | mdn web docs
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Strict_mode

【JavaScript】Safariでブラウザバックすると正しく動作しない【bfcache】の対策 | devsakaso
https://devsakaso.com/javascript-solution-of-safari-bfcach-problem/

SafariでブラウザバックするとJSなどが解除されていない問題【bfcache】 | でざなり
https://dezanari.com/ios-safari-bfcache/

ブラウザバックでのページ表示時処理 | Qiita
https://qiita.com/Buzzword111/items/03974c04930b8f660075

bfcache と popstateイベント～地獄のブラウザバック友達～ | CORE TECH テクログ
https://core-tech.jp/blog/tech_log/1915/

【WordPress】functions.php の中から GTMタグを設置する。

参考サイト

WordPress アクションフック(wp_head, wp_body_open)を使ってGoogle Tag Manager(GTM)タグを設置する方法
https://analyzegear.co.jp/blog/720

head要素にタグを埋め込む

functions.php の中に以下のコードを記述します。

function add_gtm_head_tag() {
  // head要素に埋め込むタグ
}
add_action('wp_head', 'add_gtm_head_tag');

必要に応じて add_gtm_head_tag() の中で get_template_part() したり、echo したり、if(is_page()) したりすることで、必要なページにGTMタグを埋め込むことができます。

body要素にタグを埋め込む

【1】functions.php の中に以下のコードを記述します。

function add_gtm_body_tag() {
  // body要素に埋め込むタグ
}
add_action('wp_body_open', 'add_gtm_body_tag');

【2】body要素を以下のように記述しておき、フックのトリガーとして設定します。

<body <?php wp_body_open(); ?>

ここでbody要素に > の記述がないと思った方もいらっしゃると思いますが、 > を記述すると、余計な > が埋め込まれるため、記述しなくても大丈夫なようです。

head要素にタグを埋め込んだ時同様、get_template_part() 、echo 、if(is_page()) などを使って、必要なページにGTMタグを埋め込んでください。

また、body_class() を併記することもできます。

【Javascript】特定の文字列を探してみました

参考サイト

【JavaScript】～を含むかのチェック | Qiita
https://qiita.com/kazu56/items/557740f398e82fc881df

【JQuery/JavaScript】文字が含まれているかを判別 | デイレコ DairyRecord-blog
https://dailyrecords.blog/archives/7427

結論1（コード）.mathメソッド

      // 検索を適用する文字列の変数
      const str = "shirabemono";

      // .match() を使った文字列(mojiretsu)の検索
      if(str.match(/mojiretsu/)) {
        console.log("対象の文字列を見つけました！");
        console.log("文字列が見つかれば、配列を返す。");
        console.log( str.match(/mojiretsu/) );
      } else {
        console.log("対象の文字列が見つかりません。");
        console.log("文字列が含まれなければ、nullを返す。");
        console.log( str.match(/mojiretsu/) );
      }

結論2（コード）.indexOfメソッド

      // 検索を適用する文字列の変数
      const str = "shirabemono";

      if(str.indexOf('mojiretsu') != -1) {
        console.log("文字列が見つかれば、文字列が見つかった場所（0以上）を返す");
        console.log(str.indexOf('mojiretsu'));
      } else {
        console.log("文字列が含まれなければ、-1を返す");
        console.log(str.indexOf('mojiretsu'));
      }

【Javascript】イベントのバブリングとキャプチャリングがよくわかる。

参考サイト

【JavaScript入門】イベントのバブリングとキャプチャリング
https://www.zunouissiki.com/js-bubbling/#:~:text=%2Cfalse)%3B%20%7D-,%E5%AD%90%E8%A6%81%E7%B4%A0%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E6%99%82%E3%81%AB%E8%A6%AA%E8%A6%81%E7%B4%A0%E3%81%AE%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%8B%E3%82%89%E9%A0%86%E3%81%AB,%E3%82%92%20%E3%83%90%E3%83%96%E3%83%AA%E3%83%B3%E3%82%B0%20%E3%81%A8%E3%81%84%E3%81%84%E3%81%BE%E3%81%99%E3%80%82

【Javascript】URLから取得できる情報の一覧

'use strict';

{
  window.addEventListener('load', function(){
    console.log('hash :  ' + this.location.hash);
    console.log('host :  ' + this.location.host);
    console.log('hostname :  ' + this.location.hostname);
    console.log('href :  ' + this.location.href);
    console.log('origin :  ' + this.location.origin);
    console.log('pathname :  ' + this.location.pathname);
    console.log('port :  ' + this.location.port);
    console.log('protocol :  ' + this.location.protocol);
    console.log('search :  ' + this.location.search);
    console.log('searchParams :  ' + this.location.searchParams);
    console.log('password :  ' + this.location.password);
    console.log('username :  ' + this.location.username);
  });
}

参考サイト

URLからドメイン、パス、プロトコル、GETパラメータなど各種情報を取得する
https://gray-code.com/javascript/get-information-from-url/

Location | mdn web docs
https://developer.mozilla.org/ja/docs/Web/API/Location

【Javascript】ページの描画領域からマウスカーソルが外れたことを検出する。

結論（コード）

'use strict';
{
  // マウスカーソルがページの描画領域の外に出たことを検出する。
  window.addEventListener('load', function(){
    this.document.addEventListener('mouseleave', e => {
      this.alert("マウスカーソルがページの描画領域から外れました。");
    });
  });
}

参考サイト：

Element: mouseleave イベント | mdn web docs
https://developer.mozilla.org/ja/docs/Web/API/Element/mouseleave_event

マウスカーソルのコントロール領域外への移動を検出
http://mrxray.on.coocan.jp/Delphi/Others/MouseLeave.htm

【Javascript】ブラウザのウィンドウ幅と高さ、ページ描画領域の幅と高さを取得・表示させる。

結論（コード）

'use strict';
{
  // 表示画面の幅と高さを取得する。
  let iW = window.innerWidth;
  let iH = window.innerHeight;
  let oW = window.outerWidth;
  let oH = window.outerHeight;

  // それぞれ幅と高さを表示させる要素を取得する。
  const iwElem = document.querySelector('#iw');
  const ihElem = document.querySelector('#ih');
  const owElem = document.querySelector('#ow');
  const ohElem = document.querySelector('#oh');

  // それぞれ幅と高さをテキスト化する。
  const iwContent = document.createTextNode(iW);
  const ihContent = document.createTextNode(iH);
  const owContent = document.createTextNode(oW);
  const ohContent = document.createTextNode(oH);

  // テキストを上記要素に表示させる。
  iwElem.appendChild( iwContent );
  ihElem.appendChild( ihContent );
  owElem.appendChild( owContent );
  ohElem.appendChild( ohContent );
}

window.innerWidth と window.innerHeight で、ページ描画領域の幅と高さをそれぞれ取得する。

window.outerWidth と window.outerHeight で、ブラウザの幅と高さをそれぞれ取得する。

参考サイト：

マウスカーソルの絶対座標を取得
https://shanabrian.com/web/javascript/mouse-absolute-position.php

[JavaScript] マウスポインタの座標を取得する
https://javascript.programmer-reference.com/js-mousepointer-coordinate/

マウスカーソルの位置座標を取得する
https://gray-code.com/javascript/get-mouse-cursor-position-coordinate/

【Sass】Partial機能を使って、Sassファイルを分割して管理・運用する。

Sass Basics | Sass
https://sass-lang.com/guide

Sassは、スタイルシートを分割して管理・保守していいくことができる。

1.分割されたスタイルシートを用意する

分割されたスタイルシートは、ファイル名の冒頭にアンダーバー（__）を2つつけて、分割スタイルシートであることを表す。

__sample.scss

2.分割されたスタイルシートを呼び出す

分割スタイルシートを使う場合は、呼び出し側から @use を使って呼び出す。

上の __sample.scss を呼び出す場合、アンダーバー（__）と拡張子（.scss）の間にあるファイル名を文字列として指定して呼び出す。

@use 'sample';

3.sassコマンドを実行する

2. の呼び出し元のスタイルシートに対してsassコマンドを実行すると、生成されたcssファイルに、__sample.scss の内容が含まれる。

自分の制作活動をオープンするといい。と言われた。

とある編集さんに「アラフォーの専門職として、フロントエンドエンジニアでも、デザイナーでもなく、ウェブにおける表現を仕事にしていきたいのだが、どんなキャリアを選択していくべきだろうか？」と相談したところ、簡潔だけど含蓄のある回答が返ってきた。

「表現や創作活動をやっている人に明確なキャリアパスいないと思う。スゴいものや面白そうなものに手を出してその成果を発信していくことで、仕事につながることはあると思う。自分の制作活動をオープンにすると良いでしょう。」

自分の手の遅さ、成果物の稚拙さを噛みしめながら、自分の制作活動をオープンにしていこうと思う。

【CSS】Webフォントの表示がカクつく時の解消法

Webフォントを使っているテキストを表示させた時、表示のカクつきを低減させたい。

font-display 属性を指定する。

font-display: block;

参考サイト：

font-display settings を使用した Web フォントのパフォーマンスのカスタマイズ
https://helpx.adobe.com/jp/fonts/using/font-display-settings.html

【CSS】スタイルがリセットされたページで文字の折り返しを設定する方法

結論：要素に word-wrap: break を指定する

参考サイト：
CSSを使って改行する方法とは？改行ルールの設定方法も解説！

word-wrap: break-word;

【WordPress】テーマの作り方

WordPressインストールディレクトリの以下のディレクトリにテーマを追加する。

wp-content/themes/

ここで、以下のディレクトリとファイルを用意する。

new-theme ← テーマ名と同じ名前のフォルダ。今回は new-theme
├ index.php ← 空ファイルでも可能。
└ style.css ← 空ファイルでも可能。

あとは必要に応じてカスタマイズしていきます。

WordPress テンプレート階層に応じてファイルをつくっていきます。

WSLでRust をインストールしてみた。

参考サイト：

Rustプログラミング言語
https://www.rust-lang.org/ja

はじめに | Rustプログラミング言語
https://www.rust-lang.org/ja/learn/get-started

今回はWSLを使ってRustをインストールしてみます。

Rustのインストール手順

【手順1.】WSLコマンドラインで作業フォルダをつくり、作業フォルダへ移動する。

mkdir rust-practice
cd rust-practice

【手順2.】以下のコマンド、Rustをインストールする。

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

【手順3.】Rustがインストールされているか確認する。

rustc --version

成功すると、以下のように表示される。（2022年11月3日現在）

rustc 1.64.0

【手順4.】Rustを最新バージョンにアップデートする。

※ Rustのバージョンアップのサイクルは早めなので、都度必ず実行する。

rustup update

上記手順で起こりうる問題

【手順2.】で以下のようなエラーが発生する。

curl: (6) Could not resolve host: sh.rustup.rs

WSLの名前解決関連のエラーなので、以下のサイトから解決を試みる。

WSL2 で dns の名前解決ができなくなってネット接続できなくなった場合の対処方法 https://qiita.com/kkato233/items/1fc71bde5a6d94f1b982

かいつまんで説明すると、/etc/resolv.conf を正しい設定で書き換えることになります。

VSCodeで作業をしていると、【手順3. 】で以下のようなエラーが発生する。

command not found.

僕はVSCode のターミナルでWSLを動かしていたのですが、VSCodeでは拡張機能「rust-analyzer」をインストール・有効化しないと、正しくコマンドが動かないようです。

ちなみに、WSLのターミナルでは【手順3. 】は正しく動いていました。

同日2回目のアクセス、Cookieで実装するか？Web Storage API で実装するか？Indexed DB API で実装するか？

同日2回目以降のアクセスを検知するとき、参考サイトではCookieを使っていたので、Cookieの使用が適切なのか自信がなかったので、調べてみました。

参考サイト：

ローディング -同日2回目のアクセスでローディング画面非表示-
https://coco-factory.jp/ugokuweb/move01/4-1-7/

結論：同日2回目のアクセスを検知するのであれば、localStorage （Web Storage API）を使うのが良さそう。

以下、調査履歴です。

Cookie（クッキー）について

HTTP Cookie の使用 | MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/HTTP/Cookies

クッキーは、2つのリクエストが同じブラウザから送信されたものであるかを調べるためによく使われる。

クッキーは、（1）セッション管理、（2）パーソナライズ、（3）トラッキングの用途で使われる。

クッキーは、サーバがブラウザに送信し、ブラウザに保存され、その後リクエストとともに同じサーバへ返送されるような仕組み。

クッキーは、ステートレスなHTTPプロトコル。
※ ステートレスとは、同じ接続であっても、リクエスト同士が独立していること。

クッキーは、すべてのリクエストで送信されるため、モバイルでのデータ通信性能を悪化させることがある。 >> Web Storage API や IndexedDB を使うことが推奨されている。

Web Storage API について

Web Storage API | MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API

Web Storage API は、クッキーよりも直感的な方法でキーと値のペアをブラウザが保存する仕組み。

ブラウザでページを表示している時に使える保存領域を管理する。

Web Storage APIは2種類の仕組みがある。→ sessionStorage と localStorage

Web Storage API は、URL（オリジン）毎にそれぞれsessionStorage と localStorageは別のStorageオブジェクトを使い、制御する。
※ オリジンとは、URLのプロトコル・ドメイン・ポートによって定義されている。

Web Storage APIの仕組み（1） – sessionStorage

ブラウザやタブが開かれている間のみ保存される。
データがサーバへ転送されることはない。
最大5MBまで保存できる。

Web Storage APIの仕組み（2） – localStorage

ブラウザやタブを閉じたり再び開いても保存が続く。
クッキーと違い、有効期限なしでデータを保存できる。
jsによる操作や、ブラウザキャッシュ/ローカルに保存したデータのクリアによってデータがクリアされる。
最大容量がクッキーやsessionStorageよりも大きい。
localStorageの操作は、Window.localStorageプロパティを通して使う。（厳密には、Windowオブジェクトに実装されているWindowLocalStorageオブジェクトのLocalStorage。）
localStorageはStorageオブジェクトのインスタンスを生成して、データの保存・取り出し・削除ができる。
localStorage は利用できないシーンも数多くあるため、.setItem() するときには必ず例外をキャッチするような対応を行う。

IndexedDB API について

IndexedDB API | MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API

IndexedDB APIは、ファイルやblobを含む大量の構造化データをブラウザ側で保存する。
IndexedDB APIは、APIを使って高度なデータ検索ができる。
IndexedDB APIは、構造化された、非常に多くのデータを扱うことができる。

再度結論：同日2回目のアクセスを検知するのであれば、localStorage （Web Storage API）を使うのが良さそう。

クッキーはすべてのリクエストで送信されるため、モバイルでの通信性能を悪くしそう。 → Web Storage API もしくは、Indexed DB API の利用を推奨。 → 大量の構造化データを扱う Indexed DB API よりも、Web Storage API を使う方が良さそう。 → sessionStorage はページを閉じると消えちゃう。 → localStorage を使うのが良さそう。

構造化データとは？

構造化データは、Google検索にとって、ページの意図を伝える明示的な手がかりです。

構造化データは、ページに関する情報を提供し、そのコンテンツを分類するための標準化されたデータ形式です。

構造化データは、Google検索での検索結果の特別な機能や拡張機能を有効にするためにも使われます。

構造化データは、ページ内でJSON-LD形式でマークアップすることが推奨されています。

構造化データには、ユーザーに表示される情報の記述します。（逆を返せば、ユーザーに表示されるべきじゃない情報は記述しません。）

リッチリザルトテストというツールで、構造化データを検証し、Google検索の機能をプレビューすることができます。

構造化データには、必須プロパティ、推奨プロパティ、任意プロパティという3種類のプロパティがあります。

Google検索用の構造化データは、Google検索セントラルのドキュメントを使用すべきです。（よく使われている schema.org は使わないでください。と言いつつ、チュートリアルのドキュメントでは schema.org の記述をよく見ます。）

構造化データは、リッチリザルトテストで開発し、デプロイ後はリッチリザルトのステータスレポートでページの正常性をメンテナンスするという運用を行ってください。

構造化データに必須プロパティを含めなければ、Google検索の拡張表示機能は使えません。

構造化データの推奨プロパティの機能の定義が多いほど、検索結果に拡張表示機能が適用されて、情報が表示される確立が高くなります。この時、推奨プロパティが少なくても完全で正確な情報を提供する方が重要です。

構造化データを埋め込む手順

head要素内にJSON-LD形式のスクリプトを読み込む。

schema.org構造化データを使うことを定義する。

説明している内容を定義する。

※ プロパティの順序は重要ではない。
※ プロパティと値のセットはカンマで区切られている。
※ 最後のプロパティセットにカンマをつけるとエラーになる。

参考サイト

構造化データの仕組みについて
https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data?hl=ja

リッチリザルトテスト
https://search.google.com/test/rich-results?hl=ja

Add structured data to your web pages
https://codelabs.developers.google.com/codelabs/structured-data/index.html?hl=ja#0

【WordPress】is_paged() とは？

表示しているページが複数ページで構成されているページの時、そのページ番号が1よりも大きいかどうかを調べます。→ コンテンツの冒頭ページか否かを調べることができます。

2ページ以降の場合は true , 1ページ目であれば false を返します。

記述例

<?php is_paged(); ?>

参考サイト

関数リファレンス/is paged | WordPress Codex 日本語版
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/is_paged

OGPとは？

OGPは、Open Graph Protocol の略称。

OGPは、SNS上でWebコンテンツの内容を伝えるための仕組みです。OGPは、他者がWebコンテンツを拡散する上では、必ずおさえておきたい設定です。

OGPを設定しておくと、SNSでシェアされた時に指定した画像・タイトル・説明文を表示させることができます。（一度SNSでシェアしたページは、SNS側でOGP設定がキャッシュされるため、SNSのキャッシュをクリアする必要があります。）

OGPで設定する画像の推奨設定

最も目立たせたいモノが上下左右の中央に配置されている。
解像度：1200×630
png画像

基本的な記述

<meta property="og:{プロパティ}" content="{設定内容}" />

最低限設定しておくべき6つのOGP設定

<meta property="og:title" content="ページのタイトル見出し" />
<meta property="og:description" content="ページの紹介文" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="表示したいイメージ画像のURL" />
<meta property="og:type" content="ページの種類を記述する。 website / article / blog といった種類がある。" />
<meta property="og:site name" content="ページが所属しているWebサイトの名前" />

Facebook用OGP設定

<meta property="fb:app_id" content="App-ID（15文字の半角数字）" />

※ App-ID の取得は手間がかかるみたい。

Twitter用OGP設定

<meta name="twitter:card" content="Twitterカードの種類" />
<meta name="twitter:site" content="@[Twitter ID]" />
<meta name="twitter:player" content="@[Twitter ID]" />

twitter:card は、twitterでOGPを表示させるときの表示タイプ。

参考サイト

The Open Graph protocol
https://ogp.me/

OGPデバッガー・シミュレーター
https://rakko.tools/tools/9/

OGPとは？設定方法と画像サイズ、表示例＆テクニック集（Facebook、Twitter、LINEごと）
https://mieru-ca.com/blog/ogp/

Facebook・TwitterのOGP設定方法まとめ
https://ferret-plus.com/610

【WordPress】get_option(); とは？

参考サイト：
関数リファレンス/get option | WordPress Codex 日本語版
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_option

get_option() は、optionsデータテーブルから名前を指定してオプションの値を取得する安全な方法。

<?php get_option( $option, $default ); ?>

$option に指定できる値は、取得するオプション名。小文字のみ使える。

$option に値を指定して取得できる情報には、サイトのタイトル、ブログ管理者のメールアドレス、日付のフォーマット、集のはじまり、1ページに表示する最大投稿数等がある。（もっとある。）

$default に指定できる値は、データベースに該当するオプションがなかった時のデフォルト値。

2022年10月4週目（10/23 – 10/29）のトピックス

10/25（火）Next.js Conf 2022 開催 / Next.js 13 を発表。
https://nextjs.org/conf

10/26（水）WordPressとNext.jsでWebサイトをつくる会（KIW）を開催。 / 甲斐の背景の説明 + おかもと先生のハンズオンを開催。
https://connpass.com/event/262966/

イーロン・マスク Twitter社の買収を完了。（約6兆4500億円規模） / パラグ・アグラワルCEOとネッド・シーガルCFOを解任。
https://jp.wsj.com/articles/elon-musk-buys-twitter-fires-ceo-and-cfo-11666919033

DNSプリフェッチとは？

DNSプリフェッチは、サイトの中で記述されている外部ドメインを事前に強制的に名前解決して、読み込み時間の短縮を図ります。

参考サイト

DNSプリフェッチでウェブページの読み込み速度をスピードアップ
https://www.suzukikenichi.com/blog/dns-prefetching/

カノニカル（canonical）とは？

カノニカル（canonical）は、内容が同じもしくはよく似たページがあるとき、検索エンジンに代表となるURLを渡す。

参考サイト

canonical（カノニカル）とは？重複URLの正規化などのSEO効果について
https://www.seohacks.net/blog/989/

【GSAP】Tween と Timeline の引数はオブジェクトを与えることができる。オブジェクトを使いやすくするためにスプレッド構文を使うと便利。

参考サイト

JSのスプレッド構文を理解する
https://qiita.com/akisx/items/682a4283c13fe336c547

【GSAP】ScrollSmootherが実装されているページで高さが変わってしまうときの処理

■ ScrollSmootherが実装されているページで、アコーディオンを開いたり、「もっと見る」ボタンを押して表示情報を追加して、ページの高さが変わってしまった時にページ下部の要素やフッターが表示領域からはみ出してしまう問題。

参考サイト

GSAPの慣性スクロールライブラリ「ScrollSmoother」の使い方を紹介
https://liginc.co.jp/595306

アコーディオンのクリック時、もしくは「もっと見る」ボタンのクリック時に、clickイベントの中でScrollSmoother.create()し、ScrollSmootherを再生成する。

GSAPの慣性スクロールを実装する

参考サイト

ScrollSmoother
https://greensock.com/docs/v3/Plugins/ScrollSmoother

GSAPの慣性スクロールライブラリ「ScrollSmoother」の使い方を紹介
https://liginc.co.jp/595306

ScrollSmoother | GSAP
https://greensock.com/docs/v3/Plugins/ScrollSmoother

ScrollSmoother.min.js を読み込む。
起動するjs内でScrollSmootherの利用を登録する。
gsap.registerPlugin(ScrollSmoother);
起動したjs内でScrollSmootherを生成する。
let smoother = ScrollSmoother.create({
smooth: 1,
effects: true,
smoothTouch: 0.1,
});
html内に#smooth-wrapperと#smooth-contentを用意し、ページ内のコンテンツをその要素の中に収める。

// ここに任意のコンテンツ

出来上がり

※ position:fixed な要素（ヘッダーやトップへ戻る等）は、#smooth-wrapper の外に出しておく。

※ ScrollSmootherを使う時、高さが変わるような処理や、ページ内リンクのスクロールは、GSAP製スクロールにしておいた方がいい。

※ GSAP ScrollSmoother は、垂直スクロール専用につくられている。

※ GSAP ScrollSmoother は、ページ全体に適用するため、個別の要素に対しては適用できない。

ScrollSmoother は、常に1つしか存在できない。新しいインスタンスが生成されると、既存のインスタンスが削除される。既存インスタンスへアクセスするには、.get()メソッドを使用する。

2022年10月3週目（10/16 – 10/22）のトピックス

LOVOT[らぼっと]
https://lovot.life/

■ Jamstack とは？

■ WordPress REST API とは？

■ カノニカルをWordPressで設定する方法

参考サイト：
WordPressのSEOを強化する！プロが教える8つの設定
https://www.cpi.ad.jp/column/column04/#:~:text=Canonical%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%81%AF%E3%80%81%E3%80%8C%E4%B8%80%E8%88%AC,%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82

SEO:自己参照canonical設定時の注意事項：Googleに優先登録したいURLを記述すること
https://ascii.jp/elem/000/000/710/710622/

カノニカル設定は、head内に記述するmeta要素で、このページよりもインデックスすべきURLが別にあるよ。という旨を検索エンジンに伝える。

canonical の記載例）

ウェブでは、自分が公開している形式以外のURLで外部からリンクを受けたり、Twitter等のSNSで共有・拡散されることが少なくない。

Googleは、アルゴリズムで自動的にカノニカルを判断していると言っているが、現実そうはなっていない。

カノニカル設定の「自己参照」とは？

美味しいお酒

C社 A.K.さんから教えてもらった美味しいお酒「風門」（神楽酒造）
風門
https://www.dareyami.jp/brandlist/kagura/fuon/6287/

神楽酒造株式会社銘柄一覧
https://www.dareyami.jp/brand/kagura/

自治体A Mさんに教えてもらった美味しいお酒「野うさぎの走り」（株式会社黒木本店）
野うさぎの走り
https://www.dareyami.jp/brandlist/kuroki/nousaginohasiri/2998/

GSAPライブラリ使用の注意点

gsapオブジェクトは、Tweens表現と Timelines表現をつくるライブラリ。

Tween でアニメーションをつくる方法

Tween は、動きをつける要素、動かす期間、動きをつける要素のプロパティを設定してアニメーションをつくる。

gsap.to()
gsap.from()
gsap.fromTo()

用例）

// 要素を1秒間に27度回転させ、x方向に100ピクセル移動させる。
gsap.to("要素", {rotation: 27, x: 100, duration: 1});

Timeline でアニメーションをつくる方法

Timeline は、Tweenのコンテナ（Tweenを入れる高機能な箱）。

Timelineは、pause() / play() / progress() / reverse() / timeScale() メソッドを使って、箱に入れられたアニメーション全体を簡単に制御する。

用例）

var tl = gsap.timeline();
tl.to("要素A", {duration: 2, x: 100, opacity: 0.5})
.to("要素B", {duration: 2, x: 100, opacity: 0.5})
.to("要素C", {duration: 2, x: 100, opacity: 0.5});

Tween と Timeline でよく使われるメソッドとプロパティ

pause()
play()
progress()
restart()
resume()
reverse()
seek()
time()
duration()
timeScale()
kill()

※ GSAPでは疑似要素にアニメーションをつけることができない。GSAP3で非推奨になった。

【Javascript】ウィンドウの大きさが変わった時・スクロールされた時にそれぞれウィンドウの幅・高さ・スクロール量を検知する方法

参考サイト

脱jQuery！ページの最下部までスクロールしたかを判定するjavaScript
https://tech.arms-soft.co.jp/entry/2021/04/28/090000

スクロールした量を取得する
https://gray-code.com/javascript/get-scroll-amount/#:~:text=%E3%82%92%E6%93%8D%E4%BD%9C%E3%81%99%E3%82%8B-,%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E9%87%8F%E3%82%92%E5%8F%96%E5%BE%97,%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82

Window | MDN
https://developer.mozilla.org/ja/docs/Web/API/Window

'use strict';
{
    // 【検証】起動時の処理
    window.addEventListener('load', () => {
        // 垂直スクロールバーを含むウィンドウ内部の幅
        let width = window.innerWidth;

        // 水平スクロールバーを含むウィンドウ内部の高さ
        let height = window.innerHeight;

        // 垂直のスクロール量
        let scrollY = window.scrollY;

        // 水平のスクロール量
        let scrollX = window.scrollX;

        console.log('width : ' + width + ', height : ' + height + ', Scroll Y : ' + scrollY + ', Scroll X : ' + scrollX );
    });

    // 【検証】ウィンドウサイズが変わった時の処理
    window.addEventListener('resize', () => {
        // 垂直スクロールバーを含むウィンドウ内部の幅
        let width = window.innerWidth;

        // 水平スクロールバーを含むウィンドウ内部の高さ
        let height = window.innerHeight;

        // 垂直のスクロール量
        let scrollY = window.scrollY;

        // 水平のスクロール量
        let scrollX = window.scrollX;

        console.log('width : ' + width + ', height : ' + height + ', Scroll Y : ' + scrollY + ', Scroll X : ' + scrollX );
    });

    // 【検証】スクロールされた時の処理
    window.addEventListener('scroll', () => {
        // 垂直スクロールバーを含むウィンドウ内部の幅
        let width = window.innerWidth;

        // 水平スクロールバーを含むウィンドウ内部の高さ
        let height = window.innerHeight;

        // 垂直のスクロール量
        let scrollY = window.scrollY;

        // 水平のスクロール量
        let scrollX = window.scrollX;

        console.log('width : ' + width + ', height : ' + height + ', Scroll Y : ' + scrollY + ', Scroll X : ' + scrollX );
    });
}

GSAPアニメーションをレスポンシブ対応させる

参考サイト

gsap.matchMedia()
https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

GSAP(基本機能)
https://qiita.com/takeshisakuma/items/97a7f702ec3c4f656525

GSAPを使って複雑なオープニングアニメーションを作ってみよう
https://b-risk.jp/blog/2022/05/gsap/

GSAPのScrollTrigger.jsを使ったスクロールアニメーションを実装する方法
https://yumegori.com/gsap-scrolltrigger#chapter-17

GSAP ブレイクポイント毎の挙動の切り替え

matchMedia() を使う。

// ブレイクポイント毎の挙動の切り替え
ScrollTrigger.matchMedia({
    // スマホ版での表示
    "(max-width: 767px)": function() {

        // スマホ版での処理内容
    },
    // PC版での表示
    "(min-width: 768px)": function() {
        // PC版での処理内容
    },
});

GSAP 有料会員機能を使ってみた。

GSAP 会員の種類

	年額費用（2022年10月17日現在）
無料会員	0 円
Simply Green	14,370 円
Shockingly Green	21,627 円
Business Green	28,885 円

GSAP有料会員の料金表

無料会員として使える機能も充実してますが、リッチなパララックス表現を使いたいなら Shockingly Green 会員（21,627 円）をオススメします。

ゲームなど不特定多数のユーザーに提供するサービス等では Business Green 会員になる必要がありそうです。

有料会員として使って良かった機能

	実現できた表現
ScrollTrigger / ScrollSmoother	パララックス表現を含むスクロールアニメーション
SplitText	文字を分割してアニメーションさせる

GSAP 有料会員として使って良かった機能

その他、有料会員として試してみたい機能

Draw SVG プラグイン
Physics2D + PhysicsProos プラグイン
ScrambleText プラグイン
CustomBounce + CustomWiggle 機能
MorphSVG（SVGのモーフィング変形）プラグイン
Inertia（ブラウザで直接要素のドラッグアンドドロップさせる）プラグイン
MotionPathHelper（ブラウザで直接モーションパスを編集する）機能
GSDevTools 機能

参考サイト

What is Club GreenSock ?
https://greensock.com/club/

GSAPをプロジェクトに導入する方法

GSAPをプロジェクトに埋め込むときの選択肢

npm でパッケージとしてインストールして埋め込む。
download してスクリプトを埋め込む。
cdn で配信されているスクリプトを埋め込む。
（github からクローンしてくる。）
（CodePen から利用する。）

※ 1. npm でパッケージとしてインストールして埋め込む方法は、download / cdn では解決できない、ライブラリ同士の依存関係の問題を解決することができる。

※ 4. github からクローンしてくる。5. CodePenから利用する。については、プロジェクトに対して埋め込む方法ではなさそうですね。

参考サイト：

GSAP Installation
https://greensock.com/docs/v3/Installation

2022年10月2週目（10/ 9 – 10/15）のトピックス

10/14（金） KIW Tech Conf part 2 を開催。

CSS Modules

フロントエンドロードマップ 2022

ベトナムタイグエン省

SPA もしくは MPA としてウェブアプリケーションをつくることが、モダンなウェブの開発をキャッチアップすることに繋がっている気がする。

VSCode拡張機能のおすすめが知りたい。

ScrollMagic
https://scrollmagic.io/

HAMMER.JS
https://hammerjs.github.io/

Lottie
https://airbnb.io/lottie/#/

2022年版 xamppによるWordPress環境構築の手順

【前提の環境】windows 端末に、xampp がインストールされている。

【手順1】XAMPP を起動し、phpMyAdminにアクセスする。

データベースを新規作成する。

データベース名を入力する : wp_practice_db

文字コード照合順序を選択する : utf8_general_ci

【手順2】データベースを操作するユーザーをつくる。

phpMyAdmin > wp_practice_db（1. 新しくつくったDB） > ユーザーアカウント

ユーザ名 : wp_practice_admin

ホスト名 : localhost

パスワード : （自分で決めたパスワード）

※ データベース wp_practice_db へのすべての権限を与える。
※ グローバル権限 > すべてチェックする。

【手順3】xamppフォルダ内にWordPressインストールフォルダをつくる。

xampp内のローカルサーバのデータが入ってるフォルダ
C:\xampp\htdocs

新しくWordPressをインストールするフォルダ
C:\xampp\htdocs\wp_practice

【手順4】最新のWordPressを公式サイトからダウンロードし、インストールフォルダへインストールする。

日本語公式サイトのダウンロードページ
https://ja.wordpress.org/download/

2022-09-28現在の最新バージョン
6.0.2

ダウンロードしたzipファイルを解凍し、wordpressフォルダ以下のファイルを、インストールフォルダへコピーする。

【手順5】インストールフォルダのwp-config-sample.php を複製して、wp-config.php をつくり、内容を編集する。

データベース名 : wp_practice_db（手順1. でつくったデータベース）

ユーザ名 : wp_practice_admin（手順2. でつくったデータベースユーザー名）
パスワード : （データベースユーザーのパスワード）

ホスト名 : localhost（デフォルトでは、%）

データベーステーブルの接頭辞：wp_（デフォルト）

【手順6】インストールフォルダが設置されている、xampp のローカル環境にブラウザからアクセスし、WordPressサイトのセットアップをする。

ブラウザでアクセスするURL：http://localhost/wp_practice/

無事アクセスに成功すると、WordPressサイトのセットアップ画面が現れる。

サイトのタイトル : wp_practice（サイトのタイトルを入力する）

ユーザー名 : wp_practice_admin（WordPressサイトの管理ユーザー名を入力する）

パスワード : （WordPressサイトの管理ユーザーのパスワード）

メールアドレス : （WordPressサイトの管理ユーザーのメールアドレス）

検索エンジンでの表示：オフ（デフォルト）

【完成】WordPressサイトのセットアップに成功すると、WordPressの管理画面が表示されます。

wgld でWebGLを学ぶ（2）

リアルタイム3Dレンダリングの世界では、行列（マトリクス）が頻出する。

マトリクス = モデル座標変換・ビュー座標変換・プロジェクション座標変換を一つの行列でまとめて処理することができるようになる。→ リアルタイム3Dレンダリングにおいて、計算効率が良くてメッチャ便利。

3Dレンダリングの世界では、4×4の正方行列をつかうのが一般的。

モデルを3Dレンダリングするとき、モデル座標変換・ビュー座標変換・プロジェクション座標変換のそれぞれに個別の行列を用意し、それを掛け合わせた結果をWebGLの頂点シェーダへ渡す。→ 頂点シェーダは、渡された座標変換行列を操作して、モデルを描画する。

行列が持てる情報

モデル変換行列 = 描画したい3Dモデルの位置・拡大縮小の有無・回転等

ビュー変換行列 = カメラの位置・カメラの向き・カメラの注視点等

プロジェクション変換行列 = ディスプレイのアスペクト比・視野角等

行列は掛け合わせの順序によって、計算結果が変わる。

行列を理解するには数学の世界を理解する必要があり、行列を理解しなければ3Dレンダリングを正しく理解することができない。

参考サイト：

行列(マトリックス)の基礎知識 | wgld.org

wgld でWebGLを学ぶ（1）

WebGLは、canvas要素に描画する。canvas要素は javascript で操作すること。

Webでは今のところ、アニメーション処理を一括で管理することができるようなメソッドやオブジェクトが存在しないので、javascript を使って自分で実装する必要がある。

コンテキスト = 描画処理を行なうための API を実装したオブジェクトのこと。

webglコンテキストは3D描画処理を実装することができる。

webGLは、右手座標系。

3D描画は三次元空間をディスプレイ（二次元）に投影するために、座標変換をする必要がある。

座標変換には、モデル変換、ビュー変換、プロジェクション変換の3種類がある。

モデル変換は、三次元空間上の原点からモデルまでの位置についての座標変換。

ビュー変換は、三次元空間上のカメラの位置と向きについての座標変換。

プロジェクション変換は、三次元空間上のどの領域（幅、高さ、奥行き）を決める座標変換。

シェーダ = 座標変換を記述する仕組み。プログラマブルシェーダとも呼ばれる。

シェーダには、頂点シェーダとフラグメントシェーダの2種類があり、それらを自前で実装する必要がある。

頂点シェーダは、ポリゴンの頂点情報を扱う。バーテックスシェーダとも呼ばれる。

フラグメントシェーダは、描画される際のピクセル情報を扱う。

シェーダはHTMLソース内に記述することもできるが、外部ファイルから呼び出すこともできる。

参考サイト：

ブラウザの準備 | wgld.org

WebGL を始める前に canvas を知る | wgld.org

3D 描画の基礎知識 | wgld.org

レンダリングのための下準備 | wgld.org

Windows11 で Stable Diffusion（NMKD Stable Diffusion GUI）を試してみたが、何度やっても「No Images Generated.」どうしよう？

Stable Diffusionは、テキストから画像を生成する画像生成AIです。

Windows環境では「NMKD Stable Diffusion GUI」というGUI搭載のサービスが用意されているようなので、そちらを試してみます。

「NMKD Stable Diffusion GUI」ダウンロードサイト

「Download」からNMKD Stable Diffusion GUIをダウンロードします。

ダウンロードしたファイルを解凍し、NMKD Stable Diffusion GUIを実行します。

「WindowsによってPCが保護されました」のアラートが表示されますが、詳細情報を表示し、「実行」ボタンを押します。

※ 当初、ダウンロードフォルダからアプリを実行していたところ、アプリを実行しているフォルダのパスが長すぎるので、フルパスの長さが77文字以内のフォルダから実行するように促されました。

アプリを実行すると「ソフトウェアはまだ開発中でバグが含まれていることがある。」という旨の警告が表示され、さらに重要な警告として以下の3点が警告される。

GTX10シリーズよりも新しい、最新のNVIDIAのグラフィックカードを使うこと。
できるだけ多くのグラフィックカードのメモリが必要です。8GB以下の場合、自己責任で使用してください。
解像度設定には非常に負荷がかかるので、グラフィックカードのメモリが12GB未満の場合、512×512ピクセル以上に設定するのはおすすめしません。

また、現状インストーラーからGUIを開いているので、必要なファイルをインストールしてください。と促されます。「OK」ボタンを押すと、インストールが必要な項目が表示されました。

「Install」ボタンを押すとインストールが始まったのですが、私の端末ではこの処理がメチャメチャ長かった。30分くらいかかりました。

インストールの処理はそれぞれ、リポジトリのクローン → Pythonの環境構築 → モデルデータのダウンロード。インストールを終えると、GUIに戻ります。

GUI左上にある「Prompt」欄へキーワードを入力して画像を生成します。

※ 画像生成するときのキーワードを「呪文」と呼ぶそうです。

当初「sky」というキーワードを入れてみたのですが、「No Images Generated.」。エラーという訳ではなさそうだったので、参考サイトのキーワードを入力し、「Generate!」ボタンを押しましたが、画像は生成されませんでした。

参考サイトに解決方法として、Resolution（Width / Height）の値を最小値（256）から試すといい。というアドバイスがあったので試したのですが、画像は生成されず…。

時間のある時に再チャレンジしたいと思います。

参考サイト：

画像生成AI「Stable Diffusion」をWindows環境にボタン1つでインストール可能＆GUIで操作できる「NMKD Stable Diffusion GUI」がついに登場

無料で画像生成AI「Stable Diffusion」をWindowsに簡単インストールできる「NMKD Stable Diffusion GUI」の使い方まとめ、呪文の設定や画像生成のコツがすぐわかる

画像生成AIのStable Diffusionをコマンド不要で簡単に使えるソフト NMKD Stable Diffusion GUI

Node.js 環境で TypeScript を実行させてみた（Windows11）

1. npm init する。

作業用のフォルダを用意し、PowerShell で、作業用フォルダへ移動する。

作業用フォルダで npm init する。

npm init

package.json ファイルが生成される。

2. TypeScript をインストールする。

npm install typescript

node_modules フォルダと package-lock.json ファイルが生成され、 package.jon ファイルが更新される。

3. TypeScript ファイルを用意する。

テキストエディタで sample.ts のような名前のTypeScript ファイルをつくり、TypeScript ファイルを作りこむ。

var Message:string;
Message = "吾輩は猫である。名前はまだニャー。";
alert(Message);

4. TypeScript ファイルを Javascript ファイルへコンパイルする。

TypeScript ファイルをコンパイルするコマンドは tsc というコマンドです。

Windows11 の PowerShell で実行する場合、そのまま tsc コマンドを実行してもエラーが表示されるだけなので、npx コマンドを使って、tsc コマンドを実行します。

npx tsc sample.ts

上記コマンドの実行が成功すると、sample.ts に対応した、 sample.js というコマンドが生成されます。

5. html ファイルに Javascript ファイルを読みこんで、挙動を確認する。

4. で生成された sample.js ファイルを、html ファイルの中から読みこんで実行します。

ブラウザの画面上部に「吾輩は猫である。名前はまだニャー。」と表示されたら成功です。

お疲れ様でした。

Bitbucket と Sourcetree でリポジトリを管理してみた（Windows11）

1. Bitbucket上にリポジトリをつくる。（Atlassian / Bitbucketアカウントは既につくっているものとします）

1-1. 新しいリポジトリをつくる。

https://bitbucket.org/dashboard/overview

Recent repositories > + (create repository)

1-2. 新規リポジトリの作成

Workspace : [ユーザー名]（自動入力）

プロジェクト > 新しいプロジェクトの作成 : [プロジェクト名]

リポジトリ名 : [リポジトリ名]（半角英数字）

アクセスレベル : 非公開リポジトリ（自動入力）

READMEを含めますか？ : Yes, with a tutorial(for beginners)（自動入力）

Default branch name : main

Include .gitignore? : Yes(recommended)（自動入力）

[リポジトリの作成] ボタンを押す。

2. Sourcetree にリポジトリをクローンする。

2-1. Sourcetreeアプリからリモートリポジトリをクローン

Sourcetree アプリケーション > New Tab > Remote > [ユーザー名] > [リポジトリ名]（1-2. でつくったリポジトリ） > Clone

1枠目 : https://[ユーザー名]@bitbucket.org/[ユーザー名]/[リポジトリ名].git（自動入力）

2枠目 : C:\workspace（自動入力されますが、任意で変更して、作業フォルダを指定することもできます。）

※ 2枠目の最後のディレクトリ名は、3枠目の[リポジトリ名]と同じ名前の空のディレクトリである必要があります。

3枠目 : [リポジトリ名]（自動入力）

Local Folders : [ルート]（自動入力）

[クローン] ボタンを押す。

2-2. クローンに成功すると、Sourcetree のUIから、リポジトリの管理ができるようになります。

お疲れ様でした。

参考サイト : BitBucketを使ってみる | tanaka’s Programming Memo

Bitbucket にプロジェクトを作る方法

1. Bitbucket上にプロジェクトをつくる。

https://bitbucket.org/dashboard/overview

Create > プロジェクト

2. プロジェクトを作成

Workspace : [ユーザー名]（自動入力）
Name : [プロジェクト名]（日本語入力も可能）
Key : （アルファベット大文字4文字程度の識別子）
Description : （空白も可能）
プライバシー : private project

[プロジェクト作成] ボタンを押す。

成功すると、プロジェクトタブに、新しく追加されたプロジェクトが表示されます。

日本の人口が知りたくなった。むしろ、日本の人口の上位の自治体の一覧を見てみたくなった。

上の動画を見てて、政策についての議論をしている時、田端信太郎さんの「都市を前提にしたような言動」に対して違和感を覚えたので、日本の地域毎の人口を知りたくなった。

日本の人口は、1億2563万3千人（125,633,000）（令和3年8月1日現在の確定値）
https://www.stat.go.jp/data/jinsui/new.html

都道府県名	推計人口（人）
東京都	13159000
神奈川県	9048000
大阪府	8865000
愛知県	7411000
埼玉県	7195000
千葉県	6216000
兵庫県	5588000
福岡県	5072000
北海道	5506000

都道府県別の人口（平成27年）
https://www.stat.go.jp/data/nihon/02.html

日本の人口の約半数は、62,816,500人。
日本の人口の上位過半数（約54%）のは、上記の9都道府県が占めているっぽい。

都道府県別単位ではなく、市区町村単位でみるとどうだろう？

市区町村名	推計人口（人）
東京23区	9570609
横浜市	3754772
大阪市	2730420
名古屋市	2301639
札幌市	1959313
福岡市	1554229
神戸市	1533588
川崎市	1514299
京都市	1409702
さいたま市	1314145
広島市	1195775
仙台市	1064060
千葉市	972516
北九州市	950602

日本の人口の約半数は、62,816,500人。
日本の人口の25%以上（31,825,669）は、上記の14市区が占めているっぽい。

都道府県別の人口（平成27年）
https://www.stat.go.jp/data/nihon/02.html

都市を前提とすれば、労働人口の確保が必要なのはわかるんだけど、賃金を上げて労働市場に出てきていない日本人を、労働市場に引っ張り出す方がお金の使い方としては良いと思うんだけどなぁ。

むしろ、外国人労働者に資本を流すほど豊かな国でしたっけ？

VSCodeの拡張機能

Visual Studio Code(VSCode)の初期設定

https://qiita.com/ucan-lab/items/daba38a597ab9c982de2

VSCode に必ず入れておきたい拡張機能

https://qiita.com/ucan-lab/items/e85931bf8276da43cc97

【VSCode】拡張機能おすすめ22選 [2021年最新]

https://310nae.com/vscode-extensions/

Windows11でのスクリーンショットの方法

Windows 11のパソコンでスクリーンショットを撮影・保存する3つの方法

https://dekiru.net/article/22274/#:~:text=%E4%BE%8B%E3%81%88%E3%81%B0%E3%80%81%E5%85%A8%E7%94%BB%E9%9D%A2%E3%81%AE%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3,PrintScreen%EF%BC%BD%E3%82%AD%E3%83%BC%E3%82%92%E6%8A%BC%E3%81%97%E3%81%BE%E3%81%99%E3%80%82

新端末が届いた！

前の端末は使う上での問題がいろいろあったんだけど、それをすべてマルっと解決できるような端末になっててうれしい！

アフターシックスジャンクションの「国産RPGクロニクル」というシリーズが面白い（spotify）

宮崎市長が決定

2022年（令和4）1月23日にに宮崎市長選挙が行われ、宮崎市長に清山知憲（きよやま・とものり）氏（40）が選出されました。

宮崎市市長選挙

https://kiyoyama.org/

現職市長を擁護するつもりはないのですが、現職を批判して主張展開する人って自分自身にビジョンがない人だと思うんですよね。なのであまり好きではなかったのですが選出されたからには頑張っていただきたいです。

以下、2022年1月24日現在の清山知憲氏の選挙公約です。

政策（公約）
2021年11月16日発表
〇命を守り、経済を活かす新型コロナ対策

　 – 医師としての経験を活かし、ワクチン接種率向上と加速化、PCR検査の自己負担を減らし、経済への影響を軽減します。
　 – 市保健所での感染症エキスパートの育成に取り組み、市内の事業所の感染対策を

〇市長給与30%カット!

　 – 宮崎市役所が前向きな組織に生まれ変わるため、そしてコロナ禍による市民の痛みに寄り添うため、少なくとも2年間、かつ自粛を要請することがなくなるまで現在行われていない市長の給与を30%カットします。
〇成長する宮崎経済へ

　 – 「県・市連絡会議」を設け、住吉バイパス完成やインフラ整備に向けた国への働きかけ強化、スポーツ環境の整備、民間主体の賑わい創出に取り組みます。
　 – ふるさと納税を5億から30億円以上へ増やし、稼ぐ市役所を目指します。
　 – 農畜水産物の販路拡大、6次産業化を推進し、生産者の所得向上を図ります。

〇女性活躍・子育ての充実

　 – 女性の社会参加と地位向上へ向けた取り組みを強化します。
　 – 子宮頸がんワクチンの適正な情報発信と高校2・3年生への独自助成を検討します。（年間約3,000人の女性が死亡、WHOも推奨）
　 – 働き方改革を通して、先生たちが本来の教育に割ける時間を増やします。
　 – 子どものSOSへ対応するため、市立児童相談所の設置を本格検討します。

〇ムダ撲滅プロジェクト

　 – アリーナ構想はすぐに廃止します。
　 – 市庁舎の建替えエリアはいったん白紙に戻し、コストや市役所のあり方から検討し直します。
　 – コロナ禍を機に会議や行事のあり方を含めた市役所職員の業務を徹底的に見直し、
https://kiyoyama.org/

明けましておめでとうございます！

.mapファイルって何？

SassやTypeScriptといった拡張メタ言語からコンパイルされて難読化されたJavascriptやcssを、元のJavascriptやcssと関連付けるためのファイル。

コンパイルすることで圧縮されたり難読化されているファイルはデバッグ等が難しくなっているため、このファイルがソースファイルの解釈を補助します。

教えてくれたサイト

https://designsupply-web.com/media/programming/2850/

お酒に弱い人が美味しくお酒を飲むための傾向と対策

飲み過ぎると吐いてしまうのが本当にイヤだ。

お酒を初めて口にした大学生の頃からのずっと付きまとっている悩みのひとつが飲酒に伴う嘔吐だ。

吐くと気持ち悪い。
吐けないのに身体が吐こうとして気持ちが悪い。
トイレに籠ってしまい、他の人に心配をかけてしまう。
吐くと歯のエナメル質が溶けると聞いた。
吐くと目が血走って、涙が出て、気持ち悪い顔になるのが嫌だ。

嘔吐の原因

アルコールは胃で約10～20%吸収される。残りは腸で吸収される。

吐いてしまうのは、肝臓がアルコールを分解することができなくなり、血液の中の毒素の濃度が高まることが原因らしい。

嘔吐が止まらないのは、アルコールによって体の機能が正常に働かなくなっている。おかしくなっている身体の機能は、一定時間おかないとおさまらない。

嘔吐が止まらないのは、体内に残っているアルコールを体が外に出そうとし続けている。

嘔吐してしまう時の対策

水を飲んでから吐くと、唾液が多くなって、胆汁や胃液から内臓を守ることができる。

吐き気で気持ち悪いときは、楽な姿勢をとる。

吐き気で気持ち悪いときは、風通しの良い場所で衣類を緩めて休む。

嘔吐しないための対策

飲み過ぎない。自分が嘔吐に至るアルコールの量を把握する。

飲酒前に食事（特にチーズなどのたんぱく質）をしておくと、アルコールが腸に送られるまでに時間がかかるようになり、アルコールの吸収速度を遅らせることができる。

アルコールが分解されるときにはビタミンB群が必要になるため、飲酒前にビタミンB群が入った栄養ドリンクを摂取しておくと、アルコールの分解を早めてくれるようになる。

チェイサーと併せて飲酒することで、脱水を防止しつつアルコールを摂取することができる。アルコール1杯に対して水1杯の比率が効果的。

アミノ酸やビタミンB群が含まれるおつまみ（枝豆や豆腐など）と一緒に飲酒をすることで、アルコールの吸収を遅らせることができる。

一気飲みをしない。一気飲みじゃないにしろ、一度に大量のアルコールを摂取しないようにする。

アルコールを分解するのには水分が必要です。飲酒から翌日にかけて脱水になりがちなので、朝は特に水分を補給する。水分・電解質・糖分が補給できるスポーツドリンクが理想的。

二日酔いのだるさや、頭が回らないときは脳にエネルギーが届いていないので、消化の良い炭水化物（おかゆやうどん、バナナ等）を摂取する。

酔いと脳みそ

アルコールが脳に到達すると、アルコールが脳の神経細胞をマヒさせる。これが「酔った」状態。

脳のアルコール濃度は測定することができないので、血液中のアルコール濃度を測定することで「酔った」程度を把握することができる。

教えてくれたサイト

「二日酔いは吐くと治る？」気持ち悪い・胃液を吐くときの対処法

https://style.nikkei.com/article/DGXMZO89099970Z00C15A7000000/

https://www.kusurinomadoguchi.com/column/articles/hangover-cures-16922/

二日酔い

サイトのヘッダーってクリエイティブだよね

フッターに比べると、ずっとクリエイティブ。

サイトを構成する各種パーツの役割についてつらつら書き述べていきたい

ヘッダー

ユーザーにとって必要な情報へ誘導する。

ファーストビュー

画像もしくは動画とテキストで、サイトの印象づけを行う。

サイドバー

別カテゴリーの情報へのナビゲーション

フォーム

ユーザーとサイトの窓口

フッター

必要な情報に辿り着けなかったユーザーの巻き取り

WordPressでアップデートされる機能が気になる

WebGPUが気になる

最近のGPU事情が気になる

ブロックチェーン技術/ビットコインが気になる

WordPressのセキュリティが気になる

ゲーミフィケーションが気になる

教えてくれたサイト：

https://ferret-plus.com/6840

ゲーミフィケーションに期待すること：

ゲームのように楽しくタスクを進めることができる。
ゲームのように達成感を持つことができる。

ケイパビリティとは

制作会社が欲しい業務未経験の人材像（WEBデザイナー・コーダー編）

【結論】制作会社が欲しい業務未経験の人材像

制作会社の日常業務

業務未経験の人材に求められる業務内容

業務未経験の人材に求められる「スキル」以外の重要な資質

アトロク2『いつだって備えておきたい”頼れる”ライト特集2024』について

jsでアコーディオン

jsでタブ実装

よく使うmixin(sass)

名前解決

Google FontsのWebフォントをWordPressに読み込ませる

いくつかの疑問

VSCode の拡張機能 [ Prettier – Code formatter ]の使い方

改行コードとは？

【CSS】PurgeCSS を使って、不要なスタイルを削除する

参考サイト

構文

【WordPress】【MW WP Form】フォームを流用しつつ、投稿ページ固有の情報を確認画面やメールに表示させる方法

命題

命題1の解決方法

命題2の解決方法とその手順

命題2の手順1. ）MW WP Form のフォーム編集ページで「URL引数を有効にする」にチェックを入れて保存する

命題2の手順2. ）MW WP Form のフォーム編集ページで投稿パラメータを埋め込む

命題2の手順3. ）MW WP Form のフォーム編集ページにhiddenフィールドを設置し、hiddenフィールドのvalue値に投稿パラメータを埋め込む

命題2の手順4. ）MW WP Form のフォーム編集ページに設置したhiddenフィールドをメール文面内に設置する

参考サイト

【CSS】animation を指定する

【WordPress】カスタム投稿のつくり方

参考サイト

register_post_type 関数

register_post_type 関数の使い方（コード）

【WordPress】All-in-One WP Migration プラグインによるデータ移行の手順

.wpress データによるデータ移行

WordPressにアップロードできるファイルサイズを変更する

All-in-One WP Migration プラグインをインストールする。

エクスポートされたデータを、All-in-One WP Migration プラグインからインポートする。

【Gulp】gulp 事始め

参考サイト

Node.js のバージョンを確認する。（執筆時 v18.12.1）

npm のバージョンを確認する。（執筆時 8.19.2）

npx のバージョンを確認する。（執筆時 8.19.2）

gulpをインストールする。

作業用フォルダをつくり、そこへ移動する。

作業フォルダに package.json をつくる。

作業フォルダの devDependencies に gulp をインストールする。

Gulpのバージョンを確認する。（執筆時 CLI version: 2.3.0 Local version: 4.0.2）

gulpfile.js をつくる。

gulpの挙動を確認する。

※ gulp に複数のタスクを含めた場合、以下のコマンドで実行する。

次のステップ

502 Bad Gateway エラー とは？

502 Bad Gateway エラーの原因として考えられること

502 Bad Gateway エラーの解決方法

参考サイト

【Javascript】Web制作に役立ちそうな Import / Export の使い方

参考サイト

前提

【使い方 1】エクスポートしたい関数を export文で指定する

【使い方 2】

Webデザインの参考サイト

Webデザインにインスピレーションをくれる31のサイト

【Blender】Blenderでのクリエイティブを高めるロードマップ

Blenderでクリエイティブな表現を実現していくための8つのステップ

【Blender】3DCGの静止画像をBlenderでつくってみる

Blenderを起動

画像のレンダリング

レンダリング手順

【Sass】input要素でマウスホバー状態とチェック状態の両方で背景色と文字色を変更したい

結論（コード）

【HTML】fieldset要素はdisplay:flexもdisplay:tableも効かない難あり要素

参考サイト

【Javascript】型を確認する

参考サイト

結論（コード）

【PHP】HTMLフォームから受け取ったチェックボックスの複数選択を受け取る方法

参考サイト

結論（コード）

送信元のHTMLフォーム

受け取り先PHPファイル

502 Bad Gateway エラーとは？