⚡

これでライブコーディングも怖くない！ cLive でターミナル操作を自動化する

2022/11/17に公開

CLI

terminal

clive

tech

cLive とは？

cLive はシンプルな設定ファイルに基づいてターミナルを自動で操作するためのコマンドラインツールです。
自動操作するターミナルはブラウザで表示されます。
そのため、「任意のターミナルアプリで cLive を起動して、ブラウザだけ画面共有して自動ライブコーディングをする」といった使い方ができます。

JavaScript のライブコーディングデモ

もちろん日本語入力も可能ですし、任意のタイミングで一時停止しておけば必要に応じて手動による操作もできます。

手動操作のデモ

リポジトリ

スターをもらえたら泣いて喜びます。

前提条件

cLive を使用するには事前に ttyd がインストールされている必要があります。

https://github.com/tsl0922/ttyd

例えば homebrew を使用している場合、 brew install でインストールすることができます。

$ brew install ttyd

その他のインストール方法については ttyd のドキュメントをご参照ください。

インストール

もし homebrew を使用している場合は brew install でインストールすることができます。

$ brew install koki-develop/tap/clive

また、 cLive は Go で作られているので go install でもインストールすることができます。

$ go install github.com/koki-develop/clive@latest

もしくは Releases ページからバイナリをダウンロードしてください。

使い方

まず clive init を実行すると clive.yml という名前で設定ファイルが作成されます。

$ clive init
# 設定ファイル名は `--config` フラグで指定できます
$ clive init --config example.yml

clive.ymlの例

settings:
  # ログインコマンド
  loginCommand: ["bash", "--login"]
  # loginCommand: ["zsh", "--login"] # zsh を使う場合

  fontSize: 22 # フォントサイズ
  defaultSpeed: 10 # デフォルトの入力速度 ( ミリ秒 )

actions:
  - pause # 一時停止
  - type: echo 'Welcome to cLive!' # コマンドを入力
  - key: enter # エンターキーを入力

clive start を実行するとブラウザが立ち上がり、ターミナルの自動操作が開始されます。

$ clive start
# こちらも設定ファイル名は `--config` フラグで指定できます
$ clive start --config example.yml

デモ

できること

様々な設定やアクションを指定することができます。
詳しくは README ( 日本語 ) をご参照ください。

設定できる項目
実行できるアクション
- キー入力
- 特殊キー入力 ( Enter キーや Backspace キー、その他色々 )
- Ctrl キー入力
- 任意の時間のスリープ
- 一時停止
- スクリーンショット

設定ファイルのサンプル

様々な設定ファイルのサンプルは cLive のリポジトリの examples/ ディレクトリに用意してあります。

例えばこの記事の冒頭にある JavaScript のライブコーディングは次のような設定ファイルを使用しています。

clive.yml

# https://github.com/koki-develop/clive/blob/main/examples/node/clive.yml
settings:
  loginCommand: ["bash", "--login"]
  fontSize: 22
  defaultSpeed: 10

actions:
  - pause

  - type: vim ./hello.js
  - sleep: 500
  - key: enter
  - sleep: 1000

  - type: i
  - type: |-
      const greet = (name) => {
        console.log(`Hello ${name}!`);
      };
      greet("cLive");
  - sleep: 1000

  - key: esc
  - type: :wq
  - sleep: 500
  - key: enter
  - sleep: 1000

  - type: clear
  - sleep: 500
  - key: enter
  - sleep: 1000

  - type: cat ./hello.js
  - sleep: 500
  - key: enter
  - sleep: 1000

  - type: node ./hello.js
  - sleep: 500
  - key: enter

まとめ

登壇するときなんかにサラッとライブコーディングしてかっこつけたい。