【Shopifyアプリ調査】YouTube動画埋め込みアプリをつかってみた

## はじめに
こんにちは!
最近ショッピファイの構築していく際に色々なアプリを試していて、気になったアプリがあったので皆さんに共有していきたいと思います！
まず、タイトルなのですが、<strong>「どこでもYouTube動画埋め込み｜リテリア Video」</strong>といって、アプリ内の好きなところにYoutube動画を設置することができる日本製のshopifyアプリです。
アプリストアのリンクを掲載しておきますので、この記事を見て興味を持たれた方は調べてみてください！

https://apps.shopify.com/youtube-video?locale=ja&from=hirano

## この記事の内容
* Youtube動画埋め込みアプリとは
* デフォルトの機能との違い
* Youtube動画埋め込みアプリでできること
* おわりに

## Youtube動画埋め込みアプリとは
当アプリはタイトル通りではあるのですが、Youtube動画をアプリ内の好きなところに配置できるアプリです。
皆さんは「商品の機能であったり、使い方であったりを伝えたいけど、なかなか文章だけだと難しい」や「もっとストアに動きを付け足したい」なんかを思ったことがあるのではないでしょうか。
かくいう私も、shopify構築をしていく上で、商品の良さをどのようにして、伝えようか悩んでいました。
そこでこのアプリに出会い使ってみたところ、便利だったのでこれから紹介していきたいと思います！

### Youtube動画にすることのメリット
Youtube動画にすることのメリットを解説します！
メリットは以下の通りです。 
* テキストよりも動画の方がユーザーにメッセージが伝わりやすい。
* ストア内に動きが生まれ、より充実したストアになる。

やはり動画がテキストより優れてる点は、伝えたいことが伝わるということではないでしょうか。
ECサイトの最大の悩みの１つにユーザーが手に取って商品を見れないということがあります。
Youtube動画にすることで実際の使用感やサイズ感など、リアルに近い商品情報を伝えられます。
さらに、ストア内に動きを加えることでより充実しユーザーからのリアクションも良くなるでしょう。

## デフォルト機能との違い
Shopifyのデフォルトの機能でYoutube動画を埋め込める？
→結論から言うと、デフォルトでも動画の埋め込みはできます！
では、デフォルトとYoutube動画埋め込みアプリはどのようなところが違うのか解説していきます！

### デフォルトのを実装してみた
それではデフォルトでの実装を解説していきたいと思います！
今回使うYoutube動画のサンプルはデフォルトで使用されているものでやっていきます！

#### 管理画面の設定
手順としては以下の通りです。
1. セクションの追加で、動画を選択する。
![Screen Shot 2022-05-22 at 11.11.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/596c8b46-d0c4-5ded-962e-b6b0974d3fd7.png)
2. 好みのスタイルに設定していく。
![Screen Shot 2022-05-22 at 11.27.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/a89909c3-c27c-c028-2111-92e978b1c487.png)
流れとしては非常にシンプルでわかりやすかったです。

### Youtube動画埋め込みアプリで実装してみた
続いては株式会社リテリアが公開している「どこでもYouTube動画埋め込み｜リテリア Video」の実装を解説していきたいと思います！

手順としては以下の通りです。
1, ショッピファイのアプリストアで「どこでもYouTube動画埋め込み｜リテリア Video」と検索し、赤い四角で囲まれているアプリを選択します。
![Screen Shot 2022-05-19 at 14.32.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/65a47f10-e6e3-f984-9dc2-4c0626823b64.png)


2, アプリを導入する。
![Screen Shot 2022-05-19 at 17.02.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/3efa16c1-8b81-a41d-ca69-73cbd17cec13.png)
右上のアプリをインストールを選択します。
![Screen Shot 2022-05-19 at 14.35.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/ace5166e-4036-8c17-84f5-2eb0582a3053.png)
このアプリを使用するテーマを選択し、有効化のボタンをクリックします。
![Screen Shot 2022-05-23 at 15.20.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/bd4de164-e1ca-0ab2-a08f-d8b4897fd697.png)

3, セクションの追加で「どこでもYouTube動画埋め込み｜リテリア Video」を選択する。
![Screen Shot 2022-05-23 at 15.21.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/b27754ee-dba6-c167-f1c9-c7a4969512bc.png)
このような画面になっていたら、アプリの有効化は完了しています。

