初心者向け

🚀 はじめに：この記事でできること App Routerの基本概念から最小実装、データ取得、Server Actions/Route Handlersまでを「操作→目的→結果→注意/補足」の順で習得します。ゴールは、app/ディレクトリで最小アプリを動かし、RSCのデータ取得と更新を体験できる状態です。 🧭 前提：対応バージョンと用語の整理 App RouterはNext.js 13.4以降で本格化したルーティングです。Pages専用API（getServerSideProps等）はApp Routerでは非推奨で、RSC（React Server Components）とファイル規約が基本になります。 操作 プロジェクトのNext.jsバージョンを確認し、app/ディレクトリが利用可能かを確認する 用語を把握：layout.tsx（レイアウト）/ page.tsx（ルート）/ loading.tsx / error.tsx / route.ts（API）/ RSC / Server Actions 目的 以降の手順で使う概念・ファイル規約の前提をそろえ、混乱を防ぐ 結果（この時点でできること） App Routerの章立てと各ファイル役割を前提知識として共有できる 注意 Pages RouterのAPI（getServerSideProps等）はApp Routerでは使わない クライアントでのみ動くAPI（window等）はClient Componentに分離（"use client"を付与） 🧩 App Routerとは？（概要） App Routerはフォルダ＝URL、page.tsx＝公開ルート、layout.tsx＝共通UIという規約で、RSC前提の「サーバ優先（Server First）」な構成を提供します。 操作 役割を把握： app/layout.tsx：アプリの共通レイアウト app/page.tsx：トップページ app/**/loading.tsx：セグメント単位のローディングUI app/**/error.tsx：セグメント単位のエラーUI app/api/**/route.ts：HTTPメソッドごとのAPIハンドラ 目的 ファイル規約とRSCの前提を結び付けて理解する 結果（この時点でできること） 「どのファイルが何を担うか」を説明できる 補足 レイアウトはナビゲーションでも状態が保持されやすい設計（ページだけ差し替え）です。 🗺️ 図解：App Routerのディレクトリと流れ 最小構成の関係性を図で理解します。 操作 以下の図/ツリーで、URLとファイルの対応を確認する 目的 セグメント（フォルダ）＝URLという対応付けを視覚的に理解する 結果（この時点でできること） どの階層にpage.tsx等を置けばURLが有効化されるか判断できる 補足 layout.tsxは上位レイアウトを継承しながら子ページを差し替えます。 ...

🚀 はじめに：この記事でできること Hugo と PaperMod で作ったブログを、Cloudflare Pages を使って高速・無料で公開する方法を、初心者向けにわかりやすくまとめたガイドです。 この記事を読むと、次のことが理解できます。 Hugo + PaperMod + Cloudflare Pages の相性が良い理由 ローカル → GitHub → Cloudflare Pages の公開までの全体像 初心者がつまずきやすいポイントと回避方法 🧭 前提：必要な環境と対象読者 Cloudflare Pages で公開する前に、最低限そろえておきたい環境を整理します。 必要な環境 Hugo Extended v0.153.1 がローカルにインストール済み ※PaperMod v8.0 は SCSS を使うため Extended 版が必須 GitHub アカウント（push / pull ができる状態） Cloudflare アカウント（無料プランでOK） 想定する読者 コマンドは最低限なら使える GUI ベースの設定があると安心 「とにかく簡単に静的サイトを公開したい」人 💡 概要：Hugo + PaperMod + Cloudflare Pages の相性が良い理由 Hugo（静的サイトジェネレーター） Go 製でビルドが高速 Markdown で記事を書ける PaperMod などテーマが豊富 PaperMod（Hugo テーマ） 軽量・高速 ブログ向けの機能が充実 SCSS を使うため Hugo Extended が必須 Cloudflare Pages（ホスティング） 無料で使える グローバル CDN による高速配信 GitHub 連携で自動デプロイ HTTPS 証明書も自動発行 組み合わせるメリット git push するだけで自動デプロイ CDN による高速配信 無料枠が広く個人ブログに最適 Hugo のビルド設定が簡単 📱 Step 1：ローカルに Hugo + PaperMod 環境を用意する 1. Hugo Extended をインストール Windowsの場合 1. Hugo Extended の ZIP をダウンロード Hugo の公式 GitHub リリースページへアクセスします。 👉 https://github.com/gohugoio/hugo/releases (github.com) 2. ダウンロードするファイルを間違えないこと Windows 用の Extended 版は次のような名前です。 hugo_extended_0.153.1_windows-amd64.zip ※ `extended` と `windows-amd64` が入っているものを選ぶのがポイント。 3. ZIP を展開し、任意のフォルダに置く 例： `C:\Tools\Hugo\` など、わかりやすい場所に `hugo.exe` を置きます。 4. PATH を通す 1. Windows の検索で「環境変数」と入力 2. 「環境変数の編集」を開く 3. 「Path」を選択 →「編集」 4. `C:\Tools\Hugo\` を追加 5. OK を押して閉じる macの場合 brew install hugo インストール後、次で Extended 版か確認します。 ...

