初めに

社内研修で、日頃よく使うサービス（ニュースやQiita検索、日程管理）を一目で確認できる機能を提供できればと思いPowerAppsを使って開発してみました。

今回はその中で、PowerAppsキャンバスにYoutubeを検索し再生できる機能の紹介をしたいと思います。

本投稿で伝えらえる情報

PowerAppsでYoutubeを検索、表示、再生できる
Youtube Data API v3のAPI発行、使い方
PowerAutomateのHTTP使い方
PowerAppsとPowerAutomateの連携方法

前提

GCP(Google Cloud Platoform)のアカウントを持っている
Power PlatformのPREMIUMライセンスアカウント

いざ、スタート！

Youtube API v3 APIの発行

こちらの投稿に細かく記載されていましたので、ご参考お願いします！
2021年の記事ですが、現時点（2023.3）でUIの変化は多くなかったので、きっと問題ないはず！

PowerAutomateでYoutube APIを実行

まずはPowerAppsと連携できるFlowを作成!

Flowを作成してみましょう。
ここではPowerAppsをトリガーにするので、Instant cloud flowを選択します。

PowerApps選択して、Create！

トリガーを設定

作成を完了すると、PowerAppsをトリガーにしたFlowの初期画面が表示されます。
これによりPowerAppsからパラメータを受け取った時、画面のフロー通り（上から下へ）に進めることができるようになります。

好みではありますが、筆者はPowerApps（V1）よりV2が使いやすかったため変更します。
「・・・」▶　DeleteでPowerApps(v1)を削除してV2に設定し直します。

V1・V2なにが違う？？

軽く触れてみますと、使いやすさです。

V1を使った際のPowerAppsのFlow実行画面

V2を使った際のPowerAppsのFlow実行画面

V1と違ってV2はパラメータの型を表示してくれます。（便利！）

HTTPアクションでYoutube API実行

New stepからHTTPアクションを追加します。

①Method : GET
②URI

入力例

https://www.googleapis.com/youtube/v3/search?
    //snippetを指定することでタイトル・説明データも受け取る
    part=snippet&

    //検索テキスト
    q="[PowerAppsから受け取ったテキスト]"&

    //GCPから発行したAPI key
    key=[APIKey]&

    //VIDEOタイプを取得
    type=video&

    //コンテンツ地域
    i18nRegions=JP

APIの細かい情報は、公式を参考してください。
https://developers.google.com/youtube/v3/getting-started?hl=ja

Responseアクションの設定

最後ステップのResponseアクションを追加します。
ResponseのBodyにHttpから受け取ったBodyをそのまま返すことにします。

JSON Schemaを記載しないとPowerAppsからは成功状況（bool）のみ送信されるようになりますので、ご注意ください。

PowerAppsでYoutubeを検索・表示してみよう

いよいよ最後の段階です。
Youtubeデータを受け取ってPowerAppsに返す処理を行いました。
ここからは、GUIを利用してYoutubeを検索、表示する対応をしていきます。

キャンバス作成

まずは、PowerAppsからキャンバスアプリを作成しましょう

PowerAutomateのFlowを追加

PowerAutomateアイコンから作成したFlowを読み込むことができます。
他の環境で作成したFlowも共有してもらえると使うことができます！

Youtube検索フォームを作成

①テキスト入力と検索ボタンになるアイコンを追加
②検索アイコンの「OnSelect」に入力したTextをパラメータにし、PowerAutomate実行するコードを書く

入力例

UpdateContext({SearchYoutubeData: SearchYoutube.Run(TextInput1.Text)});

Youtube表示用のギャラリー作成

①ギャラリーを作成します。（ここでは垂直ギャラリーを利用してます）
②今回はサムネイルとして、動画を置きたかったので【ビデオ】を挿入しております。
③各アイテムにYoutubeデータをセットしておく

入力例

//ギャラリー
    Items = SearchYoutubeData.items;


//以下ギャラリー内アイテム
　//タイトル
    Text = ThisItem.snippet.title;
　//説明
    Text = ThisItem.snippet.description;
　//ビデオ
    Media = "https://www.youtube.com/watch?v="&ThisItem.id.videoId;

画面のUIをきれいにします！

ヘッダーを追加したり、サイズを画面に合わせて大きくしたり、アプリ画面ぽくしてみました。

よし！これで再生してみよう！

はい！出来上がり～！

Youtube Data APIを利用してYoutubeを検索するアプリを作成してみました。
うまくいかないところや気になる点があれば、気軽にコメントお願いします！

PowerAppsでYoutube検索画面を作る！

初めに