シャローム! Sato-Gです。
昨日、会社の帰りにスーパーに寄ったら、こんなコーナーができてた。
チキンラーメン以外にポークラーメン、ビーフラーメンも出てたのか。調べてみると8月19日発売らしい。
NHK朝ドラ「まんぷく」で、この麺に一番合うのは「チキン」だって言ってたのは何だったんだ!
とか言っても、この商品はチキンラーメンの61回目の誕生日を記念して発売されたものらしく、61年前の商品が今も店頭に並んでいるというのはスゴいことだよね。
因みにポークラーメンを買ってみたけど、麺にポークの味が滲みているというわけではなく、別に袋入りのスープが入ってた。
なーんだ。
というわけで、今回はBloXで新垣結衣出演♡チキンラーメンのYoutube動画を組み込んでみる。
まず、YouTube動画の埋め込みURLを取得してみよう。
https://www.youtube.com/watch?v=S7t-2Ex-Yjc
をクリックしてみる。
埋め込みiFrameの場合は、読み込む動画のYouTube動画IDをiFrameのsrc URLに指定する。
https://www.youtube.com/embed/VIDEO_ID
このVIDEO_IDは"S7t-2Ex-Yjc"だから
https://www.youtube.com/embed/S7t-2Ex-Yjc
これがsrc URLになる。
BloX体験-1と2ではテンプレートを使用してEditorのみで編集してきた。
今回はテンプレートを使用せずに、ConfigurationとSnippetsを使って埋め込み動画のウィジェットを作成してみる。
SnippetsとはBloXのコーディングを行うときのパーツで、テンプレートのコードが最初から含まれている。
Snippetsをクリックして、ComponentsからiFrameを開く。
右上の"Copy to Clipboard"をクリックすると、iFrameのコードはクリップボードにコピーされる。
Editorを開き、body内の{}(以下の範囲)を選択し、[Ctrl]+[P]で貼り付ける。
iframe src=''にURLを指定する。
指定するURLは https://www.youtube.com/embed/DjGg_7tKT-Y となる。
このフレームは中心に持ってきたいので、"horizontalAlignment": "center"を以下の箇所に挿入する。
[html_escape]{ { "style": "", "script": "", "title": "", "showCarousel": true, "body": [ { "type": "TextBlock", "id": "", "class": "", "horizontalAlignment": "center", "text": "<iframe src='https://www.youtube.com/embed/S7t-2Ex-Yjc' width='800' height='600' style='border:none;overflow:hidden'>" } ], "actions": [] }
Configurationにはデフォルトの定義が記述されている。
Snippetsでは横幅に応じて空きスペースができてしまうが、デフォルトのままであれば、黄色になってしまうようなので、Configurationを変更してみる。
"backgroundColor": "#000000",
これで背景色は黒になる。
以上で設定は完了、[適用]ボタンを押して表示を確認してみよう。
これで、BloXにiFrameでYouTube動画が表示できるようになった。
ダッシュボードに新垣結衣が出ても全く意味がないんだけど、ビデオIDがマスタ化されていれば、絞り込まれたアイテムの動画を流すこともできる。
これまでダッシュボードに動画を組み込むなんて考えたことなかったけどね。
とにかく、iFrameで埋め込みができるものなら何でもいいわけで、応用範囲は広がりそうだ。
ここまでくるとBI製品のダッシュボードじゃないよね?
ではまた!