やりたいこと

プレゼン画面内でシェルを操作し、プレゼン内のデモに反映さたらカッコいいと思うんだ。うん。たとえプレゼンの内容が薄くても、勉強会とかでちょっと興味を持ってもらえるかも？

仕組み

JavaScriptでスライドが作れるReveal.jsと、ローカルのシェルをブラウザから利用できるようになるtty.jsとを使い、プレゼン内に<iframe>でtty.jsの画面を埋め込むんだ。デモ画面も<iframe>を利用してプレゼン内に埋め込み、webpack-dev-serverなんかのオートリロード機能を利用して変更を反映するよ。
仕組みは簡単だね。でも、tty.jsの利用にはちょっとした小技がいるよ。

tty.js
webpack-dev-server
Reveal.js (上２つをiframeで埋め込む)

tty.js

インストール

npmで簡単です。パッケージマネージャ万歳！

$ npm install tty.js

セッション自動オープン＆最大化

そのままだと、「ログイン→セッションを開く→画面最大化」の手順が必要になり、プレゼン中にもたつくことになるので、アクセスしたらセッションを開いて画面を最大化するようにするよ。
こちらのGistの投稿の真似して./node_modules/tty.js/statics/users.jsに処理を追加だ。
users.jsははじめは存在していないので自分で作成するよ。

$ touch ./node_modules/tty.js/statics/users.js
$ vi ./node_modules/tty.js/statics/users.js

if (window.tty) {
  tty.on('open', function () {
    window.tty.socket.on('connect', function() {
      var w = new window.tty.Window();
      setTimeout(function () {
        w.maximize();
      }, 100);
    });
  });
}

カレントディレクトリ移動

そのままだとカレントディレクトリはホームディレクトリのままだ。プレゼン中の余計な手間を省くために、目的のディレクトリに移動していてほしいよね。
ただ、tty.jsはセッションにコマンドを送りこむ方法がなさそうなんだ。その代わりログインシェルを指定できるので、ログインシェルを使って目的のディレクトリに移動するよ。

ログインシェルの指定はコンフィグファイルから可能だ。シェルの場所はどこでもいいよ。ここではホームディレクトリ以下に.ttyshellとしてつくってみた。

vi ~/.tty.js/config.json

{
      "shell": "/Users/admin/.ttyshell"
}

config.jsonのshellのパス指定では~（チルダ)は使えなかったから要注意だ。
あとは指定したログインシェル(/Users/admin/.ttyshell)でディレクトリを変更する処理（今回は/tmp/sampleに移動)を書けばOK。

vi /Users/admin/.ttyshell

#!/bin/bash
cd /tmp/sample
/bin/bash

tty.js 起動

npmでインストールしたnode_modules/.bin/tty.jsを実行するよ。

node ./node_modules/.bin/tty.js

デフォルトポートは8080なので衝突しないようにしておこう。

Reveal.js

使い方はいろいろ日本語情報があるので省略するよ。例えば以下とか。

iframe

こんな感じで先ほどのtty.jsを埋め込みむよ。

<section>
    <h4>Shell</h4>
    <iframe width="800px" height="340px" src="http://localhost:8080/">  
    </iframe>
</section>

以上！

Reveal.jsのプレゼンにシェルを埋め込むよ