PowerApps & FlowでつくるQiita Reader アプリ

はじめに

このQiitaというブログサービスには非常にお世話になっているのですが、自分のお気に入りのタグで投稿された一覧に到達するまでに数クリックしなければいけないのがちょっと不満でした。
今回はそれを解消するために、好きなタグに関する投稿の一覧を取得し、投稿内容を表示するアプリを作りましたので紹介します。
なお、アプリはMicrosoft PowerAppsを、データ取得部分はMicrosoft Flowを利用しています。
Flow上ではQiita APIで投稿の詳細を取得、得られた結果をGithub APIでHTMLにコンバートしています。

アプリの構成（画面とデータ）

画面を2つ用意します。

一覧画面：PowerApps RSS connectorを利用。QiitaのRSS feed url ("https://qiita.com/tags/XXXXX/feed" )を指定する。
詳細画面：RSSのprimaryLinkからItemIDを抽出し、Flow上でQiita APIを利用して投稿の詳細を取得。MarkdownをGithub APIでHTMLに変換し、HTMLText controlに本文を表示

非常にシンプルな構成です。PowerApps側はほとんどやることはありませんので詳細は割愛します。

Flowで投稿の詳細を取得

RSS connectorで取得されたデータのうち、primaryLinkは以下のような形式をとります。
https://qiita.com/userid/items/itemid
形式が決まっているので、postidをPowerApps側でSplit関数を利用して抽出します。
Last(Split(Gallery.Selected.primaryLink,"/")).Result
これでitemidが抽出されます。Flowを実行するときにはこのitemidを受け渡すことで以降の処理を進めていきます。

Qiita APIで投稿詳細取得

Qiita APIの詳細はこちら(https://qiita.com/api/v2/docs) を参照してください。
今回はAPIのうち、投稿の情報を取得するためのAPI (GET /api/v2/items/:item_id)を利用します。

とても簡単に取得できます。認証は不要です。HTTP_URIはSplitでえられたitemidをPowerAppsから渡します。

JSONのパース

投稿の詳細の中には、投稿者の情報も含まれています。これをつかって、詳細画面のサムネイルを表示しています。（ユーザーに関するおおよその情報はRSSで取得できたのですが、プロファイル画像だけは取れなかったのでFlowを利用しました）
JSONのスキーマは念のため付録に記載しています。
パースしたデータのうち、user下にあるprofile_image_urlとbodyだけを後続で利用します。

Github APIで投稿内容をHTMLに変換

ここが一番調べものしました。Qiitaの投稿はMarkdown形式で返却されるため、PowerAppsできれいに表示しようとするとHTMLテキストに変換する必要があります。
これはGithubのMarkdown APIで変換することができました。詳細は下記URLをご覧ください。 https://developer.github.com/v3/markdown/
POST で変換したいMarkdownを渡すと戻りでHTMLテキストが返されます。とても便利！

あとはParse JSONの結果得られたprofile_image_urlと、Markdown-->HTMLにコンバートした結果をPowerAppsに返却して完了です！

おわりに

Markdown形式の変換はほかのサービスとの連携でも利用できそうです。
今回はFlowのHTTPコネクターを利用して、QiitaとGithubのAPIを実行しています。
PowerAppsでこんなにきれいにHTMLを表示できることにもおどろきました。
わざわざサイトに遷移しなくても、APIを公開してくれているサービスなら、同様の方法で可能な限りPowerApps+Flowに閉じた表示・アプリ作成ができそうです！

付録

JSONのスキーマ

{
    "type": "object",
    "properties": {
        "rendered_body": {
            "type": "string"
        },
        "body": {
            "type": "string"
        },
        "created_at": {
            "type": "string"
        },
        "title": {
            "type": "string"
        },
        "url": {
            "type": "string"
        },
        "user": {
            "type": "object",
            "properties": {
                "description": {
                    "type": ["null","string"]
                },
                "facebook_id": {
                    "type": ["null","string"]
                },
                "followees_count": {
                    "type": "integer"
                },
                "followers_count": {
                    "type": "integer"
                },
                "github_login_name": {},
                "id": {
                    "type": [
                        "null",
                        "string"
                    ]
                },
                "linkedin_id": {
                    "type": [
                        "null",
                        "string"
                    ]
                },
                "name": {
                    "type": "string"
                },
                "profile_image_url": {
                    "type": "string"
                },
                "twitter_screen_name": {
                    "type": [
                        "null",
                        "string"
                    ]
                }
            }
        },
        "page_views_count": {}
    }
}

重要なのは user > profile_image_url と bodyだけなので他は消してもよいです。