rcmdnk's blog
Last update

黒い画面は怖くない ターミナルでWeb製作をパワーアップ

昨日のGNU screenでクリップボードの履歴を使えるようにする の中で載せてみたターミナル操作の様子は Asciinemaと言うサービスを使っています。 簡単に録画して直ぐに公開できる様になってるので その紹介です。

Sponsored Links

Asciinema

Asciinemaはターミナル操作を録画して、 そのままWebにアップして即座に公開できる様にするツールです。

Gyazoのターミナル操作版みたいなものです。

前まではターミナル操作もgifとして録画して公開してましたが、 ターミナル上のコマンドで直接ターミナルだけを 簡単に録画出来る様になるので特に長い操作を撮りたい時なんかは便利です。

Asciinemaの導入

Docsにある通りにすれば簡単にインストール出来ます。 pythonで書かれてる物で、pipでインストール出来るようになっています。

$ pip install --upgrade asciinema

Pythonのインストール先に書き込み権限がないような場合はsudoで。

追記: 2016/08/10

現在はpipを使ってインストールする際にはPython 3が必須となっています。 Python 2のpipを使ってインストールしようとすると

 Collecting asciinema
   Using cached asciinema-1.3.0.tar.gz
     Complete output from command python setup.py egg_info:
     Python < 3 is unsupported.
 
     ----------------------------------------
 Command "python setup.py egg_info" failed with error code 1 in ...

みたいなエラーが出てしまいます。

追記ここまで

MacでのPython関連については良かったらこちらを参考に。

Mavericksでpythonの環境を作り直し: Homebrew環境もリセット

追記

MacでHomebrewを使ってる場合は、現在はHomebrewでasciinemaが直接インストールできるようになっているので、

$ brew install asciinema

で行けます。

追記ここまで

このままでも直ぐに録画出来てしまうのですが、 そのままだと誰にも紐付けされずに消したり題名を替えたり 出来きないので忘れないうちに登録を行っておきます 1

その状態でコマンドラインから

$ asciinema auth

とすると、その端末用のURLが表示されるのでそのURLにブラウザからアクセスします。 Mozilla Personaを使ったログインページに飛ぶので 適当なメールアドレスで登録をします。

これで、アカウントと紐付けされたので、その端末から送られた操作の録画は 自分で管理できる様になります。

Asciinemaの使い方

インストールできたら後は

$ asciinema

を実行すると

~ Asciicast recording started.
~ Hit ctrl+d or type "exit" to finish.

$ 

こんな感じで録画画面が始まるので 適当に操作します。 この最初の説明部分は映りません。

オプションとして主に使うのは-tでタイトルを指定、位だと思います。 タイトルもアップ後に変更は可能です。

これでexitC-dを押すまで録画が続きます。

録画が終わると、撮った物を送るかどうか聞かれるので

~ Asciicast recording finished.
~ Do you want to upload it? [Y/n]

Yとタイプすれば録画したものが送られます。nにすれば録画は廃棄されます。

Asciinemaにログインして、 右上の自分のアイコンをクリックしてProfileへ進むと 自分で録画したもの一覧が出て居るはずです。 ここで選んでタイトルを変えたり、 いろいろ情報を継ぎ足したり、 また、Embedボタンからブログに貼り付ける用のコードを手に入れることも出来ます。 また、削除もここから。

まとめ

と言った感じで簡単にドンドン上げて行くことが出来ます。

Gifアニメにすると長くなるとちょっとサイズが気になるので、 直接埋め込める形のasciinemaは便利だと思います(完全freeですし)。

また、このサイト自身のコードも公開されてるので 自分で投稿用のサイトを作ってそこに送ることも出来ます。 これをしておけばいざ、asciinema.orgが閉鎖されたとしても ずっと公開しておくことが出来ます。

もしもの時のためには、Embed用のコードを取ると

<script type="text/javascript" src="http://asciinema.org/a/6695.js" id="asciicast-6695" async></script>

こんな感じになってますが、ここで

wget -O 6695.raw.html http://asciinema.org/a/6695/raw

としてコードを取っておくと良いかもしれません。

仕組みをきちんと理解してないので、これだけでは足りないのかもしれませんが、 取り敢えずこのrawを見ると各画面が1つずつ登録されてる様子が見れます。

前のページの録画上のページのソースを比べて見て下さい。

1つ注意と言うか自分でやってて気づいたのは GNU screen等を立ち上げた後にasciinemaを立ち上げると、 各プロンプトの前にscreen起動前のプロンプトも同時に表示される様な形になって 無駄に長いプロンプトになるのでscreen等の中からは立ち上げない方が良さそうです。

また必ずサラの場面から始まるので、適当な画面からどうしても始めたい場合は gifで取った方が良いかもしれません。

最後に、見てて一番気になったもの。

SedChess - chess on pure sed - asciinema

追記: 2015/02/16

何やらこのasciinemaについては埋め込みにしておくと物凄く遅くなったので リンクにしておきます。

当初の書いてた時は結構快適に埋め込みでも表示されえてたと思うのですが。。。

他のページの他の物はそれ程問題ないように見えるのですが。

追記ここまで

投稿した人は作者ではないみたいですが、 sedで作ったチェスだそうです。

sedってスクリプト言語だったんだな、と思い知らされる一品です。 (ソースコードの中が完全ロシア語?でコメントは読めないですが、まあ、なんか凄く頑張ってます。)

Sponsored Links
  1. 忘れてても後から登録しても紐付け出来る様です

Sponsored Links

« GNU screenでクリップボードの履歴を使えるようにする 3 Macのプレビュー等で三本指スワイプが本体のトラックパッドで効かない時の対処法 »