Cover Image for 高品質なスロー静止画アニメーションプログラム(html カスタム要素)を作ってみた
NEXT.js
SvelteKit
WordPress
実験
animation
drawImage
requestAnimationFrame

静止画(主に写真を想定)がゆっくりと移動する落ち着いたアニメーションプログラム(html カスタム要素)を作ってみました。静止画(写真)を利用して、手軽にアニメーションできます。高品質な静止画(写真)を高品質なまま、『カクカクしないで滑らかに』アニメーションします。

More Stories

Cover Image for PageSpeed Insights で携帯パフォーマンススコアを満点 (100) にした

PageSpeed Insights で携帯パフォーマンススコアを満点 (100) にした

実験
AVIF
LCP
PageSpeed Insights
srcset
TBC

実験として PageSpeed Insights の携帯(スマホ)パフォーマンスを満点 (100) になるまでチューニングしたので、その作業内容について記事にしてみました。主に LCP と TBT について改善しています。少しでもパフォーマンスチューニングの参考になれば幸いです。

Cover Image for WordPress で Tailwind CSS を使う方法

WordPress で Tailwind CSS を使う方法

WordPress
Tailwind CSS

WordPress で Tailwind CSS を使う方法 3種類を具体的に説明しています。「Tailwind CDN を使う方法」「プラグインを使う方法」「Tailwind CLI を使う方法」の 3種類です。

Cover Image for Tailwind CSS でダークモードを実装してみた

Tailwind CSS でダークモードを実装してみた

NEXT.js
SvelteKit
Web草紙
Tailwind CSS

筆者の Blog サイトでダークモードを実装した紹介です。Next.js と SvelteKit での実装について説明しています。SvelteKit については、日本語の情報量が少ないようだったので筆者の実装についてざっと説明しています。

Cover Image for Svelte / SvelteKit で Font Awesome を使ってみる

Svelte / SvelteKit で Font Awesome を使ってみる

SvelteKit
Font Awesome
svelte-fa

Svelte/SvelteKit で Font Awesome を利用する方法を紹介します。svelte-fa パッケージを利用して実装してみました。結構簡単に実装できると思うのでお勧めです。

Cover Image for 機械翻訳 DeepL を使ってみた感想 – note に初投稿

機械翻訳 DeepL を使ってみた感想 – note に初投稿

Cloud
Web草紙
DeepL
機械翻訳

「SNS にアカウントを作成&記事を書いて筆者サイトを紹介すると、見に来てくれるものなのか?」と思い、実際に note に記事を投稿してみました。投稿した記事は、機械翻訳 DeepL を使ってみた感想、筆者の利用方法の紹介です。

Cover Image for Vercel のログを Axiom に送る設定手順

Vercel のログを Axiom に送る設定手順

Cloud
NEXT.js
Axiom
Logging

Vercel ホスティングサービスで稼働する Next.js アプリのログを Axiom に送る設定方法・手順を紹介しています。初めて設定する人や、英語ドキュメントが苦手な人の参考になればと記事にしました。

Cover Image for Vercel と Cloudflare の CDN キャッシュについて思うこと

Vercel と Cloudflare の CDN キャッシュについて思うこと

Cloud
NEXT.js
CDN
Cloudflare
Vercel

無料プラン前提の内容となりますが、Vercel と Cloudflare を実際に使ってみて、主に CDNキャッシュについて思ったことを記事にしています。キャッシュ Eviction(立ち退き)について簡単に説明しています。

Cover Image for 色褪せない名曲 – A masterpiece that will never fade away

色褪せない名曲 – A masterpiece that will never fade away

Music

名曲は色褪せません。筆者の好みと合わせて、多くの人に愛されている名曲をとりあえず3曲だけピックアップしました。吉田拓郎「全部だきしめて」。松原みき「真夜中のドア」。バリー・ホワイト「あふれる愛を」

Cover Image for Cloudflare を試す

Cloudflare を試す

NEXT.js
WordPress
CDN

