HTMLが分からなくてもFacebook LIVEで投票動画をつくる方法

 

Facebook LIVEの投票動画とは?

半年ほど前からFacebookにライブ動画という機能が実装されました。スマホとかで撮影する動画をリアルタイムで配信できるやつです。個人が利用できるインターネット回線が進化してきたことで、大量の動画データを送受信できないと実現できなかったサービスが、当たり前の世の中になりつつあります。

そんななか、この機能を利用した面白いライブ動画を見かけるようになりました。たとえば、世間を賑わしている米国大統領選前に、こういう人気投票動画が配信されていたの、ご存知でしょうか?Facebookの「いいね!」を押すとヒラリー候補、「超いいね!」を押すとトランプ候補にリアルタイムで票が加算されるシステムです。票数だけみても、凄い注目度だということがわかりますね。

ちなみに、トランプさんのほうが「超いいね!」なのは贔屓しているわけじゃなく、共和党のイメージカラーが赤、民主党のイメージカラーが青だからというだけだと思われます笑

f:id:horiet0322:20170625205839p:plain

参考にした解説記事

で、僕もこれやってみたいなーと思って、いろいろ調べてみました。最初に見つかった解説記事はこちらのサイト。

今キテる!?米大統領戦で注目!Facebook Liveで投票させる方法http://smarvee.com/column/how-to-facebook-live-poll/

この記事は、こちらの外国の記事を翻訳したような内容になっています。肝心のソースファイル(HTMLや画像などのデータ一式)は、下記の元記事で無償提供されています。ちょっとわかりにくいですが、記事の序盤に「Facebookでいいね!してくれたらファイルダウンロードのリンク先にアクセスできますよ」的なボックスが表示されています。

How Presidential Candidates helped me earn Facebook likes is AMAZING!
http://www.bratza.com/how-to-get-facebook-likes-viral-method/

HTMLまぁまぁわかるよーって人は、これだけ材料がそろえば、自分の思い通りの画面にカスタマイズして配信できるようになるかもです。残念ながら、僕はなんとなくしか分からないので、丸一日かけて挫折してしまいました。

ただ、めげずに、記事に出てくるキーワードでいろいろ検索していくうちに、YouTubeに解説動画がたくさん転がっているのを発見しました。そのなかで、魅力的なフレーズを発見。

How to create facebook live poll. Easy n Free. No Coding Required.

No Coding Required.(プログラム書けなくても大丈夫)
素晴らしい響きですね!「英語話せなくても大丈夫」と同じくらい魅惑的です。この動画見てもらえれば、ほとんどの人は目的を達成できるんじゃないかと思います。ただ、「動画見るの面倒くせーよ」「わたし英語アレルギーなんです」って方のために、手順を書き出してみようと思います。

まずは魔法のサイトにアクセスしましょう

HTMLを書かなくて済むのは、このサイトで自動的に動画を生成することができるからです。お持ちのfacebookアカウントでログインしちゃいましょう。アカウント情報よこせ、って言われますが、ここは潔くOKしてください。便利なサービスには代償が必要です。

My Live Polls
http://mylivepolls.com/index.php

f:id:horiet0322:20170625205917j:plain

つぎに、2段階の手続きを行います。
Step1:Click here to allow permissions to HTC sense App.
Step2:Click here to Generate your Access Token.

ステップ1は、これもアカウント情報の提供なので、画面指示に従ってOKしてください。
ステップ2も似たような手続きです。ボタンを押すと、facebook for developersのページに飛ばされますが、自動的に表示される暗号文みたいなアルファベットの羅列をコピーしてください。

f:id:horiet0322:20170625205944p:plain

そして、コピーした文字列を、さきほどの画面下部にあるAccess Tokenのボックスに貼り付ければOKです。

f:id:horiet0322:20170625210011p:plain

 

テンプレートを選ぼう

つぎに、画面のテンプレートを選択します。これがあるから、htmlを書かなくて済むんですね。逆に言うと、このテンプレートから逸脱する画面にしたい場合は、このサイトは利用できないことになるのでご了承ください。もしくはこのサービスの開発者に、要望メールでも送ってみるといいかもしれません。

Facebookのリアクションは全部で6種類なので、最大で6択のアンケートを作成することができます。なぜか、4択と5択のテンプレートが無いのが気になりますが、そのうちテンプレートが増えると期待しておきましょう。

f:id:horiet0322:20170625210043p:plain

 

自分の使いたい画像に差し替えよう

テンプレートを選択すると、画面タイトルと、画像をアップロードする画面に切り替わります。ここでは、2択テンプレートを利用して、金閣寺銀閣寺を選択させる画面にしてみました。画像を使うときは、著作権に気をつけてくださいね。

f:id:horiet0322:20170625210101j:plain