4, 好みのスタイルに設定する。
![Screen Shot 2022-05-23 at 15.57.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/ce77136b-4bcf-3d0d-79de-dbbb4a893bd9.png)

以上が「どこでもYouTube動画埋め込み｜リテリア Video」の導入方法となります。

## デフォルトとの違い
さて、ここで本題に戻りますがデフォルトと株式会社リテリアのYoutube動画アプリの違いを解説していきます！

主な相違点は以下の通りです。
* Youtube動画の自動再生
* Youtube動画の表示数
* 上下左右の余白の柔軟性

### Youtube動画の自動再生
まず１つ目がYoutubeの動画再生を自動にするか、ユーザーに操作してもらうかの選択をチェックボックスで切り替えることができます。
![Screen Shot 2022-05-25 at 17.31.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/42d03713-7ea4-7c52-906e-46d86183279d.png)
動画を自動再生しますかというチェックボックスがあるのでここにチェックを入れます。
デフォルトではチェックが入った状態でした。

### Youtube動画を最大3枚貼れる
リテリアのアプリでは最大3枚まで動画を表示するようにできます。
例えば、2枚と選択すれば横並びに２つのYoutube動画が表示され、3枚と選択すれば横並びに３つのYoutube動画が表示されます。
当然ではありますが、枚数を増やすにつれて一つあたりの動画の大きさは小さくなります。
Youtube動画1枚の場合
![Screen Shot 2022-05-25 at 17.27.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/798ecee0-2774-1855-88e0-1fadb8cf1d05.png)
Youtube動画2枚の場合
![Screen Shot 2022-05-25 at 17.28.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/090dbb0a-db59-3027-3291-3db5efdc5960.png)

Youtube動画3枚の場合
![Screen Shot 2022-05-25 at 17.28.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/27af512e-44ec-9b7c-faf1-88b1654ea5bc.png)

### 上下左右の空白の柔軟性
リテリアのYoutube動画アプリでは表示枚数が多くなると隣のYoutube動画との間隔が狭くなったりバランスが悪くなったりして、見栄えが悪くなります。
そのためこのアプリでは、上下の空白だけでなく、Youtube動画の左右の空白の調整もできるようになっています。
この動画間の空白の調整はとても助かりました。
![Screen Shot 2022-05-25 at 17.33.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/bae7449a-5a47-887f-3f09-eb5f492d368d.png)
ちなみに空白はスマホとPCで別々に設定できます。

## どこでもYouTube動画埋め込み｜リテリア Videoでできること
最後にリテリアのYoutube動画アプリでできることを解説していきます。
前述している箇所もあるためその箇所は省略させていただきます。
ご了承ください。
### 動画の表示数
前述のため省略
#### 動画のURL
ここには自分の貼りたいYoutube動画のURLをそのまま貼り付けてください。
![Screen Shot 2022-05-25 at 17.58.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/7d39cf65-7bd3-c90d-fcc6-c868c6af91ab.png)

### 動画の縦横比
画面の縦横比はYoutube動画の縦と横の比率を表しておりデフォルトでは100%に設定されてあります。
基本的には100%から変更させなくてもいいのではないかと思います。
100%より大きくすると縦の比率が大きくなるため、縦長のYoutube動画になります。
反対に100%より小さくすると横の比率が大きくなるため、横長のYoutube動画になります。
100%より小さくした場合
![Screen Shot 2022-05-25 at 17.52.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/39126e81-831a-2b75-7eb0-a5b44967d68a.png)

100%より大きくした場合
![Screen Shot 2022-05-25 at 17.51.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2668043/bc623151-d862-aa10-9d30-7d98cb47842b.png)

### 動画間の余白
前述のため省略
### 自動再生
前述のため省略
### ブロックの余白調整
前述のため省略

## 終わりに
最後まで読んでいただき誠にありがとうございます！
『どこでもYouTube動画埋め込み｜リテリア Video』はいかがでしたか？
こちらのアプリは7日間の無料トライアルもあるみたいなので気になる方はまずは入れてみるのもいいと思います。
また開発ストアではアプリを無料で試すことができます。Shopifyパートナーとしてストア構築をしている方もぜひ試してみてください！


https://apps.shopify.com/youtube-video?locale=ja&from=hirano