Web・アプリ開発

🚀 はじめに：この記事でできること 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 版か確認します。 ...

🚀 はじめに AndroidスマホにTermuxを入れるだけで、nginx（静的配信）とPython（動的アプリ）を組み合わせたミニサーバーを構築できます。この記事は、インストールから逆プロキシでFlaskを公開、つまずき対策までを一気通貫で解説します。 この記事で達成できること スマホ上でnginxを起動し、静的ファイルを配信 **Python（Flask＋Gunicorn）**でWebアプリを動かす nginxの逆プロキシでPythonアプリを外部公開 よくあるエラー（ポート、スリープ、権限）を回避 ※ Playストア版Termuxは更新停止。F-Droid版のTermuxが安全です。 🧭 前提と準備 本番前に、インストール元・権限・ポート・IPなど、初心者が混乱しやすい前提を整えます。 1-1. Termuxのインストール（F-Droid版推奨） 操作 F-Droidアプリをインストール → Termuxで検索 → 最新版をインストール 目的 保守されている配布元からTermuxを導入し、最新パッケージを利用可能にする。 結果（この時点でできること） 以降のpkgによる導入と更新が安定して行える。 注意/補足 Play版Termuxは古いため非推奨。F-Droid版を使用。 1-2. 初期設定（更新・権限・必須ツール） 操作 # パッケージ更新 pkg update && pkg upgrade -y # ストレージアクセス（/sdcard を使えるように） termux-setup-storage # よく使うツール pkg install -y git curl vim tmux # サーバー関連 pkg install -y nginx python # （必要なら）サービス管理とSSH pkg install -y termux-services openssh 目的 基本ツール・Webサーバー・Python環境を揃え、ストレージ権限を付与する。 結果（この時点でできること） nginxとpythonが利用可能、/sdcardへの読み書きも許可済み。 注意/補足 termux-setup-storageで権限付与。定期的にpkg upgradeで更新。 1-3. 使うポートとIPを確認 操作 ...

🚀 はじめに：この記事でできること Android端末上のTermux環境で、Git/GitHubを安全に使うための実践フローを、SSH鍵作成→GitHub登録→ghログイン→clone/commit/pushまで手順化します。 さらに、Hugo（PaperMod） の記事を GitHub Actions → GitHub Pages で自動公開する最小構成も併せて整えます。 補足 本記事は 初心者が混乱しやすい前提（Termux独自パッケージ、共有ストレージ権限、拡張Hugoの有無）を先に明示し、各Stepを 操作 → 目的 → 結果 → 注意/補足 の順で進めます。 🧭 前提：環境と基本方針 Termuxは通常のLinuxと異なる点があり、公式パッケージ（pkg）優先・外部配布物を直接入れないことが安全運用の鍵です。共有ストレージ権限やパスの違いも混乱の元になるため、最初に整理します。 操作 Termuxアプリをインストールし、起動 以降のセットアップは pkg を用いる（aptは可能だが推奨はpkg） 目的 Termux環境を最新化し、Git/SSH/gh を公式ビルドで導入して安定運用する 前提 Android端末でTermuxが正常動作（ネット接続可） ファイル操作は $HOME（例：~/）を基本に行う 結果（この時点でできること） 後続のインストールや鍵作成が 権限・互換性の問題を回避 しながら進められる 注意 Termuxで外部レポジトリや他ディストリのdebを直接導入すると破損の原因になります。必ず Termux公式のパッケージ を利用しましょう。 📱 Step 1：Termuxの初期セットアップ（更新・権限・導入） Termuxを最新化し、共有ストレージ権限を付与、必要なパッケージを導入します。 操作（目的／前提を読んでから実行） 目的 パッケージを最新化し、ストレージ操作とGit/GitHubに必要なコマンド群を整える 前提 Termuxが起動可能 インターネット接続が安定している # パッケージの最新化 pkg update && pkg upgrade -y # 共有ストレージへのアクセス（初回のみ） termux-setup-storage ls ~/storage/shared # 必要パッケージの導入（Git / OpenSSH / GitHub CLI） pkg install git openssh gh -y # （任意）クリップボード操作を使う場合 pkg install termux-api -y 結果（この時点でできること） ...

