PowerAppsでYoutube検索画面を作る！

# 初めに
社内研修で、日頃よく使うサービス（ニュースや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の発行
https://qiita.com/shinkai_/items/10a400c25de270cb02e4

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


## PowerAutomateでYoutube APIを実行
### まずはPowerAppsと連携できるFlowを作成!
![Cap 2023-03-24 13-19-40-400.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124014/89233ab4-7c43-32f8-4753-572dc2ae19c0.png)
Flowを作成してみましょう。
ここではPowerAppsをトリガーにするので、Instant cloud flowを選択します。

![Cap 2023-03-24 13-19-51-507.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124014/314c813b-1ade-66ed-62da-6cb6f5227b6c.png)
PowerApps選択して、Create！

---
### トリガーを設定
![Cap 2023-03-24 13-34-28-471.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124014/2922b195-501e-5aa2-10d3-08ef849868e8.png)
作成を完了すると、PowerAppsをトリガーにしたFlowの初期画面が表示されます。
これによりPowerAppsからパラメータを受け取った時、画面のフロー通り（上から下へ）に進めることができるようになります。



![Cap 2023-03-24 13-34-22-206.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124014/7da694f2-7de1-cad4-8ef7-bbecbd93e496.png)
![Cap 2023-03-24 13-35-43-521.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124014/ea808eea-b86f-302e-c6a7-08ecc120286c.png)

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

---

### V1・V2なにが違う？？
軽く触れてみますと、使いやすさです。



##### V1を使った際のPowerAppsのFlow実行画面
![Cap 2023-03-24 13-48-53-217.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124014/505b2953-e3ce-8447-8045-14d32cc4975f.png)

##### V2を使った際のPowerAppsのFlow実行画面
![Cap 2023-03-24 13-50-33-923.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124014/b879ad60-63d9-a0e6-e6c9-bffa3ddf05cd.png)

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


---


### HTTPアクションでYoutube API実行
New stepからHTTPアクションを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124014/ed459f86-8e74-8060-b19a-db5788d68659.png)
①Method : GET
②URI
```ruby:入力例
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アクションの設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124014/e94c11c4-5077-6a5a-dc9f-d4d0a72ac133.png)

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

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


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

### キャンバス作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124014/2071ad77-5aa0-2529-90e3-43f58ca49994.png)
まずは、PowerAppsからキャンバスアプリを作成しましょう

### PowerAutomateのFlowを追加
![powerappsauto.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124014/8b70e65e-a06a-5238-fb15-5d49ca5176eb.png)
PowerAutomateアイコンから作成したFlowを読み込むことができます。
他の環境で作成したFlowも共有してもらえると使うことができます！


### Youtube検索フォームを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124014/8d99b820-27f3-18ce-bbe8-c83f3acdbc4e.png)

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


```md:入力例
UpdateContext({SearchYoutubeData: SearchYoutube.Run(TextInput1.Text)});
```

---


### Youtube表示用のギャラリー作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124014/1506061a-b8b4-9482-ab00-84be6eea0e8b.png)
①ギャラリーを作成します。（ここでは垂直ギャラリーを利用してます）
②今回はサムネイルとして、動画を置きたかったので【ビデオ】を挿入しております。
③各アイテムにYoutubeデータをセットしておく
```c#:入力例
//ギャラリー
    Items = SearchYoutubeData.items;


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



### 画面のUIをきれいにします！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124014/56f81c3f-582e-615b-117a-00d69233a8fa.png)
ヘッダーを追加したり、サイズを画面に合わせて大きくしたり、アプリ画面ぽくしてみました。

# よし！これで再生してみよう！
![Videotogif (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124014/b6bfe94f-9d73-0e9a-acfe-791f0f983693.gif)


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