このページでわかること ターミナル操作を自動録画する「VHS」のUbuntuへの導入手順 VHS実行時のChromium/Sandboxエラーの回避方法 関連記事 VHSによるデモ動画GIFの作成環境の構築 VHSの設定ファイルからターミナル動画Gifを作成する 経緯 今までターミナルのキャプチャーをWindowsのSnipping Toolを使ってたが、コマンド失敗時の取り直し等 時間がかかるので、調査したところVHSなるものを見つけたので調査検証した結果を残しておく。 執筆時の環境とバージョン Ubuntu: 22.04 VHS: v0.10.0 公式 Githubリポジトリ 環境構築 1. デモ動画作成ツール「VHS」の導入 (Ubuntu 22.04) ターミナル操作を自動化し、GIFアニメーションとして記録できるVHSをインストールします。 依存パッケージ(ttydとffmpeg)のインストール sudo apt update sudo apt install -y ttyd ffmpeg 2. Chromiumのインストール VHS実行時、初回ブラウザインストール後に以下のエラーが発生することがあります。 このエラーを回避するため、システムにChromiumを明示的にインストールする必要があります。 could not launch browser: [launcher] Failed to get the debug url: ... No usable sandbox! Chromiumのインストール方法 以下のいずれかの方法でインストールします。 [debパッケージから（Google Chrome）] wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb -O /tmp/google-chrome-stable.deb sudo apt install /tmp/google-chrome-stable.deb -y [Snapからインストール] sudo snap install chromium --classic --channel latest/stable 3....

このページでわかること(※2025/12/22 更新しました) oauth2-proxyの起動と画面の確認まで(基本設定) 執筆時の環境とバージョン Ubuntu: 22.04 oauth2-proxy: 7.13.0 参考サイト oauth2-proxy公式リポジトリ https://github.com/oauth2-proxy/oauth2-proxy oauth2-proxyの公式ドキュメント https://oauth2-proxy.github.io/oauth2-proxy/docs/ Killercoda URL この記事の内容はKillercodaにて学習コンテンツとして公開しております。 併せて、動作確認で利用してください。 URL: https://killercoda.com/ijikeman/scenario/oauth2-proxy 1. 基本設定による起動確認 1-1. ファイル/ディレクトリ構成 今回ファイル/ディレクトリ構成は以下になります - / - usr/bin/ - oauth2-proxy ... oauth2-proxyバイナリ - etc/oauth2-proxy/ - oauth2-proxy.cfg ... oauth2-proxy設定ファイル - usr/lib/systemd/system/ - oauth2-proxy.servce ... systemd管理サービスファイル 1-2. インストール oauth2-proxyバイナリのダウンロード VERSION=7.13.0 OS=linux ARCH=amd64 FILENAME="oauth2-proxy-v${VERSION}.${OS}-${ARCH}" wget https://github.com/oauth2-proxy/oauth2-proxy/releases/download/v${VERSION}/${FILENAME}.tar.gz -O /tmp/oauth2-proxy.tar.gz tar zxvf /tmp/oauth2-proxy.tar.gz -C /tmp mv /tmp/${FILENAME}/oauth2-proxy /usr/bin/ chmod +x /usr/bin/oauth2-proxy 設定ファイルサンプルのダウンロード mkdir -p /etc/oauth2-proxy/ wget https://raw....

