みなさん、AngularJS使ってますか？

Angularを使うと、お手軽にWebアプリ(と言っていいのかな)が作れます。

そのお手軽さをさらに助けるのが、Node.jsとそのライブラリ達です。（いや、Nodeに限った話でもないですが。） 細かい説明は他にお任せしますが、Connect/Expressやその様々なmiddlewareを使うと機能を色々追加できます。 今回、そのmiddlewareの一つとして、SNSのバックエンドライブラリを作りました。 これを使うと、フロントエンドを作るだけで簡単にSNSのサイトができあがります。

試しに、Twitterクローンを作ってみました。今回はフォロー機能などなしの単機能版です。ちなみに、フォローやグループの機能はライブラリには入ってます。

Ruby on Railsのまねをして15分でコーディングするスクリーンキャストを作りました。NodeやAngularの知識を前提としているので、見るだけそれらが理解できるようになるわけではありませんが、どうぞご覧ください。音もテロップもなし、それどころかマウスポインタもなしです。シンプルに。

スクリーンキャストを別ウインドウで開く

コーディングした結果のソースコードはこちらに置いてあります。

https://github.com/dai-shi/twitter-clone-sample/tree/20130804_recorded

実は一文字だけ打ち間違いがあってあとから修正しました。

せっかくなので作ったTwitterクローンを動くようにアップしました。

http://twitterclonesample-nodeangularapp.rhcloud.com/

もしよろしければ試してみてください。

ttyrec/jsttyplayがうまくいったので、ちょっと欲が出てきて、GitHubのプロジェクトのREADMEに作ったスクリーンキャストを載せたくなりました。

Markdown自体はHTMLタグを埋め込むことができるのですが、README.mdが表示されるときには全てのタグが使える訳ではありません。

ざっと試したところ、script,canvas,iframeは消えました。たぶん、embedも消えるでしょう。

最後の手段は、画像です。画像は載っているのを見たことがあります。 そこで、スクリーンキャストをGIFアニメーションに変換しようと思いました。

ttyrecは文字情報が記録されているので、そこから直接GIFアニメーションに変換できたら効率的な（サイズの小さい）ファイルが作れるはずだ、と期待したのですが、残念ながらそのようなツールは見つかりませんでした。

仕方ないのでテキストベースはあきらめ、普通に画面キャプチャすることでスクリーンキャストする方式に戻ることにしました。 GIFアニメーションを出力できるスクリーンキャストツールとしては、 Screencast-O-Maticがお手軽そうだったので試してみました。

まず、初めに普通にターミナルを録画して変換してみましたが、GIFファイルが大きくなりすぎました。そこで、フォントを小さくして、さらにttyrecで記録したものを倍速で再生することで時間も半分にしたところ、だいぶ小さくはなりました。それでも時間が長いと大きいですが。

これを、README.mdに埋め込むのですが、ファイルはどこに置くかというと、 GitHub pagesに置きました。

ところが、まだファイルが大きすぎるのかうまくいきません。Not Foundになってしまいました。仕方ないのでraw.github.comを使ってファイルの位置を指定したら、今度はうまく行きました。ちなみに、サイズが大きすぎるとblob is too bigというエラーがでます。

本来はraw.github.comを使ってコンテンツ配信をするのはよろしくないのだと思います。ファイルサイズをもう少し小さくすることができたら、GitHub pagesのリンクも再挑戦することにします。

最近、ブログネタがどんどんマイナー路線に行ってしまっていますが、だれか読者はいるでしょうか。

8/2追記。

4倍速にして時間を圧縮し、fpsを半分にして、ファイルサイズを小さくしたところ、GitHub pagesのリンクでも動くようになりました。 これにより、GitHub pagesを開く際はそのままリンクが使われ、github.comを開く際は、よろしくCDNにコピーされるようになりました。

動画は便利ですね。身体的な技を習得する場合もそうですが、最近ではプログラミングも動画で習得するようですね。自分は使っていませんが、ドットインストールは便利そうです。

さて、本題です。スクリーンキャストをテキストベースで行いたいと思いました。ターミナルだけで手軽にやろうと。

ttyrecというツールを使いました。Ubuntuではaptでインストールできます。

$ apt-get install ttyrec

実行すると新しいシェルが始まるのでそこで一通り作業してexitすると、全て記録されています。とても簡単です。

ttyplayで実行できます。再生中に速度も変えられるので便利。2倍速くらいでもついていけます。

ttyrecで録画したスクリーンキャストをwebにアップする方法を調べました。2つ見つけました。

• playterm.orgというサイトにアップする
• jsttyplayというライブラリを使う

初めはお手軽なplayterm.orgを使うつもりでしたが、一つだけ難点が。試してないから確かではないのですが、一度アップすると削除ができない様子なのです。もうちょっと自分で制御したくて、jsttyplayを使うことにしました。しかし、jsttyplayはライブラリなのでいろいろ手を入れないと使えません。まずは、Webサイトが必要です。

今回は、GitHub pagesを使いました。gh-pagesブランチにjsttyplayをコピーして、test.htmlを参考にHTMLを書きました。不具合もいくつかあって、

• Rewindボタンが動かない（バグ修正した）
• PlayPauseボタンの動作が不明（非表示にした）
• fontが相対パスなので、ディレクトリが異なると読み込めず
• ttyrecordファイルのURLがハードコードされている

などが気になりました。

あと、注意点がいくつかあります。

• ターミナルのサイズを記録時と再生時で同じにする必要がある。これは、ttyrecの制限。playterm.orgでは80x24を標準としている。
• TERM=xtermでは途中で固まった。TERM=vt100だと大丈夫。ttyplayは問題ないので、これはjsttyplayの制限。

これらをクリアして見事ttyrecで記録したスクリーンキャストをWebに載せることができました。HTML5 Canvasで動いているようです。ターミナルをエミュレートしている感じでしょうか。かっこいいですね。

このシンプルさがいいです。 再生速度変更ボタンはありませんが、簡単に作れそうです。 そのうち暇ができたらちょっと改造してみようかと思いました。

興味がある方はお試しください。