🚀 はじめに：この記事でできること VPNサーバーの基本から、自宅やクラウドでの構築イメージ、WireGuard を使った Ubuntu での設定の流れまでを、初心者向けに一通りつかめるように解説します。 この記事を読むと次のことができるようになります： VPNサーバーの仕組みと役割が理解できる 自宅やクラウドに VPN サーバーを構築するイメージがつかめる Linux（Ubuntu）で WireGuard を動かすための基本コマンドが分かる 初心者がつまずきやすいポイントや注意点を事前に押さえられる こんな人におすすめです： ネットワーク初心者 Python や Linux に興味があり、環境構築を学びたい 自宅サーバーやクラウドで何かサービスを動かしてみたい 安全にリモートアクセスできるようになりたい 専門用語はできるだけ噛み砕きつつ、最低限押さえておきたいポイントは漏らさず説明します。 🧭 前提：この記事で扱う環境と想定読者 この記事では、代表的な構成として Ubuntu 上の WireGuard を使った VPN サーバー を例に解説します。 前提となる環境・知識 Ubuntu 20.04 以降（または近い Debian 系ディストリビューション） sudo 権限を持つユーザーアカウント 公開ポート（UDP 51820 など）を 1 つ開けられる環境（自宅ルーター or クラウドのセキュリティグループ） cd / ls / nano / sudo など、基本的な Linux コマンドの操作経験が少しあること この記事でカバーしないもの（概要のみ） 企業向けの大規模 VPN 設計 IPsec / OpenVPN など、WireGuard 以外の実装の詳細設定 高度なセキュリティ運用（監査ログ収集、ゼロトラスト設計など） 補足 コマンドやパッケージ名、設定ファイルの場所は、ディストリビューションやバージョンによって将来的に変わる可能性があります。詳細は後半の「参考リンク」にある公式ドキュメントも合わせて確認してください。 ...

🚀 はじめに：この記事でできること Android端末（Root不要）で Termux＋proot-distro を使い、Ubuntu環境を構築します。インストール→ログイン→パッケージ管理→Python開発→共有ストレージ連携までを、操作→目的→結果（この時点でできること）→注意/補足の順で丁寧に解説します。初心者が混乱しやすい前提（擬似root・systemd不可・/sdcardの扱い）も最初に整理します。 用語メモ TermuxはAndroid向けのLinux端末アプリ。PRootはユーザー空間でのchroot相当を実現、proot-distroはその管理ラッパー（配布rootfsの取得・展開・ログインを簡素化）。 🧭 前提：仕様と制限の理解（混乱しやすいポイント） 操作 以降の手順はRoot不要／スマホのみで進めます。 目的 擬似rootと本物のrootの違い、systemd不可、/sdcard連携などの制約を把握してから構築する。 結果（この時点でできること） 「動かないもの」を事前に理解し、失敗切り分けが容易になる。 注意 PRootは本物のrootではないため、systemd依存サービス・カーネル機能・Snapの多くは動作しません。サービス常駐はtmux/screen等で代替。 早見表 できる：CLI学習／Python開発／apt管理／共有ストレージ（/sdcard）連携 難しい：本格的なデスクトップ常用、systemd必須のサービス、カーネルモジュール 📱 Step 1：Termuxの準備（権限付与と更新） 目的：Termux側でパッケージ更新と共有ストレージ権限を設定し、後続のインストールとデータ連携を安定化する。 前提：Google Play版ではなく、互換性のあるTermux配布（F-Droid等）を利用している。 # パッケージリスト更新 pkg update -y # 共有ストレージ（/sdcard）へのアクセス許可 termux-setup-storage # → 権限ダイアログが出たら「許可」 結果（この時点でできること）：Termuxから~/storage／/sdcardが参照でき、後でUbuntu内からもデータを扱える。 注意：権限不調時は一度許可を取り消して再付与。~/storage/sharedが内部共有ストレージに対応。 🧩 Step 2：proot-distroの導入とディストロ確認 目的：proot-distroをインストールし、提供ディストリビューション（Ubuntu等）の一覧を把握する。 前提：Step 1が完了し、Termuxのネットワークが正常。 # proot-distroを導入 pkg install -y proot-distro # 提供ディストリビューション一覧 proot-distro list 結果（この時点でできること）：Ubuntu（最小rootfs）の取得準備が整い、以降のinstall→loginが可能。 注意：提供バージョンはメンテナの方針で単一またはローリングの場合あり。細かな版指定は原則不可。 🏁 Step 3：Ubuntuのインストールとログイン 目的：最小rootfsをダウンロード・展開し、Ubuntu環境にログインできる状態にする。 前提：Termuxのストレージ準備・ネットワークが正常。 # Ubuntuの最小rootfsを取得・展開 proot-distro install ubuntu # ルートシェルでログイン（擬似root） proot-distro login ubuntu 結果（この時点でできること）：Ubuntuシェルに入ってaptやファイル操作が可能。 注意：擬似rootであり、本物のrootが必要な操作（カーネル・systemd必須機能）は不可。 ...