🚀 はじめに：この記事でできること Termux は、Android 上に Linuxライクなコマンドライン環境 を用意できる強力なアプリです。 この記事では、Termux に Python を導入し、「スマホだけでできる10の実践例」 を通して、開発・自動化の第一歩を具体的な手順で解説します。 この記事を読むとできること Termux を安全にインストールし、Python を正しく動かせる スマホだけで Linux コマンド・Python スクリプト・pip を使いこなせる Webスクレイピング・APIアクセス・自動バックアップ・通知・簡易Webサーバーなど 10の実用パターン を理解できる 想定している読者 スマホだけでプログラミングを始めたい人 PCがなくても Python を学びたい人 Termux を入れたけれど、「結局何ができるの？」から抜け出したい人 エラーや設定でつまずきたくない初心者 補足 すべての例は「実際に動くこと」を前提にしています。環境の違いで動かない可能性がある箇所は、注意点や回避策もあわせて紹介します。 💡 Termux＋Pythonの概要と前提 Termux で何ができるかを整理しつつ、この記事で前提とする環境を明確にします。 操作 Android に Termux をインストールし、Linuxコマンドと Python を使う パッケージ管理コマンド pkg を使って必要なツールを導入する 目的 「Termux＋Python」という組み合わせのイメージを掴み、何ができる環境なのか を理解する 後続の手順で混乱しないよう、前提条件をそろえる 前提 Android スマホを使用している インターネット接続がある コマンドラインにほとんど触れたことがない初心者も想定 説明 Termux には次のような特徴があります。 Linuxコマンド がそのまま使える パッケージ管理（pkg）で Python や Git が簡単にインストールできる スマホだけで開発環境が完結する Python を組み合わせることで、次のようなことが可能です。 ...

🚀 はじめに：この記事でできること 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のコマンドから安全に操作できるようになります。 対象読者：技術初心者〜中級者、Android×LinuxやPython、アプリ自動化に興味がある方 この記事が安心な理由： F-Droid版Termux/Termux:APIを使った最新かつ安全な導入を丁寧に解説（Google Play版は非推奨） よくあるつまずきと回避策をチェックリストで網羅 実用スクリプトをそのままコピペで試せる 用語メモ：TermuxはAndroid上のLinux環境＋ターミナル、Termux:APIは「Androidの機能をコマンドから呼び出すための追加アプリ（アドオン）」です。 💡 概要解説 Termux APIとは何か Termux:APIは、Androidの機能（カメラ・位置情報・通知・センサー・SMS・通話など）をコマンドラインから扱えるようにするTermux用のアドオンです。コマンドはtermux-XXXとして提供され、スクリプトや自動化に組み込めます。 何が便利なのか GUI不要で撮影・通知・音声読み上げ・連絡先参照などが可能 シェルスクリプトやPythonと組み合わせて自動化しやすい 権限管理が明確で、必要な操作だけに限定可能（アプリ権限＋Termuxパッケージ） どんな場面で使えるのか バッテリー低下時に自動通知＋トーチ点灯 屋外で現在地取得→通知 撮影・メディアスキャンでギャラリー反映 定期ジョブでログ取得・センサー記録など（Job Scheduler） 📱 Step 1：インストールや前提条件 インストール元は混在させない（F-DroidとGoogle Playを混ぜると互換性問題が発生）。必ずF-Droidに統一しましょう。 # 1) Termux本体をF-Droidからインストール（推奨） # F-Droidクライアントを入れて、Termuxを検索→インストール # https://f-droid.org/packages/com.termux/ # 2) Termux:APIアドオンをF-Droidからインストール # アドオン名：Termux:API # https://f-droid.org/packages/com.termux.api/ # 3) Termuxを起動して基本セットアップ pkg update && pkg upgrade -y # パッケージを最新化（推奨） pkg install termux-api # Termux:API用のCLIを導入 # 4) 共有ストレージのアクセス権を設定（必要な場合） termux-setup-storage # ~/storage に各種シンボリックリンクを作成 termux-setup-storageを実行すると、~/storage/sharedや~/storage/downloadsなどが作成され、Androidの共有ストレージへ安全にアクセスできます。Android 11では権限再付与が必要になることがあります。 ⚙️ Step 2：基本的な使い方（まずは試す） 以降のコマンドはTermux内で実行します（Termux:APIアドオン＋termux-apiパッケージが導入済みであること）。 ...