このページでわかること Nginxのトップページに対してOAuth2-ProxyのBasic認証を経由してアクセスする Killercoda URL この記事の内容はKillercodaにて学習コンテンツとして公開しております。 併せて、動作確認で利用してください。 URL: https://killercoda.com/ijikeman/scenario/oauth2-proxy Oauth2-Proxyの認証機構としてBasic認証でテスト実行してみる .htpasswdを発行する PASSWD=`printf "P@ssw0rd" | openssl dgst -binary -sha1 | openssl base64` echo "admin:{SHA}$PASSWD" > /etc/oauth2-proxy/.htpasswd OAuth2-Proxyの設定ファイルの修正 vi /etc/oauth2-proxy/oauth2-proxy.cfg 末尾に追記 echo '# Basic Auth(※新しく追記)' >> /etc/oauth2-proxy/oauth2-proxy.cfg echo 'htpasswd_file = "/etc/oauth2-proxy/.htpasswd" # Basic認証用パスワードのパスを指定' >> /etc/oauth2-proxy/oauth2-proxy.cfg Backendの準備 nginxを8080番で起動してOAuth2-Proxyの接続後の仮サイトとする docker run --rm --name nginx -p 8080:80 -itd nginx:latest OAuth2-Proxyを起動し、Basic認証ファイルが読み込まれていることを確認 systemctl restart oauth2-proxy [2025/12/08 09:39:05] [oauthproxy.go:128] using htpasswd file: /etc/oauth2-proxy/.htpasswd [2025/12/08 09:39:05] [watcher.go:40] watching '/etc/oauth2-proxy/.htpasswd' for updates [2025/12/08 09:39:05] [proxy....

このページでわかること OAuth2-Proxyバイナリのbuild、Dockerイメージで起動 OAuth2-Proxy ライセンス: MITライセンス OAuth2-Proxy公式リポジトリ 公式ドキュメント 執筆時の環境とバージョン Ubuntu: 22.04 OAuth2-Proxy: v7.13.0 参考文献 NRIのOpenStandiaが提供するOAuth2 Proxy最新情報 複数サイト対応(同一ドメインかつ複数サブドメイン) … Cognitoだと認証後に返すURLがどちらかのドメインになってしまうので、だめなようだ .htpasswdによるBasic認証ならOKだった 複数サイト対応にはサイトごとにOAuth2-Proxyを用意する必要があるので、1ドメインで/以下のURL(/zabbix > zabbix.example.com)でリダイレクト&URL書き換えで対応するとかだとOK 設定 設定方法 ENVを使う(only on docker) oauth2-proxy.cfgを作成し–configで読み込ませる 起動時に引数で渡す ENVで行う場合の注意点 以下のルールで設定 -を_に変更 冒頭にOAUTH2_PROXY_をつける 小文字を大文字に変更 複数指定が可能なパラメータはSをつけて複数形に(例: OAUTH_PROXY2_EMAIL_DOMAINS) 環境構築 binary build golang環境を用意 snap install go --channel 1.25.0 makefileを使ってbuild git clone https://github.com/oauth2-proxy/oauth2-proxy -b v7.13.0 --depth 1 cd oauth2-proxy make make build ./oauth2-proxy --version コンパイル済みbinaryを取得 VERSION=7.13.0 wget https://github.com/oauth2-proxy/oauth2-proxy/releases/download/v${VERSION}$/oauth2-proxy-v${VERSION}$.linux-amd64.tar.gz tar zxvf oauth2-proxy-v${VERSION}$.linux-amd64.tar.gz mv oauth2-proxy-v${VERSION}$.linux-amd64/oauth2-proxy /usr//bin/ Dockerイメージから起動 QuayにあるDocker Image docker pull quay....

概要 HugoのGoogle Analytics 4への対応方法はいろいろな記事に記載されているが、公式サイトに記載されているガイドに沿って対応する ※この記事ではThemeにPaperModを利用している為、その他のThemeによっては設定する内容が異なる可能性があります。 執筆時点のHugo及びTheme Version Hugo: 0.120.4 PaperMod: v7.0 このページでわかること 公式サイトの解説ガイドに沿ったHugoのGoogle Analytics 4対応 参考サイト Hugo Templates > Internal templates https://gohugo.io/templates/internal/ 1. ディレクトリ構成 今回修正するファイルは以下になります - / - hugo.toml - layouts/ - partials/ - extend_head.html 2. 実装手順 2-1. hugo設定ファイルへGoogle Analytics 4 ID設定 公式ガイドに沿ってhugo.tomlへGoogle Analytics 4のIDを設定します hugo.toml or config.toml [services] [services.googleAnalytics] ID = 'G-xxxxxxxxxx' 2-2. extend_head.html(Theme: PaperModの場合)を上書きする 全てのページへ反映する為、extend_head.htmlを修正する_internal/google_analytics.htmlを読み込む設定を記載 layouts/partials/extend_head.html {{ template "_internal/google_analytics.html" . }} 3. 反映確認 Hugoの各ページのソースを確認し、googletagmanager.comのタグが追記されていることを確認