🚀 はじめに Androidの Termux は、スマホでLinux的な環境を使える便利なアプリ。 この記事では zsh と oh-my-zsh を組み合わせて、オートサジェスト・シンタックスハイライト・魅力的なプロンプトを備えた、快適なシェル環境をゼロから構築します。 できるようになること Termuxに zsh を導入してデフォルト化 oh-my-zsh でプラグインとテーマを設定 Powerlevel10k ＋ Nerd Fonts で見やすいプロンプトを実現 よくあるつまずきを事前に回避 こんな人向け 技術初心者〜中級者 アプリ開発・プログラミング・Python・Linuxに興味がある 実際に手を動かして試したい、エラーを避けたい 初心者でも安心な理由 Step形式で 必ず動く最小構成 → 便利な拡張 の順で説明 失敗例・回避策・復旧方法までカバー 注意：Play ストア版 Termux は更新停止です。F-Droid または GitHub Releases から最新版を入手しましょう。 （参考：Termux公式Wiki / GitHub） 💡 概要解説 Termuxとは何か Android上で動く 端末エミュレーター + パッケージ管理（pkg）を備えた環境。 追加のroot不要で、bash/zsh、Python、git、ssh 等を扱える。 zsh / oh-my-zshとは zsh：高機能なシェル。補完や設定の自由度が高く、開発者に人気。 oh-my-zsh：zsh向けのフレームワーク。テーマやプラグインを簡単に導入・管理できる。 なにが便利？ 補完・サジェストでタイプ量が激減 シンタックスハイライトでタイポに気づきやすい 美しいプロンプトで分岐・ブランチ・ステータス可視化 どんな場面で使える？ Python/Nodeの開発前準備（仮想環境作成、パッケージ導入） Git操作（ブランチやステータスが一目で分かる） SSH・サーバ管理（ショートカットや履歴が効く） 📱 Step 1：インストールと前提条件 Termuxの準備 F-Droid または GitHub Releases から最新版を導入 起動後、パッケージを更新 # パッケージの更新（まずはここから） pkg update && pkg upgrade -y # よく使う基本ツール pkg install -y git curl wget tar 補足：通信が遅いときは termux-change-repo を実行してミラーを変更します。 ...

🚀 はじめに：Termuxとは？ Termux は、Androidスマホ上で Linux環境をそのまま再現できるターミナルアプリです。 PCを開くほどでもない作業をスマホで済ませたい 外出先でPythonスクリプトやGit操作をしたい Androidを「学習用Linux端末」として使ってみたい このような方にとって、Termuxは 最小構成＆無料で使える強力なツールです。 本記事では インストールから開発環境構築まで を 完全初心者でも迷わず進められるように 解説します。 補足 TermuxはGoogle Playではなく、F-Droidからのインストールが推奨されています。最新版を利用するためです。 📲 Step 1：Termuxのインストール方法 Termuxは公式にはF-Droidから入手します。 # F-DroidからTermuxをインストール # 1. F-Droidアプリをインストール # 2. Termuxを検索してインストール 注意 Google Play版は更新が止まっているため、F-Droid版を使いましょう。 ⚙️ Step 2：初期設定と基本コマンド Termuxを起動したら、まずパッケージを最新化します。 # パッケージリスト更新 pkg update # パッケージをアップグレード pkg upgrade ✅ この時点でできること Linuxライクなコマンド操作 パッケージ管理（apt互換） 軽いファイル操作やスクリプト実行 よく使う基本コマンド： ls：ディレクトリ一覧 cd：ディレクトリ移動 pwd：現在のパス確認 補足 初期シェルは bash です。後半で zsh に変更することもできますが、初心者のうちは bash のままで問題ありません。 Termuxではpkgコマンドがaptのラッパーとして使えます。 🛠️ Step 3：開発環境を構築する PythonやNode.jsをインストールして、スマホでスクリプトを実行できます。 ...

