<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.confresolv.conf ファイル
nameserver 8.8.8.8Google 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の設定オプションについてまとめてみた”)
改行コードとは？
https://atmarkit.itmedia.co.jp/ait/articles/1809/14/news025.html
CR：
キャリッジリターン
MacOS 9以前
LF：
ラインフィード
MacOS9以降
CR+LF：
キャリッジリターン+ラインフィード
Windows
【CSS】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 300All-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 -vnpm のバージョンを確認する。（執筆時 8.19.2）
npm -vnpx のバージョンを確認する。（執筆時 8.19.2）
npx -vgulpをインストールする。
npm install gulp-cli作業用フォルダをつくり、そこへ移動する。
mkdir practice-01
cd practice-01作業フォルダに package.json をつくる。
npm init作業フォルダの devDependencies に gulp をインストールする。
npm install -S gulpGulpのバージョンを確認する。（執筆時 CLI version: 2.3.0 Local version: 4.0.2）
※ git bash では、gulp が Command not found. になったので、wsl に切り替えて実行した。
gulp --versiongulpfile.js をつくる。
touch gulpfile.jsつくった gulpfile.js ファイルに、以下を記述する。
function defaultTask(cb) {
cb();
}
exports.default = defaultTaskgulpの挙動を確認する。
プロジェクトフォルダで以下のコマンドを実行する。
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
【Javascript】Web制作に役立ちそうな Import / Export の使い方
mdn web docs や SAMURAI ENGINEER Blog をいくら読んでもピンと来なかったのですが、Qiita の記事を試してみたらうまく動かせました。
参考サイト
JavaScriptでのimport/export方法 | Qiita
https://qiita.com/koeri3/items/314ac7b9b73fc8c80a2d
前提
記事の中にもありましたが、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サイトになりました。
多いですよね。追いきれないです。
- coliss
https://coliss.com/ - WebDesignClip
https://webdesignclip.com/ - MUUUUU.ORG
https://muuuuu.org/ - 81-web.com
https://81-web.com/ - SANKOU!
https://sankoudesign.com/ - IO3000
https://io3000.com/ - RESPONSIVE WEB DESIGN JP
https://responsive-jp.com/ - S5 Sty!e
https://bm.s5-style.com/ - Web Design Trends
https://webdesign-trends.net/gallery - PHOTOSHOP VIP
https://photoshopvip.net/category/web/webdesign - LIG
https://liginc.co.jp/web-development/design - URAGAWA
https://uragawa.work/ - 現代デザイン
https://gendaidesign.com/ - イケサイ
https://www.ikesai.com/ - Webデザインの見本帳
https://www.web-mihon.com/ - 週刊ウェブデザイン
https://www.dailywebdesign.com/ - Stock
https://stock.pulpxstyle.com/ - AGT Smartphone Design Gallery
https://agtsmartphonedesign.com/ - siiimple.com
https://siiimple.com/ - site inspire
https://www.siteinspire.com/ - lapa.ninja
https://www.lapa.ninja/ - One Page Love
https://onepagelove.com/ - Media Queries
https://mediaqueri.es/ - Land-book
https://land-book.com/ - 1GUU
https://1guu.jp/ - デザインのこと
https://designnokoto.com/ - Good Web Design
https://good-web-design.com/ - AWWWARDS
https://www.awwwards.com/ - CSSDesignAwards
https://www.cssdesignawards.com/ - CSS WINNER
https://www.csswinner.com/ - Behance
https://www.behance.net/search/projects?field=web+design
【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; は効く。
参考サイト
【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フォームから受け取ったチェックボックスの複数選択を受け取る方法
参考サイト
【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フォームのセキュリティ
参考サイト
基本姿勢は自分を含むユーザーを信用しなこと
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
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タグを設置する。
参考サイト
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】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("マウスカーソルがページの描画領域から外れました。");
});
});
}参考サイト：
マウスカーソルのコントロール領域外への移動を検出
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.scss2.分割されたスタイルシートを呼び出す
分割スタイルシートを使う場合は、呼び出し側から @use を使って呼び出す。
上の __sample.scss を呼び出す場合、アンダーバー（__）と拡張子（.scss）の間にあるファイル名を文字列として指定して呼び出す。
@use 'sample';3.sassコマンドを実行する
2. の呼び出し元のスタイルシートに対してsassコマンドを実行すると、生成されたcssファイルに、__sample.scss の内容が含まれる。
自分の制作活動をオープンするといい。と言われた。
とある編集さんに「アラフォーの専門職として、フロントエンドエンジニアでも、デザイナーでもなく、ウェブにおける表現を仕事にしていきたいのだが、どんなキャリアを選択していくべきだろうか？」と相談したところ、簡潔だけど含蓄のある回答が返ってきた。
「表現や創作活動をやっている人に明確なキャリアパスいないと思う。スゴいものや面白そうなものに手を出してその成果を発信していくことで、仕事につながることはあると思う。自分の制作活動をオープンにすると良いでしょう。」
自分の手の遅さ、成果物の稚拙さを噛みしめながら、自分の制作活動をオープンにしていこうと思う。
【CSS】Webフォントの表示がカクつく時の解消法
Webフォントを使っているテキストを表示させた時、表示のカクつきを低減させたい。
font-display 属性を指定する。
font-display: block;参考サイト：
【CSS】スタイルがリセットされたページで文字の折り返しを設定する方法
【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.rsWSLの名前解決関連のエラーなので、以下のサイトから解決を試みる。
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構造化データを使うことを定義する。
- 説明している内容を定義する。
※ プロパティの順序は重要ではない。
※ プロパティと値のセットはカンマで区切られている。
※ 最後のプロパティセットにカンマをつけるとエラーになる。
参考サイト
【WordPress】is_paged() とは？
表示しているページが複数ページで構成されているページの時、そのページ番号が1よりも大きいかどうかを調べます。→ コンテンツの冒頭ページか否かを調べることができます。
2ページ以降の場合は true , 1ページ目であれば false を返します。
記述例
<?php is_paged(); ?>参考サイト
OGPとは？
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/
【WordPress】get_option(); とは？
get_option() は、optionsデータテーブルから名前を指定してオプションの値を取得する安全な方法。
<?php get_option( $option, $default ); ?>$option に指定できる値は、取得するオプション名。小文字のみ使える。
$option に値を指定して取得できる情報には、サイトのタイトル、ブログ管理者のメールアドレス、日付のフォーマット、集のはじまり、1ページに表示する最大投稿数 等がある。（もっとある。）
$default に指定できる値は、データベースに該当するオプションがなかった時のデフォルト値。
2022年10月4週目（10/23 – 10/29）のトピックス
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 の引数はオブジェクトを与えることができる。オブジェクトを使いやすくするためにスプレッド構文を使うと便利。
【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
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 円 |
無料会員として使える機能も充実してますが、リッチなパララックス表現を使いたいなら Shockingly Green 会員 （21,627 円）をオススメします。
ゲームなど不特定多数のユーザーに提供するサービス等では Business Green 会員 になる必要がありそうです。
有料会員として使って良かった機能
| 実現できた表現 | |
| ScrollTrigger / ScrollSmoother | パララックス表現を含むスクロールアニメーション |
| SplitText | 文字を分割してアニメーションさせる |
その他、有料会員として試してみたい機能
- Draw SVG プラグイン
- Physics2D + PhysicsProos プラグイン
- ScrambleText プラグイン
- CustomBounce + CustomWiggle 機能
- MorphSVG（SVGのモーフィング変形）プラグイン
- Inertia（ブラウザで直接要素のドラッグアンドドロップさせる）プラグイン
- MotionPathHelper（ブラウザで直接モーションパスを編集する）機能
- GSDevTools 機能
参考サイト
GSAPをプロジェクトに導入する方法
GSAPをプロジェクトに埋め込むときの選択肢
- npm でパッケージとしてインストールして埋め込む。
- download してスクリプトを埋め込む。
- cdn で配信されているスクリプトを埋め込む。
- （github からクローンしてくる。）
- （CodePen から利用する。）
※ 1. npm でパッケージとしてインストールして埋め込む方法は、download / cdn では解決できない、ライブラリ同士の依存関係の問題を解決することができる。
※ 4. github からクローンしてくる。5. CodePenから利用する。については、プロジェクトに対して埋め込む方法ではなさそうですね。
参考サイト：
2022年10月2週目（10/ 9 – 10/15）のトピックス
10/14（金） KIW Tech Conf part 2 を開催。
CSS Modules
フロントエンド ロードマップ 2022
ベトナム タイグエン省
SPA もしくは MPA としてウェブアプリケーションをつくることが、モダンなウェブの開発をキャッチアップすることに繋がっている気がする。
VSCode拡張機能のおすすめが知りたい。
ScrollMagic
https://scrollmagic.io/
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 でWebGLを学ぶ（1）
WebGLは、canvas要素に描画する。canvas要素は javascript で操作すること。
Webでは今のところ、アニメーション処理を一括で管理することができるようなメソッドやオブジェクトが存在しないので、javascript を使って自分で実装する必要がある。
コンテキスト = 描画処理を行なうための API を実装したオブジェクトのこと。
webglコンテキストは3D描画処理を実装することができる。
webGLは、右手座標系。
3D描画は三次元空間をディスプレイ（二次元）に投影するために、座標変換をする必要がある。
座標変換には、モデル変換、ビュー変換、プロジェクション変換の3種類がある。
モデル変換は、三次元空間上の原点からモデルまでの位置についての座標変換。
ビュー変換は、三次元空間上のカメラの位置と向きについての座標変換。
プロジェクション変換は、三次元空間上のどの領域（幅、高さ、奥行き）を決める座標変換。
シェーダ = 座標変換を記述する仕組み。プログラマブルシェーダとも呼ばれる。
シェーダには、頂点シェーダとフラグメントシェーダの2種類があり、それらを自前で実装する必要がある。
頂点シェーダは、ポリゴンの頂点情報を扱う。バーテックスシェーダとも呼ばれる。
フラグメントシェーダは、描画される際のピクセル情報を扱う。
シェーダはHTMLソース内に記述することもできるが、外部ファイルから呼び出すこともできる。
参考サイト：
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をコマンド不要で簡単に使えるソフト NMKD Stable Diffusion GUI
Node.js 環境で TypeScript を実行させてみた（Windows11）
1. npm init する。
作業用のフォルダを用意し、PowerShell で、作業用フォルダへ移動する。
作業用フォルダで npm init する。
npm initpackage.json ファイルが生成される。
2. TypeScript をインストールする。
npm install typescriptnode_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 にプロジェクトを作る方法
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年最新]
Windows11でのスクリーンショットの方法
新端末が届いた！
前の端末は使う上での問題がいろいろあったんだけど、それをすべてマルっと解決できるような端末になっててうれしい！
アフターシックスジャンクションの「国産RPGクロニクル」というシリーズが面白い（spotify）
宮崎市長が決定
2022年（令和4）1月23日にに宮崎市長選挙が行われ、宮崎市長に清山 知憲 （きよやま・とものり）氏（40）が選出されました。
現職市長を擁護するつもりはないのですが、現職を批判して主張展開する人って自分自身にビジョンがない人だと思うんですよね。なのであまり好きではなかったのですが選出されたからには頑張っていただきたいです。
以下、2022年1月24日現在の 清山 知憲 氏の選挙公約です。
政策（公約）
https://kiyoyama.org/
2021年11月16日 発表
〇 命を守り、経済を活かす新型コロナ対策
– 医師としての経験を活かし、ワクチン接種率向上と加速化、PCR検査の自己負担を減らし、経済への影響を軽減します。
– 市保健所での感染症エキスパートの育成に取り組み、市内の事業所の感染対策を
〇 市長給与30%カット!
– 宮崎市役所が前向きな組織に生まれ変わるため、そしてコロナ禍による市民の痛みに寄り添うため、少なくとも2年間、かつ自粛を要請することがなくなるまで現在行われていない市長の給与を30%カットします。
〇 成長する宮崎経済へ
– 「県・市連絡会議」を設け、住吉バイパス完成やインフラ整備に向けた国への働きかけ強化、スポーツ環境の整備、民間主体の賑わい創出に取り組みます。
– ふるさと納税を5億から30億円以上へ増やし、稼ぐ市役所を目指します。
– 農畜水産物の販路拡大、6次産業化を推進し、生産者の所得向上を図ります。
〇 女性活躍・子育ての充実
– 女性の社会参加と地位向上へ向けた取り組みを強化します。
– 子宮頸がんワクチンの適正な情報発信と高校2・3年生への独自助成を検討します。（年間約3,000人の女性が死亡、WHOも推奨）
– 働き方改革を通して、先生たちが本来の教育に割ける時間を増やします。
– 子どものSOSへ対応するため、市立児童相談所の設置を本格検討します。
〇 ムダ撲滅プロジェクト
– アリーナ構想はすぐに廃止します。
– 市庁舎の建替えエリアはいったん白紙に戻し、コストや市役所のあり方から検討し直します。
– コロナ禍を機に会議や行事のあり方を含めた市役所職員の業務を徹底的に見直し、
宮崎市市長選挙
選挙投票日
2022-01-23
市長の任期（宮崎に限らず）
4年
現職の市長
戸敷 正（2014年から2期務める）
宮崎市長の候補者
- 戸敷正（現職・保守系・無所属）
- 清山知憲（元県議で医師・保守系・無所属）
- 斉藤了介（市議・保守系・無所属）
- 大村嘉一郎（元市議で保護司・保守系・無所属）
各候補者の主張
- 戸敷正（調査中）
- 清山知憲（調査中）
- 斉藤了介（調査中）
- 大村嘉一郎（調査中）
各候補者の支援団体
- 戸敷正（調査中）
- 清山知憲（調査中）
- 斉藤了介（調査中）
- 大村嘉一（調査中）
明けましておめでとうございます！
.mapファイルって何？
SassやTypeScriptといった拡張メタ言語からコンパイルされて難読化されたJavascriptやcssを、元のJavascriptやcssと関連付けるためのファイル。
コンパイルすることで圧縮されたり難読化されているファイルはデバッグ等が難しくなっているため、このファイルがソースファイルの解釈を補助します。
教えてくれたサイト
お酒に弱い人が美味しくお酒を飲むための傾向と対策
飲み過ぎると吐いてしまうのが本当にイヤだ。
お酒を初めて口にした大学生の頃からのずっと付きまとっている悩みのひとつが飲酒に伴う嘔吐だ。
- 吐くと気持ち悪い。
- 吐けないのに身体が吐こうとして気持ちが悪い。
- トイレに籠ってしまい、他の人に心配をかけてしまう。
- 吐くと歯のエナメル質が溶けると聞いた。
- 吐くと目が血走って、涙が出て、気持ち悪い顔になるのが嫌だ。
嘔吐の原因
アルコールは胃で約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のセキュリティが気になる
ゲーミフィケーションが気になる
教えてくれたサイト：
ゲーミフィケーションに期待すること：
- ゲームのように楽しくタスクを進めることができる。
- ゲームのように達成感を持つことができる。