LoginSignup
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@tacos_02in株式会社ウラカン

【未経験から挑戦】asciinemaでターミナル操作を録画＆公開して学びを共有してみた

Last updated at Posted at 2025-07-02

はじめに

Boa tarde 🤟 　tacosです！

今回で4つ目の投稿になります。
少しずつですが、Linuxやインフラエンジニアについての学びが増え、できることも増えてきました 😊

そんな中で、今まさに作業を記録・振り返る上で役に立っているツールを紹介します！

その名も
　　　　　👉 asciinema （※ドラえもんの秘密道具風に読むと面白さUP😂）

やっぱり、出会いは今回も突然で。
いつものように黙々と作業してた時に、上司の big-a がふと一言。🗣️

「あんたも自分の作業ば振り返るとき、ちゃんと“どげんやったか”まで分かったら助かるっちゃなか？
ていうか、そげんの記録しとかんと、あとで困るっちゃけん！
asciinema っちゅう便利なのがあるけん、使うてみらんね。」

……正直、最初はツールの名前よりも方言を理解するほうに時間がかかりました。😂
でも言いたいことはなんとなく伝わってきたし、「たしかに、作業の“流れ”まで残せたら便利かも」と思い、少しずつ調べていくことにしたんです。🔍

asciinemaって何？📽

asciinema は、ターミナル上の操作をそのまま録画し、ローカルホストをはじめWeb上で再生できるオープンソースのツールです。
(Qiitaにも貼り付け可能であり、後ろの方に試しで貼り付けています！)

ASCII（テキスト）＋ κίνημα（kínēma, “動き”） を掛け合わせた造語になっています。

動画ではなくテキストベースで軽量・綺麗に操作を記録 できるのが特徴です。

  • 録画ファイルは .cast 形式で保存される
  • 音声やマウス操作は含まれず、純粋に「ターミナルの操作だけ」を記録

今回は Amazon Linux 2023 上に asciinema を導入し、録画した cast ファイルを Nginx で Web 配信できる構成を組んでみました。

作業ログの記録・復習・エビデンス共有にとっても便利なので、ぜひ活用してみてください👌

この記事でできるようになること📌

  • Amazon Linux 2023 への asciinema のインストール
  • .cast ファイルの録画・再生
  • Nginx による Web 配信構成の構築
  • asciinema-player を使った HTML 上での再生

AWS使用環境

※各項目は、ご自身の環境に合わせて作成してみてください！
私はこんな感じで作成しているということで、以下ご参考まで👇

🌐リージョン

  • 大阪リージョン

☁️EC2

  • 名前：test-asciinema-osk-01
  • インスタンスタイプ：t2.micro

  • OS：Amazon Linux 2023

  • Storage：8GB

🛜VPC


  • 名前：test-vpc-osk-01
  • CIDR：10.100.0.0/16

🌍publicサブネット

  • 名前：test-public-subnet-osk-a
  • アベイラビリティーゾーン：：ap-northeast-3a
  • CIDR：10.100.0.0/24

🔒privateサブネット


  • 名前：test-private-subnet-osk-a
  • アベイラビリティーゾーン：ap-northeast-3a
  • CIDR：10.100.100.0/24


🔐セキュリティーグループ

  • 名前：test-web-osk-sg
  • ポート22(SSH), ポート80(HTTP),：MyIPからのみアクセス許可

次は、いよいよ構築の手順です！

ここからは Amazon Linux 2023 上に asciinema をインストールし、録画したファイルを Web で再生できる環境を整えていきます。

一つひとつ丁寧に進めていけば問題ありません💪
それでは、やっていきましょう！

構築手順

sshログイン

  • sshでログイン

※今回は秘密鍵（.pemファイル）を Downloads フォルダに保存している前提で進めています。
ご自身の環境に応じて、保存場所を正しく指定してください

ssh -i ~/Downloads/my-key.pem ec2-user@XX.XXX.XXX.XXX
  • デイレクトリの作成
mkdir ~/asciinema-log
  • ディレクトリの移動

cd ~/asciinema-log

asciinema のインストール

Amazon Linux 2023 のような一部の環境では、asciinema は dnf コマンドで直接インストールできません。
そのため、Python パッケージ経由（pipx）でインストールします。

  • Python に pip を導入・更新
python3 -m ensurepip --upgrade
  • pipxインストール
python3 -m pip install --user pipx
  • asciinema インストール
pipx install asciinema

cast録画

  • 録画
asciinema rec test.cast

nginxのインストール

  • nginxインストール

sudo dnf install -y nginx
  • nginx起動
