PowerAppsで午前半休ダッシュボタンを作る

#はじめに
私は電車が苦手です。
いつトイレに行きたくなるかわからないのに、いつ止まるかわからない密閉空間にいるのはとてもつらいのです。
ですので、少しでも不安があると午前半休をとります。
精神的なものという要素も含め自分の体質ということで躊躇なく休みます。

さて、そんなとき会社に「午前半休メール」を送るだけですむのは良い会社ではあるのですが、毎回同じメールを打つのもなんだか無駄な気がします。
定型文を作ってそれを送信すればいいのでしょうが、メーラー立ち上げて定型文選んで送信ボタンを押すというのもこれまた無駄な気がします。

ボタン一つで「午前半休メール」が送信されることが理想的です。

#どうやって作る
この程度の効率化に大きな労力をかけるのは間違っていると思うので、ここはPowerAppsの出番かなと思いました。
これから作ってみたいと思います。

#作成開始
PowerAppsを使えるサブスクリプションがなんだったか、とか、利用料金てかかるんだっけ、とかは割愛します。
記事を書きながら作っていきます。

9:43開始。

##PowerAppsのサイトを開く
[https://web.powerapps.com/](https://web.powerapps.com/)にアクセスしてログインしてください。

##新規作成ボタンを押す
「Create an app」をクリックして、「Canvas」をクリックします
<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/89fe831e-c713-8643-09ba-c821e8062200.png" title="" alt="image.png" width="60%" height="" >


##空のアプリを作る
左側の「New」タブを選んで、「Start with a blank canvas...」の「Blank app」から「Phone layout」を選びます。
今回はスマホでポチッとやりたいので。
あれ？英語ページが表示されている？なんでだ。
まあ、普通は日本語のページが表示されると思います。
<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/36b7f207-21f8-4919-ef61-645423a6ccfd.png" title="" alt="image.png" width="60%" height="" >


##UIを作る
以下のような感じでUIデザイナが開きます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/028c27f7-2fb0-b6ac-98ac-bc627f31ac41.png" title="" alt="image.png" width="60%" height="" >

この白い部分がスマホの画面ということですね。
そこにボタンとかテキストボックスとかを配置していくという、おなじみのやり方なのでしょう。
そこには「Add an item from the insert tab or ...」とあるので、左上の「Insert」タブを選択します。

すると、いろいろなUI部品がずらっとでてきます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/daa2c63c-8fcb-9aa9-3299-665a544db55c.png" title="" alt="image.png" width="60%" height="" >

今回必要なのはボタンだけですので、「Button」をクリックするとデザイナ上にボタンが現れます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/41e109f3-76bf-43f8-3fba-ef1a61a259f3.png" title="" alt="image.png" width="60%" height="" >

WordやPowerPointで図形を操作するみたいに大きさやテキストを変更できるのでお好みのままにどうぞ。
私は以下のようにしてみました。
センスのかけらも感じられません。

<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/294a5299-878a-5fe2-9a00-f12bcf3d0cda.png" title="" alt="image.png" width="60%" height="" >

UI部分はこれで完成です。

10:00

##ボタンが押されたときの動作を指定する
え、どうすんのこれ。
どこから？
[ここ](https://flow.microsoft.com/ja-jp/galleries/public/templates/05ed784f63df4ac7b8cbb465005d6068/powerapps-%E3%83%9C%E3%82%BF%E3%83%B3/)によると、ボタンが押されたときの動作は「Microsoft Flow」を使うようです。

「Files」タブを選択すると左側からメニューが出てくるので、その中から「Flows」を選択します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/c8afd7f7-fa6b-accb-6cae-e23a62ca4122.png" title="" alt="image.png" width="60%" height="" >

「New」をクリックして、「Create from blank」を選択します。
おそらくテンプレート使うまでも無いような気がする

<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/7d8a0030-6924-8dcc-367b-483e1fd5bcad.png" title="" alt="image.png" width="60%" height="" >


<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/b8e3994b-4822-5953-3faa-28ba1655f164.png" title="" alt="image.png" width="60%" height="" >


テンプレート
PowerAppsボタンが押されたときの動作っぽいテンプレートがありました。
左上の「PowerApps Button」テンプレートを選択します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/b7fd0ea1-4df2-9b39-8ff8-b6d3141154a9.png" title="" alt="image.png" width="60%" height="" >

すると、以下のように表示されます。
「New Step」とあるので、ここにボタンが押されたときの流れ（フロー）をつなげていくんですね。
やばい、10：16
<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/fc1fabe6-d363-0e81-5d73-f17e7978de05.png" title="" alt="image.png" width="60%" height="" >


今回はgmailを使って送りたいので検索してみます。
ありますね。
<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/2b7d1b1b-df08-38fb-ef06-d31f7d4f60f4.png" title="" alt="image.png" width="60%" height="" >



Gmailをクリック
<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/effcf196-3c1b-87f4-9cff-f2b53b9f7b38.png" title="" alt="image.png" width="60%" height="" >

「Send email」を選ぶんですね。

サインインを求められるので、ボタンを押して使用するgmailのアカウントの認証を行ってください。
これはよくあるやつなので特に説明は必要ないかと思います。
<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/2406bc79-da15-e9a6-5fb4-666a8b7edb29.png" title="" alt="image.png" width="60%" height="" >

そうしたら、送信先のアドレスやタイトル、本文などを入れていきます。
簡潔極まる内容ですね。
入力が終わったら「Save」ボタンを押します。

<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/fdad4d49-1251-4a7d-9de8-0667ee449d9e.png" title="" alt="image.png" width="60%" height="" >

今作ったフローができていますね。
<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/a5d4ca9e-bd34-1350-7ee2-7a74f90cb17d.png" title="" alt="image.png" width="60%" height="" >


これをさっき作ったボタンに割り当てればいいというのは直感的にわかるけれど。
10:30だ。

デザイナの画面に戻って、「Action」タブを選択すると「Flows」というボタン？があるのでこれをクリックします。
するとダイアログが開いて、そこに先程作成したフローが表示されるので、これを選択します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/072c16cf-dcaf-7876-2b9c-482d57ff6246.png" title="" alt="image.png" width="60%" height="" >


すると、「OnSelect」に対する関数みたいな感じで「PowerAppsbutton.Run(」と入力されるのですが、この時点では閉じ括弧がついていないのでそれを補ってやります。
<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/33fcd103-13aa-bf5b-4a65-a3abaf33fb22.png" title="" alt="image.png" width="60%" height="" >

これでボタンが押されたときに先程のフローが実行されるようになります。

##試してみる
右上に実行ボタンがあるのでそれを押します。
先に言っておきますが、これを押すとさっきフローで指定したメールアドレスにメールが送信されるので、テストでは自分のアドレスを指定しておくのがよいと思います。
<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/c1ddf240-848b-38f5-3f62-b9ddb2b5f0f4.png" title="" alt="image.png" width="60%" height="" >

実行ボタンを押すと、デザイナで作ったとおりのUIが表示されるので、ボタンをクリックしてみましょう。
<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/3096bc4d-f643-ceed-36d2-c5cc2e71c1e6.png" title="" alt="image.png" width="60%" height="" >

メールが届きました。
でも改行がなくなっており変です。
え、改行コード入れなきゃならないの？


フローの方に戻って修正
<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/1540fa14-7ed3-dcc8-71c0-0c707acdca96.png" title="" alt="image.png" width="60%" height="" >

解決方法はHTMLの改行タグ`<br>`を挿入すること。
これ、HTMLで書けるってことかな。
<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/0ae8ea60-70e8-ab05-dcf0-4ce04292caec.png" title="" alt="image.png" width="60%" height="" >

改行された。

試しに一部分太字にしてみる。
<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/94829a61-7ba7-e43d-4ae2-631f97877f0b.png" title="" alt="image.png" width="60%" height="" >


太字になった。


まあそうか、HTMLで書ければ表現豊かなメールを作成できるものな、と納得しました。

10：47

##スマホで使うには？

作成したPowerAppsアプリを公開します。


<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/04bca137-f8b6-dba8-f7cb-7cf6559c5ade.png" title="" alt="image.png" width="60%" height="" >

スマホ側でPowerAppsをインストールします。

PowerAppsを起動するとサインインを求められるので、先程PowerAppsでアプリを作成するときに使用したアカウントでサインインします。

すると、先程作成したアプリが表示されます。
それを選択すると、素晴らしいデザインのUIが表示されるので、「半休！」ボタンをタップすればメールが送られます。

11：00

#おわりに

ざっと1時間20分ぐらいかかりました。
記事（というかメモ程度…）を書きながらで初めて作ったにしては頑張ったと思います。

かかる時間は作成者のバックグラウンドや慣れによるところだと思います。
ノンコーディングでこういうものが気軽に作れるというのは面白いですね。


#追記

コメントにいただいたとおり、Flowボタンというものがありまして今回私がやったことが1分でできますw
通知をつけて「送信しました」みたいなメッセージを指定しておくと、フローが実行されたことがわかるので便利というか、「あれ、送れたのかな？」と心配にならないで済むので便利です。

あと、PowerAppsとFlowは合わせて使うこともあるということなので、そのときの参考になればうれしいです。

さて、あとはダッシュボタンといいつつ手抜きの四角ボタンを配置しただけだったので、せめて見た目をそれっぽくしてみました。
（通知もつけました）

<img src="https://qiita-image-store.s3.amazonaws.com/0/245438/d38e0d47-f7d2-0ea7-a2da-deca0137938f.png" title="" alt="image.png" width="60%" height="" >