PowerApps で Qiita Viewer を作成する③ 〜Qiita のフィードを取得・表示〜

SharePoint PowerApps

f:id:tecchan365:20190504100123p:plain PowerApps で 特定のタグの記事を表示する 「Qiita Viewer」の作成方法をご紹介します。
今回の記事では、Qiita記事のフィードを取得・表示する方法をご紹介します。

データソースに「RSS」を追加

Qiita記事のフィードを取得するために、データソースに「RSS」を追加します。
PowerAppsの編集画面を開き、[ビュー] → [データソース] → [データソースの追加] の順にクリックします。
f:id:tecchan365:20190504085945p:plain

[新しい接続] をクリックします。
f:id:tecchan365:20190504090151p:plain

検索欄に「rss」と入力し、[RSS] をクリックします。 f:id:tecchan365:20190504090406p:plain

[作成] ボタンをクリックします。 f:id:tecchan365:20190504090500p:plain

データソースに「RSS」が追加されました。
f:id:tecchan365:20190504090619p:plain

ギャラリーアイテム選択時に、コレクションにフィードを格納

続いて、ギャラリーアイテム選択時に、選択したタグのフィードを取得し、コレクションに格納します。 ギャラリーをクリックし、ギャラリープロパティのコンボボックスから「OnSelect」を選択します。 f:id:tecchan365:20190504091146g:plain

Onselect の数式に、以下の数式を入力します。

ClearCollect(colFeed,RSS.ListFeedItems("http://qiita.com/tags/" & ThisItem.Title & "/feed.atom"))

f:id:tecchan365:20190504092013p:plain

これでタグ選択時にフィードが取得されるようになりました。

取得したフィードを表示

取得したフィードを、ギャラリーに表示させます。 ギャラリーの挿入は、[挿入] → [ギャラリー] → [縦] の順にクリックします。
f:id:tecchan365:20190504092607p:plain

タグの右側に配置させます。 f:id:tecchan365:20190504092816p:plain

ギャラリーをクリックし、ギャラリープロパティの「項目」を「colFeed」にします。
f:id:tecchan365:20190504093125p:plain

ギャラリープロパティの「レイアウト」を「タイトルとサブタイトル」にします。
f:id:tecchan365:20190504093414p:plain

Title を 「title」、SubTitle を 「publishDate」にします。
f:id:tecchan365:20190504093711p:plain

[次へ] アイコンの「OnSelect」プロパティに、以下の数式を入力します。
この数式を入力することによって、Qiita記事が表示されるようになります。

Launch(primaryLink)

f:id:tecchan365:20190504094154p:plain

色などのレイアウト調整すれば完成です。
f:id:tecchan365:20190504094857g:plain

余談

今回、このQiita Viewer作成にあたり、「令和カラー」を利用してみました。
暖色系の色（？）で見やすいですね。