sudo systemctl start nginx
  • nginx自動起動

 sudo systemctl enable nginx

GitHubから asciinema-player.css　asciinema-player.min.jsをダウンロード


  • Web配信用ディレクトリを作成
sudo mkdir -p /var/www/html/asciinema
  • ディレクトリの移動
cd /var/www/html/asciinema

sudo wget https://github.com/asciinema/asciinema-player/releases/download/v3.9.0/asciinema-player.css
sudo wget https://github.com/asciinema/asciinema-player/releases/download/v3.9.0/asciinema-player.min.js
  • ダウンロードできているか確認
ls

index.html を作成

sudo vi /var/www/html/asciinema/index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="/asciinema/asciinema-player.css" />
</head>
<body>
  <div id="demo"></div>
  <script src="/asciinema/asciinema-player.min.js"></script>
  <script>
    const player = AsciinemaPlayer.create('/asciinema/test.cast', document.getElementById('demo'), {
      theme: 'solarized-dark',
      terminalFontFamily: "'JetBrainsMono Nerd Font', monospace",
      idleTimeLimit: 1,
      markers: [
        [9.0, "ls with icon"],
        [11.0, "Ctrl+g , m"]
      ]
    });
    player.addEventListener('input', ({ data }) => {
      console.log('input!', JSON.stringify(data));
    })
  </script>
</body>
</html>
  • index.html の中身を確認

sudo cat /var/www/html/asciinema/index.html

nginx.confの作成

  • nginx.conf作成

動作確認を目的としているため、最低限のコンフィグ記載となっています。

sudo vi /etc/nginx/conf.d/asciinema.conf

server {
    listen 80;
    server_name _;

    root /var/www/html;

    location /asciinema/ {
        index index.html;
        try_files $uri $uri/ =404;
    }

    access_log /var/log/nginx/access.log main;
    error_log  /var/log/nginx/error.log warn;
}
  • nginx再起動
sudo systemctl restart nginx

録画の停止、castのコピー


  • 録画停止
exit
  • castをコピー
sudo cp ~/asciinema-log/test.cast /var/www/html/asciinema/

ブラウザ確認

  • ブラウザで確認

  • 録画したセッションが再生される

    ＊画面内の▶️のボタンをクリックすると再生

http://<EC2のパブリックIP>/asciinema/

録画結果はこちら⬇️

asciicast

今回録画した内容が上記URLで再生できます。
どうですか？思ったよりシンプルに構築できたんじゃないでしょうか😊

作業の振り返り や、手順の記録・共有 にとても便利！
軽量かつシンプルに録画できるので、復習にも最適です 👌

🎁 おまけ

ログイン時にアスキーアートを出してみよう！

試しに ec2-user とは別に tacos ユーザーを作成して、ログイン時にアスキーアートを表示する設定もしてみました。
ちょっとした遊び心ですが、ターミナルにログインするのが楽しくなります😂

  • ユーザーの作成
sudo useradd tacos
  • パスワード設定
sudo passwd tacos
  • tacosにログイン
su - tacos

vi ascii-art.txt
  • アスキーアートを読み込み設定
vi .bashrc
  • 貼り付け内容

  • デフォルトで最下行にある、unset rcの下に１行空けて貼り付け
# アスキーアート読み込み
cat ~/ascii-art.txt
# 区切り線
echo "=============================================="
# 日時表示
echo ": Login Date : $(date)"
# ホスト名（端末名）とIPアドレス表示
echo ": Hostname  : $(hostname)"
echo ": IP Address : $(hostname -I | awk '{print $1}')"
# 警告メッセージ
echo "：このサーバは社内専用です。不正アクセスは禁止されています。"
# 区切り線
echo "=============================================="
  • ログアウト
exit
  • tacosにログイン
su - tacos

作成したアスキーアートが出現したら成功👏
以上で手順は終了です❤️‍🔥
設定が完了するとこんな感じで表示されます⬇️
asciicast

最後に

ここまで読んでいただきありがとうございました！
asciinemaは、記録や振り返り、チームでの作業共有にもとても便利なツールだと感じました。（着手にあたり無茶振り感はありましたが、実際勉強になりましたし、結果オーライでしょう😅）

私もまだまだ学びの途中ですが、この記事がインフラエンジニアを目指す皆さんの
「こんな風に少しずつ成長していけるんだ」という目安になれば嬉しいです。
（……とはいえ、目安になる自信は1ミリもありません〜😂）
一緒に一歩ずつ、着実に成長していきましょう！

Valeu! 👋

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?