[{"content":"","date":"2026年5月29日","externalUrl":null,"permalink":"/categories/","section":"Categories","summary":"","title":"Categories","type":"categories"},{"content":" はじめに # 外部のAPIなどから定期的にデータを取得（Fetch）し、Slackへ自動で通知する仕組みは、開発環境のアラート運用などで非常に便利です。\n今回は、 Google Apps Script（GAS） を使ってデータを取得し、Slack App（Incoming Webhook） 経由で通知する仕組みの構築手順をまとめます。\nコードに認証情報を直書きしないための 「スクリプトプロパティ」 や、毎日全自動で動かすための 「トリガー」 の設定、さらに「一人Slack」で確実にスマホを鳴らすための 全体メンション（\u0026lt;!channel\u0026gt;）の仕様 など、記載します。\n1. Slack側：Incoming Webhookの導入手順 # Slackのデスクトップアプリから直接「Incoming Webhooks」を検索して、通知用URLを発行する手順です。\nSlackアプリのサイドバーからApp画面を開く Slackの左サイドバーにある 「その他」 ＞ 「ツール」 ＞ 「App」 の順にクリックします、\nIncoming Webhookを検索する 検索窓に Incoming Webhook と入力して検索します。\nインストールしてアプリを開く 候補に出てくる「Incoming Webhook」の 「インストール」 ボタンを押し、切り替わった画面で 「アプリを開く」　\u0026gt; または設定 をクリックします。 Slackへの追加とチャンネル選択 ブラウザが自動的に立ち上がるので、「Slackに追加」 ボタンをクリックします。 その後、GASからの通知を流したい自分のチャンネル（例：#general など）を選択します。 インテグレーションの追加とURLコピー 「Incoming Webhook インテグレーションの追加」 をクリックすると、設定画面に切り替わります。画面内に 「Webhook URL」 が表示されるので、これをコピーしておきます（GAS側で使用します）。\n2. GAS側：シークレット変数の設定（スクリプトプロパティ） # 発行されたWebhook URLをコード内に直接貼り付けると、コードを公開・共有した際に流出するリスクがあります。GASには、安全に環境変数を管理できる 「スクリプトプロパティ」 という機能があるため、こちらに登録を行います。\n⚙️ 設定手順 # GASのエディタ画面を開きます。 左メニューにある 「プロジェクトの設定（歯車マーク）」 をクリック。 画面最下部までスクロールし、「スクリプトプロパティを編集」（または追加）をクリック。 以下の通りに入力し、「スクリプトプロパティを保存」 をクリックします。 プロパティ：SLACK_WEBHOOK_URL 値：先ほどコピーしたSlackのWebhook URL 3. GAS側：実装コードサンプル # エディタの「コード.gs」に以下のコードを貼り付けます。データ取得部分はダミーのエンドポイントにしているため、実際の環境に合わせてパース処理などを調整してください。\nfunction sendDataToSlack() { const targetUrl = \u0026#34;[https://api.example.com/data](https://api.example.com/data)\u0026#34;; try { const response = UrlFetchApp.fetch(targetUrl); const json = JSON.parse(response.getContentText()); // --- 一人Slack向けのシンプル通知設定 --- // 確実に通知を鳴らすために \u0026lt;!channel\u0026gt; を使用し、区切り線で装飾します。 let messageText = `\u0026lt;!channel\u0026gt; データの定期取得が完了しました！\\n\\n`; messageText += `━━━━━━━━━━━━━━━━━━━━━━━━\\n`; messageText += `📊 **取得結果**\\n`; messageText += `• ステータス: ${json.status}\\n`; messageText += `• 最新の値: ${json.value}\\n`; messageText += `━━━━━━━━━━━━━━━━━━━━━━━━`; // 先ほど設定したスクリプトプロパティからWebhook URLを取得 const webhookUrl = PropertiesService.getScriptProperties().getProperty(\u0026#39;SLACK_WEBHOOK_URL\u0026#39;); if (!webhookUrl) { console.error(\u0026#34;エラー: \u0026#39;SLACK_WEBHOOK_URL\u0026#39; が設定されていません。\u0026#34;); return; } // SlackへPOSTリクエストを送信 const payload = { \u0026#34;text\u0026#34;: messageText }; const options = { \u0026#34;method\u0026#34; : \u0026#34;post\u0026#34;, \u0026#34;contentType\u0026#34; : \u0026#34;application/json\u0026#34;, \u0026#34;payload\u0026#34; : JSON.stringify(payload) }; UrlFetchApp.fetch(webhookUrl, options); } catch (e) { console.error(\u0026#34;エラーが発生しました: \u0026#34; + e.toString()); } } 4. 🔥 ハマりポイント：Webhook経由の「@channel」は構文が違う # 一人用のSlackチャンネルに通知を送る際、確実にスマホを鳴らすために全体メンション（@channel）を仕込むのが最も手軽ですが、ここに仕様上の罠があります。\nコードの文字列内で、普通に @channel と記述してポストしても、Slack側では 「ただの文字列」として処理されてしまい、メンションとして機能しません。\n💡 解決策 # Webhook経由でSlackに特殊なメンションを認識させるには、以下のように 独自のタグ形式 で囲む必要があります。\n❌ 機能しない例: @channel データ取得完了 ⭕ 機能する例: \u0026lt;!channel\u0026gt; データ取得完了 @ の代わりに \u0026lt;!channel\u0026gt; （@here の場合は \u0026lt;!here\u0026gt;）と記述することで、Slack側が正しく解釈してプッシュ通知を飛ばしてくれるようになります。\n5. トリガーを設定して全自動で実行する # コードのテスト実行が成功し、Slackに通知が届くことを確認できたら、最後に トリガー（定期実行機能） を設定して完全自動化します。\nGASエディタの左メニューにある 「トリガー（時計マーク）」 をクリック。\n右下にある 「トリガーを追加」 ボタンをクリック。\n以下のように設定を行います。\n実行する関数を選択：sendDataToSlack 実行するデプロイを選択：Head イベントのソースを選択：時間主導型 時間ベースのトリガーのタイプを選択：日付ベースのタイマー 時刻を選択：午前7時〜8時 など、通知を受け取りたい時間帯を選択 右下の 「保存」 をクリックします。 ※初回保存時、Googleアカウントへのアクセス権限の承認を求められます。\n画面の指示に従って許可（詳細 ＞ 安全ではないページに移動 ＞ 許可）を出してください。\nこれで、PCを閉じていてもクラウド上でGASが自動実行され、指定した時間にSlackへ通知が届くようになります。\nまとめ # 複数人のチーム開発で \u0026lt;!channel\u0026gt; を多用すると通知ノイズになりますが、自分だけのアカウントでの「一人Slack」であれば、手軽にプッシュ通知をトリガーできるかと思います。\n環境変数（スクリプトプロパティ）による安全なURL管理と、GASの強力なトリガー機能を組み合わせれば、さまざまな自動監視システムが構築できるので、ぜひ活用してみてください。\n今回の構成程度でしたらGASもSlackも無料プランで使用可能です。\n","date":"2026年5月29日","externalUrl":null,"permalink":"/posts/gas-slack-incoming-webhook/","section":"ブログ","summary":"はじめに # 外部のAPIなどから定期的にデータを取得（Fetch）し、Slackへ自動で通知する仕組みは、開発環境のアラート運用などで非常に便利です。\n今回は、 Google Apps Script（GAS） を使ってデータを取得し、Slack App（Incoming Webhook） 経由で通知する仕組みの構築手順をまとめます。\n","title":"Google Apps Script（GAS）から一人Slackへ定期Webhook通知する仕組みの構築","type":"posts"},{"content":"個人的な振り返りや技術メモを中心に投稿しています。どなたかに少しでも役立てば嬉しいです。\n","date":"2026年5月29日","externalUrl":null,"permalink":"/","section":"inakacloud$ ls blog ｜ ITとガジェット検証ブログ","summary":"個人的な振り返りや技術メモを中心に投稿しています。どなたかに少しでも役立てば嬉しいです。\n","title":"inakacloud$ ls blog ｜ ITとガジェット検証ブログ","type":"page"},{"content":"","date":"2026年5月29日","externalUrl":null,"permalink":"/categories/it%E6%8A%80%E8%A1%93/","section":"Categories","summary":"","title":"IT技術","type":"categories"},{"content":"これまで書いた記事の一覧ページ\nAWSやOCI、クラウドインフラの構築、Web開発（Hugo/Cloudflare）の日々の試行錯誤や最新のアウトプット、役立つ情報が発信出来るように努めます。\n","date":"2026年5月29日","externalUrl":null,"permalink":"/posts/","section":"ブログ","summary":"これまで書いた記事の一覧ページ\nAWSやOCI、クラウドインフラの構築、Web開発（Hugo/Cloudflare）の日々の試行錯誤や最新のアウトプット、役立つ情報が発信出来るように努めます。\n","title":"ブログ","type":"posts"},{"content":"Googleアドセンスの審査を申請したものの、返ってきた結果は 「有用性の低いコンテンツ」 による却下。\nAIと壁打ちをすることで、客観的にサイトの構造を見直してみると、記事の内容が評価されない明確な原因が浮かび上がってきました。\n色々とHugoの機能やサブドメインの検証など、興味をもってやりたいことを試しまわったのが、きっと裏目に出たように分析しています笑。 不要なものは徹底的に取っ払っていきます。\n本記事では、当ブログがアドセンス合格に向けて実施する「5つの問題点の改善」と「大手術のタスク」を検証記録として公開します。 同じ悩みを抱えるブログ運営者の参考になれば幸いです。\n現状の5つの問題点と原因分析 # Googleのクローラー（AI）から見て、現在のサイトがどう評価されているかを客観的に整理した結果、以下の5つのノイズが本来の評価を邪魔していることが分かりました。\n1. 「大量のタグページ」による低品質ページの量産 # Hugoの仕様により、キーワードごとのタグページ（/tags/）が自動生成され、検索エンジンにインデックスされていました。\n原因: リンクが数件並んでいるだけで文章がない「中身の薄いページ」が大量に存在するため、AIから「価値の低いページを量産している」と判定されている可能性が高い。 2. 性質の違う「ツール類」の混在 # メインブログと同じドメイン内に、YouTubeリンクサイト、便利ツール、タイピングサイトなどが混在していました。サブドメインやメインドメイン内に。\n原因: これらはテキスト量が少なく、ブログとしての専門性を薄めるノイズ（減点対象）になっていたため、サブドメインの紐付けを解除して一旦、cloudflareの pages.dev へ完全移管・切り離しを行います。 3. 記事の細分化による「情報不足」 # メール設定などの解説記事が、ソフトやOSごとに細かく分かれすぎていました。\n原因: 1記事あたりの情報量が薄く、ユーザーの利便性を損ねているため、網羅性の高めるように1記事へと統合（マージ）します。 マージできそうな記事が多々あると思うので、見直します。 4. 証拠（一次情報）の不足とAI画像への依存 # サムネイルに生成AIの画像を使うのは良いものの、記事内の「実際の操作画面（スクリーンショット）」や「自分で撮影した製品写真」が不足していました。\n原因: 技術・ガジェット系において最も重要な「独自性と信頼性」が低いとみなされていると考えられそうなので、実体験の証拠を追加します。 スクリーンショットの記事へのリンクが面倒で横着していました。スクリプトで効率化できたのでそのうち記事にしたいです。\n5. 関連性のない動的広告の設置 # サイドバー等に、読者の履歴に合わせて動く楽天のモーションウィジェット等を設置していました。\n原因: 審査段階ではノイズになり、ページの読み込み速度（パフォーマンス）を低下させる原因にもなるため、一度すべて撤去します。 関連性のない無駄な広告がきっと悪影響になっている気がするので撤廃します。 アドセンス審査突破に向けたブログ大手術 ToDo # ■ ステップ1：ノイズの徹底削除と構造変更 # サイト内の不要な要素や、審査の足を引っ張る要素を真っ先に排除します。\n楽天モーションウィジェットの撤去 全ページから広告コードを完全に削除する タグの削除 ＆ インデックスの最適化 全記事のメタデータ（フロントマター）から tags を削除、またはテーマ設定で /tags/ を非表示にする カテゴリーから「備忘録」を削除 「備忘録」に属していた記事を「IT技術」や新しいカテゴリーへ移行する サブドメインの削除 ＆ タイピングサイトの削除 メインブログ側から、ツールサイトやタイピングサイトへのリンクを完全に消去する ヘッダーメニューの最適化 不要なリンクやメニューを削り、ナビゲーションをスリムにする ■ ステップ2：コンテンツの強化とマージ # バラバラで中身が薄くなっていた記事を統合し、一次情報になるようにリライトします。\nハローワールド記事のマージ 挨拶だけの記事は、統合する メールの記事マージ ソフト別・OS別に分かれていた記事を、1つの網羅的な解説記事へ統合する Cloudflareの記事にスクショ（実際の画面）を追加 実際の操作画面のスクリーンショットを挿入し、独自性を高める ガジェット記事に実際の写真を追加 Amazonリンクのある製品について、自分で撮影した写真とレビューをより追記する アバウト（自己紹介）ページの充実 技術的背景や、このブログの目的・専門性をシンプルに書き加える。保有資格も一応書いておく 全般的なリライト 各記事のテキスト量、読みやすさ、誤字脱字をチェックし、全体的なクオリティを底上げする ■ ステップ3：外部連携の整理と最終確認 # Google側に「サイトが変わったこと」を正しく伝えるための設定と、最後のバグチェック\nリンク切れ（404エラー）の確認 記事マージやサブドメイン削除に伴い、切れた内部リンクがないか確認する ※削除した古い記事のURLは、Hugoの aliases 機能でマージ先へリダイレクトさせる サーチコンソールからサブドメインを削除 サブドメイン側のアナリティクスコードを撤廃 新記事の追加 今回の改善プロセス（検証）、自作スクリプト解説（IT技術）など、一次情報記事を投入する まとめ：無駄を削ぎ落とした「ブログ」へ # 今回の修正作業は、単にアドセンスに合格するためだけではなく、サイトを訪れてくれる読者にとって　「本当に見やすく、信頼できる情報源」 にするための必要なプロセスです。\nまた、このカイゼン活動そのものを一次情報（リアルな体験談）として、記録・発信しようと思っています。\n余計なノイズをそぎ落とし、シンプルで強力な「完全な一次情報」が詰まったブログへと生まれ変わらせたいです。\nというか改めて振り返ってみると、余計なことをやりすぎてました。まぁそういうのも含めて勉強なので良い経験でしょう。\n","date":"2026年5月26日","externalUrl":null,"permalink":"/posts/adsense-improvement-start/","section":"ブログ","summary":"Googleアドセンスの審査を申請したものの、返ってきた結果は 「有用性の低いコンテンツ」 による却下。\nAIと壁打ちをすることで、客観的にサイトの構造を見直してみると、記事の内容が評価されない明確な原因が浮かび上がってきました。\n色々とHugoの機能やサブドメインの検証など、興味をもってやりたいことを試しまわったのが、きっと裏目に出たように分析しています笑。 不要なものは徹底的に取っ払っていきます。\n","title":"【有用性の低いコンテンツ対策】Googleアドセンス合格に向けてブログの大手術を始めます","type":"posts"},{"content":"","date":"2026年5月26日","externalUrl":null,"permalink":"/categories/%E6%A4%9C%E8%A8%BC%E8%A8%98%E9%8C%B2/","section":"Categories","summary":"","title":"検証・記録","type":"categories"},{"content":"最近は　Hugoのことをたくさん書いています。 Hugoでブログを書いていると、一番面倒なのが「画像」の扱いです。 スクショを撮って、WebPに変換して、適切な名前をつけて、Markdownにリンクを貼る……。\n面倒すぎて正直これまでやってきていませんでした。笑\nこのフローを自作のシェルスクリプトで自動化したのですが、そこでふと疑問が浮かびました。 「画像ファイル名を link1.webp みたいに連番にしても、SEO的に大丈夫なのだろうか？」\n今回は、その疑問を解消するために調べた「画像SEO」の核心である alt属性（代替テキスト） についてまとめます。\n1. 画像SEOの結論：ファイル名より『alt属性』が命 # Googleの画像検索エンジンは進化していますが、今でも最も頼りにしているのは画像に添えられたテキスト情報です。\nよく「画像ファイル名は iphone-setting.jpg のように内容がわかる名前にすべき」と言われます。確かにそれは正しいのですが、実はそれ以上に重要なのが Markdownの ![ ] の部分、つまり alt属性（代替テキスト） です。\n画像リンクは下記みたいに記事内に書きます。\n![これはテスト画像です。Macのデスクトップ画像](画像リンクパス) alt属性（altテキスト）の役割 # Googleへの内容通知: ロボットに画像の内容を教える。 アクセシビリティ: 視覚障害の方が使うスクリーンリーダーで読み上げられる。 エラー時の代用: 通信環境が悪く画像が表示されないとき、代わりにこの文字が表示される。 つまり、ファイル名が link1.webp のような簡素なものであっても、alt属性が適切に書かれていれば、SEO上の大きなマイナスにはなりません。 AIに聞いた内容なので、誤っていたらすみませんですが。。\n2. 実践：効果的な alt属性 の書き方 # 「alt属性には何を書けばいいのか？」と迷ったら、 「電話で相手に画像の内容を説明するならどう言うか」 を基準にするのがおすすめらしいです。Byジェミさん\n悪い例 # ![画像1] （何のことかわからない） ![スクショ] （情報の価値がない） ![Python GAS Hugo ブログ 自動化 効率化] （キーワードの詰め込みすぎはスパム判定の元） 良い例 # ![VS CodeでPythonのデバッグ実行を開始した画面] ![M2 MacBook Air の外観（ミッドナイトカラー）] ![シェルスクリプトによるファイル名一括変換の実行結果] ポイント： 画像がなくても、その場所で何が説明されているか理解できるテキストを目指しましょう。\n3. Hugoテンプレートで意識すべきSEO項目 # 今回使用しているFront Matter（記事冒頭の設定）にも、SEOに直結する重要なポイントがいくつかあります。\ndescription（ディスクリプション） # 検索結果のタイトルの下に表示される説明文です。 テンプレートの description をdecription に恥ずかしながらタイポしていました。全部直さないと・・・ ここを丁寧に書くと、検索結果からのクリック率（CTR）が劇的に変わるようです。\nurl（パーマリンク） # url: posts/my-article/ のように、記事の内容が推測できる英語のURLを設定するのがGoogle推奨です。 後からURLを変えると検索エンジンの評価がリセットされてしまうので、記事作成時にしっかり決めるのがコツのようです。\n4. 他にも知っておきたいSEOの豆知識 # 画像とテンプレート以外で、最低限これだけは守りたいポイントです。\n見出しの階層を守る: ## (H2) の次は ### (H3) を使います。いきなり #### (H4) に飛ばさないようにしましょう。Googleは文書の構造を見ています。 内部リンクを貼る: 過去に書いた自分の記事へリンクを貼ると、Googleのクローラーがサイト内を巡回しやすくなり、サイト全体の評価が上がりやすくなります。 まとめ # 「自動化で効率を上げつつ、抑えるべきSEOのポイント（特にalt属性）はしっかり抑える」。 これが個人開発者が技術ブログを楽しく、かつ多くの人に届けるための近道だと感じました。\nHugoを使われている方は少ない気もしますが、WordPressのようなCMSでも同様に大切な設定かと思います。 皆さんも ![ ] の中身、今日から少しだけこだわってみませんか？私も横着せずに画像リンク作ってみようかと思います。\n補足　Hugoでの画像リンク作成のスクリプト化 # 画像を確認して、ポチポチリンクを作って・・・ってやるのがとても面倒だったので、 スクリプト化しました。\nwebpファイルをHugoの記事（index.md）にリンクとして貼り出します。\nブログ画像をwebp変換する！スクリプトで効率化（Hugoブログ） · inakacloud inakacloud.com 上記の記事で、pngファイルをwebpに変換するスクリプトを紹介しています。 自分は、上記の変換スクリプトでwebpにしたのちに、Hugoへの画像リンクを貼り付けるスクリプトを実行しています。\n内容は下記みたいに作っています。\n#!/bin/bash DEFAULT_DIR=\u0026#34;content/posts\u0026#34; # 1. 第一引数のチェック if [ -z \u0026#34;$1\u0026#34; ]; then echo \u0026#34;エラー: フォルダ名を指定してください。\u0026#34; exit 1 fi TARGET_DIR=\u0026#34;$DEFAULT_DIR/$1\u0026#34; # 2. フォルダへ移動 if [ ! -d \u0026#34;$TARGET_DIR\u0026#34; ]; then echo \u0026#34;エラー: フォルダ \u0026#39;$TARGET_DIR\u0026#39; が見つかりません。\u0026#34; exit 1 fi cd \u0026#34;$TARGET_DIR\u0026#34; || exit # 3. index.md の存在確認（なければ終了） if [ ! -f index.md ]; then echo \u0026#34;エラー: index.md が見つかりません。処理を終了します。\u0026#34; exit 1 fi echo \u0026#34;処理開始: $(pwd)\u0026#34; # 4. 画像のリネームとリンク追記 i=1 # 追記前に空行を1つ入れる echo \u0026#34;\u0026#34; \u0026gt;\u0026gt; index.md # フォルダ内の webp ファイルをループ for f in *.webp; do # ファイルが存在しない場合はスキップ [ -e \u0026#34;$f\u0026#34; ] || continue # featured.webp はリネームもリンク追記もせずスキップ if [ \u0026#34;$f\u0026#34; = \u0026#34;featured.webp\u0026#34; ]; then continue fi NEW_NAME=\u0026#34;link${i}.webp\u0026#34; # ファイル名を変更（現在の名前と新しい名前が異なる場合のみ実行） if [ \u0026#34;$f\u0026#34; != \u0026#34;$NEW_NAME\u0026#34; ]; then mv \u0026#34;$f\u0026#34; \u0026#34;$NEW_NAME\u0026#34; echo \u0026#34;Renamed: $f -\u0026gt; $NEW_NAME\u0026#34; fi # index.md にリンクを追記 echo \u0026#34;![]($NEW_NAME)\u0026#34; \u0026gt;\u0026gt; index.md echo \u0026#34;\u0026#34; \u0026gt;\u0026gt; index.md i=$((i + 1)) done if [ $i -eq 1 ]; then echo \u0026#34;対象となるWebP画像（featured.webp以外）が見つかりませんでした。\u0026#34; else echo \u0026#34;✅ 完了: $((i - 1)) 個の画像を処理しました。\u0026#34; fi 実行は下記みたいな感じで行います。フォルダ内のwebpを画像リンクとして貼り出します。\n# 実行権限を付与 chmod +x add_gazo_link.sh # 実行はフォルダ名を引数として指定します ./add_gazo_link.sh [フォルダ名] ","date":"2026年5月22日","externalUrl":null,"permalink":"/posts/hugo-image-seo/","section":"ブログ","summary":"最近は　Hugoのことをたくさん書いています。 Hugoでブログを書いていると、一番面倒なのが「画像」の扱いです。 スクショを撮って、WebPに変換して、適切な名前をつけて、Markdownにリンクを貼る……。\n面倒すぎて正直これまでやってきていませんでした。笑\nこのフローを自作のシェルスクリプトで自動化したのですが、そこでふと疑問が浮かびました。 「画像ファイル名を link1.webp みたいに連番にしても、SEO的に大丈夫なのだろうか？」\n","title":"意外と知らない『画像SEO』の基本。Hugoの画像運用を自動化する","type":"posts"},{"content":" はじめに # iPhoneでネットサーフィンをしていると、ついついやってしまうのが 「タブの放置」。 「気づいたらタブが100個以上も開いていた…」なんて経験された人は、自分だけではないですよね？\nタブが溜まりすぎると動作が重くなる原因にもなりますし、何より見づらいですよね。\niPhoneのショートカットで実装しようかと思って調べましたが、 iPhoneのSafariには、 開いたままのタブを一定期間が経過した後に自動的に閉じてくれる便利な設定 が標準機能であります。一度設定しておくだけで、勝手にタブを整理してくれるのでおすすめです！\nSafariのタブを自動で閉じる設定手順 # 設定はとても簡単です。以下の手順で進めます。\niPhoneの 「設定」 \u0026gt; 「アプリ」 を開く。 下へスクロールして 「Safari」 をタップ。 「タブ」の項目にある 「タブを閉じる」 をタップ。 期間を以下の3つから選択します。 1日後 1週間後 1か月後 💡 ポイント これで、最後にそのタブを見てから指定した期間が経過すると、バックグラウンドで自動的にタブが閉じられるようになります。「手動」に設定されている方は、ぜひ「1週間後」や「1か月後」に変えてみてください。私は「１日」で設定しています。\nその他の便利な「タブ管理」テクニック # もし「自動で消えるのを待たずに、今すぐ一気に消したい！」という場合は、以下の方法を使うと一瞬で整理できます。\n開いているタブをすべて一括で閉じる # Safariを開きます。 右下の ⋯マーク から「すべてのタブ」をタップ、 チェックマークアイコン（四角が2つ重なったマーク）を「長押し」 します。 ポップアップが表示されるので、赤い文字の 「〇個のタブをすべて閉じる」 をタップ。 これだけで、たまっていたタブを一瞬ですべて消去できます。\nGoogle Chromeを使っている場合は？ # 残念ながら、2026年現在のiPhone版（iOS版）Google Chromeには、Safariのような「一定期間後に自動で閉じる」という標準機能はありません。\nChromeでタブを整理したい場合は、定期的に手動で整理する必要があります。メインブラウザをすっきり保ちたいなら、この自動閉じる機能がある「Safari」を使うのが一歩リードといったところでしょうか。\nまとめ # iPhoneのSafariをお使いであれば、最初にご紹介した自動削除の設定をしておくだけで、「気づいたらタブが限界までたまっていた」という状態を未然に防げますので、オススメです。\n","date":"2026年5月17日","externalUrl":null,"permalink":"/posts/iphone-safari-tab-auto-close/","section":"ブログ","summary":"はじめに # iPhoneでネットサーフィンをしていると、ついついやってしまうのが 「タブの放置」。 「気づいたらタブが100個以上も開いていた…」なんて経験された人は、自分だけではないですよね？\nタブが溜まりすぎると動作が重くなる原因にもなりますし、何より見づらいですよね。\n","title":"【iPhone】Safariのタブを自動で閉じる設定方法！たまりがちなタブをすっきり整理","type":"posts"},{"content":"","date":"2026年5月17日","externalUrl":null,"permalink":"/categories/%E3%82%AC%E3%82%B8%E3%82%A7%E3%83%83%E3%83%88/","section":"Categories","summary":"","title":"ガジェット","type":"categories"},{"content":" はじめに # HugoのテーマBlowfishを使っていて、コードブロック（シンタックスハイライト）のスタイルが見えづらかったのでカスタマイズしたのですが、一部の文字が背景色と同化して黒く潰れて見えなくなってしまったりしました。\n今回は、Blowfishテーマでデフォルトのスタイルをきれいにリセットし、自分好みのカラー（GitHub風やその他のテーマ）に安全にカスタマイズする方法について記載します。といってもBlowfishの公式ドキュメントに書いてある内容ですが。\n1. Blowfish公式推奨：Chromaテーマを丸ごと変更する手順 # Blowfishには、Hugoの標準シンタックスハイライターである「Chroma」のスタイルを柔軟に変更する仕組みが用意されています。\nライトモードとダークモードでそれぞれ異なるハイライトテーマを適用したい場合は、以下の手順に沿って設定を行います。\nステップ1：デフォルトのスタイルをクリアする # まずは assets/css/custom.css を作成（または既存のものを編集）し、以下の内容を追加してデフォルトのChromaスタイルをリセットします。\n.chroma, .chroma *, .chroma:is(.dark *), .chroma:is(.dark *) * { color: unset; font-weight: unset; font-style: unset; } これにより、テーマ側が持っている標準のハイライト色が一度クリアされます。\nステップ2：コマンドで新しいChromaスタイルを書き出す # 次に、Hugoの hugo gen chromastyles コマンドを使用して、好みのテーマスタイルを custom.css に直接追記します。\nお使いのOS（環境）に合わせて、以下のコマンドをプロジェクトのルートディレクトリで実行します。\nMac / Linux の場合（ターミナル） # # ライトモード用（例: emacs） (echo \u0026#39;html:not(.dark) {\u0026#39;; hugo gen chromastyles --style=emacs; echo \u0026#39;}\u0026#39;) \u0026gt;\u0026gt; assets/css/custom.css # ダークモード用（例: evergarden） (echo \u0026#39;html.dark {\u0026#39;; hugo gen chromastyles --style=evergarden; echo \u0026#39;}\u0026#39;) \u0026gt;\u0026gt; assets/css/custom.css Windows の場合（PowerShell） # @(\u0026#34;html:not(.dark) {\u0026#34;; (hugo gen chromastyles --style=emacs); \u0026#34;}\u0026#34;) | Add-Content -Path \u0026#34;assets/css/custom.css\u0026#34; @(\u0026#34;html.dark {\u0026#34;; (hugo gen chromastyles --style=evergarden); \u0026#34;}\u0026#34;) | Add-Content -Path \u0026#34;assets/css/custom.css\u0026#34; 2. まとめ：自分好みのスタイルを見つけよう # 上記のコマンド例では、ライトモードに emacs、ダークモードに evergarden を指定していますが、Hugoがサポートしているスタイルであればどれでも自由に組み合わせが可能です。\nすべての利用可能なChromaスタイルや見た目のサンプルは、Hugoの公式ドキュメントで確認できます。ブログの雰囲気に合わせた最適な配色を見つけて、読みやすい記事を作ってみてください！\n本ブログでは以下の設定にしてみました。\n# ライトモード用に github-dark (echo \u0026#39;html:not(.dark) {\u0026#39;; hugo gen chromastyles --style=github-dark; echo \u0026#39;}\u0026#39;) \u0026gt;\u0026gt; assets/css/custom.css # ダークモード用に witchhazel を適用 (echo \u0026#39;html.dark {\u0026#39;; hugo gen chromastyles --style=witchhazel; echo \u0026#39;}\u0026#39;) \u0026gt;\u0026gt; assets/css/custom.css 参考リンク # Blowfish Advanced Customisation Hugo Syntax Highlighting Styles Hugo Quick Reference - Syntax Highlighting Styles ","date":"2026年5月16日","externalUrl":null,"permalink":"/posts/hugo-blowfish-syntax-highlight/","section":"ブログ","summary":"はじめに # HugoのテーマBlowfishを使っていて、コードブロック（シンタックスハイライト）のスタイルが見えづらかったのでカスタマイズしたのですが、一部の文字が背景色と同化して黒く潰れて見えなくなってしまったりしました。\n今回は、Blowfishテーマでデフォルトのスタイルをきれいにリセットし、自分好みのカラー（GitHub風やその他のテーマ）に安全にカスタマイズする方法について記載します。といってもBlowfishの公式ドキュメントに書いてある内容ですが。\n","title":"Hugo Blowfishでコードブロックのシンタックスハイライトをカスタマイズする","type":"posts"},{"content":" はじめに # 既存のサイト（例: inakacloud.com）のドメインを活かしたまま、特定のサブディレクトリ（例: /typing-toeic/）だけ別のプロジェクト（Cloudflare Pagesなど）を表示させたい場合があります。\nCloudflare Workersを使用すれば、複雑なサーバー設定なしで簡単にこのルーティングを実現できます。\n今回、以下にタイピングの練習サイトを作ってみました。Cloudflare Workersを使ってパスベースルーティングの設定をしましたので、備忘を残します。\n※　現在は外していますので、上記URLにアクセスしても404エラーになります。\n実現したい構成 # inakacloud.com/* → Hugoで作成したメインサイト（既存） inakacloud.com/typing-toeic/* → Cloudflare Pagesで作成したタイピングアプリ（新規） 1. Cloudflare Pages の準備 # まず、サブディレクトリで公開したいコンテンツを通常通り Pages にデプロイします。\nViteなどのビルドツールを使っている場合、Base URL をサブディレクトリ名に合わせます。\n// vite.config.ts の例 export default defineConfig({ base: \u0026#39;/typing-toeic/\u0026#39;, // ... }) 2. Cloudflare Workers によるプロキシ設定 # 新しい Worker を作成し、リクエストを Pages へ転送するコードを記述します。\nexport default { async fetch(request, env) { const url = new URL(request.url); const PAGES_URL = \u0026#34;https://your-project.pages.dev\u0026#34;; // Pagesのドメイン // `/typing-toeic` へのアクセスを `/typing-toeic/` へリダイレクト（スラッシュ補完） if (url.pathname === \u0026#39;/typing-toeic\u0026#39;) { return Response.redirect(request.url + \u0026#39;/\u0026#39;, 301); } if (url.pathname.startsWith(\u0026#39;/typing-toeic/\u0026#39;)) { // Pages側にはプレフィックスを除いたパスでリクエストを送る let path = url.pathname.replace(\u0026#39;/typing-toeic/\u0026#39;, \u0026#39;/\u0026#39;); if (path === \u0026#39;\u0026#39;) path = \u0026#39;/\u0026#39;; const targetUrl = new URL(path + url.search, PAGES_URL); let response = await fetch(targetUrl, request); // SPAフォールバック \u0026amp; 静的ファイルの404回避 if (response.status === 404 \u0026amp;\u0026amp; !url.pathname.endsWith(\u0026#39;.xml\u0026#39;) \u0026amp;\u0026amp; !url.pathname.endsWith(\u0026#39;.txt\u0026#39;)) { return fetch(new URL(\u0026#39;/index.html\u0026#39;, PAGES_URL), request); } return response; } // それ以外は通常通り（既存サイト）を表示 return fetch(request); }, }; 3. ルーティング（Routes）の設定 # 作成した Worker をドメインに紐付けます。\nCloudflareダッシュボードで ドメイン \u0026gt; 自分のドメイン を選択。 左メニューの Workers ルート をクリック。 ルートを追加 を選択。 ルート: example.com/typing-toeic* Worker: 上記で作成したプロキシ用Workerを選択 これで、サブディレクトリへのアクセス時のみ Worker が起動し、Pages のコンテンツを透過的に表示するようになります。\nまとめ # この方法を使えば、メインサイトのドメインパワーを維持したまま、特定のパスだけ最新のフロントエンドフレームワークで構築したアプリを共存させることができます。 Cloudflare Workersでは初めて実装してみましたが、設定も容易でした。サブドメインで運用するバージョンと効果を比較していきたいと思います。\n感想 # AWSでもCloudFrontで似たように設定できますが、Cloudflareはすごいです！自分くらいの利用なら無料でも十分事足りてしまいます。AWSだとランニングコスト結構かかるんですが、、、本当に便利になりましたね。\n","date":"2026年5月16日","externalUrl":null,"permalink":"/posts/cloudflare-workers-pages-subdirectory/","section":"ブログ","summary":"はじめに # 既存のサイト（例: inakacloud.com）のドメインを活かしたまま、特定のサブディレクトリ（例: /typing-toeic/）だけ別のプロジェクト（Cloudflare Pagesなど）を表示させたい場合があります。\n","title":"Cloudflare Workersで既存サイトのサブディレクトリにPagesを公開する","type":"posts"},{"content":" はじめに # Cloudflare Pagesでプロジェクトをデプロイした後、デフォルトの *.pages.dev ではなく、自分が所有しているドメインのサブドメインで公開したい場合のレポジトリ設定とDNS設定の手順をまとめました。\nサブドメインとは # [任意の文字列].inakacloud.comのように任意の文字列を設定できます。 本ブログでは、 Cloudflare regitarar でinakacloud.comドメイン取得しているので設定も簡単です。\n今回、自分の趣味の一つであるキーボードの紹介サイトをサブドメインで作成しました。\n※　現在は一旦公開停止しています。\n1. Cloudflare Pages プロジェクトから設定を開始 # 内容は割愛しますが、Cloudflare pagesでデプロイしアクセスできるようにしておきます。\nCloudflareのダッシュボードにログインし、対象のPagesプロジェクトを選択します。\n「カスタムドメイン」 タブをクリックします。 「カスタムドメインを設定」 ボタンを押します。 2. サブドメインの入力 # ドメイン名の入力欄に、作成したいサブドメイン（今回の例：keyquest.inakacloud.com）を入力します。\n入力後、「次へ」 をクリックします。\n3. DNSレコードの自動更新 # ドメインが同じCloudflareアカウントで管理されている場合、設定は非常にスムーズです。\n「ドメインをアクティブ化」 （または「レコードを更新」）をクリックします。 Cloudflareが自動的にDNSへ CNAME レコードを追加してくれます。 タイプ: CNAME 名前: keyquest ターゲット: プロジェクト名.pages.dev 4. SSL/TLS証明書の反映を待つ # 設定を保存すると、Cloudflareが自動的にそのサブドメイン用のSSL証明書を発行します。\nステータスが 「アクティブ」 になれば完了です。 通常、数分〜十数分で サブドメインでのURLにアクセスできるようになります。 まとめ # Cloudflare Pagesは、同じアカウント内でドメインを管理していれば、ボタン数クリックでサブドメインの切り出しが完了します。DNSの伝播を待つ間に、サイトのリンク構造や BaseURL の設定が新しいサブドメインに対応しているか再確認しておきましょう。\n後日追記（20260526） # サブドメインでの公開を一旦停止しました。 Cloudflareからの公開解除は、ドメインを割り当てているWorkers \u0026amp; Pagesに移動し、サブドメイン右側の⋯から「ドメインを削除」をクリックします。該当サブドメインのCNAMEレコードも自動で削除されます。\n","date":"2026年5月13日","externalUrl":null,"permalink":"/posts/cloudflare-pages-subdomain-setup/","section":"ブログ","summary":"はじめに # Cloudflare Pagesでプロジェクトをデプロイした後、デフォルトの *.pages.dev ではなく、自分が所有しているドメインのサブドメインで公開したい場合のレポジトリ設定とDNS設定の手順をまとめました。\nサブドメインとは # [任意の文字列].inakacloud.comのように任意の文字列を設定できます。 本ブログでは、 Cloudflare regitarar でinakacloud.comドメイン取得しているので設定も簡単です。\n","title":"Cloudflare Pagesで独自ドメインのサブドメインを設定する","type":"posts"},{"content":" はじめに # 本ブログではHugoのテーマ Blowfish を使用しています。 Hugoで構築した静的サイト（SSG）のブログにコメント機能を導入するにあたり、いくつか候補を検討しましたが、最終的に Giscus を選択しました。\n検討の際、以下のツールが候補にありましたが、私の用途には合いませんでした。\nremark42: オープンソースでセルフホストできる優秀なツールですが、コメントデータ運用のために別途コンテナやサーバーを常時起動・管理する必要があるため、手軽さを重視して見送りました。 Disqus: 導入自体は非常に簡単ですが、外部サービスにコメントデータを預けることになる点や、無料プランで表示される煩わしい広告、トラッキングなどが気になり、候補から外しました。 Giscusであれば、GitHub Discussionsをバックエンドに利用するため自前でのサーバー管理が不要です。広告もなく、データもGitHub上で透明性高く管理できるため非常にクリーンな運用が可能です。唯一の注意点として、コメントを投稿する読者側もGitHubアカウントが必要になりますが、技術系のブログであれば親和性が高いと判断しました。そんなにコメント来ることもないでしょうし。\nなぜGiscusを選ぶのか：技術ブログに最適なメリット # 静的サイトジェネレーター（SSG）で構築したブログは、WordPressなどの動的サイトと違ってデータベースを持ちません。そのため、コメント欄を実装するには外部の仕組みを頼る必要があります。\n数あるコメントシステムの中でGiscusが際立っている理由は以下の通りです。\n完全無料かつオープンソース: 広告の非表示やデータ量による課金がありません。 GitHubによる安全な認証: スパムコメントの書き込みを防止できます。 テーマに合わせた外観カスタマイズ: ライトモードやダークモードへの切り替えにネイティブで対応しています。 GitHub通知の活用: 読者からコメントがついた際、使い慣れたGitHubの通知機能でリアルタイムに検知できます。 1. GitHub リポジトリの準備 # GiscusはGitHub DiscussionsのAPIを利用してコメントを読み書きするため、ホストしているリポジトリが以下の条件を満たしている必要があります。\nリポジトリを「Public」にする: 一般の読者がコメントを閲覧・書き込みできるようにするため、公開リポジトリである必要があります。 GitHub Discussions を有効化*: リポジトリの Settings \u0026gt; General \u0026gt; Features セクションにある Discussions にチェックを入れます。 giscus app をインストール: giscus app にアクセスし、リポジトリへのアクセスを許可しておきます。 2. Giscus スクリプトの取得 # 環境が整ったら、Giscus公式サイトにアクセスしてブログに埋め込むための専用コードを生成します。\n参考ページ: giscus.app giscus.appのページにアクセスし、画面の指示に従って設定したいパラメータ（リポジトリ名、Discussionsのカテゴリー、テーマなど）を選択・入力していきます。 設定をすべて埋めると、画面最下部に以下のような構成の script タグ一式 が自動生成されるので、これをクリップボードにコピーしておきます。 3. Blowfishテーマでの実装（comments.html の作成） # HugoのBlowfishテーマでは、独自のコメント用レイアウトファイルである layouts/partials/comments.html を配置することで、テーマ側のコードを汚さずにコメント機能をオーバーライド（上書き実装）できます。\nプロジェクトルートにある layouts/partials/ ディレクトリへ移動します。（ディレクトリが存在しない場合は新規作成します） comments.html という名前のファイルを新規作成します。 先ほど「2.」の工程でGiscus公式サイトから取得したスクリプトコードを、そのままファイル内に貼り付けて保存します。 Blowfishテーマは、記事のメタデータ（Front Matter）に特定のフラグが立っている場合、この comments.html を自動的に記事の末尾へとレンダリングしてくれる仕組みになっています。\n4. 記事の Front Matter を設定 # コメント欄を表示させたい記事の Markdown ファイル（.md）を開き、冒頭のメタデータ（Front Matter）へ showComments: true を追記します。\n設定例 --- title: hoge showComments: true --- 逆に、特定の告知記事や固定ページなど、コメントを受け付けたくないページでは showComments: false に設定するか、行ごと削除すればコメント欄は非表示になります。\n5. ローカルでの動作確認とデプロイ # 設定が完了したら、ローカル環境で表示を確認します。\n# ローカルサーバー起動 hugo server ブラウザで該当の記事を開き、記事の最下部にGitHubサインインボタン付きのコメント欄が表示されていれば実装完了です。\n実際にテストコメントを書き込んでみると、連携したGitHubリポジトリの「Discussions」タブ内に対象のディスカッションが自動生成され、コメントが同期されていることが確認できます。\n公式ドキュメント（参考） # より詳細なカスタマイズや詳細な仕様については、以下の公式ガイドを参照してください。\ngiscus 公式サイト・構成ツール Blowfish テーマ公式ドキュメント - Comments 設定 ","date":"2026年5月12日","externalUrl":null,"permalink":"/posts/hugo-blowfish-giscus/","section":"ブログ","summary":"はじめに # 本ブログではHugoのテーマ Blowfish を使用しています。 Hugoで構築した静的サイト（SSG）のブログにコメント機能を導入するにあたり、いくつか候補を検討しましたが、最終的に Giscus を選択しました。\n検討の際、以下のツールが候補にありましたが、私の用途には合いませんでした。\n","title":"SSGのブログにコメント欄を実装する。Hugo BlowfishにGiscus導入","type":"posts"},{"content":" PR表記 はじめに # HugoのBlowfishテーマで、Amazonアソシエイトなどの広告リンクを貼る際に必要となる「PR表記（ステマ規制対策）」を実装しました。\nBlowfishのレイアウト内のsingle.html を適切に編集することで、デザインを維持したまま実装可能です。\nこちらの記事の冒頭に書いているようなPR表記が可能になります。\n見る人もなかなかいない気がしますが、メモとして残しておきます。\n実装方法 # 1. layouts/_default/single.html の編集 # プロジェクトルートの layouts/_default/single.html （なければテーマフォルダからコピー）の {{ define \u0026quot;main\u0026quot; }} 内、header タグの中に以下の条件分岐を追加します。\n{{ if .Params.pr }} \u0026lt;div style=\u0026#34;font-size: 0.8rem; color: #71717a; margin-bottom: 1rem; display: flex; align-items: center;\u0026#34;\u0026gt; \u0026lt;span style=\u0026#34;border: 1px solid #71717a; padding: 0px 6px; border-radius: 4px; margin-right: 8px; font-weight: bold; font-size: 0.7rem;\u0026#34;\u0026gt;PR\u0026lt;/span\u0026gt; \u0026lt;span\u0026gt;本ページはプロモーションが含まれています\u0026lt;/span\u0026gt; \u0026lt;/div\u0026gt; {{ end }} 2. 記事のFront Matterで有効化 # PR表記を出したい記事の冒頭に pr: true を追記するだけでOKです。\n--- title: hoge pr: true # こんなカンジで記載 --- PR表記　まとめ # これでBlowfishのレイアウトを維持したまま、PR表記を出すことができるようになりました。\n60分でわかる！　改正　景品表示法　超入門 Amazonで見る Amazon.co.jp で詳細を見る 楽天アフィリエイト はじめに # 当ブログに楽天アフィリエイトを導入しました。（合わなかったので今は取っ払っています。）\nHugoのBlowfishテーマを使っている場合、意外と「サイドバーの編集場所」で迷ったので、実際に行ったカスタマイズ手順をまとめておきます。\n1. 楽天アフィリエイトでコードを取得 # まずは楽天アフィリエイトの管理画面から「モーションウィジェット」を作成します。 今回はサイドバーの幅に合わせて、サイズを 200x350 に設定しました。\n2. テンプレートのカスタマイズ # Blowfishテーマでサイドバーに目次が表示可能です。記事ページの右側に表示される目次テンプレート（toc.html）を拡張してヴィジットを配置することにしました。\ntoc.html のコピー # まずはテーマの元ファイルを、自分のプロジェクト側にコピーして編集可能な状態にします。\ncp themes/blowfish/layouts/partials/toc.html layouts/partials/toc.html コードの挿入 # コピーした layouts/partials/toc.html の最初の \u0026lt;/details\u0026gt; タグ（PC用目次の終わり）の直後に、以下のコードを挿入しました。\n\u0026lt;!-- 広告エリア：PC表示時のみ目次の下に表示 --\u0026gt; \u0026lt;div class=\u0026#34;rakuten-sidebar-widget mt-6 hidden lg:block text-center\u0026#34;\u0026gt; \u0026lt;p class=\u0026#34;text-[0.65rem] tracking-widest text-neutral-400 mb-2 uppercase\u0026#34;\u0026gt; 広告 \u0026lt;/p\u0026gt; \u0026lt;div class=\u0026#34;flex justify-center items-center\u0026#34;\u0026gt; \u0026lt;!-- ここに取得した楽天ヴィジットのスクリプトを貼り付け --\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; hidden lg:block を使うことで 「スマホでは非表示、PCの時だけサイドバーに出る」 ように制御しています。\n3. ステマ規制（景品表示法）への対応 # 2023年10月からのステマ規制に伴って各種表示が必要になったようです。今回以下の2点を実施しました。\nPR表記の追加: 広告の直上に「広告」の文字を配置。 プライバシーポリシーの更新: 楽天アフィリエイトがCookieを使用して広告を配信している旨を追記。 4. 楽天アフィリエイトを導入してみた感想 # Blowfishのデザインを崩さずに広告を配置するのに少し苦労しましたが、一度設定してしまえばあとはHugoが自動ですべての記事に適用してくれます。\n少しサイトが賑やかになった気がします。しばらく様子を見てみたいと思います。\n20260526追記　合わないのでやめました笑\n参考リンク:\n楽天アフィリエイト Hugo Blowfish Documentation ","date":"2026年5月9日","externalUrl":null,"permalink":"/posts/hugo-blowfish-pr-label/","section":"ブログ","summary":"PR表記 はじめに # HugoのBlowfishテーマで、Amazonアソシエイトなどの広告リンクを貼る際に必要となる「PR表記（ステマ規制対策）」を実装しました。\nBlowfishのレイアウト内のsingle.html を適切に編集することで、デザインを維持したまま実装可能です。\n","title":"Hugo Blowfishテーマに「PR表記」を実装　| サイドバーに楽天アフィリエイト表示を実装","type":"posts"},{"content":"流行りのZennで執筆できるように環境を整えてみました。\nGitHub連携（Git管理）することで、ソースをプッシュするとZennに自動デプロイされて便利です。 普段の開発フローと同じ感覚で記事を書けるので、エンジニアにはかなり快適です。\n忘れないように手順を残しておきます。\n今回、以下の記事を作成しました。 Zenn 始めました zenn.dev 1. GitHubリポジトリの作成と連携 # GitHubで zenn-content 等のリポジトリを作成。プライベートでもパブリックでも良いと書いてあるが、プライベートリポジトリにしておきました。\nZennのダッシュボードから「GitHubからのデプロイ」を選択し、リポジトリを連携。\n2. ローカル環境のセットアップ（Mac） # リポジトリをクローンまたはローカルで作成し、ディレクトリに移動して環境を構築します。\ncd zenn-content # CLI install npm init -y npm install zenn-cli # Zenn setup npx zenn init README.mdや.gitignoreのほか、articlesとbooksという名前のディレクトリが作成されます。この中にmarkdownファイル（◯◯.md）を入れていくことになります。\nNode.jsのバージョンエラーが出た場合 npx zenn init で Unexpected token '.' が出たら、Node.jsが古いです。Zenn CLIの動作には比較的新しいNode.js環境が必要になるため、Macの場合はHomebrewを使用して最新のLTS（v20以上）へ更新を行います。\n現在使用しているバージョンは node -v で確認できます。もし古いバージョンが呼び出されている場合は、以下の手順でHomebrewの最新版へ上書き・シンボリックリンクの再貼付けを行います。\nnode installコマンド # インストール brew install node # 権限エラーが出る場合は所有権を修正 sudo chown -R $(whoami) /usr/local/include/node /usr/local/bin # リンクを上書きして反映 brew link --overwrite node ※注意：brew link 時に他のバージョンや古いシンボリックリンクが残っていると競合エラーを起こすことがあります。その場合は上記のように --overwrite フラグを付与することで、Homebrew側で綺麗に最新版へリンクを繋ぎ直してくれます。完了したら再度 node -v を叩き、バージョンが上がっていることを確認してください。\n3. 執筆とプレビュー # CLIで記事のテンプレート（Markdown）を作成し、ローカルサーバーを起動して確認します。\n# 記事作成 npx zenn new:article --slug my-first-post-2026 # プレビュー起動 npx zenn preview http://localhost:8000 で実際の表示を確認しながら執筆できます。ホットリロードに対応しているため、エディタで保存すると即座にブラウザの表示も更新されます。\n知っておくと便利なフロントマターの設定 # new:article コマンドで生成されたMarkdownの冒頭には、Zenn専用のメタデータ（フロントマター）が含まれています。最低限、以下の項目を確認・調整します。\ntitle: 記事のタイトル（ブラウザ上でいつでも変更可能） emoji: 記事のアイコンとなる絵文字（デフォルトでランダムに設定されます） type: 記事のジャンル（tech または idea を指定） published: デプロイ時に公開するかどうか（デフォルトは false） 4. 公開（デプロイ） # 記事の執筆が完了したら、フロントマターにある published を true に変更して、GitHubへプッシュするだけです。Zenn側がプッシュを検知し、数秒〜数十秒で自動的にデプロイ（公開）が完了します。\ngit add . git commit -m \u0026#34;first post\u0026#34; git push origin main 以降は、誤字脱字の修正や内容の追記も、手元で編集してGitプッシュするだけでバックエンドに反映されるようになります。\n運用の注意点：スラッグ（slug）の変更について # 自動生成されるMarkdownのファイル名、およびフロントマター内の slug（例: my-first-post-2026）は、Zenn上での記事のURL（zenn.dev/[ユーザ名]/articles/xxxx）になります。\n一度 published: true でプッシュして公開したあとに、ローカル側でファイル名やslugを変更して再度プッシュすると、Zenn側では 「古いURLの記事が削除され、新しいURLで別記事が新規作成された」 とみなされてしまうようです。 それまでについた「いいね」や閲覧数がリセットされてしまうため、一度公開した記事のslugは原則変更しないよう注意が必要となります。\n公式ドキュメント（参考） # より詳細な設定や仕様については、公式のガイドを参照してください。\nGitHubリポジトリでZennの記事を管理する Zenn CLIを導入する CLIで記事・本を作成・編集する ","date":"2026年5月8日","externalUrl":null,"permalink":"/posts/zenn-github-workflow/","section":"ブログ","summary":"流行りのZennで執筆できるように環境を整えてみました。\nGitHub連携（Git管理）することで、ソースをプッシュするとZennに自動デプロイされて便利です。 普段の開発フローと同じ感覚で記事を書けるので、エンジニアにはかなり快適です。\n忘れないように手順を残しておきます。\n今回、以下の記事を作成しました。 Zenn 始めました zenn.dev ","title":"Zennの執筆環境をGitHub連携（CLI）で構築する","type":"posts"},{"content":" 1. はじめに # Amazonアソシエイトをやってみました。AmazonアソシエイトのサイトからもURLリンクをコピーできますが、文字列だけで画像が表示できませんでした。\nHugoのショートコードを使って、画像付きのAmazonアソシエイトリンクを貼り付けられるように実装しました。\n内容を以下にメモしておきます。 参考になれば幸いです。\n2. AmazonのトラッキングIDを変数に入れておく # Amazonアソシエイトに登録し、トラッキングIDを取得しておきます。文字列-22みたいな形のIDです。\n取得したトラッキングIDを変数として扱えるようにconfig/_default/hugo.tomlに記載します。\nconfig/_default/hugo.toml\n[params] amazonTrackingID = \u0026#34;amazonトラッキングID-22\u0026#34; 3. ショートコード用のhtmlファイル作成 # layouts/shortcodes/amazon-associate.htmlに以下のコードを記載しました。 参考までに載せておきます。\nlayouts/shortcodes/amazon-associate.html\n{{ $asin := .Get 0 }} {{ $title := .Get 1 | default \u0026#34;Amazonで詳細を見る\u0026#34; }} {{ $img := .Get 2 }} {{ $trackingID := .Site.Params.amazonTrackingID | default \u0026#34;MISSING_ID\u0026#34; }} {{ $link := printf \u0026#34;https://www.amazon.co.jp/dp/%s?tag=%s\u0026#34; $asin $trackingID }} {{ $finalImg := \u0026#34;\u0026#34; }} {{ if $img }}{{ $finalImg = $img }}{{ else }}{{ $finalImg = printf \u0026#34;https://m.media-amazon.com/images/P/%s.01.MZZZZZZZ.jpg\u0026#34; $asin }}{{ end }} \u0026lt;div class=\u0026#34;amazon-card-container\u0026#34; style=\u0026#34;margin: 2rem 0; max-width: 700px;\u0026#34;\u0026gt; \u0026lt;a href=\u0026#34;{{ $link }}\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;noopener\u0026#34; class=\u0026#34;amazon-card-anchor\u0026#34; style=\u0026#34;text-decoration: none; color: inherit; display: block; line-height: 1.5;\u0026#34;\u0026gt; \u0026lt;div class=\u0026#34;amazon-link-card\u0026#34; style=\u0026#34;border: 1px solid #d1d5db; border-radius: 0.75rem; overflow: hidden; background-color: #ffffff; display: flex; flex-direction: column; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.05); width: 100%;\u0026#34;\u0026gt; {{/* メイン部分 */}} \u0026lt;div style=\u0026#34;display: flex; flex-direction: row; padding: 1.25rem; align-items: flex-start; background-color: #ffffff;\u0026#34;\u0026gt; \u0026lt;div style=\u0026#34;flex-shrink: 0; width: 110px; height: 110px; margin-right: 1.25rem; display: flex; align-items: center; justify-content: center; background: #fff;\u0026#34;\u0026gt; \u0026lt;img src=\u0026#34;{{ $finalImg }}\u0026#34; alt=\u0026#34;{{ $title }}\u0026#34; style=\u0026#34;max-height: 100%; max-width: 100%; object-fit: contain; margin: 0; display: block; border: none; pointer-events: none;\u0026#34;\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;div style=\u0026#34;flex-grow: 1; min-width: 0;\u0026#34;\u0026gt; \u0026lt;div style=\u0026#34;font-weight: 700; font-size: 0.95rem; line-height: 1.5; margin-bottom: 1rem; color: #1f2937; word-break: break-all;\u0026#34;\u0026gt; {{ $title }} \u0026lt;/div\u0026gt; \u0026lt;div style=\u0026#34;display: inline-block; background: linear-gradient(to bottom, #f7dfa1, #f0c14b); color: #111; padding: 0.4rem 1.2rem; border-radius: 4px; font-size: 0.85rem; font-weight: 500; border: 1px solid #a88734;\u0026#34;\u0026gt; Amazonで見る \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;div style=\u0026#34;font-size: 0.65rem; color: #6b7280; text-align: right; padding: 0.6rem 1rem; background-color: #f3f4f6; border-top: 1px solid #e5e7eb; margin: 0; display: block;\u0026#34;\u0026gt; Amazon.co.jp で詳細を見る \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/a\u0026gt; \u0026lt;/div\u0026gt; 4. ブラウザのブックマークにJavaScript登録 # 以下のコードをブラウザのブックマークに登録します。\njavascript:(function(){ async function copy(text) { try { await navigator.clipboard.writeText(text); alert(\u0026#39;コピー成功！\\n\u0026#39; + text); } catch (err) { /* 古いブラウザ用のフォールバック */ const el = document.createElement(\u0026#39;textarea\u0026#39;); el.value = text; document.body.appendChild(el); el.select(); document.execCommand(\u0026#39;copy\u0026#39;); document.body.removeChild(el); alert(\u0026#39;コピーしました（fallback）\u0026#39;); } } try { /* 1. ASINを探す（複数の候補から） */ const asin = document.querySelector(\u0026#39;#ASIN, [data-asin], input[name=\u0026#34;idx.asin\u0026#34;]\u0026#39;)?.value || document.querySelector(\u0026#39;[data-asin]\u0026#39;)?.dataset.asin; /* 2. タイトルを探す */ const title = document.querySelector(\u0026#39;#productTitle, #ebooksProductTitle, #title\u0026#39;)?.textContent.trim(); /* 3. 画像URLを探す（メイン、本、またはサムネイルリストから） */ const imgEl = document.querySelector(\u0026#39;#landingImage, #imgBlkFront, #main-image, .a-dynamic-image\u0026#39;); let thumb = imgEl?.src || imgEl?.dataset?.oldHires || imgEl?.dataset?.aDynamicImage; /* URLがJSON形式（複数画像）で入っている場合の処理 */ if (thumb \u0026amp;\u0026amp; thumb.startsWith(\u0026#39;{\u0026#39;)) { thumb = Object.keys(JSON.parse(thumb))[0]; } if (!asin || !title || !thumb) { console.error({asin, title, thumb}); throw new Error(\u0026#39;必須情報の取得に失敗しました\u0026#39;); } const mUrl = thumb.replace(/\\._S[X|Y]\\d+_/, \u0026#39;._SL200_\u0026#39;); const shortcode = `{{\u0026lt; amazon-associate \u0026#34;${asin}\u0026#34; \u0026#34;${title}\u0026#34; \u0026#34;${mUrl}\u0026#34; \u0026gt;}}`; copy(shortcode); } catch (e) { alert(\u0026#39;エラー: Amazonの商品ページで実行してください。\u0026#39;); console.error(e); } })(); 5. amazonの商品ページで4.で作成したブックマークを実行 # amazonの商品ページで4.で作成したブックマークを実行すると、 コピーされるので、Hugo内の記事に貼り付けます。 以下のようなショートコードの形で貼り付けられます。\n{{\u0026lt; amazon-associate \u0026#34;B0DJ8LD62M\u0026#34; \u0026#34;PFU キーボード HHKB Studio 日本語配列／雪（ポインティングスティック メカニカルキーボード）\u0026#34; \u0026#34;https://m.media-amazon.com/images/I/61d+MPkNrfL._AC_SX679_.jpg\u0026#34; \u0026gt;}} 以下のように商品画像が表示されます。\nPFU キーボード HHKB Studio 日本語配列／雪（ポインティングスティック メカニカルキーボード） Amazonで見る Amazon.co.jp で詳細を見る 6. アソシエイトリンクが有効になっているか確認 # 最後に、hugo server でローカルビルドを行い、リンクのデザインや画像が正しく表示されているか確認します。\nあわせて、生成されたリンクをコピーしてAmazonアソシエイトの管理画面にある「リンク動作確認ツール」等で、トラッキングIDが正しく紐付いているかチェックしておくと安心です。\n","date":"2026年5月7日","externalUrl":null,"permalink":"/posts/hugo-amazon-associate/","section":"ブログ","summary":"1. はじめに # Amazonアソシエイトをやってみました。AmazonアソシエイトのサイトからもURLリンクをコピーできますが、文字列だけで画像が表示できませんでした。\nHugoのショートコードを使って、画像付きのAmazonアソシエイトリンクを貼り付けられるように実装しました。\n","title":"Hugoに画像付きAmazonアソシエイトリンクを導入（ショートコード機能）した話","type":"posts"},{"content":"Hugoブログを運営していると、読者に他の記事も読んでもらうために「関連記事」を表示したくなります。 CMSなどでは簡単に表示できると思うのですが、Hugoではちょっと調べる必要があり面倒でした。 今回、Hugoでの関連ページを実装したのでメモを残しておきます。\nHugoには標準で Related Content という機能がデフォルトで備わっており、複雑なコードを書かずに実装可能です。以下のコードで5記事関連ページ表示できます。ただし、文字とリンクだけで味気ないです。\nlayouts/partials/related.html\n{{ $related := .Site.RegularPages.Related . | first 5 }} {{ with $related }} \u0026lt;h3\u0026gt;See Also\u0026lt;/h3\u0026gt; \u0026lt;ul\u0026gt; {{ range . }} \u0026lt;li\u0026gt;\u0026lt;a href=\u0026#34;{{ .RelPermalink }}\u0026#34;\u0026gt;{{ .Title }}\u0026lt;/a\u0026gt;\u0026lt;/li\u0026gt; {{ end }} \u0026lt;/ul\u0026gt; {{ end }} 本ブログで実装しているHugoでの関連記事の実装内容を以下に記載していきます。\n1. Hugoの設定ファイル (hugo.toml) の編集 # 何をもって「関連」とするかのルールを hugo.toml（または config.toml）に定義します。一般的には「同じタグ」や「同じキーワード」を持つ記事を優先させるようです。 デフォルト状態ですでに以下のように記載されていました。\n[related] threshold = 0 toLower = false [[related.indices]] name = \u0026#34;tags\u0026#34; weight = 100 [[related.indices]] name = \u0026#34;categories\u0026#34; weight = 100 [[related.indices]] name = \u0026#34;series\u0026#34; weight = 50 [[related.indices]] name = \u0026#34;authors\u0026#34; weight = 20 [[related.indices]] name = \u0026#34;date\u0026#34; weight = 10 [[related.indices]] applyFilter = false name = \u0026#39;fragmentrefs\u0026#39; type = \u0026#39;fragments\u0026#39; weight = 10 2. 関連記事を表示するテンプレートの作成 # 次に、記事の下部に表示するためのパーシャルテンプレートを作成します。\n例：layouts/partials/related.html\n{{/* .Params.showRelated が false に設定されていない場合のみ実行 */}} {{ if ne .Params.showRelated false }} {{/* where関数を使って \u0026#39;Section\u0026#39; が \u0026#39;posts\u0026#39; のものだけを抽出 */}} {{ $related := .Site.RegularPages.Related . }} {{ $related = where $related \u0026#34;Section\u0026#34; \u0026#34;posts\u0026#34; | first 3 }} {{ with $related }} \u0026lt;h3 class=\u0026#34;mt-8 text-xl font-bold\u0026#34;\u0026gt;関連ページ\u0026lt;/h3\u0026gt; \u0026lt;div class=\u0026#34;related-cards-container\u0026#34;\u0026gt; {{ range . }} \u0026lt;div class=\u0026#34;link-card-wrapper\u0026#34; style=\u0026#34;margin: 15px 0; max-width: 600px;\u0026#34;\u0026gt; \u0026lt;a href=\u0026#34;{{ .RelPermalink }}\u0026#34; class=\u0026#34;link-card\u0026#34; style=\u0026#34;text-decoration: none; color: inherit; display: flex; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: #fff; height: 110px;\u0026#34;\u0026gt; {{/* 画像の取得ロジック */}} {{ $image_url := \u0026#34;\u0026#34; }} {{ $featured := .Resources.GetMatch \u0026#34;featured.webp\u0026#34; }} {{ if $featured }} {{/* 記事フォルダ内に featured.webp がある場合 */}} {{ $image_url = $featured.RelPermalink }} {{ else }} {{/* ない場合は Front Matter のパラメータを確認 */}} {{ $img_param := .Params.featureImage | default .Params.image }} {{ if $img_param }} {{ $image_url = $img_param | relURL }} {{ end }} {{ end }} {{/* 画像の表示部分 */}} {{ if $image_url }} \u0026lt;div class=\u0026#34;link-card-image\u0026#34; style=\u0026#34;flex: 0 0 140px; background-image: url(\u0026#39;{{ $image_url }}\u0026#39;); background-size: cover; background-position: center;\u0026#34;\u0026gt; \u0026lt;/div\u0026gt; {{ else }} \u0026lt;div class=\u0026#34;link-card-image\u0026#34; style=\u0026#34;flex: 0 0 140px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; color: #ccc;\u0026#34;\u0026gt; No Image\u0026lt;/div\u0026gt; {{ end }} \u0026lt;div class=\u0026#34;link-card-content\u0026#34; style=\u0026#34;flex: 1; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;\u0026#34;\u0026gt; \u0026lt;div class=\u0026#34;link-card-title\u0026#34; style=\u0026#34;font-weight: bold; font-size: 0.95rem; color: #333; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;\u0026#34;\u0026gt; {{ .Title }} \u0026lt;/div\u0026gt; \u0026lt;div class=\u0026#34;link-card-meta\u0026#34; style=\u0026#34;display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: #888;\u0026#34;\u0026gt; \u0026lt;img src=\u0026#34;/favicon.png\u0026#34; alt=\u0026#34;\u0026#34; style=\u0026#34;width: 14px; height: 14px; object-fit: contain;\u0026#34;\u0026gt; \u0026lt;span\u0026gt;{{ .Date.Format \u0026#34;2006.01.02\u0026#34; }}\u0026lt;/span\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/a\u0026gt; \u0026lt;/div\u0026gt; {{ end }} \u0026lt;/div\u0026gt; {{ end }} {{ end }} サムネイルはwebp形式にしています。 関連ページを表示させたくないページでは、以下のフラグで非表示にしています。 showRelated: false ","date":"2026年5月6日","externalUrl":null,"permalink":"/posts/hugo-related-content-setup/","section":"ブログ","summary":"Hugoブログを運営していると、読者に他の記事も読んでもらうために「関連記事」を表示したくなります。 CMSなどでは簡単に表示できると思うのですが、Hugoではちょっと調べる必要があり面倒でした。 今回、Hugoでの関連ページを実装したのでメモを残しておきます。\nHugoには標準で Related Content という機能がデフォルトで備わっており、複雑なコードを書かずに実装可能です。以下のコードで5記事関連ページ表示できます。ただし、文字とリンクだけで味気ないです。\n","title":"Hugoで関連記事（Related Content）を実装","type":"posts"},{"content":"Hugoテーマ「Blowfish」を利用しているのですが、ドキュメントに記載されている方法でもfavicon（タブのアイコン）が期待通りに表示されずハマりましたので備忘です。\n当初、Blowfishの公式ドキュメント（Partials | Blowfish）に記載されている標準的な方法を試行しましたが、自分の場合は上手くいきませんでした。\n本記事では、テーマの拡張用テンプレートを利用して、指定した画像をサイト全体に反映させる手順を記載します。\n設定の仕組み # Blowfishには、独自のコードを \u0026lt;head\u0026gt; タグ内に追加するためのファイル extend-head.html が用意されています。\nテーマ側の自動生成機能に依存せず、この拡張ファイルに直接タグを記述することで、指定した画像ファイルを優先的に読み込ませることが可能です。\n設定の手順 # 以下の2つのステップで進めます。\n1. 画像ファイルを「static」フォルダへ配置 # 使用したい画像を準備します。PNG形式に加え、ブラウザの自動検出やXML（サイトマップ）表示用にICO形式も用意しておくとより確実です。\n画像を favicon.png および favicon.ico という名前で用意します。 それらのファイルを、プロジェクトのルートにある static/ フォルダの直下に配置します。 パス: (プロジェクトルート)/static/favicon.png パス: (プロジェクトルート)/static/favicon.ico static 直下に置かれたファイルは、Hugoのビルド時にルートディレクトリへそのままコピーされます。特に favicon.ico は、多くのブラウザが自動的に探しに行く基本ファイルとなるため、配置しておくだけで解決する場合も多いです。\n2. 「extend-head.html」を作成・編集 # 次に、ブラウザに対してfaviconの場所を明示的に指定します。\nlayouts/partials/ ディレクトリ内に、extend-head.html という名前のファイルを作成します。 パス: (プロジェクトルート)/layouts/partials/extend-head.html 作成した extend-head.html に、以下のコードを記述して保存します。 \u0026lt;link rel=\u0026#34;icon\u0026#34; href=\u0026#34;/favicon.png\u0026#34; type=\u0026#34;image/png\u0026#34;\u0026gt; これでテーマ本体のテンプレート構造を崩すことなく、faviconの設定を埋め込むことができました。\n反映の確認とキャッシュの注意点 # 設定を保存・デプロイしても表示が変わらない場合は、以下の3点を確認してください。\n再起動・再ビルド: ローカル環境では hugo server を一度停止（Ctrl+C）し、再度立ち上げ直してください。static 内のバイナリ変更は再起動が必要な場合があります。 直接確認: ブラウザで サイトURL/favicon.ico に直接アクセスし、自分の画像が表示されるか確認してください。 キャッシュクリア: Faviconはブラウザに強くキャッシュされます。確認時は必ずシークレットモードを使用するか、キャッシュをクリアして試してください。 まとめ # Blowfishでfaviconが反映されなかった問題は、 「staticフォルダ直下への配置」と「extend-head.htmlによる明示的な指定」 を組み合わせることで解決できました。\n追記 # ブラウザで表示されているソースを見たところ、以下のようにfaviconのパスの前に半角スペースが入っていました。\n\u0026lt;link rel=\u0026#34;apple-touch-icon\u0026#34; sizes=\u0026#34;180x180\u0026#34; href=\u0026#34;/%20apple-touch-icon.png\u0026#34;\u0026gt; \u0026lt;link rel=\u0026#34;icon\u0026#34; type=\u0026#34;image/png\u0026#34; sizes=\u0026#34;32x32\u0026#34; href=\u0026#34;/%20favicon-32x32.png\u0026#34;\u0026gt; \u0026lt;link rel=\u0026#34;icon\u0026#34; type=\u0026#34;image/png\u0026#34; sizes=\u0026#34;16x16\u0026#34; href=\u0026#34;/%20favicon-16x16.png\u0026#34;\u0026gt; \u0026lt;link rel=\u0026#34;manifest\u0026#34; href=\u0026#34;/%20site.webmanifest\u0026#34;\u0026gt; /layouts/partials/head.html内の該当箇所に半角スペースが入ってしまっていたので、修正したところ直りました。 フォーマッターが効いてしまったのかと。。\n恥ずかしながら戒めとして残しておきます。\n","date":"2026年5月6日","externalUrl":null,"permalink":"/posts/hugo-blowfish-favicon-setup/","section":"ブログ","summary":"Hugoテーマ「Blowfish」を利用しているのですが、ドキュメントに記載されている方法でもfavicon（タブのアイコン）が期待通りに表示されずハマりましたので備忘です。\n当初、Blowfishの公式ドキュメント（Partials | Blowfish）に記載されている標準的な方法を試行しましたが、自分の場合は上手くいきませんでした。\n","title":"Hugo (Blowfish) で favicon を表示させる。ハマった内容など","type":"posts"},{"content":" はじめに # 仕事でAWS パートナーネットワーク（APN）において、レジスタードから「セレクトティア」へ昇格させました。意外とまとまった情報が少なく、大変な部分もあったので、要件やどのように進めるか、メリットなどついてまとめてみました。\n※後から思い出しながら書いている部分があるため誤っている可能性があります。参考程度にしていただき、実際のAWS公式ドキュメントも必ず参照されるようお願いします。\n1. 知識（認定資格とトレーニング人数） # セレクトティアでは「会社としてどれだけ知識があるか」を証明するため、以下の要件を満たす必要があります。\n項目 必要数 詳細・注意点 AWS認定資格 合計4つ以上 2つはアソシエイト以上。残り2つはクラウドプラクティショナー可。 Accreditation (Business) 2名以上 パートナーセントラル内の無料デジタル学習。ビジネス視点の内容。 Accreditation (Technical) 2名以上 パートナーセントラル内の無料デジタル学習。技術視点の内容。 ※アクレディテーションは重複不可のようです（例：一人が複数持っていても、特定のカテゴリにおいて「1名」分としかカウントされない場合があります）。画面上から誰のレコードが反映されているか確認できなかったので推測になります。\n2. 経験（オポチュニティ登録と売上） # 実績として、以下の「案件数」と「売上」の基準を満たす必要があります。\n項目 必要数 詳細・注意点 オポチュニティ登録 (ACE) 最低3件 自社が関与した案件を登録し、AWS側で「成約（Launched）」として承認される必要あり。 年間収益（売上） 1,500米ドル以上 自社が支援しているAWSアカウントの利用料合計。年間での合計額。 3. 特典：付与されるAWSクレジット # セレクトティアに昇格し、年会費を支払うと以下のベネフィット（マーケティング・開発支援）が受けられます。\nAWSプロモーションクレジット: 合計 3,500米ドル分 内訳として、サンドボックス環境（自社検証用）やデモ環境の構築に利用できるクレジットが付与されます。 このクレジットにより、パートナープログラム年会費（2,500ドル）を実質的に相殺し、プラスのメリットを享受できます。 4. 昇格の手順（年会費支払い後の操作） # 要件の達成: パートナーセントラルの「スコアカード」ですべての項目が「Met」になるまで進めます。 アップグレード申請: 「ティア（Tier）」セクションから昇格申請ボタンを押します。 年会費の支払い: 申請後、請求が発行されるので 2,500米ドルを支払います。 昇格の確定: 支払完了後、パートナーセントラルのトップ画面にある 「ティアのアップグレード（Upgrade Tier）」 または 「適用（Apply）」 メニューから、最終的な昇格プロセスを完了させます。 5. 参考リソース # 詳細な最新要件については、以下のAWS公式リソースをご確認ください。\nAWS サービスパートナーティア AWS Partner Central とは AWS サービスパス説明資料 (PDF) AWS パートナーセントラル ユーザーガイド：オポチュニティの管理 要点整理から攻略する『AWS認定 高度なネットワーキング-専門知識』 (Compass Booksシリーズ) Amazonで見る Amazon.co.jp で詳細を見る 6. 大変だった点・気づき # オポチュニティの審査: 登録が進まず苦労しました。登録時点で「製品」を具体的に設定しておかないと審査が進まないようです。最終的にサポートに問い合わせて解決しました。また、ステータスを段階的に更新する必要があり、いきなり「ローンチ（成約）」には設定できない点も注意が必要です。 アクレディテーションの反映: 合計4名の修了が必要ですが、誰の受講レコードが正しく反映されているか管理画面から追跡しづらく、反映にも数日かかります。 社内の協力が不可欠: 認定資格の紐付けやトレーニングの受講など、個々の社員の協力が絶対に必要です。APNセントラル側のデータ更新も時間がかかるため、余裕をもったスケジュールを組むことをおすすめします。 サポートへの問い合わせの必要性: 管理画面上のステータス反映が遅く、状況を把握できない日が続きました。結果として、サポートへ進捗の確認を入れることが最も効果的な解決策となり、問い合わせ後は速やかに更新が進みました。 AWS運用入門 改訂第2版 押さえておきたいAWSの基本と運用ノウハウ [AWS深掘りガイド] Amazonで見る Amazon.co.jp で詳細を見る ","date":"2026年5月6日","externalUrl":null,"permalink":"/posts/aws-apn-select-tier-comprehensive-memo/","section":"ブログ","summary":"はじめに # 仕事でAWS パートナーネットワーク（APN）において、レジスタードから「セレクトティア」へ昇格させました。意外とまとまった情報が少なく、大変な部分もあったので、要件やどのように進めるか、メリットなどついてまとめてみました。\n","title":"AWS APNパートナー セレクトティアへの昇格しました。ハマりポイントなど","type":"posts"},{"content":" はじめに # Hugoのテーマ Blowfish にGoogle Analytics (GA4) とGoogleサーチコンソールを導入する手順の備忘です。\nGoogle Analytics # 1. Google Analytics 測定IDの取得 # まず、Google Analyticsの管理画面から「測定ID」を取得します。\nGoogle Analytics にログインします。 管理（左下の歯車） ＞ データ収集と修正 ＞ データ ストリーム を選択します。 該当するストリームを選択し、「G-XXXXXXXXXX」 形式の測定IDをコピーします。 2. Blowfishの設定ファイル (hugo.toml) への追記 # BlowfishはHugoの内部機能をサポートしているため、設定ファイルにIDを記述するだけで反映されます。\nconfig/_default/hugo.toml (または config.toml) を開き、以下の設定を記載します。コメントアウトで記載されているので1.3.で取得した測定IDを入れて、コメントアウトを解除すればOKでした。\ngoogleAnalytics = \u0026#34;G-XXXXXXXXXX\u0026#34; 「やりたいこと」からパッと引ける Googleアナリティクス4 設定・分析のすべてがわかる本 Amazonで見る Amazon.co.jp で詳細を見る 3. 自分のアクセスを除外する設定 # 正確な統計を出すために、自分のアクセスを集計から除外します。\nブラウザ拡張機能を利用する方法（推奨） # Googleが提供している「Google アナリティクス オプトアウト アドオン」をインストールするのが楽でした。\nアドオン名: Google アナリティクス オプトアウト アドオン 効果: このアドオンがインストールされたブラウザからのアクセスは、GA4集計から除外されます。 4. 導入の確認 # サイトをビルド、または hugo server で起動します。 サイトを表示し、ソースコードを確認して googletagmanager.com のスクリプトが含まれているか確認します。 Google Analyticsの「リアルタイム」レポートで、アクセスが反映されるか確認して完了です。 Google Search Console # はじめに。　Googleサーチコンソールで何ができるか # 生成AIに聞いてみました。 Google Search Consoleに登録することで、以下のメリットがあるようです。\nブログを公開しただけでは、Googleなどの検索エンジンに正しく認識・表示されるまで時間がかかることがあります。Google Search Consoleに登録することで、以下のメリットが得られます。 * **検索結果への反映を促進:** サイトマップを送信することで、新しい記事をクローラーに素早く通知できます。 * **サイトの健康診断:** ページにエラーがないか、モバイルで見やすいかなどの問題を把握できます。 * **検索キーワードの分析:** ユーザーがどのようなキーワードで自分のサイトに辿り着いたかを確認できます。 サイトを「ただ公開する」状態から「読者に届ける」状態にするための必須のステップです。 チラシの裏にしていても面白くないので、ある程度見てもらえるようにGoogle Searce Consoleに登録してみたので、手順を記載しておきます。\n1. プロパティの追加 # Google Search Consoleにログインし、「プロパティを追加」からドメインを入力します。Cloudflareでドメインを管理している場合は、「ドメイン」プロパティを選択すると、DNSレコードによる一括認証がスムーズです。\n2. DNSレコードによる所有権の確認 # 表示されたTXTレコードを、CloudflareのDNS設定画面に追加します。反映後、Search Console上で「確認」ボタンを押すことで所有権が認証されます。\n「確認」ボタンを押すことで、CloudflareのDNSにレコードが自動登録されていました。\n3. サイトマップの送信 # Hugoは標準で sitemap.xml を自動生成します。\nSearch Consoleのメニューから「サイトマップ」を選択します。 https://[ドメイン名]/sitemap.xml と入力して送信します。 ステータスが「成功しました」となっていれば読み込みできています。\n注意点：サイトマップの「無効なURL」エラー # サイトマップを送信した際、「無効なURL」としてエラーが出る場合があります。これは、サイトマップ内のURLが絶対パス（https://...）ではなく、相対パス（/posts/...）で出力されていることが原因のようでした。\n解決策 # Hugoの hugo.toml（または config.toml）内の baseURL を、完全なURLに修正します。\n# 修正前 baseURL = \u0026#34;/\u0026#34; # 修正後 baseURL = \u0026#34;[https://yourdomain.com/](https://yourdomain.com/)\u0026#34; 検索表示画面の確認 # site:ドメイン名 でGoogle検索をすることで検索結果がどのように見えるか確認することができます。 ファビコンが上手くあたっていないとか、タイトル・説明が適切か、不要なページが検索に載っていないかなど、確認することは多そうです。\n","date":"2026年5月6日","externalUrl":null,"permalink":"/posts/hugo-blowfish-google-analytics/","section":"ブログ","summary":"はじめに # Hugoのテーマ Blowfish にGoogle Analytics (GA4) とGoogleサーチコンソールを導入する手順の備忘です。\nGoogle Analytics # 1. Google Analytics 測定IDの取得 # まず、Google Analyticsの管理画面から「測定ID」を取得します。\n","title":"Hugo BlowfishにGoogleアナリティクス(GA4)とGoogleサーチコンソールを導入する","type":"posts"},{"content":" はじめに # 本ブログはHugoで作成しています。 ブログ運用において、Googleフォームの問い合わせを設置しました。\nGoogleフォームであれば、実装が非常に楽ちんです。 ランニングコストもかからないので導入しやすいかと思います。\nCloudflare Workersで問い合わせフォームを実装している人もいるみたいなので、ゆくゆくはそっちに変えるかもしれませんが。\n本ブログ記事では、Googleフォームを利用して、Hugoのウェブサイトに手軽に問い合わせページを作る方法をまとめます。\nなぜCloudflare Workersではなく、今Googleフォームなのか（技術選定） # 近年、静的サイトジェネレーター（SSG）で作られたブログでは、Cloudflare Workers + microCMS + Turnstile（スパム対策）といったモダンな構成で問い合わせフォームを構築する手法が人気のようです。\n私もCloudflare Workersでの問い合わせフォームの構築を検討しましたが、以下の理由から「まずはGoogleフォームでのスモールスタート」を選択しました。\n開発コストの圧倒的な差：Workers構成の場合、TypeScriptでのコーディング、フレームワーク選定、外部API連携など、半日〜1日以上の作業時間が発生します。一方でGoogleフォームならGUIの操作だけで5分で完了します。 運用の容易さ：運用後に「項目を1つ追加したい」「プルダウンの選択肢を増やしたい」となった場合、コードを1行も触らずにGoogleの画面上だけで即座に変更が反映されます。 初期フェーズの優先順位：ブログ開設初期は、フォームの凝った作りに時間を割くよりも「まずは記事を書き、コンテンツを充実させること」に集中したかったため、導入・維持コストがゼロであるGoogleフォームが最適解だと判断しました。 1. Googleフォームの作成 # まず、Googleフォームで以下の項目を作成します。 以下の項目で作成しました。\nお名前（記述式・必須） メールアドレス（記述式・必須） 件名（プルダウン・必須） お問い合わせ内容（段落・必須） 作成後、右上の三点リーダー（縦）ボタンから「埋め込みコード（\u0026lt; \u0026gt;）」を選択し、HTMLコードをコピーしておきます。\n以下のような形でHTMLコードが表示されます。表示サイズも指定可能です。\nHTMLコードの表示画面 2. Hugoへの埋め込み # Blowfishテーマでは、Markdown内に直接iframeを記述することでフォームを表示できます。\n埋め込みコードの例（レスポンシブ対応版） # 以下のコードを記事内に貼り付けます。src の部分はご自身のフォームURLに差し替えてください。\nデフォルトで発行されるコードのままだと、横幅（width=\u0026quot;640\u0026quot;）が固定されているため、スマートフォンなどの画面幅が狭いデバイスで表示した際にデザインが崩れて（はみ出て）しまいます。 当初はそのままGoogleフォームで生成されたHTMLを貼っていたのですが、見返しは大事ですね⋯。 スマホで見たとき幅が揃うように width=\u0026quot;100%\u0026quot; に書き換えて設置するよう変更しました。\n# 埋め込みコード例 \u0026lt;div style=\u0026#34;margin-top: 2rem; width: 100%; text-align: center;\u0026#34;\u0026gt; \u0026lt;iframe src=\u0026#34;[https://docs.google.com/forms/d/e/XXXXX/viewform?embedded=true](https://docs.google.com/forms/d/e/XXXXX/viewform?embedded=true)\u0026#34; width=\u0026#34;100%\u0026#34; height=\u0026#34;1060\u0026#34; frameborder=\u0026#34;0\u0026#34; marginheight=\u0026#34;0\u0026#34; marginwidth=\u0026#34;0\u0026#34; style=\u0026#34;max-width: 640px; border: none;\u0026#34;\u0026gt; 読み込んでいます… \u0026lt;/iframe\u0026gt; \u0026lt;/div\u0026gt; 3. 回答の確認と運用Tips # Googleフォーム上で回答を確認可能です。 Googleフォームに書いてもらうと登録しているメールアドレスにも内容が通知されます。 Googleフォームに紐づいたGoogleスプレッドシートにも内容を記載されるので、 管理も容易かと思います。\nさらに運用をスムーズにするために、以下の2つのポイントを押さえておくと便利です。\n回答時のメール通知を確実に有効化する # Googleフォームは、デフォルトの状態だと「回答があっても管理者に自動通知メールが飛ばない」仕様になっていることがあります。これを見落とすと問い合わせに気付けない原因になるため、フォームの「設定」タブ ＞ 「回答」から、メール通知を受け取る設定を必ずONにした方が良いでしょう。\n高いスパム耐性 # 自前でフォームを実装する場合に頭を悩ませるのが「スパムメッセージへの対策」です。Googleフォームであれば、バックエンドでGoogleの強力なスパムフィルター（reCAPTCHAなど）が自動的に機能するため、素のHTMLフォームを設置するよりも遥かにスパム耐性が高く、安心してブログ運営を続けられます。\nおわりに（アドセンス審査を見据えて） # ブログに問い合わせフォームを設置することは、読者や企業からの連絡動線を確保するだけでなく、Googleアドセンスの審査を通過するための必須要件の一つでもあります。\n問い合わせを通じて「メールアドレス（個人情報）」を取得することになるため、フォームの設置が完了したら、合わせてサイト内の「プライバシーポリシー」ページにも個人情報の取り扱いに関する文言を忘れずに追記しておきましょう。これを行うことで、サイトとしての信頼性がグッと高まります。\nまずはこの手軽なGoogleフォームで運用を回しつつ、ブログが成長してきたらCloudflare Workers等への移行・カスタマイズに挑戦するかもしれません。 現状でも便利なのでしない可能性大ですが。\n","date":"2026年5月5日","externalUrl":null,"permalink":"/posts/how-to-create-contact-form/","section":"ブログ","summary":"はじめに # 本ブログはHugoで作成しています。 ブログ運用において、Googleフォームの問い合わせを設置しました。\nGoogleフォームであれば、実装が非常に楽ちんです。 ランニングコストもかからないので導入しやすいかと思います。\nCloudflare Workersで問い合わせフォームを実装している人もいるみたいなので、ゆくゆくはそっちに変えるかもしれませんが。\n","title":"ブログにGoogleフォームの問い合わせページを設置する（Hugo）","type":"posts"},{"content":" About inakacloud # 「田舎暮らし × クラウド技術」\ninakacloud という名は、地方での静かな生活と、クラウド技術を掛け合わせて名付けました。場所にとらわれず、IT技術に触れていきたい。\n著者Profile # 項目 内容 職種 / 専門 クラウドエンジニア　AWSとかOCIとか触っています 発信内容 インフラ構築、試行錯誤のメモ、技術のアウトプット、ガジェットとか 趣味 / 関心 IT、ガジェット、コーヒー 保有資格 AWS (12冠)\n【Professional】\n・AWS Certified Solutions Architect - Professional\n・AWS Certified DevOps Engineer - Professional\n【Specialty】\n・AWS Certified Advanced Networking - Specialty\n・AWS Certified Security - Specialty\n・AWS Certified Machine Learning - Specialty\n【Associate】\n・AWS Certified Solutions Architect - Associate\n・AWS Certified Developer - Associate\n・AWS Certified Machine Learning Engineer - Associate\n・AWS Certified CloudOps Engineer - Associate\n・AWS Certified Data Engineer - Associate\n【Practitioner】\n・AWS Certified AI Practitioner\n・AWS Certified Cloud Practitioner\nOracle Cloud Infrastructure\n・OCI Architect Professional\n・OCI Security Professional\nCisco / LPI\n・CCNA\n・LPIC-3 (305 Virtualization \u0026amp; High Availability) ひと言 日々の記録が、誰かの役に立てば嬉しいです。 2026年のmyリモートワーク環境 # リモートワーク エンジニアのデスク環境/2026年 · inakacloud inakacloud.com 気になっているものリスト # EPOMAKER x AULA F65 65%ワイヤレスメカニカルキーボード ホットスワップ対応ガスケットカスタムゲーミングキーボード 5層パッド RGBバックライト Bluetooth/2.4GHz/USB-C 潤滑済みリニアスイッチ搭載 技適認証取得 (Black, Reaper Switch) Amazonで見る Amazon.co.jp で詳細を見る Anker Nano Charging Station (7-in-1, 100W, 巻取り式 USB-C ケーブル) (USBタップ 電源タップ) 【PSE技術基準適合】MacBook iPad iPhone Galaxy Android ブラック Amazonで見る Amazon.co.jp で詳細を見る Marshall ワイヤレスポータブル防水スピーカー Emberton III ブラック\u0026amp;ブラス 連続再生32時間/IP67防水仕様/小型/急速充電 【国内正規品】 Amazonで見る Amazon.co.jp で詳細を見る PFU キーボード HHKB Studio 日本語配列／雪（ポインティングスティック メカニカルキーボード） Amazonで見る Amazon.co.jp で詳細を見る ","date":"2026年5月5日","externalUrl":null,"permalink":"/author/","section":"Authors","summary":"About inakacloud # 「田舎暮らし × クラウド技術」\ninakacloud という名は、地方での静かな生活と、クラウド技術を掛け合わせて名付けました。場所にとらわれず、IT技術に触れていきたい。\n著者Profile # 項目 内容 職種 / 専門 クラウドエンジニア　AWSとかOCIとか触っています 発信内容 インフラ構築、試行錯誤のメモ、技術のアウトプット、ガジェットとか 趣味 / 関心 IT、ガジェット、コーヒー 保有資格 AWS (12冠)\n【Professional】\n・AWS Certified Solutions Architect - Professional\n・AWS Certified DevOps Engineer - Professional\n【Specialty】\n・AWS Certified Advanced Networking - Specialty\n・AWS Certified Security - Specialty\n・AWS Certified Machine Learning - Specialty\n【Associate】\n・AWS Certified Solutions Architect - Associate\n・AWS Certified Developer - Associate\n・AWS Certified Machine Learning Engineer - Associate\n・AWS Certified CloudOps Engineer - Associate\n・AWS Certified Data Engineer - Associate\n【Practitioner】\n・AWS Certified AI Practitioner\n・AWS Certified Cloud Practitioner\nOracle Cloud Infrastructure\n・OCI Architect Professional\n・OCI Security Professional\nCisco / LPI\n・CCNA\n・LPIC-3 (305 Virtualization \u0026 High Availability) ひと言 日々の記録が、誰かの役に立てば嬉しいです。 2026年のmyリモートワーク環境 # リモートワーク エンジニアのデスク環境/2026年 · inakacloud inakacloud.com 気になっているものリスト # EPOMAKER x AULA F65 65%ワイヤレスメカニカルキーボード ホットスワップ対応ガスケットカスタムゲーミングキーボード 5層パッド RGBバックライト Bluetooth/2.4GHz/USB-C 潤滑済みリニアスイッチ搭載 技適認証取得 (Black, Reaper Switch) Amazonで見る Amazon.co.jp で詳細を見る Anker Nano Charging Station (7-in-1, 100W, 巻取り式 USB-C ケーブル) (USBタップ 電源タップ) 【PSE技術基準適合】MacBook iPad iPhone Galaxy Android ブラック Amazonで見る Amazon.co.jp で詳細を見る Marshall ワイヤレスポータブル防水スピーカー Emberton III ブラック\u0026ブラス 連続再生32時間/IP67防水仕様/小型/急速充電 【国内正規品】 Amazonで見る Amazon.co.jp で詳細を見る PFU キーボード HHKB Studio 日本語配列／雪（ポインティングスティック メカニカルキーボード） Amazonで見る Amazon.co.jp で詳細を見る ","title":"About | 自己紹介","type":"author"},{"content":"","date":"2026年5月5日","externalUrl":null,"permalink":"/author/","section":"Authors","summary":"","title":"Authors","type":"author"},{"content":"お問い合わせは以下のフォームよりお願いいたします。\n読み込んでいます… ","date":"2026年5月5日","externalUrl":null,"permalink":"/contact/","section":"Contacts","summary":"お問い合わせは以下のフォームよりお願いいたします。\n読み込んでいます… ","title":"contact | お問い合わせ","type":"contact"},{"content":"","date":"2026年5月5日","externalUrl":null,"permalink":"/contact/","section":"Contacts","summary":"","title":"Contacts","type":"contact"},{"content":" はじめに # 独自ドメインのメールで受信はCloudflare Email Routing。送信はResendを使っています。\n今回、両方の設定手順を記載しておきます。\nCloudflare Email Routingとは # Cloudflare Email Routingは、独自ドメイン宛のメールを既存のメールアドレス（Gmailなど）に無料で転送できるサービスです。サーバーを用意することなく、簡単に独自ドメインのメールアドレスを運用できます。設定した手順をメモしておきます。\n設定手順 # 1. 転送先アドレスの登録と認証 # まず、実際にメールを受け取る既存のアドレスを登録します。\nCloudflareダッシュボードのメニューから [メール] \u0026gt; [Email Routing] を選択。 [転送先アドレス] タブで、受け取りたいアドレス（例：example@gmail.com）を追加。 登録したアドレスに届く確認メール内のリンクをクリックし、ステータスを Verified にします。 2. カスタムアドレスの作成 # 独自ドメインとして使用したいアドレスを作成します。\n[ルーティングルール] タブで [アドレスを作成] をクリック。 [カスタムアドレス] に希望の文字列（例：info）を入力。 [アクション] を「転送先へ送る」にし、手順1で認証したアドレスを選択して保存します。 3. DNSレコードの有効化 # メールの送受信に必要なMXレコードなどをDNSに反映させます。\n設定画面に表示される [レコードを追加して有効化] ボタンをクリック。 Cloudflareが自動的に必要なレコードをDNS設定に追加します。 注意点 # 受信専用: この設定は転送（受信）専用です。独自ドメインを使って送信も行いたい場合は、別途ResendなどのSMTPサービスの連携が必要です。 テスト時の注意: 送信元と転送先を同じGmailアドレスにしてテストを行うと、Gmailの仕様により受信トレイに表示されない場合があります。テストは別のアドレスから送信して確認する必要があります。 Cloudflare Email Routingまとめ # Cloudflare Email Routingを利用すれば、コストをかけずに独自ドメインの窓口を作成できます。スパムフィルタも強力とのことなので運用を試してみようと思います。\nなぜメール送信にResendを使うのか # 独自ドメインのメールを受信するだけであればCloudflare Email Routingの転送設定でも可能ですが、「送信」も行う場合は信頼性の高いSMTPサーバーが必要だと考えます。\n生成AIに聞いたところ、Resendを採用する主なメリットは以下の通りとのことです。\n高い到達率: 開発者向けに最適化されており、正しく設定すれば受信側の迷惑メールフィルタを回避しやすくなります。 シンプルな管理: モダンなUIでDNS認証（DKIM等）の状態が一目でわかり、設定のミスを防げます。 無料枠の充実: 個人ブログや小規模な運用であれば、十分な無料枠内で高品質な送信インフラを利用できます。 AWS SESやOCI Email Deliveryなどを準備するのも手ですが、今回は取り回しの良さからResendを採用しました。\n自分の振り返り用に手順などをまとめておきます。\n1. Resendでのドメイン登録とAPIキー準備 # まず、Resend側で送信ドメインの許可を得るための準備を行います。\nドメインの追加: Resend管理画面の Domains \u0026gt; Add Domain から独自ドメインを入力します。 DNSレコードの確認: 表示されるDKIM用のCNAMEレコードをコピーし、Cloudflare等のDNSに登録します。Cloudflareの場合、自動でDNSレコード登録されました。 認証完了の確認: ステータスが Verified になるまで待ちます。 API Keyの作成: API Keysで「Sending access」権限を持つキーを発行し、値をコピーしておきます（re_から始まる文字列）。 2. DNSレコードの最適化（SPF/DKIM/DMARC） # 近年のGmailをはじめとする主要なメールプロバイダは、なりすまし対策として送信ドメイン認証のポリシーを非常に厳格化しています。\nSPF、DKIM、DMARCが適切に設定されていないメールは、受信を拒否（弾かれる）されたり、高い確率で迷惑メールフォルダに振り分けられたりする可能性があります。\n実務でもこの辺りでハマった経験があるので、今回も設定していきます。\nSPFレコードの設定 # ResendでCustom Return Path（例: send.yourdomain.com）を使用する場合、ルートとサブ（send） の両方にレコードが必要です。\nDNS設定例 # 自動でレコード発行されますが、ルートのSPFはAWS SESのレコード（include:amazonses.com）を自分でマージするが必要ありました。\nタイプ 名前 (Host) 内容 (Value) 役割 TXT @ v=spf1 include:_spf.google.com include:amazonses.com ~all ルート用。GmailとResend(SES)の両方を許可。自分でAWS SEDレコードをマージする必要あり TXT send v=spf1 include:amazonses.com ~all Resend配送元(Return-Path)用。これがないとSPF=NONEになる CNAME (Resend指定) (Resend指定).dkim.amazonses.com DKIM署名用 MX send feedback-smtp.us-east-1.amazonses.com 等 Resendのバウンス（エラー）通知受信用 TXT _dmarc v=DMARC1; p=none; ドメイン全体のなりすまし防止・認証結果報告 p=だとブロックしない設定 DKIM・DMARCの確認 # DKIM: 手順1で登録したCNAMEレコードが有効であることを確認。これが「このメールは本当にあなたのドメインから送られたものである」という電子署名になります。 DMARC: v=DMARC1; p=none; などのレコードをDNSに登録します。これにより、SPFやDKIMの認証に失敗したメールをどう扱うかを宣言し、ドメインの信頼性を担保します。 Cloudflareの場合、DMARC Managementを有効化することで、Cloudflare側でDMARCレポートを受け取ってくれるので今回使用します。 実務で使える メール技術の教科書 基本のしくみからプロトコル・サーバー構築・送信ドメイン認証・添付ファイル・暗号化・セキュリティ対策まで Amazonで見る Amazon.co.jp で詳細を見る 3. Gmailでの送信設定（SMTPリレー） # Gmailの管理画面からResendを経由して送信できるように連携します。\nGmailの「設定（歯車）」\u0026gt;「すべての設定を表示」\u0026gt;「アカウントとインポート」を開く。 「他のメールアドレスを追加」をクリックし、名前と独自ドメインアドレスを入力。 SMTPサーバー設定: SMTPサーバー: smtp.resend.com ポート: 587 ユーザー名: resend （※固定値です） パスワード: 手順1で発行した re_ から始まるAPIキー 接続方式: TLSを使用したセキュアな接続 4. Tips：返信時に自動で送信アドレスを切り替える # 複数のメールアドレスを運用している場合、返信ボタンを押した際に「受信したアドレス」を自動的に差出人として選択するように設定しておくと便利です。\nGmailの [設定] \u0026gt; [すべての設定を表示] \u0026gt; [アカウントとインポート] を開きます。 「名前:」セクションにある 「デフォルトの返信モード」 を探します。 「メールを受信したアドレスから返信する」 にチェックを入れます。 これにより、独自ドメイン宛のメールに返信する際、手動で差出人を切り替える手間が省け、個人アドレスでの誤返信を防げます。\n5. 到達確認と認証チェック # 設定が正しく反映されているか、テストを行います。\nメッセージソースの確認 # Gmailで独自ドメインを差出人にして自分宛にテストメールを送信。 受信メールの「︙（その他）」から 「メッセージのソースを表示」 を選択。 以下の項目がすべて 「PASS」 になっているか確認します。 SPF: PASS DKIM: PASS DMARC: PASS 5. 注意点 # DNS反映待ち: レコード変更後、反映まで数時間かかる場合があります。 10回制限: SPFの include は合計10回までです。これを超える場合は、不要な記述を整理する必要があります。 付録：Resend Freeプラン（無料枠）の制限事項 # 運用にあたって注意すべき無料プランの制限は以下の通りです。生成AIに聞いて作成したので誤りがあるかもしれません。参考にされる場合は公式ドキュメントをご確認ください。\n項目 制限内容 備考 月間送信数 3,000通 / 月 1日あたりの送信数 100通 / 日 送信ドメイン数 1ドメイン 認証可能な独自ドメインの数 ログの保持期間 1日間 管理画面で詳細ログを確認できる期間 メンバー数 1名 チーム機能による管理者の追加は不可 送信IPアドレス 共有IP 他のユーザーと共有のIPアドレスを使用 サポート コミュニティ 参照元: Resend Pricing Official / Resend Docs\n制限はありますが無料でも結構使える印象です。制限を超えそうなら課金なり、他サービスを検討したいと思っています。\n","date":"2026年5月5日","externalUrl":null,"permalink":"/posts/cloudflare-email-routing-setup/","section":"ブログ","summary":"はじめに # 独自ドメインのメールで受信はCloudflare Email Routing。送信はResendを使っています。\n今回、両方の設定手順を記載しておきます。\nCloudflare Email Routingとは # Cloudflare Email Routingは、独自ドメイン宛のメールを既存のメールアドレス（Gmailなど）に無料で転送できるサービスです。サーバーを用意することなく、簡単に独自ドメインのメールアドレスを運用できます。設定した手順をメモしておきます。\n","title":"独自ドメインメールを無料で運用する（Cloudflare Email Routing受信 | Resend送信）","type":"posts"},{"content":" はじめに # 仕事でDNSやメール設定などもすることがあるので練習用に本ブログでもドメイン取得してみました。 以下に取得したドメイン登録サービスの概要などを記載します。\nCloudflare Registrarとは # Cloudflareが提供するドメイン登録サービスです。\n最大の特徴は、 卸売価格（Wholesale price） でドメインが提供されている点です。中間の手数料が上乗せされないため、他のレジストラと比較して維持費を安く抑えることが可能です。\n国内レジストラだと初年度は安くても、2年目からの更新費用や、最近導入されているサービス維持調整費で意外とコストが膨らみます。Cloudflareなら常に卸売価格なので、長期運用のコスト計算が非常に楽です。\nちなみに某名前どっとこむさんだとサービス維持調整費として10〜20％取られるようです。\n# 某名前どっとこむさんホームページより抜粋 提供しているドメインおよび、レンタルサーバーサービスにつきまして 2023年2月1日以降の新規ご契約・契約更新に関するご請求に対し およそ10～20％程度の「サービス維持調整費」をご請求申しあげます。 Cloudflare Registrarは現時点では同様の料金負担はないので、 非常にリーズナブルかと思っています。\nドメイン取得の手順 # 1. ドメインの検索 # Cloudflareのダッシュボードにログインし、「ドメインを購入」をクリックします。\n検索ボックスから希望するドメイン名を検索します。\n利用可能な場合は、年間費用が表示されます。更新費用もここで表示されます。\n2. 連絡先情報の入力 # WHOIS情報に登録するための連絡先（氏名、住所、電話番号など）を入力します。 私は英語で登録しておきました。\nCloudflareでは標準でWHOISプライバシー保護が有効になっており、個人情報は隠匿されます。\nCloudflareで個人情報はマスク（非表示）されますが、都道府県の情報は出るようです。\n3. 支払いと確認 # 支払い情報を登録し、購入を確定させます。支払いはクレジットカードとPayPalが使用可能です。\nメリットと注意点 # メリット # 価格の透明性: 管理手数料がかからず、レジストリ（管理元）の原価で更新が可能です。 強固なセキュリティ: 2要素認証やDNSSECの導入が容易です。 一元管理: DNS設定やCDN、Workerなどの設定と同じダッシュボードで管理できます。 注意点 # ネームサーバーの固定: Cloudflare Registrarで購入したドメインは、Cloudflare以外のネームサーバーを原則使用できません。 取扱のないTLD: 一部の国別コード（.jpなど）は2026年現在、フルサポートされていない場合があります。 DNSSECの有効化が必要： デフォルトでは無効化されていますので、Cloudflareドメインの管理画面から有効化する必要があります。 まとめ # コストパフォーマンスとセキュリティを重視する場合、Cloudflare Registrarは非常に有力な選択肢です。特にHugoなどの静的サイトをCloudflare Pagesで運用している場合は、管理を一本化できるため便利です。\n参考資料 # Cloudflare Registrar Cloudflare Registrar Documentation TLD Policies and Pricing ","date":"2026年5月5日","externalUrl":null,"permalink":"/posts/cloudflare-registrar-domain/","section":"ブログ","summary":"はじめに # 仕事でDNSやメール設定などもすることがあるので練習用に本ブログでもドメイン取得してみました。 以下に取得したドメイン登録サービスの概要などを記載します。\nCloudflare Registrarとは # Cloudflareが提供するドメイン登録サービスです。\n","title":"Cloudflare Registrarでドメインを取得・管理する方法","type":"posts"},{"content":" 1. 個人情報の利用目的 # 当サイト「inakacloud」では、お問い合わせや記事へのコメントの際、名前やメールアドレス等の個人情報を入力いただく場合がございます。取得した個人情報は、お問い合わせに対する回答や必要な情報を電子メールなどでご連絡する場合に利用させていただくものであり、これらの目的以外では利用いたしません。\n2. 広告の配信について # 当サイトでは、第三者配信の広告サービス（Googleアドセンス、Amazonアソシエイト、楽天アフィリエイト）を利用しています。 このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報「Cookie」(氏名、住所、メールアドレス、電話番号は含まれません) を使用することがあります。\nGoogleアドセンスについて # Googleアドセンスに関して、このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、Googleポリシーと規約をご覧ください。\nAmazonアソシエイトについて # inakacloudは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。 第三者（Amazonや他の広告掲載者）がコンテンツおよび宣伝を提供し、訪問者から直接情報を収集し、訪問者のブラウザにCookieを設定したり認識したりする場合があります。\n楽天アフィリエイトについて # inakacloudは、楽天グループ株式会社を宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、楽天アフィリエイトプログラムの参加者です。 第三者がコンテンツおよび宣伝を提供し、訪問者から直接情報を収集し、訪問者のブラウザにCookieを設定したり認識したりする場合があります。\n3. アクセス解析ツールについて # 当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。\n4. 免責事項 # 当サイトからのリンクやバナーなどで移動したサイトで提供される情報、サービス等について一切の責任を負いません。 また、当サイトのコンテンツ・情報について、できる限り正確な情報を提供するように努めておりますが、正確性や安全性を保証するものではありません。情報が古くなっていることもございます。当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。 また、当サイトからリンクやバナーなどによって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いません。\n5. 著作権について # 当サイトで掲載している文章や画像などにつきましては、無断転載することを禁止します。 当サイトは著作権や肖像権の侵害を目的としたものではありません。著作権や肖像権に関して問題がございましたら、お問い合わせフォームよりご連絡ください。迅速に対応いたします。\n6. 本ポリシーの変更 # 当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。修正された最新のプライバシーポリシーは常に本ページにて開示されます。\n","date":"2026年5月5日","externalUrl":null,"permalink":"/privacy-policy/","section":"inakacloud$ ls blog ｜ ITとガジェット検証ブログ","summary":"1. 個人情報の利用目的 # 当サイト「inakacloud」では、お問い合わせや記事へのコメントの際、名前やメールアドレス等の個人情報を入力いただく場合がございます。取得した個人情報は、お問い合わせに対する回答や必要な情報を電子メールなどでご連絡する場合に利用させていただくものであり、これらの目的以外では利用いたしません。\n2. 広告の配信について # 当サイトでは、第三者配信の広告サービス（Googleアドセンス、Amazonアソシエイト、楽天アフィリエイト）を利用しています。 このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報「Cookie」(氏名、住所、メールアドレス、電話番号は含まれません) を使用することがあります。\nGoogleアドセンスについて # Googleアドセンスに関して、このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、Googleポリシーと規約をご覧ください。\nAmazonアソシエイトについて # inakacloudは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。 第三者（Amazonや他の広告掲載者）がコンテンツおよび宣伝を提供し、訪問者から直接情報を収集し、訪問者のブラウザにCookieを設定したり認識したりする場合があります。\n楽天アフィリエイトについて # inakacloudは、楽天グループ株式会社を宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、楽天アフィリエイトプログラムの参加者です。 第三者がコンテンツおよび宣伝を提供し、訪問者から直接情報を収集し、訪問者のブラウザにCookieを設定したり認識したりする場合があります。\n3. アクセス解析ツールについて # 当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。\n4. 免責事項 # 当サイトからのリンクやバナーなどで移動したサイトで提供される情報、サービス等について一切の責任を負いません。 また、当サイトのコンテンツ・情報について、できる限り正確な情報を提供するように努めておりますが、正確性や安全性を保証するものではありません。情報が古くなっていることもございます。当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。 また、当サイトからリンクやバナーなどによって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いません。\n5. 著作権について # 当サイトで掲載している文章や画像などにつきましては、無断転載することを禁止します。 当サイトは著作権や肖像権の侵害を目的としたものではありません。著作権や肖像権に関して問題がございましたら、お問い合わせフォームよりご連絡ください。迅速に対応いたします。\n6. 本ポリシーの変更 # 当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。修正された最新のプライバシーポリシーは常に本ページにて開示されます。\n","title":"プライバシーポリシー","type":"page"},{"content":"デスク環境を記事にしてみます。\n普段はリモートワークが多いです。 2026年現在のデスク環境の使用デバイスの構成と採用理由は以下の通りです。\nデスク全般 手元デバイス 入力デバイス # いかに肩が凝らないようにするかが、テーマです。 なんだかんだ長時間触るものなので値段は気にせず良いものを使う方針です。\n（分割キーボード使ったことがないので気になっています）\nHHKB Hybrid Type-S # 静電容量無接点方式。打鍵時のスコスコという感触が気持ち良いです。 他にもメカニカルキーボード所有していますが、自宅ではHHKBのJIS配列を使っています。\n実はUS配列も持っていますが、最近はJIS配列の方が好きで使っています。\n会社PC（Windows）と自分PC（Mac）の接続切り替えもキーを押すだけでできるので便利です。 デスクのキーボードが1台でスペース取らないのが良いです。\nコンパクトで肩こりしにくい気がします。 フルサイズだと体がバッキバキになるので、個人的にこのサイズが好きです。\n乾電池とケーブルどちらでも駆動できますが、ケーブルが好きでないので乾電池（エネループ）で動かしています。 高さの不足は自作のリストレストで補っています。\nココが良い！（メリット） 打鍵感、打鍵音が良い コンパクト、肩こりしにくい気がする デバイス切り替えが便利！ ココがイマイチ…（デメリット） 乾電池結構切れる 値段高い 配列がやや独特 おすすめ度：★★★★★（5.0 / 5.0）\nPFU キーボード HHKB Professional HYBRID Type-S 日本語配列／白 Amazonで見る Amazon.co.jp で詳細を見る HHKBは相模原市のふるさと納税の返礼品でももらえるので、検討してみても良いかもしれません。 ハマる人にはめちゃくちゃハマるキーボードだと思ってます！\nロジクール MX Ergo-S # 傾斜角のつけられるトラックボール。 クリックが静音化されているやつです。手首の負担が減った気がします。\n初代MXErgoは5年くらいつかってボロボロになったので、買い替えて2台目です。\n慣れるとめちゃくちゃ使いやすいです。肩こりや疲れが圧倒的に減りました。 スクロールのチルト機能も良くて、Excelとかスプレッドシートの操作性が地味に良いです。\nただ課題点もあると思っています。 手に当たる部分がラバー素材のため使っていると加水分解してきます。ベタベタになる。初代MXErgoはラバーを剥がして会社で使っています。\n【Amazon.co.jp限定】 ロジクール 静音 ワイヤレス トラックボール マウス MXTB2d MX ERGO S Bluetooth Logibolt 無線 windows mac iPad OS Chrome Android トラックボールマウス グラファイト 国内正規品 ※Amazon.co.jp限定 壁紙ダウンロード付き Amazonで見る Amazon.co.jp で詳細を見る ココが良い！（メリット） 傾斜がつくので手首楽、肩こりしにくい気がする デバイスが2台まで切り替えできる ホイールのチルト機能が便利。表とかブラウザで横移動ができる ココがイマイチ…（デメリット） 経年劣化でラバーがベトベトになりがち 値段高い ホイールスクロールがあまり進まない。感触もイマイチ、ホイールは初代の方が好き おすすめ度：★★★★☆（4.0 / 5.0）\nオーディオ・コミュニケーション # 会議の状況やリスニングの用途に応じて各種デバイスを使い分けています。 自分が話をするときはShokzのヘッドセットが無難に使いやすいです。\nあまり喋らなくて良いときはスピーカーフォン（Poly Sync10）を使っています。 コンデンサーマイクを使っていると音が良いと言ってもらえることが多い気がします。\nShokz OpenComm2 UC # 耳を塞がない骨伝導方式。PC接続の安定性を重視し、USBアダプタ付属のUCモデルを選択。 ShokzのOpenRun2を使っていたときは音飛びとか、会議で聞き返されることが頻発していましたが、 OpenComm2はストレスなく使用できています。\nUSBアダプタでのブルートゥース接続がめっちゃ安定します。\n耳を塞がないので周囲の音も聞こえるのが地味に良いです。\nShokz OpenComm2 UC 2025 Upgrade ビジネスイヤホン USB-Aアダプター付き 骨伝導 ワイヤレス bluetooth5.1 オープンイヤーヘッドホン 耳を塞がない 自動ペアリングヘッドフォン マイク付き 技適認証済み ノイズキャンセリングマイク クリアな通話体験 ハンズフリー通話/テレワーク/Web会議 16時間連続再生 ブラック Amazonで見る Amazon.co.jp で詳細を見る ココが良い！（メリット） 性能が良い、音飛びあまりしない USBドングルでブルートゥース接続が安定 耳を塞がないのでストレスが少ない ココがイマイチ…（デメリット） 値段高い 慣れるまで骨伝導の振動が気になった（慣れてからは全く大丈夫） US感を出しているが、実は中国の企業らしい おすすめ度：★★★★☆（4.0 / 5.0）\nPoly Sync 10 # ハンズフリーでのWeb会議用のスピーカーフォン。Ankerと迷ったがこっちにしました。 録音して聞いている限りはそこまで音も悪くない印象です。Web会議で滞ったこともなく使えています。\nブルートゥースタイプも別モデルであるんですが、自分は有線タイプにしています。\nPoly スピーカーフォン Sync 10 (国内正規品) USB-A USB-C 接続 【2年間メーカー保証】 全二重音声 IP64防塵防水 ノイズやエコーを低減 ポータブル 会議用マイク 防水 PC 7S4M6AA Amazonで見る Amazon.co.jp で詳細を見る ココが良い！（メリット） 普通のスピーカーフォン！自宅で使う分にはノーストレス 有線なので電池切れなし、接続も安定 割と安価 物理でミュートボタンがついてる ココがイマイチ…（デメリット） デスクの場所を取る おすすめ度：★★★☆☆（3.0 / 5.0）\nBose スピーカー # 音楽・映像視聴用の出力系統として運用。昔買ったやつ。もう何年使っているのだろう・・・ Bose パソコン用スピーカー Companion 2 series II [並行輸入品] Amazonで見る Amazon.co.jp で詳細を見る ココが良い！（メリット） 音良い 電気代くわない ココがイマイチ…（デメリット） Bose特有のベースもりもり おすすめ度：★★★☆☆（3.0 / 5.0）\nJBL コンデンサーマイク # 写真から見切れていますが、JBLのコンデンサーマイクをマイクアームで設置してあります。 マイクが視界に入ると気が散るのでほぼ使っていない。使っていると音が良いと褒めらたことが何回かあります。 JBL QUANTUM STREAM USBスタンドアロン デュアルコンデンサーUSBマイク/テレワーク/ゲーマー/コンテンツクリエーター/ストリーマー/PC,MAC,PS4,PS5,SWITCH使用可能 ブラック JBLQSTREAMBLK Amazonで見る Amazon.co.jp で詳細を見る ココが良い！（メリット） コンデンサー、まぁまぁ音良い ミュートもワンタッチで出来る １万くらいで安価に買える ココがイマイチ…（デメリット） デスク直きはキーボードのタイプ音拾う気がする。マイクアームあった方が良い ケーブルが邪魔。なのであまり使っていないです おすすめ度：★★☆☆☆（2.0 / 5.0）\n映像・ライティング # BenQ ScreenBar Halo 2 # モニターへの映り込みを物理的に遮断しつつ、手元の照度を確保。 充電式のリモコンで照度や色味の調整が可能です。 背面へのライティングで暗いところと明るいとこの差ができにくいので、目の疲れが圧倒的に減りました。 センサーでオートで点灯と消灯が出来ます。 PCを長時間触る人にはオススメかと思います。 2万円以上して高価でしたが、自分的には満足度がめっちゃ高いです。\nココが良い！（メリット） 自動点灯 かなり明るい、暗いところができにくいので目が疲れない リモコンでオンオフも可能 ココがイマイチ…（デメリット） リモコンの操作感が自分は好きではない ウェブカメラ置くところがあるが、高さが出るのが画角が高くなる だいぶ高い。2.5万くらい おすすめ度：★★★★★（5.0 / 5.0）\nBenQ ScreenBar Halo 2 モニターライト モニター掛け式 デスクライト【 バックライト搭載モデル 】デュアル照明 間接照明 無線リモコン USB Type-C 広範囲照明 自動点灯 自動消灯 (ゲーム プログラミング 映画鑑賞 デスクスペース インテリア 湾曲/ワイド/マルチモニター) ダークグレー Amazonで見る Amazon.co.jp で詳細を見る Anker PowerConf (Webカメラ) # Web会議とかウェビナー用。オートフォーカスと解像度の安定性を優先。 2Kのやつだけど、ウェブ会議で使う分には十分な印象です。 ノートPCのインカメよりも画質は断然に良い。\nAnker PowerConf C200 / 2K コンパクトウェブカメラ/ノイズリダクション/オートゲインコントロール/オートフォーカス/画角調整/プライバシーカバー Amazonで見る Amazon.co.jp で詳細を見る ココが良い！（メリット）\n安い(5,000円くらい) が画質そこそこ良い コンパクト 物理シャッターが付いている。カメラ映らない ココがイマイチ…（デメリット）\n特に思いつかない 画質に拘るなら他にもっと良いのがあると思う。自分は詳しくないので分からないですが。。 おすすめ度：★★★☆☆（3.0 / 5.0）\nインフラ・スタンド # StarTech ドッキングステーション # 複数の周辺機器を安定して一括接続するためのインフラとして採用。 PCを３画面に出力したくて使用しています。ハブを噛ませて各種デバイスに接続させています。\nStarTech.com ドッキングステーション USB 3.0 トリプルモニター DP \u0026amp; HDMI USBハブ LAN 多機能 アダプター USB3DOCKH2DP Amazonで見る Amazon.co.jp で詳細を見る ココが良い！（メリット） 3画面出力（Display port *2, HDMI *1） type-cでの接続可能 ココがイマイチ…（デメリット） でかい ポートが背面についていて、抜き差ししにくい 高い おすすめ度：★★★☆☆（３.0 / 5.0）\nBotaya PCスタンド # ノートPCのディスプレイ位置を視線に合わせるための調整用。 スタンドが固くて安定感があります。もう数年使っていますが壊れる気配はないです。 前傾姿勢にならなくて済むので、肩こりが圧倒的に減りました。\nBoYata ノートパソコンスタンド pc スタンド タブレット 無段階高さ/角度調整可能 姿勢改善 腰痛/猫背解消 安定性 折りたたみ式 アルミ合金製 17インチ以下のデバイスに対応 シルバー Amazonで見る Amazon.co.jp で詳細を見る ココが良い！（メリット） 肩こりしにくい気がする かなり頑丈 ココがイマイチ…（デメリット） 4,000円くらいする。割と高い 場所取る おすすめ度：★★★☆☆（3.0 / 5.0）\n自作リストレスト # ダイソーのバンブーコースターの裏にスポンジの足シールをつけてつかっています。 手触りがサラサラしていて地味に気に入っています。 HHKBは高さがあるのでリストレスト合ったほうが楽です。\n300円で作れました。\nエネループ # HHKBで使っています。100均一の電池を使っていましたが電池のゴミが都度出るのがストレスでした。 エネループに変えて楽に使えています。\nパナソニック エネループ スタンダードモデル 充電器セット 単3形充電池 4本付き K-KJ83MCD40 Amazonで見る Amazon.co.jp で詳細を見る 充電済みの電池は無印良品のケースに入れてます 感想 # HugoでAmazonのリンク貼る仕組みを作るのが地味に大変だった！今度記事にしようかな・・・\n現状のデスク環境で結構満足してしまっているので、アップデートはするんだろうか。 昇降デスクとか書くの忘れたけど今後書きますか。\n","date":"2026年4月26日","externalUrl":null,"permalink":"/posts/desk-setup-2026/","section":"ブログ","summary":"デスク環境を記事にしてみます。\n普段はリモートワークが多いです。 2026年現在のデスク環境の使用デバイスの構成と採用理由は以下の通りです。\nデスク全般 手元デバイス 入力デバイス # いかに肩が凝らないようにするかが、テーマです。 なんだかんだ長時間触るものなので値段は気にせず良いものを使う方針です。\n","title":"リモートワーク エンジニアのデスク環境/2026年","type":"posts"},{"content":" 背景 # Hugoでブログを運用する際、iPhoneで撮影した写真をそのまま使うと1枚数MBもあり、Gitリポジトリがすぐに肥大化してしまいます。 そこで、次世代画像フォーマットの WebP に変換して、画質を維持しつつファイルサイズを軽量化する方法を試しました。\nImageMagickのインストール # Mac環境なら Homebrew を使って簡単にインストールできます。\n# MacにImageMagickをインストール brew install imagemagick 画像の変換とリサイズ # iPhoneの標準形式である .HEIC から、Web表示に最適な .webp へ変換します。ブログ記事の幅に合わせて横幅をリサイズし、圧縮率を指定しておきます。\n# 横幅1200px、画質75%のWebPに変換 magick \u0026lt;変換前\u0026gt;.HEIC -resize 1200x -quality 75 \u0026lt;変換後\u0026gt;.webp フォルダ内の画像を一括変換する場合 # 複数の画像をまとめて処理したいときは、以下のコマンドが便利です。\n# 変換したいフォルダに移動し、変換コマンド実行する cd testfolder magick mogrify -format webp -resize 1200x -quality 75 *.HEIC 変換テストの結果 # 実際にiPhoneで撮影した写真（HHKB）で試してみた結果がこちらです。\n比較項目 内容 ファイルサイズ 変換前 iPhone原寸 (HEIC) 4.2 MB 変換後 WebP (1200px / q75) 171 KB まとめ # ファイルサイズを 約96%削減 することができました。 表示速度も改善され、GitHubなどのリポジトリ容量を圧迫する心配もなくなります。若干面倒ではありますが、コツコツやっていこうかと思います。ショートカットとかでドラッグ＆ドロップで変換できるようにした方が楽かしら。\n後日追記 # 20260526 # 毎回、ターミナル叩くのも面倒なので、シェルスクリプト化しました。 pngをwebpに変換して、featured.webpにリネームさせています。 記事のサムネイル作成用で使っています。\n手作業でチマチマやらなくて良くなりました。\n#!/bin/bash # --- 設定エリア（必要に応じて変更）--- # 記事のベースディレクトリ BASE_CONTENT_DIR=\u0026#34;content/posts\u0026#34; # 画像処理設定 WEBP_QUALITY=75 WEBP_RESIZE=\u0026#34;1200x\u0026#34; # 最終的なWebPのファイル名 FINAL_WEBP_NAME=\u0026#34;featured.webp\u0026#34; # ------------------------------------- # 1. 引数チェック if [ -z \u0026#34;$1\u0026#34; ]; then echo \u0026#34;エラー: フォルダ名（記事のID）を指定してください。\u0026#34; echo \u0026#34;使い方: ./convert_png_to_featured_webp.sh \u0026lt;フォルダ名\u0026gt;\u0026#34; echo \u0026#34;例: ./convert_png_to_featured_webp.sh hugo-blowfish-giscus\u0026#34; exit 1 fi FOLDER_NAME=$1 TARGET_DIR=\u0026#34;${BASE_CONTENT_DIR}/${FOLDER_NAME}\u0026#34; # 2. ターゲットディレクトリの存在確認 if [ ! -d \u0026#34;$TARGET_DIR\u0026#34; ]; then echo \u0026#34;エラー: 指定されたディレクトリが存在しません: ${TARGET_DIR}\u0026#34; exit 1 fi # 3. 必要なコマンドの確認 (ImageMagick) if ! command -v magick \u0026amp;\u0026gt; /dev/null; then echo \u0026#34;エラー: \u0026#39;ImageMagick (magick)\u0026#39; コマンドが見つかりません。インストールしてください。\u0026#34; exit 1 fi # --- 処理開始 --- # 4. 指定されたフォルダへ移動 (cd 引数のフォルダ) echo \u0026#34;ディレクトリへ移動します: ${TARGET_DIR}\u0026#34; cd \u0026#34;${TARGET_DIR}\u0026#34; || { echo \u0026#34;エラー: ディレクトリの移動に失敗しました。\u0026#34;; exit 1; } # 5. PNGファイルの存在確認（PNGがなければ何もしない） PNG_FILES=$(ls *.png 2\u0026gt; /dev/null) if [ -z \u0026#34;$PNG_FILES\u0026#34; ]; then echo \u0026#34;フォルダ内にPNGファイルが見つかりません。処理をスキップします。\u0026#34; exit 0 fi echo \u0026#34;画像変換を開始します...\u0026#34; # 6. PNGをWebPに変換、リサイズ、品質設定 (magick mogrify -format webp ...) # 要件: 1200x リサイズ, 品質 75 magick mogrify -format webp -resize \u0026#34;${WEBP_RESIZE}\u0026#34; -quality \u0026#34;${WEBP_QUALITY}\u0026#34; *.png if [ $? -ne 0 ]; then echo \u0026#34;エラー: 画像の変換（magick mogrify）に失敗しました。\u0026#34; exit 1 fi echo \u0026#34;変換が完了しました。\u0026#34; # 7. 生成されたWebPのファイル名を featured.webp にリネーム # 注意: 複数のPNGから複数のWebPができた場合、どのファイルがリネームされるかはlsの順序に依存します。 # Featured Image用として1つだけを残す # 最初にlsでWebPファイルを取得（変換後のため存在確認は不要） WEBP_FILES=$(ls *.webp 2\u0026gt; /dev/null) FIRST_WEBP_FILE=$(echo \u0026#34;${WEBP_FILES}\u0026#34; | head -n 1) if [ -n \u0026#34;$FIRST_WEBP_FILE\u0026#34; ] \u0026amp;\u0026amp; [ \u0026#34;$FIRST_WEBP_FILE\u0026#34; != \u0026#34;${FINAL_WEBP_NAME}\u0026#34; ]; then echo \u0026#34;ファイルをリネームします: ${FIRST_WEBP_FILE} -\u0026gt; ${FINAL_WEBP_NAME}\u0026#34; mv \u0026#34;${FIRST_WEBP_FILE}\u0026#34; \u0026#34;${FINAL_WEBP_NAME}\u0026#34; if [ $? -ne 0 ]; then echo \u0026#34;エラー: ファイルのリネームに失敗しました。\u0026#34; # リネームに失敗した場合、安全のため元のPNGは削除せずに終了します。 exit 1 fi else echo \u0026#34;リネームは不要、または完了しています。\u0026#34; fi # 8. 元のPNGファイルを削除する (rm *.png) echo \u0026#34;元のPNGファイルを削除します...\u0026#34; rm *.png if [ $? -eq 0 ]; then echo \u0026#34;成功: すべての処理が完了しました。\u0026#34; echo \u0026#34;作成されたファイル: ${TARGET_DIR}/${FINAL_WEBP_NAME}\u0026#34; else echo \u0026#34;エラー: PNGファイルの削除に失敗しました。\u0026#34; exit 1 fi contvert_png_to_featured_webp.sh みたいな形で保存し、 以下のように実行します。\n# 実行権限を付与 chmod +x contvert_png_to_featured_webp.sh # 実行するときは下記で ./contvert_png_to_featured_webp.sh [実行するフォルダ] 20260530 # スマホスクショ用にwebpファイルを横500pxに変換 # iPhoneのスクショを本ブログに貼ろうとしたのですが、サイズが大きすぎたので以下のコマンドでサイズ変換してみました。\ncd [変換するフォルダ] magick mogrify -resize 500x *.webp まだ大きい気がするので様子みようかと思います。\n","date":"2026年4月26日","externalUrl":null,"permalink":"/posts/webp/","section":"ブログ","summary":"背景 # Hugoでブログを運用する際、iPhoneで撮影した写真をそのまま使うと1枚数MBもあり、Gitリポジトリがすぐに肥大化してしまいます。 そこで、次世代画像フォーマットの WebP に変換して、画質を維持しつつファイルサイズを軽量化する方法を試しました。\n","title":"ブログ画像をwebp変換する！スクリプトで効率化（Hugoブログ）","type":"posts"},{"content":" 背景 # 最初の記事ということで簡単な自己紹介です。 普段はクラウド系のエンジニアをしています。\n仕事柄、新しい技術に触れることが多いので、アウトプットの習慣化と自分用のメモをストックする場所を作りたいと考えて、ブログを始めてみることにしました。\n技術的な話とか、そのときどきで関心を持ったものなども適当に書いていく予定です。\nなぜHugoを選んだのか # 最初はWordPressも検討しましたが、個人ブログでサーバーの運用コストをかけ続けるのはもったいないなと。今更ながらではありますが、SSG（静的サイトジェネレーター）とCDNを組み合わせた軽量な構成にしました。\n新規で静的サイトジェネレーターを導入するのは、表示速度や管理の面で大きなメリットがあります。 テーマは、デザインがかわいらしくて直感的に気に入った Blowfish を選択。カスタマイズ性できそうなので、少しずつ自分好みに設定をいじってみようと思います。\n今回は、高速かつモダンなテーマ「Blowfish」を使用したHugoの導入手順を記録します。\nHugo導入のステップ # 1. Hugoのインストール # まずはローカル環境にHugoをインストールします。\n# macOS (Homebrew) brew install hugo サイトの新規作成 任意のディレクトリで以下のコマンドを実行し、サイトの雛形を作ります。 hugo new site my-blog テーマ「Blowfish」の導入 今回はデザイン性と機能性に優れた Blowfish をサブモジュールとして追加します。 cd my-blog git init git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish 記事の作成 以下のコマンドで新しい記事（Markdownファイル）を作成します。 hugo new posts/first-post.md ローカルで確認 以下のコマンドでローカルサーバを起動させる。 hugo server ブラウザから以下にアクセスできることを確認する。\nlocalhost:1313 2.デプロイ # Cloudflare Pagesでの公開 GitHubにリポジトリをプッシュし、Cloudflare Pagesと連携させることで公開が完了します。 GitHub側でCloudflareの認証を許可する必要があります。\nCloudflare側でhugoのビルドコマンドを書いていきます。Hugoのバージョンの相性が悪いのかエラーになり、やや格闘しました。\nまとめ # Hugoは一度環境を構築してしまえば、Markdownで記事を書き、GitHubにプッシュするだけでサイトが更新されるなかなか快適なツールです。これからガシガシ記事を書いていこうと思います。\nただ設定はやってみた系の参考記事を見てもあまり良くわからんので、公式のドキュメントをちゃんと読むのと、 すでにサイト作られている方のGitHubリポジトリのソース見るのが一番早い気がします。 色々試してみようかと思います。改善なんかも載せていきたいです。\nGithubのCodespacesにHugoがデフォルトで入っているので、CloudFlareと連携させるだけでもデプロイできてしまう！しかもドメイン取らなければ無料だし、非常に便利です。\n","date":"2026年4月25日","externalUrl":null,"permalink":"/posts/create-hugo-blog/","section":"ブログ","summary":"背景 # 最初の記事ということで簡単な自己紹介です。 普段はクラウド系のエンジニアをしています。\n仕事柄、新しい技術に触れることが多いので、アウトプットの習慣化と自分用のメモをストックする場所を作りたいと考えて、ブログを始めてみることにしました。\n","title":"HugoとCloudflare pagesでブログを無料で作成・運用する","type":"posts"},{"content":"","externalUrl":null,"permalink":"/authors/","section":"Authors","summary":"","title":"Authors","type":"authors"},{"content":"","externalUrl":null,"permalink":"/series/","section":"Series","summary":"","title":"Series","type":"series"},{"content":"","externalUrl":null,"permalink":"/tags/","section":"Tags","summary":"","title":"Tags","type":"tags"}]