🚀 この記事のゴール YouTube Data API を使って「動画タイトル」「再生回数」「チャンネル情報」などを取得し、アプリやブログに活用できるようになること。 🎯 YouTube Data APIとは？ YouTube Data API は、YouTube 上の 動画・チャンネル・再生リスト などの情報を取得できる公式APIです。 アプリ開発、データ分析、ブログ自動生成など、幅広い用途で利用できます。 🧰 前提条件（必要な環境） Googleアカウント Google Cloud Console にアクセスできる環境 コマンドライン（curl）または Python が使える環境 注意：YouTube Data API は無料枠がありますが、利用量に応じてクォータが消費されます。 🔑 APIキーの取得方法 YouTube Data API を使うには、まず APIキー を取得します。 1. Google Cloud Console にアクセス https://console.cloud.google.com/ 2. 新規プロジェクトを作成 画面上部のプロジェクト選択 → 「新しいプロジェクト」 3. API を有効化 「APIとサービス」→「ライブラリ」→ YouTube Data API v3 を検索して有効化。 4. APIキーを作成 「認証情報」→「認証情報を作成」→ APIキー 補足：APIキーは外部に漏れると不正利用される可能性があります。GitHubなどに公開しないよう注意。 📦 基本的なAPIリクエストの仕組み YouTube Data API は REST API 形式で、URLにパラメータを付けてアクセスします。 ...

🚀 はじめに：この記事で学べること 本記事では、Hugo + GitHub Pages でブログを運用している初心者の方向けに、 GitHub Actions を使って自動デプロイする仕組みを、できるだけ分かりやすく解説します。 GitHub Actions が何をしているのか Hugo のビルドがどのように自動化されるのか gh-pages ブランチへ自動デプロイされる仕組み 実際に使えるワークフローのテンプレート 補足 「自動デプロイ」は、記事を更新するたびに手動で hugo → git push → gh-pages へ反映…という作業をなくすための仕組みです。 🧱 Step 1：GitHub Actions の基本を理解する GitHub Actions は、GitHub が提供する 自動実行の仕組み（CI/CD） です。 🔧 何が自動化されるのか？ Hugo のインストール サイトのビルド（hugo コマンド） public/ の生成 gh-pages ブランチへのデプロイ これらを YAMLファイル（ワークフロー） に書いておくことで、GitHub が自動で実行してくれます。 📁 Step 2：ワークフローの配置場所を知る GitHub Actions の設定ファイルは、リポジトリ内の以下に置きます。 .github/workflows/deploy.yml 注意 ディレクトリ名 .github/workflows/ を間違えると、GitHub Actions が認識しません。 ⚙️ Step 3：Hugo 自動デプロイ用ワークフローの例 以下は、Hugo サイトを GitHub Pages に自動デプロイする最小構成の例です。 ...

🧭 はじめに：この記事で理解できること Hugo は高速で柔軟な静的サイトジェネレーターですが、フォルダ構造が分かりにくいと感じる初心者は多いです。 この記事では、以下のことを丁寧に解説します。 Hugo プロジェクトのフォルダ構造の全体像 各ディレクトリの役割 PaperMod を使う場合の注意点 GitHub Pages で運用する際に理解しておくべきポイント 補足 Hugo のフォルダ構造は「必要なものだけ作ればよい」仕組みです。最初から全部覚える必要はありません。 🗂️ 全体構造：Hugo プロジェクトの基本フォルダ まずは、Hugo プロジェクトの典型的な構造を見てみましょう。 # Hugo プロジェクトの基本構造（例） . ├─ config/ または hugo.yaml # サイト設定 ├─ content/ # 記事（Markdown） ├─ layouts/ # テンプレート（上書き用） ├─ static/ # 静的ファイル（画像・HTMLなど） ├─ assets/ # SCSS/JS（Hugo Pipes） ├─ themes/ # PaperModなどテーマ ├─ archetypes/ # 記事テンプレート └─ public/ # ビルド後の出力（自動生成） 注意 public/ は Hugo がビルド時に自動生成するため、手動で編集しないようにしましょう。 📁 1. config/（または hugo.yaml）：サイト全体の設定 Hugo の設定は config ディレクトリまたは hugo.yaml に記述します。 PaperMod を使う場合、hugo.yaml で管理するのが一般的です。 ...

