現状確認

Node.jsのバージョンを確認する。

node -v
v22.15.0

npmのバージョンを確認する。

npm -v
10.9.2

開発環境のセットアップ

npmを初期化する。

npm init

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

esbuildをインストールする。

npm install --save-exact --save-dev esbuild

esbuildのバージョンを確認し、esbuildがインストールされているか確かめる。

./node_modules/.bin/esbuild --version
0.25.5

npmでreactとreact-domパッケージをインストールする。

npm install react react-dom

app.jsxファイルをつくる。

touch app.jsx

esbuildで最もシンプルなReactコンポーネントを生成してみる。

app.jsxに以下の記述を追加する。

import * as React from 'react'
import * as Server from 'react-dom/server'

let Greet = () => <h1>Hello, world!</h1>
console.log(Server.renderToString(<Greet />))

esbuildにファイルをバンドルするように指示する。

./node_modules/.bin/esbuild app.jsx --bundle --outfile=out.js

※ out.jsが生成されると、プロジェクトはnode_modulesディレクトリに依存しなくなる。

esbuildを起動する。

node out.js
<h1>Hello, world!</h1>

※ esbuildでビルドされたout.jsが実行された。

npmスクリプトでReactコンポーネントを生成できるようにしてみる。

package.jsonファイルにビルドコマンドを追加する。

{
   "scripts" : {
     "build" : "esbuild app.jsx --bundle --outfile=out.js"
  } 
}

npmスクリプトでコンパイルされた.jsが生成されるようになった。

npm run build

Viteの開発環境をセットアップする。

参考サイト はじめに

Viteは20.19+もしくは22.12+が必要。

Node.jsのバージョンを確認する。

node -v
v22.15.0

npmのバージョンを確認する。

npm -v
10.9.2

viteをインストールする。

npm create vite@latest

Project name:
vite-project-01

Select a framework:
Vanilla

Selecta variant:
JavaScript

※ プロジェクト名は vite-project-01、フレームワークはVanilla、JavaScriptを選択した。

Viteプロジェクトの開発環境を起動する。

cd vite-project-01

npm install

npm run dev

tailwindcss をセットアップする。

参考サイト Get started with Tailwind CSS

tailwindcssをインストールする。

npm install tailwindcss @tailwindcss/vite

vite.config.jsを追加する。

touch vite.config.js

vite.config.jsにtailwindcssを読み込む。

import {defineConfig} from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [
        tailwindcss(),
    ],
});

style.cssファイルにtailwindcssを読み込む。

@import "tailwindcss";

tailwindcssを読み込んだ開発環境を起動する。

npm run dev

tailwindcssPLUSからUIブロックを移植してくる。

Build your next idea even faster.

main.jsにtailwindcssPLUSのコンポーネントを移植してくる。

Hero Sections

import './style.css'
import javascriptLogo from './javascript.svg'
import viteLogo from '/vite.svg'
import { setupCounter } from './counter.js'

document.querySelector('#app').innerHTML = `
<div class="bg-white">
  <header class="absolute inset-x-0 top-0 z-50">
    <nav class="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
      <div class="flex lg:flex-1">
        <a href="#" class="-m-1.5 p-1.5">
          <span class="sr-only">Your Company</span>
          <img class="h-8 w-auto" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600" alt="" />
        </a>
      </div>
      <div class="flex lg:hidden">
        <button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">
          <span class="sr-only">Open main menu</span>
          <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
          </svg>
        </button>
      </div>
      <div class="hidden lg:flex lg:gap-x-12">
        <a href="#" class="text-sm/6 font-semibold text-gray-900">Product</a>
        <a href="#" class="text-sm/6 font-semibold text-gray-900">Features</a>
        <a href="#" class="text-sm/6 font-semibold text-gray-900">Marketplace</a>
        <a href="#" class="text-sm/6 font-semibold text-gray-900">Company</a>
      </div>
      <div class="hidden lg:flex lg:flex-1 lg:justify-end">
        <a href="#" class="text-sm/6 font-semibold text-gray-900">Log in <span aria-hidden="true">&rarr;</span></a>
      </div>
    </nav>
    <!-- Mobile menu, show/hide based on menu open state. -->
    <div class="lg:hidden" role="dialog" aria-modal="true">
      <!-- Background backdrop, show/hide based on slide-over state. -->
      <div class="fixed inset-0 z-50"></div>
      <div class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
        <div class="flex items-center justify-between">
          <a href="#" class="-m-1.5 p-1.5">
            <span class="sr-only">Your Company</span>
            <img class="h-8 w-auto" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600" alt="" />
          </a>
          <button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700">
            <span class="sr-only">Close menu</span>
            <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        <div class="mt-6 flow-root">
          <div class="-my-6 divide-y divide-gray-500/10">
            <div class="space-y-2 py-6">
              <a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Product</a>
              <a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Features</a>
              <a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Marketplace</a>
              <a href="#" class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Company</a>
            </div>
            <div class="py-6">
              <a href="#" class="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50">Log in</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>

  <div class="relative isolate px-6 pt-14 lg:px-8">
    <div class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
      <div class="relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-288.75" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
    </div>
    <div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
      <div class="hidden sm:mb-8 sm:flex sm:justify-center">
        <div class="relative rounded-full px-3 py-1 text-sm/6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
          Announcing our next round of funding. <a href="#" class="font-semibold text-indigo-600"><span class="absolute inset-0" aria-hidden="true"></span>Read more <span aria-hidden="true">&rarr;</span></a>
        </div>
      </div>
      <div class="text-center">
        <h1 class="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl">Data to enrich your online business</h1>
        <p class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat.</p>
        <div class="mt-10 flex items-center justify-center gap-x-6">
          <a href="#" class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get started</a>
          <a href="#" class="text-sm/6 font-semibold text-gray-900">Learn more <span aria-hidden="true">→</span></a>
        </div>
      </div>
    </div>
    <div class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]" aria-hidden="true">
      <div class="relative left-[calc(50%+3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-288.75" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
    </div>
  </div>
</div>
`

