--- title: 【Sisense BloX】BloX体験-3：ダッシュボードに新垣結衣出演のチキンラーメンの動画を組み込んでみる description: BloXウィジェットをテンプレートを使用しないで作成してみます。今回はSnippetsを使ってYouTube動画をダッシュボードに組み込む方法です。こんなインタラクティブなダッシュボードを作れるのもBloXの魅力ですね。 --- [Sisenseナレッジ - INSIGHT LAB](https://knowledge.insight-lab.co.jp/sisense) # [【Sisense BloX】BloX体験-3：ダッシュボードに新垣結衣出演のチキンラーメンの動画を組み込んでみる](https://knowledge.insight-lab.co.jp/sisense/widget/blox_iframe) 作成者: [Turtle](https://knowledge.insight-lab.co.jp/sisense/author/turtle)｜2020年10月16日 シャローム！　Sato-Gです。 昨日、会社の帰りにスーパーに寄ったら、こんなコーナーができてた。 チキンラーメン以外にポークラーメン、ビーフラーメンも出てたのか。調べてみると8月19日発売らしい。 NHK朝ドラ「まんぷく」で、この麺に一番合うのは「チキン」だって言ってたのは何だったんだ！ とか言っても、この商品はチキンラーメンの61回目の誕生日を記念して発売されたものらしく、61年前の商品が今も店頭に並んでいるというのはスゴいことだよね。 因みにポークラーメンを買ってみたけど、麺にポークの味が滲みているというわけではなく、別に袋入りのスープが入ってた。 なーんだ。 というわけで、今回はBloXで新垣結衣出演♡チキンラーメンのYoutube動画を組み込んでみる。 ## 1.YouTube動画の組み込みURLの取得 まず、YouTube動画の埋め込みURLを取得してみよう。 **[https://www.youtube.com/watch?v=S7t-2Ex-Yjc](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**になる。 ## 2. BloXの設定 BloX体験-1と2ではテンプレートを使用してEditorのみで編集してきた。 今回はテンプレートを使用せずに、**Configuration**と**Snippets**を使って埋め込み動画のウィジェットを作成してみる。 ### 2.1 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": "