🎯 この記事で得られること この記事では、Hugo + PaperMod を使ったブログの冒頭に表示される メタ情報（投稿日・更新日・読了時間・著者） を、次のようにカスタマイズする方法を解説します。 📅 投稿日 🔄 更新日 ⏱ 読了目安 ✍️ 著者（リンク付き） 🇯🇵 日本語 / 🇺🇸 英語の自動切り替え PaperMod のアップデートに強い「上書きレイアウト方式」 ポイント：PaperMod のテーマファイルは直接編集せず、 layouts/partials/post_meta.html を上書きする方法が最も安全です。 📘 1. PaperMod のメタ情報はどこで生成されている？ PaperMod の記事ページ（single.html）では、メタ情報は次の partial で生成されています。 themes/PaperMod/layouts/partials/post_meta.html このファイルを直接編集すると、テーマ更新時に上書きされてしまうため、 プロジェクト側にコピーして上書きするのが正しい方法です。 📁 2. post_meta.html をプロジェクト側にコピーする まずは PaperMod の元ファイルを確認し、プロジェクト側にコピーします。 # プロジェクトのルートで実行 mkdir -p layouts/partials cp themes/PaperMod/layouts/partials/post_meta.html layouts/partials/post_meta.html 補足：Hugo は「プロジェクト側の layouts を優先」して読み込むため、 このコピーがそのまま上書きとして機能します。 🛠 3. 日本語・英語対応のカスタム post_meta.html を作成する 以下は、メタ情報（投稿日・更新日・読了時間・著者）を、次のようにカスタマイズする 完全版 post_meta.html です。 📅 投稿日 🔄 更新日（変更がある場合のみ表示） ⏱ 読了目安 ✍️ 著者（リンク付き） 🇯🇵 日本語 / 🇺🇸 英語の自動切り替え {{- /* =============================== カスタム Post Meta（日本語/英語対応） 表示内容： 📅 投稿日 ｜ 🔄 更新日 ｜ ⏱ 読了目安 ｜ ✍️ 著者（リンク） =============================== */ -}} {{- $lang := .Site.Language.Lang | default "ja" -}} {{- $date := .Date -}} {{- $lastmod := .Lastmod -}} {{- $readingTime := .ReadingTime -}} {{- $authorName := or .Params.author .Site.Author.name "[UserName]" -}} {{- $authorURL := or .Params.authorLink .Site.Author.link "#" -}} <div class="post-meta"> {{- if eq $lang "ja" -}} <span class="post-meta-item">📅 投稿日：{{ $date.Format "2006年1月2日" }}</span> {{- if ne $lastmod $date -}} <span class="post-meta-separator">｜</span> <span class="post-meta-item">🔄 更新日：{{ $lastmod.Format "2006年1月2日" }}</span> {{- end }} <span class="post-meta-separator">｜</span> <span class="post-meta-item">⏱ 読了目安：{{ $readingTime }}分</span> <span class="post-meta-separator">｜</span> <span class="post-meta-item">✍️ 著者：<a href="{{ $authorURL }}">{{ $authorName }}</a></span> {{- else -}} <span class="post-meta-item">📅 Published: {{ $date.Format "Jan 2, 2006" }}</span> {{- if ne $lastmod $date -}} <span class="post-meta-separator">｜</span> <span class="post-meta-item">🔄 Updated: {{ $lastmod.Format "Jan 2, 2006" }}</span> {{- end }} <span class="post-meta-separator">｜</span> <span class="post-meta-item">⏱ Reading time: {{ $readingTime }} min</span> <span class="post-meta-separator">｜</span> <span class="post-meta-item">✍️ Author: <a href="{{ $authorURL }}">{{ $authorName }}</a></span> {{- end }} </div> 注意：著者リンクは front matter の authorLink: または config の .Site.Author.link で設定できます。 ...