setupCounter(document.querySelector('#counter'))

これでtailwindcssPLUSのUIコンポーネントを使って、ページを生成できるようになった。

capability

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

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

       <details class="js-details">
<br>            <summary class="js-summary">
<br>                <span class="summary_inner">
<br>                    概要<span class="icon"></span>
<br>                </span>
<br>            </summary>
<br>            <div class="content js-content">
<br>                <div class="content_inner">折りたたまれている部分です。</div>
<br>            </div>
<br>        </details>
<br>        <details class="js-details">
<br>            <summary class="js-summary">
<br>                <span class="summary_inner">
<br>                    概要<span class="icon"></span>
<br>                </span>
<br>            </summary>
<br>            <div class="content js-content">
<br>                <div class="content_inner">折りたたまれている部分です。</div>
<br>            </div>
<br>        </details><br><script><br>'use strict';
<br>
<br>{
<br>    document.addEventListener('DOMContentLoaded', () => {
<br>        setAccordion();
<br>    });
<br>
<br>    const setAccordion = () => {
<br>        const details = document.querySelectorAll('.js-details');
<br>        const RUNNING_VALUE = 'running';
<br>        const IS_OPENED_CLASS = 'is-opened';
<br>
<br>        details.forEach(element => {
<br>            const summary = element.querySelector('.js-summary');
<br>            const content = element.querySelector('.js-content');
<br>
<br>            summary.addEventListener('click', event => {
<br>                event.preventDefault();
<br>
<br>                if (element.dataset.animStatus === RUNNING_VALUE) {
<br>                    return;
<br>                }
<br>
<br>                if (element.open) {
<br>                    element.classList.toggle(IS_OPENED_CLASS);
<br>
<br>                    const closingAnim = content.animate(
<br>                        closingAnimKeyframes(content),
<br>                        animTiming
<br>                    );
<br>
<br>                    element.dataset.animStatus = RUNNING_VALUE;
<br>
<br>                    closingAnim.onfinish = () => {
<br>                        element.removeAttribute('open');
<br>                        element.dataset.animStatus = '';
<br>                    };
<br>                } else {
<br>                    element.setAttribute('open', 'true');
<br>
<br>                    element.classList.toggle(IS_OPENED_CLASS);
<br>
<br>                    const openingAnim = content.animate(
<br>                        openingAnimKeyframes(content),
<br>                        animTiming
<br>                    );
<br>                    element.dataset.animStatus = RUNNING_VALUE;
<br>
<br>                    openingAnim.onfinish = () => {
<br>                        element.dataset.animStatus = '';
<br>                    };
<br>                }
<br>            });
<br>        });
<br>    };
<br>
<br>    const animTiming = {
<br>        duration: 400,
<br>        easing: 'ease-out',
<br>    };
<br>
<br>    // 閉じる
<br>    const closingAnimKeyframes = content => [
<br>        {
<br>            height: content.offsetHeight + 'px',
<br>            opacity: 1,
<br>        },
<br>        {
<br>            height: 0,
<br>            opacity: 0,
<br>        },
<br>    ];
<br>
<br>    // 開く
<br>    const openingAnimKeyframes = content => [
<br>        {
<br>            height: 0,
<br>            opacity: 0,
<br>        },
<br>        {
<br>            height: content.offsetHeight + 'px',
<br>            opacity: 1,
<br>        },
<br>    ];
<br>}
<br></script><br><style><br>summary {
<br>    display: block;
<br>}
<br>
<br>summary::-webkit-details-marker {
<br>    display: none;
<br>}
<br>
<br>.summary_inner {
<br>    cursor: pointer;
<br>    display: flex;
<br>    flex-direction: row;
<br>    justify-content: space-between;
<br>    align-items: center;
<br>    padding: 16px 24px;
<br>    border: 1px solid #d2beff;
<br>    font-weight: bold;
<br>    color: #002255;
<br>}
<br>
<br>.icon {
<br>    display: block;
<br>    position: relative;
<br>    width: 24px;
<br>    margin-left: 6px;
<br>    flex-shrink: 0;
<br>    transform-origin: center 43%;
<br>    transition: transform 0.4s;
<br>}
<br>
<br>details.is-opened .icon {
<br>    transform: rotate(180deg);
<br>}
<br>
<br>.icon::before,
<br>.icon::after {
<br>    content: '';
<br>    position: absolute;
<br>    display: block;
<br>    width: 15px;
<br>    height: 3px;
<br>    background-color: #7050ff;
<br>}
<br>
<br>.icon::before {
<br>    left: 0;
<br>    transform: rotate(45deg);
<br>}
<br>
<br>.icon::after {
<br>    right: 0;
<br>    transform: rotate(-45deg);
<br>}
<br>
<br>.content {
<br>    overflow: hidden;
<br>    background-color: #f0f2ff;
<br>}
<br>
<br>.content_inner {
<br>    padding: 24px 48px;
<br>    display: flex;
<br>    flex-direction: column;
<br>    gap: 16px;
<br>}
<br></style>

