初めに
社内研修で、日頃よく使うサービス（ニュースや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を検索するアプリを作成してみました。
うまくいかないところや気になる点があれば、気軽にコメントお願いします！