無料枠の GCE に Next.js 14 と WordPress を詰め込んでみました。パフォーマンス改善のため、CDN に Cloudflare を利用して高速化してみた感想などを記事にしています。

Cover Image for Next.js でサイトを再構築

Next.js でサイトを再構築

NEXT.js
WordPress
GraphQL

WordPress をヘッドレスCMS にして Next.js でサイトを再構築しました。表示が速くなり、とても快適になりました。システム構成、GraphQL についての簡単な説明、メタディスクリプションの扱いなどにも触れています。

Cover Image for Next.js の Local Fonts は高パフォーマンス

Next.js の Local Fonts は高パフォーマンス

NEXT.js
WordPress
PageSpeed Insights
SEO

Next.js で作成したフロントアプリに、Local Fonts を適用することで携帯のパフォーマンス問題を解決した経緯を記事にしています。PageSpeed Insights で スコア 70台から 100 になりました。

Cover Image for ヴィーナス バケーション

ヴィーナス バケーション

Game
Web草紙
DOAXVV

筆者サイトのアイキャッチ画像で使用している、コーエーテクモさんの DOAXVV(ヴィーナス バケーション)の紹介です。ポートレート撮影が好きな方にお勧めのゲームです。ゲームキャラクターの著作権は「コーエーテクモゲームス」さんです。

Cover Image for WordPress に LiteSpeed Cache を利用して高速化を実現

WordPress に LiteSpeed Cache を利用して高速化を実現

Cloud
WordPress
LiteSpeed Cache
PageSpeed Insights
SEO
WP Super Cache

WordPress に LiteSpeed Cache プラグインを導入して、サイトの高速化を実現しました。その手順などをまとめた記事です。
PageSpeed Insights のパフォーマンススコアは満点に近いものになりました。

Cover Image for WordPress のカスタマイズ – お問い合わせフォーム編

WordPress のカスタマイズ – お問い合わせフォーム編

Cloud
WordPress
Contact Form 7
Google Forms

自分の WordPress サイトに、Google Forms を利用して「お問い合わせ」フォームを作成した時の覚え書きです。
良く使われている Contact Form 7 も試してみましたが、好みで Google Forms にしました。

Cover Image for WordPress のカスタマイズ – メール編

WordPress のカスタマイズ – メール編

WordPress
WP Mail SMTP
メール設定

WordPress のプラグイン WP MAIL SMTP を利用したメール設定の手順の覚え書きです。
設定時の、不達メール対処なども書いています。

Cover Image for MobaXterm は素晴らしい

MobaXterm は素晴らしい

Web草紙
MobaXterm
PuTTY
Tera Term

開発・検証環境で ssh 接続するために、久しぶりに Tera Term と PuTTY 最新版を DL して使ってみましたが、その流れで MobaXterm を使ってみました。
結論、MobaXterm は素晴らしい!

Cover Image for WordPress のカスタマイズ – 基本編

WordPress のカスタマイズ – 基本編

WordPress
Cocoon
Docker
https-portal
MariaDB

WordPress を構築したので、Cocoon テーマをインストールしました。
自分の好みに合わせて、ヘッダーなどの位置調整、背景画像の設定などを紹介しています。
その時のトラブルシューティングも解説しています。

Cover Image for 独自ドメインを取得するまで

独自ドメインを取得するまで

Web草紙
domain

少し悩んで独自ドメイン名を決め、実際に取得した時の覚え書き。執筆時点での「お名前.com」と「Xserver」のドメイン取得料金も比較。

Cover Image for Google Cloud 無料枠の Compute Engine で WordPress を立ち上げる

Google Cloud 無料枠の Compute Engine で WordPress を立ち上げる

Cloud
WordPress
Docker
https-portal
Let’s Encrypt

Google Cloud 無料枠の GCE を利用して WordPress を費用をかけずに構築する方法・手順を紹介します。
無料枠で GCE を作成し、docker compose を使用してサクッと WordPress をインストールします。
さらに、Let’s Encrypt で TLS 化します