Twitterのタイムラインをデジタルサイネージに表示する方法
フルHDディスプレイに表示した例。画面全体を3つのパートに分けています。左上は静止画、左下は動画、右側はタイムラインです。
→動画はこちら
■HTMLコンテンツの確認
実際のHTMLコンテンツはこちらから表示できます。
http://www.digitalsignage-kure.jp/twitter-signage/
＜表示環境＞
ディスプレイ…1920x1080pix
ブラウザ……GoogleChrome
表示方法……URLを開いて「F11」キーで全画面表示。再び「F11」キーで表示が戻ります。
■Twitterの更新とデジタルサイネージ側の表示（動画）
上の画面はデジタルサイネージを表示している様子。下の画面はPCからツイッターを更新しています。
上下は完璧ではありませんが同期しています。
PC側で投稿した画像や文章がサイネージ側に表示されるまで、一定のタイムラグがあるのが分かります。
→更に詳しくはこちらの動画をご覧ください。
■メリット
＜コンテンツ＞
・Twitterにより手軽に更新可能。画像投稿に対応。
・無料で構築できる（ネット環境に関わる費用を除く）。
＜システム＞
・特定のデジタルサイネージアプリに依存しないため、業者の囲い込みを避けて構築できる。
・OS及びブラウザの基本機能を使うため、障害時に代替システムを準備しやすい。
・従来のホームページ作成の延長でコンテンツを準備できる。
■構築の概要
＜準備物＞
・デジタルサイネージ用ディスプレイ
・デジタルサイネージ用PC（Windows10 or 7）
・更新用PCもしくはスマートフォン
・Twitterアカウント
・インターネット環境
・ホームページの作成環境（WEB編集ソフト）
＜手順＞
（１）デジタルサイネージと更新用端末をインターネットに接続する。
（２）次のURLからユーザータイムラインの埋め込み用スクリプトを取得する。
https://dev.twitter.com/ja/web/embedded-timelines/user
（３）デジタルサイネージに表示するコンテンツ（WEBページ）を作成して、前項で取得したスクリプトでタイムラインを埋め込む。サーバーにアップ後、ページのURLを記録する。
（４）デジタルサイネージ側のPCを次の設定にする
- 4-1 Windowsを自動サインイン設定する。
- 4-2 GoogleChromeのショートカットを作成して、kioskモードで表示コンテンツのURLを表示設定する。
- 4-3 作成したChromeのショートカットを、Windowsのスタートアップに登録する。
- 4-4 システムの終了をタイマー設定する場合は、タスクスケジューラーでシャットダウン時刻を設定する。
（５）システムの起動後は、更新用の端末でTwitterを適時更新する。
以上概要として手順を解説していますが、これらで手順が分からない場合は外注業者にコンテンツ制作を依頼する方が良いと思います。
■コンテンツ作成時のポイント
・安定した運用のため、JavaScriptで一定時間でブラウザの再読み込み（リフレッシュ）を設定するとよい。
・動画を使う場合は、圧縮率を高めにエンコードして、通信帯域を節約する。
・Twitterの文字サイズはChromeの設定詳細から、フォントのサイズ・ページのズームで調整できる。
・Tweetの削除は直ぐに反映されないため、投稿する内容には注意すること。
■仕様
＜システム＞
OS：Windows10
解像度：1920x1080
ブラウザ：GoogleChrome Kioskモード
＜動画＞
仕様：MP4 1280x720 30p 5000kbps 22秒リピート再生
表示方法：HTML5 videoタグ
＜Twitter＞
公式APIによるWEBサイトへの貼付け
デジタルサイネージ
素材配布
動画制作
YouTube活用