ノーコードツールAdalo
前回、ノーコードツールAdaloでTabBarの使い方を解説しました。
![](https://3pysci.com/wp-content/uploads/2022/05/adalo16-19-300x142.png)
今回は最初から準備されているコンポーネントを使うのではなく、新たなコンポーネントを追加して使ってみましょう。
そして後から追加できるコンポーネントには色々とありますが、今回はYouTubeの動画をスクリーンに追加できるコンポーネントを使ってみます。
それでは始めていきましょう。
事前準備
まずは事前準備から始めていきましょう。
今回もHomeスクリーンに何もない状態からスタートします。
![](https://3pysci.com/wp-content/uploads/2022/05/adalo17-1-1024x484.png)
また今回はデータベースは使わないので、初期状態で大丈夫です。
![](https://3pysci.com/wp-content/uploads/2022/05/adalo17-2-1024x484.png)
Marketplaceを覗いてみる
新しいコンポーネントは「Marketplace」という場所から追加します。
Marketplaceは左上の「+マーク」から「Marketplace」の項目を探し、そのブロックの中にある「EXPLORE MARKETPLACE」のボタンをクリックします。
![](https://3pysci.com/wp-content/uploads/2022/05/adalo17-3-1024x484.png)
このMarketplaceにあるものが追加可能なコンポーネントです。
![](https://3pysci.com/wp-content/uploads/2022/05/adalo17-4-1024x484.png)
ただし注意すべき点があり、無料のコンポーネントと有料のコンポーネントがあります。
左側の「Free」のボタンを押すと無料で追加できるコンポーネント。
![](https://3pysci.com/wp-content/uploads/2022/05/adalo17-5-1024x484.png)
「Premium」をクリックすると有料の追加コンポーネントが表示されます。
![](https://3pysci.com/wp-content/uploads/2022/05/adalo17-6-1024x484.png)
YouTubeコンポーネントの追加
今回は無料のYouTubeのコンポーネントを追加していきます。
Marketplaceを開いたら「View All」か「Free」のボタンをクリックし、「YouTube」を探します。
そして枠の右下の「INSTALL」をクリックします。
![](https://3pysci.com/wp-content/uploads/2022/05/adalo17-7-1024x484.png)
インストールが完了するとクリックした「INSTALL」のボタンは「INSTALLED」に変わります。
これでYouTubeコンポーネントのインストールは完了です。
YouTubeコンポーネントの追加と設定
それではYouTubeコンポーネントをスクリーンに追加していきます。
Marketplaceでインストールしたコンポーネントは左上の「+マーク」の「Installed」の中に追加されます。
そこから「YouTube」を探し、Homeスクリーン上にドラッグ&ドロップします。
![](https://3pysci.com/wp-content/uploads/2022/05/adalo17-8-1024x484.png)
このYouTubeコンポーネントでは動画のURL(Video URL)が必要です。
![](https://3pysci.com/wp-content/uploads/2022/05/adalo17-9-1024x484.png)
今回は「7Daysトレーニング」でも使わせてもらっている「CALISLIFE自重トレ」様の動画を使わせてもらうことにしましょう。
![](https://3pysci.com/wp-content/uploads/2022/05/adalo17-10-1024x484.png)
ちなみにチャンネルはこちらです。
そして動画としては「【ルーティーン】6分間の大胸筋トレーニング!1週間で全身を鍛える!」へのリンクをしてみることにしましょう。
![](https://3pysci.com/wp-content/uploads/2022/05/adalo17-11-1024x484.png)
動画のURLをコピーし、「Video URL」にペーストします。
![](https://3pysci.com/wp-content/uploads/2022/05/adalo17-12-1024x484.png)
ちなみに「Autoplay」をオンにしておくと、このコンポーネントが表示されたら動画が再生されるようになります。
これでYouTubeコンポーネントの追加と設定は完了です。
シミュレーターによる確認
それでは右上の「PREVIEW」をクリックして、シミュレーターでの確認をしてみましょう。
目的の動画が表示され、再生マークをクリックして再生されれば成功です。
![](https://3pysci.com/wp-content/uploads/2022/05/adalo17-13-1024x484.png)
こんな感じで元々なかったコンポーネントを追加し、機能をアップさせられるというわけです。
無料のコンポーネントには「YouTube」の他に地図を表示する「Map」、Googleのモバイル向け広告を表示させる「AdMob」、Twitterのタイムラインを表示する「Twitter Timeline」があります。
また有料では長押しの機能を使える「Long Press Actions」やアクセスしたデバイスの判別ができる「Device Detector」なんかがあります。
色々追加して試してみるのも面白いかもしれませんね。
とりあえずAdaloにおいては使いそうな機能は紹介できたかと思います。
また何か面白そうな機能を見つけたらその都度紹介していきたいと思います。
ではでは今回はこんな感じで。
コメント