(テンプレートを作成した時点では、投票数はどちらもゼロになっています)

画像をアップロードしてContinueを選択すると、Edit Templateという画面に移ります。本来なら、ここで差し替え後の画面が表示されるはずなのですが、元のテンプレート画面が表示されたままで、あまり意味のないステップです。ただのバグだと思うので、気にせずContinueを押しましょう。

配信動画URLの完成

最終ステップです。文章中のClick Hereをクリックすると配信元画面が開きます。普通にクリックすると、現在の画面が切り替わってしまうので、新しいタブで開くようにしましょう。

f:id:horiet0322:20170625210153p:plain

配信元画面、こんな感じで出てきます。この画面のURLをメモっておいてください。後でつかいます。

f:id:horiet0322:20170625210215p:plain

 

ストリームキーの取得

つぎに、Final Stepの画面に戻って、緑色のGenerate Streme Keyというボタンをクリックしましょう。Facebookの動画配信についてのポップアップ画面が表示されるはずです。うまくいかない場合は、ブラウザ側でポップアップを禁止する設定になっているはずです。緑のボタンの下に、解除方法について解説されているので、それに従ってください。

うまく表示されたら、どのアカウントで動画配信するかを選択する画面になります。個人のページからでも良いですし、会社などの法人ページもOKです。個人的には、動画のログ解析ができる法人ページのほうが面白いので、法人ページ持ってないひとは、新設することをおすすめします。

次の画面に移ると、ストリームキーが表示されます。これをコピーすれば、配信に必要な情報は一通り揃ったことになります。

動画配信ソフトのインストー

ここで少し面倒ですが、無料ソフトをインストールする必要があります。細かいことは、冒頭にご紹介した日本語サイトをお読みください。

Open Broadcaster Software Studio
https://obsproject.com/

で、インストールできたら、設定画面でさきほどのストリームキーを貼り付けてやります。設定画面は、画面上メニューの「ファイル」内か、画面右に並んでるボタンから入ってください。そして、配信を選択すると、ストリームキーを入力する欄が現れます。サービスの種類は「Facebook Live」を選択しましょう。

f:id:horiet0322:20170625210235p:plain

 

つぎに、配信する動画のソースを設定します。画面左下のソースを右クリックして、Browser Sourceを選んでください。URLを入力する欄があるので、さきほどコピーした、配信元画面のURLを貼り付けましょう(ストリームキーではないので注意)。うまくいけば、配信元画面が表示されるはずです。

画面の大きさや縦横比、1秒あたりのフレーム数はここで修正できるので、画面がずれるなどの不具合があった場合は、こちらで調整してみてください。

f:id:horiet0322:20170625210259p:plain

これで、配信ソフト側の準備はOKです。

配信投稿の設定

あともう一息なのですが、ここからが一番重要です。他の解説サイトも、この部分の説明があっさりしているので、ハマってしまうことが多いように思います。

まず、ストリームキーを取得したFacebookのポップアップ画面右下で、ライブ配信時間を予約しましょう。デフォルトでは10分後になっています。とくに差し支えなければそのままOKして進みましょう。

f:id:horiet0322:20170625210335p:plain

 

つぎに、普通に別タブからFacebookにアクセスし、動画配信の予約ができているかを確認してみてください。そうすると、こんな感じで予約されているのが分かります。

ここで、薄いグレーで「たった今」と表示されているのが見えていると思います(場合によっては、●分前と表示されてるかも)。ここを右クリックして、新しいタブで画面を開いてください。そうすると、動画配信についての投稿のみの画面が表示されます。

この画面のURLをコピーしましょう。

f:id:horiet0322:20170625210402p:plain

 

貼り付けさきは、こちらの画面のYour Post URLです。貼り付けたら、左下のGenerate Live Videoを押しましょう。

f:id:horiet0322:20170625210436p:plain

そして、もう一度文中のClick Hereで配信元画面を開いてください。さっきと同じ画面が表示されますが、実は、Facebookとリンクした状態になっています。このURLをコピーして、OBSのBrowser SourceのURLを上書いて更新しましょう(これをやらないと、いいねの回数が画面に反映されない)。

あとは、配信予約時間が訪れるのを待つだけです。手動で配信を開始することは可能ですが、そのあたりはここで解説するまでもないので、適当にいじって見つけてください。

さいごに

アンケートといえば、何十問にもなる長いものを時間をかけて回答してもらう手法がオーソドックスです。たしかに、複数の設問間の関係性を分析するうえで、これは避けられないことではあります。でも、Facebookみたいに、個人の属性情報があらかじめ分かっているプラットフォームを用いれば、シンプルな内容でも深い分析につなげることができます。そして、費用をかけずに高い頻度でモニタリングすることもできるようにもなります。市場調査の新たな手法として普及するようになれば面白いですね。