ScreenX TVを使って、ライブコーディングしている風景を自分のブログに埋込む方法を紹介します。「ScreenX TV って何？」って方は、以前の投稿「ScreenX TV を使ってライブコーディングを配信する」をご参照ください。
なお、ScreenX TV は現在、オープンソースプロジェクトとして活動しており、関連するソースコードは github.com/screenxtv から参照することができます。まだ開発中なので Production Code は private のままだったりしますが、もしコミットしてみたい方がいましたら、お気軽に @yasulab までお声かけ下さい。Private リポジトリに招待致します
前置きが長くなりました。では、本題に戻って、ScreenX TV を使ってライブコーディング風景を自分のブログに埋込む方法を紹介します。
1. 自分専用の配信URLを取得する
まずは、自分専用の配信URLを取得します。ScreenX TV では、アカウント作成をしなくてもライブコーディングを配信することができますが、自分専用の配信URL (Reserved URL) を作ったり、コメント欄に書かれたコメントを残したりするためには、アカウントを作成する必要があります。
アカウントの作成は、トップページの右上にある Sign up から行えます。
現状では、Reserved URLには username が使われるようになっています。例えば、username に yasulab と入力した場合、Reserved URLは http://screenx.tv/yasulab になります。
2. (任意) ハッシュタグを指定する
ちなみに、アカウント作成後に表示されるダッシュボードの下部から、ハッシュタグを指定することができます。
例えば、このフォームに #ほげほげハッカソン と入力した場合、post to twitter 付きでコメント＆Tweet されたものに、ハッシュタグが追加されます。
図. post to twitter で「ほげ〜」とコメントする。
図. 上記コメントの「ほげ〜」に、ハッシュタグ「#ほげほげハッカソン」が追加される。
ハッカソンや勉強会でライブコーディングを配信する際は、こちらの機能でハッシュタグを指定しておくと便利です :D
3. Reserved URL を指定して配信する
「ScreenX TV を使ってライブコーディングを配信する」などを参考にして、無事にインストールが終わっていれば、screenxtv コマンドでライブコーディングが配信できるようになっていると思います。その際、Reserved URL を指定して配信しようとすると、次のように、ログインを求められるようになります。
/Users/yasulab% screenxtv --reset # 設定を初期化して配信
Create a new URL. If given "foo", your URL will be "http://screenx.tv/foo".
> yasulab
Terminal Color [BLACK/white/green/novel]
> green
Title
> YasuLab's Codestream
connecting...
The url 'yasulab' is reserved. Please sign in.
username> yasulab
password> # アカウント作成時に使用したパスワードを入力
Please set another url. # 失敗した場合，もう一度入力が求められる
> yasulab
The url 'yasulab' is reserved. Please sign in.
username> yasulab
password> # アカウント作成時に使用したパスワードを入力
Broadcasting URL: http://screenx.tv/yasulab
Chat page : http://screenx.tv/yasulab?chat
press enter to start broadcasting> # 無事にログインに成功すると，配信準備が整う．
無事にログインに成功すると、Reserved URL からライブコーディングを配信できるようになります。
3. 「♡」アイコンから埋込み用コードを取得する
Reserved URL から配信した場合、右上に「♡」のアイコンが表示されるようになります。このとき表示される embed code をコピーすることで、埋込み用コードを取得出来ます。
図. Reserved URL で配信されている場合
図. Reserved されていない URL で配信されている場合
なお、実験的な機能ですが（あとで配信or変更する可能性がありますが）、次の URL から配信中かどうかを確認する事ができます。
配信状態を取得するためのURL: http://screenx.tv/screens/status/#{username}
cf. An 'is streaming' endpoint
図. 配信中に screens/status/yasulab にアクセスした場合
これにより、「配信中のみライブコーディング風景を表示する」といったことが可能になります。
4. ブログやウェブサイトなどに埋込む
あとは、取得した埋込み用コードを貼付けるだけです。例えば、ブログに取得したコードを埋め込めば、次のように表示されます。
また、最初のスクリーンショットのように、配信中かどうかを識別し、配信中のみライブコーディング風景を表示するといったことも出来ます。
お好みの方法で、好きな場所にライブコーディング風景を埋め込んでみてください！