Open11

ターミナル (CUI) の作業経過をGIFで記録する [Terminalizer], [VHS]

PINTOPINTO
  • 公式が案内しているインストール手順（失敗する）
npm install -g terminalizer
PINTOPINTO
  • UbuntuをホストPCとした場合、公式手順どおりの上記ではエラーになって 先に進まないので下記を実行してインストール
sudo apt update && sudo apt install -y npm
sudo npm install -g terminalizer --unsafe-perm=true --allow-root

sudo chown -R `whoami` /usr/local/lib/node_modules
sudo chown -R `whoami` /usr/local/bin
sudo chown -R `whoami` /usr/local/share

# 作業の記録開始
terminalizer record demo

# 記録の終了
Ctrl + D

# 記録した作業を再生して確認
terminalizer play demo

# GIFの生成
terminalizer render demo
PINTOPINTO
  • Docker チャレンジ
# https://github.com/microsoft/vscode-dev-containers/tree/v0.112.0/containers/javascript-node-12

xhost +local: && \
docker run --rm -it --gpus all \
-u node \
-v `pwd`:/home/node/workdir \
-w /home/node/workdir \
-v /tmp/.X11-unix/:/tmp/.X11-unix:rw \
-e XDG_RUNTIME_DIR=$XDG_RUNTIME_DIR \
-e DISPLAY=$DISPLAY \
-e ELECTRON_ENABLE_LOGGING=true \
-e GTK_PATH=/usr/lib/x86_64-linux-gnu/gtk-3.0 \
-v /var/run/dbus/system_bus_socket:/var/run/dbus/system_bus_socket \
-e DBUS_SESSION_BUS_ADDRESS=unix:path=/var/run/dbus/system_bus_socket \
-e LIBGL_ALWAYS_INDIRECT=1 \
-e QT_X11_NO_MITSHM=1 \
--net=host \
--privileged \
mcr.microsoft.com/vscode/devcontainers/javascript-node:12 /bin/bash

sudo apt update && \
sudo apt install -y \
libgtk-3.0 \
libgbm-dev \
libnss3 \
libatk-bridge2.0-0 \
libasound2 \
chromium \
packagekit-gtk3-module \
libcanberra-gtk-module \
libcanberra-gtk3-module \
xvfb \
libxss1 \
libgconf2-dev \
nano \
python-pip \
python3-pip

sudo sed -i 's/# set linenumbers/set linenumbers/g' /etc/nanorc
pip install pip --upgrade
pip3 install pip --upgrade
pip install importlib-metadata
pip3 install importlib-metadata

npm install -g terminalizer

sudo chown root /usr/local/share/npm-global/lib/node_modules/terminalizer/node_modules/electron/dist/chrome-sandbox
sudo chmod 4755 /usr/local/share/npm-global/lib/node_modules/terminalizer/node_modules/electron/dist/chrome-sandbox

sudo passwd root
New password: 
Retype new password: 

chromium --version
Chromium 90.0.4430.212 built on Debian 10.9, running on Debian 10.11

which chromium
/usr/bin/chromium

chromium
PINTOPINTO
  • chromium簡易テスト1
chromium \
--headless \
--disable-gpu \
--dump-dom \
--no-sandbox https://www.yahoo.co.jp/ | head

