PowerAppsでコミュニティイベント用のアプリを作ろう!

これはQiitaの「Low-Code/No-Code Advent Calendar 2018」2日目の記事です。

こんにちは!Low-Code/No-Code のアドベントカレンダーがあるのを知り、張り切って登録したのですが、環境のぐあいがよくなく、当初考えていたものとは違うネタになってしまいました。投稿も遅い時刻になってしまい申し訳ありません…。とはいえ、この季節にある意味ふさわしい?アプリをつくることができましたので、是非皆さんにLow-Code PlatformとしてのMicrosoft PowerAppsの魅力を知っていただければと思います!

Microsoft PowerApps とは

PowerAppsはMicrosoftのBusiness Application Platformで、非常にすばやく、かつLow-Codeで、業務に利用できるパワフルなアプリケーションを作成できます。まだPowerAppsをご存じでなく、興味を持たれたかたは、こちらに概要からノウハウまでのリンクが網羅されていますので、参考にしてみてください。
また、YoutubeにOfficeの公式チャンネルがあり、PowerAppsの動画もたくさん投稿されています。最近はTech系も動画コンテンツが主流みたいですね!

さあ、アプリを作ろう

今回はコミュニティイベントのときにあると便利なアプリケーションを作ってみました!
実際に12/21に開催されるイベント「ローコーディングの極み!Power Platform Day Winter ’18」の情報を利用しています。
Microsoftなどの大きいカンファレンスやイベントでは、イベント用の個別アプリが配布されることがあります。そこまで高機能でなくてもいいのですが、当日必要になる情報のポータルになるようなアプリがあればいいな、と思って作りました。特にタイムテーブルを見ながらTwitterにハッシュタグ付きで投稿をしたかったので、そこはとても便利かなと思います。まだ荒削りですがこんな感じになりました。

ホーム画面
メイン画面

このアプリには次のような機能があります。すべての機能に言えることですが、ほとんどコードを書くことなく実装が可能です。

  • ホーム画面
    • connpassのイベントページをひらく
    • メイン画面をひらく
    • Googleマップをひらいて開場までの経路を確認する(調整中…)
    • Wi-fi接続情報の画面をひらく(未実装)
    • アンケートページをひらく(未実装)
  • メイン画面
    • ホーム画面にもどる(てっぺんのバナー)
    • イベントのタイムテーブルを表示する
    • スピーカーの方々の情報を表示する
    • ハッシュタグをつけてTwitterにつぶやく

ホーム画面

特にむずかしいことはしていませんが、背景画像をちゃんと用意するとそれっぽくなるなあという感じです。

  • connpassのイベントページをひらく
  • メイン画面をひらく
    • PowerAppsのアクションでほかのスクリーンに移動しています。
  • Googleマップをひらいて開場までの経路を確認する(調整中…)
    • Launch関数にURLスキームで指定するとAndroidではうまく動かないかも?
    • 手元にAndroid環境がないのですぐ確認できないため調整中
  • Wi-fi接続情報の画面をひらく(未実装)
    • Wi-fiの接続情報はすぐ知りたいのでホームに実装する予定です。
  • アンケートページをひらく(未実装)
    • イベントのアンケートはFormsなどで実装されることが多くなってきましたね。こちらももしあれば実装すると良さそうです。

メイン画面

こちらはいろいろ悩ましいところがありましたが、Low-Codeということもあって手軽な方法で実装してみることにしました。

  • ホーム画面にもどる(てっぺんのバナー)
    • PowerAppsのアクションでほかのスクリーンに移動しています。
  • イベントのタイムテーブルを表示する
    • ここの実装は結構悩みました。はじめはconnpassのAPIをたたこうかなと思ったのですが、うまくイベントが取得できない(IDだけだと重複する?)のと、取れたとしてもこの部分のみをうまく抜けるのかがあやしかったので、APIでやるのはあきらめました。
    • コミュニティイベントのアプリであることと、タイムテーブルが変わることは想定しないことにして、HTMLテキストコントロール というものを使って実装しました。要は、HTMLをベタで書けばまあまあちゃんとレンダリングしてくれるコントロールです。
    • このコントロールが少し癖があり、例えばインタラクティブなタグ(<a>とか)に対応していないので、本当はタイムテーブル内から直接スピーカーの情報へリンクしたかったのですが、これもあきらめました。
  • スピーカーの方々の情報を表示する
    • Excelを静的データソースとして読み込みました。
    • Excelではテーブルを作り、スピーカーの名前・connpassのページURL・TwitterのURL・blogのURLを登録しました。
    • 表示にはGallaryを利用しています。
    • Twitter/blogのURLがない場合はアイコンを非表示(ダミーを表示)にし、クリックできないようにしています。
  • ハッシュタグをつけてTwitterにつぶやく
    • これもTwitterに接続するだけでつぶやけてしまいます。すごい…
    • Twitter.Tweet()でつぶやく際に、イベントに紐付いたハッシュタグ(今回は #powerplatform #PowerApps #PowerBI #MicrosoftFlow)を自動でくっつけています。
    • 投稿した後にNotify()で投稿成功の旨と、投稿したメッセージを表示しています。

ビジネスに応用できそうなユースケース

PowerAppsは冒頭でも書いたとおり、ビジネス向けのアプリケーションをどんどん作ってガシガシ使おう!という思想のプラットフォームです。今回のアプリをビジネスに応用できそうな場面を考えてみました。

  • 社内の発表会などのイベントに使う
    • Speakerの情報はOffice365から部署情報などを取得することができそうです。
    • Twitter投稿の代わりにTeamsやYammerへの投稿がよさそうですね。直接会に参加できないひとも雰囲気をつかめますし、発表者が後で振り返るのにもよいです。
  • パートナー向けの教育やハンズオンイベントで使う
    • PowerAppsはWebアプリケーションですが、匿名での利用ができないので、そこをクリアできれば便利に利用できそうです。
    • ハンズオンイベントなどで、Office365のテナントとアカウントを用意するようなケースであれば活用できそうです。
    • フロアマップや注意事項などの、オンデマンドに参照したい情報を載せておくとよさそうですね。

この記事のまとめ

  • PowerAppsでコミュニティイベント用のアプリを作ったよ!
  • Low-Codeで簡単に便利なアプリを作れるPowerAppsはすごい!
  • コミュニティイベント以外にもビジネス用途に応用できる

最後になりましたが、「Low-Code/No-Code Advent Calendar 2018」を企画してくださった春木さん、ありがとうございました。初めてのアドベントカレンダーの参加で、不慣れな部分もあったと思いますが、ご容赦ください。
今後も微力ながら、Low-Code/No-Code PlatformとしてのPowerAppsの魅力をみなさまに伝えていきたいと思います!