PowerApps + Microsoft Flow を利用してWordPress.comにMarkdownで投稿するアプリを作成する

こんにちは!

このblogでは、Microsoftのサービスに関するメモを公開してまいります。

Power Platform(PowerApps/Microsoft Flow)周りの、ちょっと偏った情報が多くなると思いますが、少しでもお役に立てれば幸いです。

今回、この PowerAppsblogをはじめるためにPowerAppsのアプリを作った ので、その内容をご紹介します。


背景

WordPress.comは標準でMarkdownできない

がーん……

WordPress.comのパーソナルプランはプラグインを使えないので、せっかくMarkdownのプラグインが用意されているのに利用できません。

PCから投稿するのであればHTMLモードで書いてもよいのですが、やっぱりすべてのことをお布団の中でやりたいですよね… スマホからはMarkdownできないとつらい…

ケチらずにプレミアムにする PowerAppsちゃんでなんとかしましょう。

GitHub APIでMarkdown to HTMLができる

GitHub APIを利用することで MarkdownからHTMLを生成することができます。やったー!

Microsoft FlowからWordpressへ投稿ができる

FlowにはWordpressのコネクタがあります(preview)。最高……


PowerAppsでアプリを作る

さて、ありがたい各種サービスのおかげでやりたいことができそうなので、さっそくPowerAppsでアプリを作っていきましょう!

完成したアプリ

PowerAppsアプリ

オブジェクト

オブジェクト

  • ButtomPost
    • POSTボタン
  • ButtonClear
    • CLEARボタン
  • Tags
    • タグを入力するテキストインプット
  • Title
    • タイトルを入力するテキストインプット
  • Body
    • 本文を入力するテキストインプット
  • AppTitle
    • アプリのタイトルラベル

アクション

  • CLEARボタンを押したとき
    • Reset()関数を使ってテキストインプットの中身をクリアします。

Reset関数

  • POSTボタンを押したとき
    • Flowをトリガーします。「Post2Wordpress」というのがFlowの名前です。

Flows

Flowをつくる

PowerAppsからFlowを実行する方法は、Microsoft吉田さんが動画で分かりやすく解説してくださっています。

はじめての PowerApps 8 – Microsoft Flow の応用編(PowerApps から Flow を実行し、結果を返す)

※全8回のレッスンで、PowerAppsの概要から作成手法まで学ぶことができます。これからPowerAppsをはじめる方にとてもオススメです!

さっそくFlowをつくりましょう。

  • POSTボタンを選択して「アクション」-「Flows」を選択します。

Flows

  • 「新しいフローの作成」をクリックすると、Flowの作成画面が開きます。

新しいフロー

PowerAppsボタン

  • アクションを追加してFlowを構築します。
    • HTTP
      • GitHubのAPIは「raw mode」を利用します。
      • 本文はPowerAppsの値を利用します。
    • Create Post(WordPress)
      • APIの戻り値をWordpressのContentに設定します。
      • その他のTitleやTagsもPowerAppsの値を利用します。カテゴリの設定はできません…
      • 下書きで投稿したいので、Statusは「draft」を選択しておきます。

Flowの構築

  • 名前を付けてFlowを保存します。PowerApps Studioに戻ります。
    • POSTボタンのOnSelectにFlowのトリガが埋め込まれるので、パラメータを入れます。
      • HTTP_本文:GitHub APIに渡す本文 = Body.text
      • Createpost_title:記事のタイトル = Title.text
      • Createpost_Tags:記事のタグ = Tags.text

アプリの保存と発行

これですべての設定が終わりました。アプリを保存して発行します。

実行してみましょう。

実行画面

WordPressにちゃんと投稿されていますね!

WordPress投稿一覧

プレビューしてみるとこんな感じ。HTMLへきちんと変換されています。やった~!

Wordpressプレビュー


この記事のまとめ

  • PowerAppsのblogを書くためにPowerAppsのアプリを作ったよ!
  • Flow連携でGitHubのMarkdown APIを利用してMarkdown -> HTMLに変換
  • WordPressコネクタを使って直接投稿

エコシステムをつなぐことで、ほしいアプリをすぐ作成することができました。この即時性がすばらしいですね!モバイル用AppやWebサービスを作るよりはるかに簡単で、ローコードであり、なにより作るのがとても楽しいです。

blogの投稿環境も整ったので、今後も(勝手に?)PowerAppsの魅力をお伝えしていきたいと思っております。長い記事となりましたが、お読みいただきありがとうございました。