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

More than 5 years have passed since last update.

example-of-embedding-broadcasting-terminal.png

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 から行えます。

signup-1.png

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

signup-2.png


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

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

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

図. 上記コメントの「ほげ〜」に、ハッシュタグ「#ほげほげハッカソン」が追加される。

Screen Shot 2013-06-05 at 14.53.23.png

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

図. Reserved されていない URL で配信されている場合

not-reserved-url.png

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

配信状態を取得するためのURL: http://screenx.tv/screens/status/#{username}

cf. An 'is streaming' endpoint

図. 配信中に screens/status/yasulab にアクセスした場合

example-status.png

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


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

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

embed-example.png

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

example-of-embedding-broadcasting-terminal.png

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


関連URL