🚀 はじめに 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をインストールして、スマホでスクリプトを実行できます。 ...

🚀 はじめに：この記事でできること この記事は、Hugoのショートコード（Shortcodes）を使って、Markdown記事の表現力を高めるための完全ガイドです。 組み込みショートコードの使い方から、自作ショートコードの作成、PaperModでの最適化までを「操作→目的→結果→注意/補足」の順で、初心者でも迷わない構成で解説します。 補足 ショートコードは、YouTube埋め込み・画像最適化・カスタムHTMLの挿入・再利用可能なパーツ化などを簡単に実現できます。WordPressのショートコードに似ていますが、Hugoは高速でテンプレート連携が容易なのが特徴です。 🧭 前提：対象と環境 このガイドは Hugo + PaperMod + GitHub Pages でブログを運用する初心者〜中級者を対象に、記事内の表現力と保守性を高めるための実践的な手順をまとめています。 操作 作業環境：Hugo（最新安定版）・PaperModテーマ・GitHub Pagesで公開済み 記事はMarkdown（.md）で作成し、ショートコードを適宜挿入 目的 記事品質と生産性を両立：繰り返し使う表現をショートコード化し、統一感と更新容易性を確保する 結果（この時点でできること） 以降のセクションで、組み込みショートコードの活用から自作までをスムーズに実施できる 注意 テーマに同名ショートコードが存在する場合、プロジェクト側が優先されます。競合時は命名や配置を見直してください。 🧩 基本の使い方（組み込みショートコード） 組み込みショートコードの使い方を、操作→目的→結果→注意で確認します。この記事の例はPaperModでもそのまま使えます。 YouTube動画を埋め込む 操作 記事内で youtube ショートコードに動画IDを渡して埋め込みます。 目的 YouTube動画をレスポンシブ対応で簡単に埋め込む。 結果（この時点でできること） 記事本文に動画プレイヤーが表示され、モバイルでも崩れにくい。 注意 ページ表示速度への影響を抑えるため、動画の数は最小限に。必要なら折りたたみ（details）と併用して視認性を保つ。 操作（例） 🖼️ 画像ショートコード（figure） 画像をキャプション付きで挿入する標準ショートコードです。 ...

🧭 1. Hugoのマルチ言語機能とは？ Hugoは config に言語設定を追加するだけで、 言語別のURL生成・翻訳ファイル・メニュー・コンテンツ管理 を自動で行ってくれます。 Hugoのマルチ言語の特徴 言語ごとにフォルダを分けて管理できる 言語別のメタデータ（title, description）を設定可能 i18n翻訳ファイルでUI文言を切り替えられる 言語スイッチャー（Language Switcher）も簡単に実装できる 補足 Hugoは「多言語サイト」を最初から想定して設計されているため、WordPressよりも構築が簡単なケースもあります。 📁 2. ディレクトリ構成を理解する Hugoでは、言語ごとにコンテンツを分けるのが基本です。 例：日本語（ja）と英語（en）の場合 # content ディレクトリの構成例 content/ ja/ _index.md about.md en/ _index.md about.md 注意 言語フォルダ名は config の languages で設定したキーと一致させる必要があります。 ⚙️ 3. configファイルで言語設定を追加する Hugoのマルチ言語設定は config.yaml（または toml/json）に記述します。 基本的な設定例 # config.yaml defaultContentLanguage: ja # デフォルト言語 defaultContentLanguageInSubdir: true # /ja/ を付けるかどうか languages: ja: languageName: "日本語" weight: 1 title: "マイサイト（日本語）" en: languageName: "English" weight: 2 title: "My Website (English)" 補足 weight は言語の優先順位です。小さいほど優先されます。 ...