ノーコードでアプリ開発をやってみたいと思ったときにおすすめな「Adalo」です。
Adalo(アダロ)は、簡単にアプリが作れるノンプログラミングツール。
プログラムコードを知らなくてもアプリ製作が可能なツールです。
Adaloで作るアプリにYouTube動画を表示したい時があるかもしれません。
そんな時に使える「AdaloにYouTubeを表示できるコンポーネント」を紹介します。
Adalo
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m01d_202236230.jpg)
Adaloは、ノーコードで使えるアプリ開発ツールです。
⇒ https://www.adalo.com/
Adaloを使用するには登録が必要です。
登録方法やエディタ画面は別記事に書いていますので、下記の記事を参考にしてください
⇒ Adaloの登録方法
⇒ Adaloのエディタ画面
Youtube(ユーチューブ)コンポーネント
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m30d_220841425.jpg)
Adaloには、いろいろなコンポーネントがあります。
その中に、YouTube COMPONENT(ユーチューブコンポーネント)があります。
YouTubeコンポーネントは、左サイドバーのMarketplaceの中にあります。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m30d_155156017.jpg)
左サイドバーをスクロールして、MarketplaceのEXPLORE MARKETPLACEをクリックします。
クリックするとMarketplaceが開き、コンポーネントが表示されます。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m30d_155200865.jpg)
画面をスクロールしていくとYouTubeがあります。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m30d_155208625.jpg)
YouTubeコンポーネントを表示させて、INSTALLをクリックします。
クリックすると、INSTALLEDになります。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m30d_155220985.jpg)
最後に、DONEをクリックします。
左サイドバーにInstalledと表示されます。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m30d_155238129.jpg)
Installedの中に、YouTubeコンポーネントが追加されます。
YouTubeコンポーネントは、通常のコンポーネントと同じように、スクリーンへ移して使用します。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m30d_220019057.jpg)
画面サイズの調整が行えますので、表示したいサイズに調整します。
YouTubeコンポーネントの設定は、Video URLを指定します。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m30d_155314297.jpg)
YouTubeの共有をクリックして、URLをコピーします。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m30d_220539203.jpg)
コピーした動画URLを貼り付けます。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m30d_215857926.jpg)
プレビューで確認すると動画が表示されます。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m30d_171924911.jpg)
もし表示されない時は、一度、Adaloを終了して、もう一度立ち上げてみてください。
YouTubeコンポーネントを使用すれば、Adaloにユーチューブ動画を組み込むことができます。
ここでは、「Adaloのナビゲーション(Navigation)コンポーネント」を紹介しました。
ノーコードツールのAdaloを使用する時の参考にしてください。
⇒ Adaloの登録方法
⇒ Adaloのエディタ画面
⇒ コンポーネントとスクリーンの追加設定
⇒ Adaloのブランディング設定
⇒ Adaloの画像の入れ方
⇒ Adaloのスクリーン設定
⇒ AdaloのDatabase設定
コメントを残す