<!DOCTYPE html>
<br><html lang="ja">
<br><head>
<br>    <meta charset="UTF-8">
<br>    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<br>    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<br>    <title>Document</title>
<br>    <style>
<br>        .tab-wrap {
<br>            display: flex;
<br>            flex-wrap: wrap;
<br>        }
<br>        .tab-label {
<br>            color: White;
<br>            background: LightGray;
<br>            margin-right: 5px;
<br>            padding: 3px 12px;
<br>            order: -1;
<br>        }
<br>        .tab-content {
<br>            width: 100%;
<br>            display: none;
<br>            box-sizing: border-box;
<br>            border: solid 1px black;
<br>        }
<br>        /* アクティブなタブ */
<br>        .tab-switch:checked+.tab-label {
<br>            background: DeepSkyBlue;
<br>        }
<br>        .tab-switch:checked+.tab-label+.tab-content {
<br>            display: block;
<br>        }
<br>        /* ラジオボタン非表示 */
<br>        .tab-switch {
<br>            display: none;
<br>        }
<br>    </style>
<br></head>
<br><body>
<br>    <div class="tab-wrap">
<br>        <input id="TAB-01" type="radio" name="tab" class="tab-switch" checked="checked" />
<br>        <label class="tab-label" for="TAB-01">ボタン 1</label>
<br>        <div class="tab-content">
<br>            コンテンツ 1
<br>        </div>
<br>
<br>        <input id="TAB-02" type="radio" name="tab" class="tab-switch" />
<br>        <label class="tab-label" for="TAB-02">ボタン 2</label>
<br>        <div class="tab-content">
<br>            コンテンツ 2
<br>        </div>
<br>
<br>        <input id="TAB-03" type="radio" name="tab" class="tab-switch" />
<br>        <label class="tab-label" for="TAB-03">ボタン 3</label>
<br>        <div class="tab-content">
<br>            コンテンツ 3
<br>        </div>
<br>    </div>
<br></body>
<br></html>

// マップ型の変数でブレイクポイントを定義する
<br>$breakpoints: (
<br>    'xs': 'screen and (min-width: 320px)',
<br>    'sm': 'screen and (min-width: 576px)',
<br>    'md': 'screen and (min-width: 768px)',
<br>    'lg': 'screen and (min-width: 1024px)',
<br>    'xsl': 'screen and (min-width: 1200px)',
<br>    'xl': 'screen and (min-width: 1366px)',
<br>    'xxl': 'screen and (min-width: 1920px)',
<br>) !default;
<br>
<br>// メディアクエリ
<br>@mixin mq($breakpoint: md) {
<br>    @media #{map-get($breakpoints, $breakpoint)} {
<br>        @content;
<br>    }
<br>}
<br>
<br>// vwの算出（四捨五入）
<br>@function getVw($elemSize: 10, $windowWidth: 375) {
<br>    $vwValue: round(calc($elemSize * calc(100 / $windowWidth))) + vw;
<br>    @return $vwValue;
<br>}
<br>
<br>// vwの算出（四捨五入）
<br>@function getVwNoRound($elemSize: 10, $windowWidth: 375) {
<br>    $vwValue: calc($elemSize * calc(100 / $windowWidth)) + vw;
<br>    @return $vwValue;
<br>}
<br>

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

