4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-01-08

はじめに

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

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

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

どうやって作る

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

作成開始

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

9:43開始。

PowerAppsのサイトを開く

https://web.powerapps.com/にアクセスしてログインしてください。

新規作成ボタンを押す

「Create an app」をクリックして、「Canvas」をクリックします
image.png

空のアプリを作る

左側の「New」タブを選んで、「Start with a blank canvas...」の「Blank app」から「Phone layout」を選びます。
今回はスマホでポチッとやりたいので。
あれ?英語ページが表示されている?なんでだ。
まあ、普通は日本語のページが表示されると思います。
image.png

UIを作る

以下のような感じでUIデザイナが開きます。
image.png

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

すると、いろいろなUI部品がずらっとでてきます。
image.png

今回必要なのはボタンだけですので、「Button」をクリックするとデザイナ上にボタンが現れます。
image.png

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

image.png

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

10:00

ボタンが押されたときの動作を指定する

え、どうすんのこれ。
どこから?
ここによると、ボタンが押されたときの動作は「Microsoft Flow」を使うようです。

「Files」タブを選択すると左側からメニューが出てくるので、その中から「Flows」を選択します。
image.png

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

image.png image.png

テンプレート
PowerAppsボタンが押されたときの動作っぽいテンプレートがありました。
左上の「PowerApps Button」テンプレートを選択します。
image.png

すると、以下のように表示されます。
「New Step」とあるので、ここにボタンが押されたときの流れ(フロー)をつなげていくんですね。
やばい、10:16
image.png

今回はgmailを使って送りたいので検索してみます。
ありますね。
image.png

Gmailをクリック
image.png

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

サインインを求められるので、ボタンを押して使用するgmailのアカウントの認証を行ってください。
これはよくあるやつなので特に説明は必要ないかと思います。
image.png

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

image.png

今作ったフローができていますね。
image.png

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

デザイナの画面に戻って、「Action」タブを選択すると「Flows」というボタン?があるのでこれをクリックします。
するとダイアログが開いて、そこに先程作成したフローが表示されるので、これを選択します。
image.png

すると、「OnSelect」に対する関数みたいな感じで「PowerAppsbutton.Run(」と入力されるのですが、この時点では閉じ括弧がついていないのでそれを補ってやります。
image.png

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

試してみる

右上に実行ボタンがあるのでそれを押します。
先に言っておきますが、これを押すとさっきフローで指定したメールアドレスにメールが送信されるので、テストでは自分のアドレスを指定しておくのがよいと思います。
image.png

実行ボタンを押すと、デザイナで作ったとおりのUIが表示されるので、ボタンをクリックしてみましょう。
image.png

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

フローの方に戻って修正
image.png

解決方法はHTMLの改行タグ<br>を挿入すること。
これ、HTMLで書けるってことかな。
image.png

改行された。

試しに一部分太字にしてみる。
image.png

太字になった。

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

10:47

スマホで使うには?

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

image.png

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

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

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

11:00

おわりに

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

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

追記

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

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

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

image.png
4
2
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?