GA4から取得したデータをmicroCMSに送信して、人気記事ランキングを実装する
Next.jsとmicroCMSで作ったサイトに、GA4の表示回数をもとにした人気記事ランキングを表示します。Google Cloudのサービスアカウントの準備から、microCMSへの送信、Vercel Cron Jobsでの定期実行、ページへの出力までを解説します。
記事一覧
2026年 20件
macOSにGitをインストールする
Homebrewを使って、macOSに新しいバージョンのGitをインストールする方法です。Macに標準で入っているGitとの見分け方と、HomebrewのGitが使われるようにパスを通す手順も解説します。
macOSにHomebrewをインストールする
macOSのパッケージマネージャーHomebrewのインストール方法です。インストール済みかを確かめる方法から、インストール後にパスを通す手順、動作確認までを解説します。
HHKBでDIPスイッチを触らずにモードを切り替える
HHKB Professional HYBRIDで、WindowsとmacOSのモードをショートカットキーで切り替える方法です。本体背面のDIPスイッチを触らずに切り替えられます。
XcodeでSwiftのプロジェクトを作成する
Xcodeで新しいプロジェクトを作成する手順です。テンプレートの選び方と、Product NameやInterface、Storageなど作成時に設定する項目の意味、Gitリポジトリの作成についても解説します。
SVGアイコンをsymbolで定義してuseで呼び出しまくる
SVGアイコンをsymbolで定義し、useで呼び出して使い回す方法です。imgタグやインラインSVGと比べた利点と、currentColorを使った色の指定、サイズの調整方法も紹介します。
Google スプレッドシートで祝日を取得する
Google スプレッドシートに、内閣府が公開している祝日のCSVを読み込んで祝日リストを作る方法です。IMPORTDATA関数を使う方法と、Google Apps Scriptで毎月自動で更新する方法を紹介します。
Basic認証でログアウトする方法
Basic認証をかけたWebサイトで、ログアウトと再ログインをする方法です。URLのホスト名の前に文字を足してアクセスするだけで、認証ダイアログをもう一度表示できます。
Shopifyで開発ストアを構築する
Shopifyの環境構築で使う、開発ストアの作り方を説明します。Shopifyペイメントのテストモードでテスト決済をする設定と、テスト用のクレジットカード番号も記載しています。
ローカル環境にWordPressを構築できるLocalのインストール方法
ローカル環境にWordPressの検証環境を作るなら、Localを使うと簡単に構築できます。Localのダウンロードとインストール、WordPressのサイトを作るまでの手順を解説します。
- 急上昇
CSSだけでスムーススクロールを実装し、ヘッダーの高さ分だけ余白を確保する
ページ内リンクのスムーススクロールは、CSSのscroll-behaviorだけで実装できます。固定ヘッダーに見出しが隠れないようにするscroll-margin-topの使い方と、動きを減らす設定への配慮も紹介します。
GA4とSearch Consoleを連携する手順
Google アナリティクス 4（GA4）にGoogle Search Consoleをリンクする手順です。必要な権限、リンクの作成、リンクした後にSearch Consoleのレポートを表示する方法までを解説します。
GitHub ActionsでFTPサーバーに自動デプロイする
GitHub ActionsとFTP-Deploy-Actionを使って、pushしたファイルをFTPサーバーへ自動でアップロードする方法です。ワークフローの書き方と、FTPの接続情報をGitHubのSecretsに登録する手順を解説します。
Next.jsのサイトでSearch Consoleのインデックス登録をリクエストできなかった原因と対処
Next.js（App Router）のサイトで、Google Search Consoleのインデックス登録のリクエストが500番台のエラーになりました。原因は、useSearchParamsを使うコンポーネントをSuspenseで囲んでいなかったことでした。調べた手順と修正方法をまとめます。
CSSのカスケードレイヤー「@layer」の使い方
CSSのカスケードレイヤー（@layer）は、スタイルをレイヤーに分けて、どのレイヤーを優先するかを決められる機能です。レイヤーの作り方、順番の指定、@importでの読み込み、詳細度との関係を解説します。
text-decorationでマーカー（蛍光ペン風の下線）を引く方法
文字にマーカーを引くCSSを、linear-gradientを使う方法とtext-decorationを使う方法で比較します。text-decorationなら、線の太さと位置をpxで指定できます。Safariでの注意点も紹介します。
JavaScriptでCSSのカスタムプロパティを設定・取得する
JavaScriptでCSSのカスタムプロパティを扱うには、setProperty()で値をセットし、getComputedStyle()とgetPropertyValue()で値を取得します。Resize Observer APIで高さの変化に追従する方法も紹介します。
Intersection Observer APIを使ったスクロールアニメーション
スクロールに合わせて要素をフェードインさせる処理は、Intersection Observer APIを使うと、jQueryやプラグインなしで実装できます。1回だけ動かす書き方と、行きも帰りも動かす書き方を紹介します。
Google Search Consoleの初回設定手順
Google Search Consoleは、プロパティを追加してサイトの所有権を確認すると使い始められます。プロパティ タイプの選び方、DNSレコードやHTMLタグでの確認方法、サイトマップの送信までを解説します。
gulpでEJSをHTMLにコンパイルする環境を作る
テンプレートエンジンのEJSを、gulpでHTMLにコンパイルする環境の作り方です。パッケージのインストールからgulpfile.jsの書き方、JSONのデータの読み込みまでをまとめます。