概要 Hugo開発を自身の端末に作らずに、どこからでも気軽にHugoのテンプレート変更や記事の確認などを行いたい。 Killercodaという学習用プラットフォームサービスでHugo用デバッグ環境を用意する方法を記載します。 Killercoda過去記事 KillercodaとGithubリポジトリを同期させる方法 Killercodaのオリジナルシナリオの作成方法 このページでわかること KillerCodaを使ったHugo開発環境の作り方 1. Killercoda Hugoシナリオ ディレクトリ構成 - / - Hugo/ - index.json - background.sh - foreground.sh - intro.md - finish.md - step1.md 2. 実装解説 2-1. foreground foregroundにスクリプトを定義すると、シナリオ実行時にスクリプトを呼び出すことができます。 実装以下 /tmp/background-finishedというファイルを作成するまでloop foreground.sh while [ ! -f /tmp/background-finished ]; do sleep 5; echo 'check file'; done echo Hello and Welcom to this scenario! 2-2. background backgroundにスクリプトを定義すると、foregroundとは別にスクリプトを呼び出すことができます。 実装は以下 hugoのインストール Githubから自身のhugoリポジトリの取得及びgit submoduleによるthemeの設置のでは /tmp/background-finishedというファイルを作成 background.sh snap install hugo git clone https://github....

概要 KillerCodaはあらかじめ登録されたProfile以外に自分のGithubリポジトリを同期し、オリジナルのプロファイルを読み込ませることができます。 その手順を紹介します。 前回ではKillerCodaと自身のGithubリポジトリの同期設定を行いましたので、ここでは実際にシナリオ作成を行っていきます。 このページでわかること KillerCodaの一番シンプルなシナリオ作成方法 公式に公開されているサンプルで、複数ページの構成方法 verify機能の確認 1. 一番シンプルなシナリオ 1-1. １ページだけのシンプルなシナリオ https://killercoda.com/creators に記載されているOSイメージを起動するだけの一番シンプルなシナリオを作成してみます。 1-2. ディレクトリ構成 各シナリオはディレクトリ単位で分割します。 最小構成はindex.jsonのみで構成が可能です。 - / - scenario01/ - index.json 1-3. index.jsonの各パラメータ title: 記載した情報がKillerCodaで表示されるシナリオ名になります imageid: creatorsページのEnvironmentsに記載されているイメージを利用することができます { "title": "Ubuntu simple", "backend": { "imageid": "ubuntu" } } 1-4. Githubリポジトリへアップロードし反映 サンプルプログラムの一部クローン方法を記載しておきます git clone --filter=blob:none --sparse https://github.com/killercoda/scenario-examples.git git sparse-checkout set kubernetes-2node-multi-step-verification 上記構成をGithubへpushすると、GithubのpushイベントによりKillerCodaへwebhookが実行され、KillerCoda側からGithubのリポジトリの情報が取得されます。 Ubuntu simpleシナリオに移動するとUbuntuが立ち上がりました。 2. Kubernetesサンプルシナリオを作成 2-1. kubernetesサンプルシナリオ作成 https://killercoda.com/creatorsに記載されているkubernetesサンプルシナリオを参考に、複数ページ構成による学習コンテンツを作成します。 公開されているサンプルコンテンツのリポジトリは以下になります。 https://github.com/killercoda/scenario-examples/tree/main/kubernetes-2node-multi-step-verification 2-2. index.jsonの構成 index.jsonのdetailsでは"intro", “steps”, “finish"の３構成に分かれています。 introとfinishは１ファイルしかMarkdownファイルを呼び出せませんが、まstepsは複数のMarkdownファイルを呼び出すことができます。 { "title": "Kubernetes 2node multi-step verification", "description": "Uses a two node Kubernetes cluster and performs user input verification in all steps", "details": { "intro": { // 初回に呼び出される "text": "intro....

