ライブコーディング風景を自分のブログに埋込む

![example-of-embedding-broadcasting-terminal.png](https://qiita-image-store.s3.amazonaws.com/0/1857/f000cfc9-fe11-4285-4024-faa84cf529d9.png "example-of-embedding-broadcasting-terminal.png")

[ScreenX TV](http://screenx.tv)を使って、ライブコーディングしている風景を自分のブログに埋込む方法を紹介します。「ScreenX TV って何？」って方は、以前の投稿「[ScreenX TV を使ってライブコーディングを配信する](http://qiita.com/items/a2443c4cc1e710f862d2)」をご参照ください。

なお、ScreenX TV は現在、オープンソースプロジェクトとして活動しており、関連するソースコードは [github.com/screenxtv](http://github.com/screenxtv) から参照することができます。まだ開発中なので Production Code は private のままだったりしますが、もしコミットしてみたい方がいましたら、お気軽に [@yasulab](http://twitter.com/yasulab) までお声かけ下さい。Private リポジトリに招待致します

前置きが長くなりました。では、本題に戻って、ScreenX TV を使ってライブコーディング風景を自分のブログに埋込む方法を紹介します。



## 1. 自分専用の配信URLを取得する

まずは、自分専用の配信URLを取得します。ScreenX TV では、アカウント作成をしなくてもライブコーディングを配信することができますが、自分専用の配信URL (Reserved URL) を作ったり、コメント欄に書かれたコメントを残したりするためには、アカウントを作成する必要があります。

アカウントの作成は、トップページの右上にある `Sign up` から行えます。

![signup-1.png](https://qiita-image-store.s3.amazonaws.com/0/1857/851b3e53-f9f2-f49c-347d-8fbe858f67a5.png "signup-1.png")

現状では、Reserved URLには `username` が使われるようになっています。例えば、`username` に `yasulab` と入力した場合、Reserved URLは [http://screenx.tv/yasulab](http://screenx.tv/yasulab) になります。

![signup-2.png](https://qiita-image-store.s3.amazonaws.com/0/1857/939b4939-a36d-6b6f-ead6-d08f7c6634a6.png "signup-2.png")



## 2. (任意) ハッシュタグを指定する

ちなみに、アカウント作成後に表示されるダッシュボードの下部から、ハッシュタグを指定することができます。

![Screen Shot 2013-06-05 at 14.51.53.png](https://qiita-image-store.s3.amazonaws.com/0/1857/4c988366-1f7d-539b-4013-2cd0aee14fc0.png "Screen Shot 2013-06-05 at 14.51.53.png")

例えば、このフォームに `#ほげほげハッカソン` と入力した場合、`post to twitter` 付きでコメント＆Tweet されたものに、ハッシュタグが追加されます。

図. `post to twitter` で「ほげ〜」とコメントする。
![Screen Shot 2013-06-05 at 14.53.00.png](https://qiita-image-store.s3.amazonaws.com/0/1857/4de7a617-48f9-81e4-90c4-3abd431e3119.png "Screen Shot 2013-06-05 at 14.53.00.png")

図. 上記コメントの「ほげ〜」に、ハッシュタグ「#ほげほげハッカソン」が追加される。
![Screen Shot 2013-06-05 at 14.53.23.png](https://qiita-image-store.s3.amazonaws.com/0/1857/1f44e098-e835-26bf-d37c-751a85a01224.png "Screen Shot 2013-06-05 at 14.53.23.png")

ハッカソンや勉強会でライブコーディングを配信する際は、こちらの機能でハッシュタグを指定しておくと便利です :D



## 3. Reserved URL を指定して配信する

「[ScreenX TV を使ってライブコーディングを配信する](http://qiita.com/items/a2443c4cc1e710f862d2)」などを参考にして、無事にインストールが終わっていれば、`screenxtv` コマンドでライブコーディングが配信できるようになっていると思います。その際、Reserved URL を指定して配信しようとすると、次のように、ログインを求められるようになります。

``` bash
/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.png](https://qiita-image-store.s3.amazonaws.com/0/1857/4a5691b3-7632-c451-3b9c-1d9d289ef299.png "reserved-url.png")

図. Reserved されていない URL で配信されている場合
![not-reserved-url.png](https://qiita-image-store.s3.amazonaws.com/0/1857/6e2dce5c-f549-df33-6ed0-25ca59100c2f.png "not-reserved-url.png")

なお、実験的な機能ですが（あとで配信or変更する可能性がありますが）、次の URL から配信中かどうかを確認する事ができます。

配信状態を取得するためのURL: `http://screenx.tv/screens/status/#{username}`
cf. [An 'is streaming' endpoint](https://github.com/screenxtv/screenx/issues/1)

図. 配信中に `screens/status/yasulab` にアクセスした場合
![example-status.png](https://qiita-image-store.s3.amazonaws.com/0/1857/e1ce44dd-dc19-caae-f822-7072ff98276c.png "example-status.png")

これにより、「配信中のみライブコーディング風景を表示する」といったことが可能になります。



## 4. ブログやウェブサイトなどに埋込む

あとは、取得した埋込み用コードを貼付けるだけです。例えば、ブログに取得したコードを埋め込めば、次のように表示されます。

![embed-example.png](https://qiita-image-store.s3.amazonaws.com/0/1857/bbd73eb1-466c-421a-cc5b-c4738d937711.png "embed-example.png")

また、最初のスクリーンショットのように、配信中かどうかを識別し、配信中のみライブコーディング風景を表示するといったことも出来ます。

![example-of-embedding-broadcasting-terminal.png](https://qiita-image-store.s3.amazonaws.com/0/1857/f000cfc9-fe11-4285-4024-faa84cf529d9.png "example-of-embedding-broadcasting-terminal.png")

お好みの方法で、好きな場所にライブコーディング風景を埋め込んでみてください！

## 関連URL

- [ScreeX TV](http://screenx.tv/)
- [github.com/screenxtv](http://github.com/screenxtv)
- [ScreenX TV 紹介動画 (英語)](http://www.ustream.tv/recorded/33573701/highlight/365943)