sudo vi /etc/resolv.conf

resolv.conf ファイル

nameserver 8.8.8.8

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 をどうやって設定すればいいんだろう？

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

参考サイト

PurgeCSS のシンプルな使い方

PurgeCSS

構文

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

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

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

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

命題

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

命題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}

参考サイト

• MW WP Form URL引数を使って前のページの情報を自動挿入する方法
• MW WP FormでGETパラメータを使ってフォームを自動入力する方法

.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% {

    }
}

参考サイト

投稿タイプ

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');

.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ユーザー
• インストール・有効化されているプラグイン
• サイトのタイトル
• キャッチフレーズ
• 管理者メールアドレス
• ホームページの表示設定
• パーマリンク 等

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

参考サイト

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

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

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

502 Bad Gateway エラーの解決方法

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

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

参考サイト

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

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

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ファイルに埋め込む時は、 を指定しないとモジュールとして使えません。（エラーになります）

あと、インポートされたモジュールは 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デザインにインスピレーションをくれる31のサイト

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

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

1. coliss
   https://coliss.com/
2. WebDesignClip
   https://webdesignclip.com/
3. MUUUUU.ORG
   https://muuuuu.org/
4. 81-web.com
   https://81-web.com/
5. SANKOU!
   https://sankoudesign.com/
6. IO3000
   https://io3000.com/
7. RESPONSIVE WEB DESIGN JP
   https://responsive-jp.com/
8. S5 Sty!e
   https://bm.s5-style.com/
9. Web Design Trends
   https://webdesign-trends.net/gallery
10. PHOTOSHOP VIP
    https://photoshopvip.net/category/web/webdesign
11. LIG
    https://liginc.co.jp/web-development/design
12. URAGAWA
    https://uragawa.work/
13. 現代デザイン
    https://gendaidesign.com/
14. イケサイ
    https://www.ikesai.com/
15. Webデザインの見本帳
    https://www.web-mihon.com/
16. 週刊ウェブデザイン
    https://www.dailywebdesign.com/
17. Stock
    https://stock.pulpxstyle.com/
18. AGT Smartphone Design Gallery
    https://agtsmartphonedesign.com/
19. siiimple.com
    https://siiimple.com/
20. site inspire
    https://www.siteinspire.com/
21. lapa.ninja
    https://www.lapa.ninja/
22. One Page Love
    https://onepagelove.com/
23. Media Queries
    https://mediaqueri.es/
24. Land-book
    https://land-book.com/
25. 1GUU
    https://1guu.jp/
26. デザインのこと
    https://designnokoto.com/
27. Good Web Design
    https://good-web-design.com/
28. AWWWARDS
    https://www.awwwards.com/
29. CSSDesignAwards
    https://www.cssdesignawards.com/
30. CSS WINNER
    https://www.csswinner.com/
31. Behance
    https://www.behance.net/search/projects?field=web+design
    

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

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

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

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

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

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

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

結論（コード）

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

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

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で型を判定する方法を現役エンジニアが解説【初心者向け】
https://magazine.techacademy.jp/magazine/35968

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

結論（コード）

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

参考サイト

フォームの構築方法 | 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
https://developer.mozilla.org/ja/docs/Learn/Forms/Sending_and_retrieving_form_data

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

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

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

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

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

ブラウザの「戻る」（もしくは「進む」）ボタンを押したとき、ページ遷移前にモーダルを起動する処理を行っていたんですが、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 アクションフック(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】～を含むかのチェック | 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入門】イベントのバブリングとキャプチャリング
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

'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

結論（コード）

'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

結論（コード）

'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/

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

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

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

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

font-display 属性を指定する。

font-display: block;

参考サイト：

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

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

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

word-wrap: break-word;

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

wp-content/themes/

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

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

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

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

参考サイト：

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を使っていたので、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検索の拡張表示機能は使えません。

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

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

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

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

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

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

参考サイト

構造化データの仕組みについて
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

表示しているページが複数ページで構成されているページの時、そのページ番号が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

参考サイト：
関数リファレンス/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 に指定できる値は、データベースに該当するオプションがなかった時のデフォルト値。

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

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

参考サイト

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

参考サイト

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

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

参考サイト

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

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

参考サイト

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

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

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

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

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

5. 出来上がり

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

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

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

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

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

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オブジェクトは、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で非推奨になった。

参考サイト

脱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.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 会員の種類

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

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

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

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

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

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

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

参考サイト

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

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

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

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

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

参考サイト：

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

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/#/

【前提の環境】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の管理画面が表示されます。

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

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

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

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

行列が持てる情報

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

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

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

---

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

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

参考サイト：

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

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

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

日本の人口は、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

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

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

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/

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

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

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/