概要 KillerCodaはあらかじめ登録されたProfile以外に自分のGithubリポジトリを同期し、オリジナルのプロファイルを読み込ませることができます。 その手順を紹介します。 流れ Githubにリポジトリを作成(文中では省略) KillerCodaにアカウントを作成(文中では省略) GithubのリポジトリをKillerCodaに登録 KillerCodaで発行されたDeployKeyを、Githubリポジトリへ登録 KillerCodaで発行されたWebhookを、Githubリポジトリへ登録 KillerCodaとGithubリポジトリの同期確認 3. GithubのリポジトリをKillerCodaに登録 KillerCodaへログインし、[Creater]>[Repository]へ移動します。 Step1: で以下の図のようにRepoName: 及び Branch:にKillerCodaと同期したいGithubリポジトリの情報を登録します。 4. KillerCodaで発行されたDeployKeyを、Githubリポジトリへ登録 Step2に記載されているDeploy Keyをコピーします Githubで自身のリポジトリの[Settings]>[Deploy Keys]>[Add Deploy Key]へ移動し、先ほどコピーしたDeploy Keyを登録します。 5. KillerCodaで発行されたWebhookを、Githubリポジトリへ登録 Step3に記載されているWebhook URL及びSecretをコピーします Githubで自身のリポジトリの[Settings]>[Webhooks]>[Add Webhook]へ移動し、先ほどコピーしたWebhookURL、Secretを登録します。 Webhook登録完了後に、登録したWebhookの左端にチェックがつき、Successfulのメッセージが表示されていれば問題なくWebhookがKillerCodaに飛んでいます。 6. KillerCodaとGithubリポジトリの同期確認 KillerCodaへログインし、[Creater]>[MyScenarios]へ移動します。 Update Statusの時刻が最新化されていれば成功です。 次の記事ではオリジナルシナリオを作ります。

ここでわかること VS Codeのdevcontainer機能でクリーンなhugo環境の構築 構成 Layout 事前準備(作業内容割愛) Dockerが動く環境 … 今回はUbuntu(VirtualMachine)を使います。WSLでも可 VScodeが接続するユーザでdockerコマンドが実行できること VSCodeの拡張機能にWSLもしくはRemoteSSHとdevcontainerを追加 Hugo環境構築 1. devcontainer関連ファイルを設置 on Ubuntu devcontainerテンプレートをmicrosoftリポジトリから取得して配置(gitの一部clone[sparseclone]) git clone --no-checkout --depth=1 https://github.com/microsoft/vscode-dev-containers.git cd vscode-dev-containers git sparse-checkout init git sparse-checkout add containers/hugo git checkout git checkoutすると必要なファイルだけ取得できました devcontainer関連ファイルをhugo作業フォルダとして複製し、gitリポジトリを削除します mv containers/hugo ../ rm -rf ../vscode-dev-containers 2. Hugo DevContainerの起動(on VSCode) VSCode Remote SSH or WSLでUbuntuへ接続し、コンテンツフォルダをワークスペースに追加 [ファイル] > [ワークスペースにフォルダを追加] > hugo/ ワークスペースに名前をつけて保存(devcontainer起動に必須) [ファイル] > [名前を付けてワークスペースに保存] devcontainer機能でDockerイメージの作成、及びHugo devcontainerへ接続すると、dockerイメージがビルドされ、devcontainerへVSCodeが再接続します [左下の接続バー] > [コンテナを再度開く] 左下の接続バーが[開発コンテナ: Hugo(Community)]になっていれば成功です 3. 初期コンテンツを作成(on Hugo Devcontainer) VSCodeのTerminalから以下のコマンドを実行して、テストサイト用Hugoファイル構成を作成します...