[1017/032725.870235:WARNING:headless_browser_main_parts.cc(83)] Cannot create Pref Service with no user data dir.
[1017/032725.871707:ERROR:gpu_init.cc(426)] Passthrough is not supported, GL is disabled
<!DOCTYPE html>
<html lang="ja"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Yahoo! JAPAN</title><meta name="description" content="あなたの毎日をアップデートする情報ポータル。検索、ニュース、天気、スポーツ、メール、ショッピング、オークションなど便利なサービスを展開しています。"><meta name="robots" content="noodp"><meta name="viewport" content="width=1010"><link rel="dns-prefetch" href="//s.yimg.jp"><link rel="dns-prefetch" href="//yads.c.yimg.jp"><meta name="google-site-verification" content="fsLMOiigp5fIpCDMEVodQnQC7jIY1K3UXW5QkQcBmVs"><link rel="alternate" href="android-app://jp.co.yahoo.android.yjtop/yahoojapan/home/top"><link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.yahoo.co.jp/"><link rel="canonical" href="https://www.yahoo.co.jp/"><link rel="shortcut icon" href="https://s.yimg.jp/c/icon/s/bsc/2.0/favicon.ico" type="image/vnd.microsoft.icon"><link rel="icon" href="https://s.yimg.jp/c/icon/s/bsc/2.0/favicon.ico" type="image/vnd.microsoft.icon"><link rel="apple-touch-icon-precomposed" href="https://s.yimg.jp/c/icon/s/bsc/2.0/y120.png"><meta property="og:title" content="Yahoo! JAPAN"><meta property="og:type" content="website"><meta property="og:url" content="https://www.yahoo.co.jp/"><meta property="og:image" content="https://s.yimg.jp/images/top/ogp/fb_y_1500px.png"><meta property="og:description" content="あなたの毎日をアップデートする情報ポータル。検索、ニュース、天気、スポーツ、メール、ショッピング、オークションなど便利なサービスを展開しています。"><meta property="og:site_name" content="Yahoo! JAPAN"><meta property="twitter:card" content="summary_large_image"><meta property="twitter:site" content="@Yahoo_JAPAN_PR"><meta property="twitter:image" content="https://s.yimg.jp/images/top/ogp/tw_y_1400px.png"><meta property="fb:app_id" content="472870002762883"><link rel="stylesheet" href="//s.yimg.jp/images/yjtop-pc/orion/v117/bundle_v117.css"><script async="" data-jsonpid="" src="https://cdn-gl.imrworldwide.com/novms/js/2/nlsSDK600.bundle.min.js"></script><script async="" src="https://cdn-gl.imrworldwide.com/conf/P2ED650F9-2101-4CB9-845D-ED37E7119BAD.js#name=nSdkInstance&amp;ns=NOLBUNDLE"></script><script type="text/javascript" src="//yjtag.yahoo.co.jp/tag?site=2wzBV9u&amp;H=suf5qy&amp;referrer=https%3A%2F%2Fwww.yahoo.co.jp%2F&amp;mode=v2&amp;cf=107674877&amp;btpdb.2wzBV9u.dGZjLjEwNzQwOTQ2MA=REFZUw&amp;btpdb.2wzBV9u.dGZjLjEwNzU0MTkzNg=REFZUw&amp;btpdb.2wzBV9u.dGZjLjEwNzcyNTE1Mw=SE9VUlM"></script><script type="text/javascript" src="https://s.yimg.jp/images/ds/idet/idet.min.js"></script><script type="text/javascript" src="https://s.yimg.jp/images/ds/yas/tmual-3.0.0.min.js"></script><script type="text/javascript" src="//yjtag.yahoo.co.jp/tag?site=2wzBV9u&amp;referrer=https%3A%2F%2Fwww.yahoo.co.jp%2F&amp;H=suf5qy"></script><script async="" src="https://s.yjtag.jp/tag.js#site=2wzBV9u"></script><script>window.onbeforeunload = function() {}</script><script src="//s.yimg.jp/images/yjtop-pc/orion/v117/bundle_v117.js" defer=""></script><script>
            var TLDataContext = {
              ual : {
                pageview : {
                  service: "toppage",
                  apptype: "web",
                  opttype: "pc",
                  hierarchy_id: "2077296265",
                  content_id : '',
  • chromium簡易テスト2
chromium --disable-gpu

PINTOPINTO

https://chromium.googlesource.com/chromium/src/+/refs/heads/main/device/bluetooth/dbus/bluez_dbus_manager.cc#245

void BluezDBusManager::OnFlossObjectManagerNotSupported(
    dbus::ErrorResponse* response) {
  LOG(WARNING) << "Floss manager not present, cannot set Floss enable/disable.";
}

void BluezDBusManager::OnFlossObjectManagerNotSupported(
    dbus::ErrorResponse* response) {
  //LOG(WARNING) << "Floss manager not present, cannot set Floss enable/disable.";
  DVLOG(1) << "Floss manager not present, cannot set Floss enable/disable.";
}
PINTOPINTO
  • Chromium のカスタムビルド手順

https://chromium.googlesource.com/chromium/src/+/main/docs/linux/build_instructions.md

  • ソースコードの Clone
$ mkdir -p ${HOME}/git && cd ${HOME}/git
$ git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
$ export PATH="$PATH:${HOME}/git/depot_tools"
$ mkdir ${HOME}/git/chromium && cd ${HOME}/git/chromium
$ fetch --nohooks chromium
$ cd src
  • ソースコードの改変 (Floss manager not present, cannot set Floss enable/disable. 対策のつもり)

https://zenn.dev/link/comments/227ded34653027

sed -ie 's/LOG(WARNING)/\/\/LOG(WARNING)/g' device/bluetooth/dbus/bluez_dbus_manager.cc
sed -i '247a \ \ DVLOG(1) << "Floss manager not present, cannot set Floss enable\/disable.";' device/bluetooth/dbus/bluez_dbus_manager.cc
  • ビルド
$ ./build/install-build-deps.sh
$ gclient runhooks
$ gn gen out/Default
$ autoninja -C out/Default chrome
PINTOPINTO
  • ビルドした chrome を簡易テスト
out/Default/chrome \
-headless \
--disable-gpu \
--dump-dom \
--no-sandbox https://www.yahoo.co.jp/ | head
PINTOPINTO
  • chromium を自力ビルドした chrome で差し替え
cd ${HOME}
sudo mv /usr/bin/chromium /usr/bin/chromium_org
sudo ln -s ${HOME}/git/chromium/src/out/Default/chrome /usr/bin/chromium
chromium --version
Chromium 109.0.5365.0

# ホストPCへビルド済みバイナリを全部バックアップ
tar -zcvf workdir/chromium_debian10_amd64.tar.gz ${HOME}/git/chromium/src/out/Default