【レポ】Power Apps でローコーディングな勉強会 #13に参加してきました
Power Appsでローコーディングな勉強会#13に参加したレポート記事になります。
概要
Power Appsでアプリを作るワークショップでした。
今回は楽器アプリ作成組と2D横スクロールゲームアプリ作成組の2種類のチームに分かれました。
私は楽器アプリ作成のほうに参加しました。
リモート参加枠もあり、進捗を共有したりできました。
やったこと
主催の方々がご用意くださった資料を基に、各自もくもくと作業を進めました。
資料がとてもわかりやすい、かつ質問にも丁寧に答えていただける良い環境でした。
楽器アプリのほうの作成手順は資料が公開されています。
アプリの作成手順書だけは公開します~。オーディオファイルなどは諸事情で一般公開しません。 → ホテルのベル アプリ を作って演奏しよう!(もしもホテルのフロントのベルに音階があったら…) https://t.co/hREu1U6xbv
— TAICHI (@artbreak_taichi) 2020年2月15日
成果発表
ゲーム組の方々は有志の方が成果発表をしました。
みなさん自分用に素敵にカスタマイズされていて、PowerAppsで作ったとは思えないようなクオリティのものばかりでした。
楽器組の方々も、ピアノの鍵盤のようにしてみたり、いろんな種類の楽器の音が出るようにしたりと、様々なカスタマイズをしていました。
皆さん進捗や完成したものを公開していたりするので、togetterなど見てみてください。
Power Apps でローコーディングな勉強会 #13 まとめ - Togetter
私は楽器アプリを下記のようにカスタマイズをしてみました。
金平糖が表示される順にニョロニョロをクリックすると自然ときらきら星が引けている、というようなアプリです。
楽器アプリを自分用にアレンジ〜〜
— hikari (@_mi_lin_) 2020年2月15日
出てくる金平糖の順番にクリックすればきらきら星が弾けるようになるもの。反応と時間の設定がイマイチなので暫定版。#jpaug pic.twitter.com/RhHoUOcbfP
演奏会
楽器組は最後にみんなで演奏会をしました。
「かえるのうた」の輪唱です。
おわりに
音感に自信がなく、人と演奏をした経験も中学校以来の私としてはハードルが高いように思われた楽器アプリ作成&演奏でしたが、楽しく参加できました!
ゲーム作成のほうも資料がいただけたので、挑戦してみようと思います。
Power Appsのタイマー機能を使う
はじめに
Power Appsにはタイマーの機能があります。
時間ごとにアプリの動作を設定できるもので、
アニメーションのような動作が設定できたりと動作の幅が広がります。
使い方
使い方を知るために簡単な設定をいくつかやってみます。
下記サイト様で動かし方のイメージがつかめると思います。
PowerApps タイマーを利用してUIをアニメーションさせる - Power Appsの使い方
タイマーコントロールの追加
タイマーのコントロールは[挿入]>[入力]から追加できます。
タイマーをどのくらいの長さ動かすか、
自動で開始させるか、
リピートするかなどの設定が
右側のプロパティから設定できます。
時間指定で表示させる
時間指定でアイコンを表示させてみます。
アイコンコントロールの[Visible]の項目に以下を入力します。
2秒~3秒間でアイコンが表示されるようになります。
If(Value(Right(Timer1.Text,1))>=2 && Value(Right(Timer1.Text,1))<4,true)
これで時間ごとでアイコンが表示非表示になります。
スタートストップボタン
タイマーは自動開始の設定ができますが、
自分でスタートストップを制御したいときもあると思います。
下記サイト様を参考にします。
PowerAppsを使ってじゃんけんゲーム Part1 - Qiita
タイマーの[Start]項目に[Timer_start]の変数を指定します。
スタートボタンにクリックするとタイマーが始まる設定を入れます。
[OnSelect]に下記値を入れます。
UpdateContext({Timer_start:true})
ストップボタンでタイマーを止めるようにします。
[OnSelect]に下記値を入れます。
UpdateContext({Timer_start:false})
これでタイマーのスタートストップがボタンで制御できます
タイマーの非表示
おしゃれな画面にしたいときに、タイマーのコントロールがでてるといまいちな時もありますよね。
タイマーのプロパティの[表示]をオフにすると、機能はそのままに非表示になります。
作ったもの
上記の手法を組み合わせて、絵描き歌練習アプリを作りました。
タイマーの扱いの復習がてら、ムーミンの絵描き歌練習アプリを作ってみた。シンプルなキャラデザほど難しい。#PowerApps pic.twitter.com/NGq47Y5q6F
— hikari (@_mi_lin_) 2020年2月11日
おわりに
変数関数の設定次第でいくらでも複雑な動きができるようになりそうです。
Custom VisionとPower Appsで作る色診断アプリ
はじめに
人には肌の色や瞳の色などから似合う色というものがあります。
その色を身に着けることで、魅力が引き出されたりします。
店頭に行くとどの色がパーソナルカラーなのかがわからない!
スプリング、サマー、オータム、ウィンター
上記サイトのような一覧で見比べればわかるのですが、店頭で単体で見るとわかりづらいです。
サロンで色見本の布をもらいましたがいつも持ち歩くわけにもいかない…
サロンの人は見慣れてくればわかるようになると言っていましたが、それまでどうしたらいいのか…
そうだ、アプリにお願いしよう!
対象の色をパーソナルカラーの4つのグループに分けてくれるアプリを作りました。
必要なもの
・Power Appsが使えるアカウント
手順
Custom Vision側の設定
パーソナルカラーの4グループにタグを分けて色を登録します。
パーソナルカラーは主に明度彩度を基準に分けられているので、参考画像からの抽出方法によって差が出ないように気を付けました。
Power Apps側の設定
Flowのv2対応
dataUriToBinary(triggerBody()['Classifyanimage(V2)_ImageContent'])
「画像の追加」機能の追加
フォルダから画像を選んで判定する機能も付けます。
[挿入]>[メディア]>[画像の追加]をします。
[OnSelect]項目にパラメータを入れます。
今回はColorImage2というコレクションに画像を一時格納します。
ClearCollect(ColorImage2, UploadedImage1.Image)
プレビュー表示部分を作ります。
[挿入]>[メディア]>[画像]を追加します。
First(ColorImage2).Url
判定のためのボタンを作ります。
[挿入]>[ボタン]を追加します。
ここの値が大事で、カメラ機能と画像の追加では画像の扱いが変わります。
今回はJSON関数で一度バイナリーを文字列に変換してから、Flowで処理できるようにします。
データテーブルについては、Custom Visionの結果を表示するだけなので変更なしです。
動作見本
おわりに
UI部分をもう少し何とかしたいです。
Azure Web Apps×Azure Active Direstoryでブログを作る(おまけ)
はじめに
前回、以下の記事で最低限のAzureとAADの設定についてを書きました。
Azure Web Apps×Azure Active Direstoryでブログを作る - オンプレ系インフラエンジニアがAzureを勉強する
今回はブログの機能を少し充実させる部分について書きます。
主にWordPress側の設定になるのでおまけのような感じです。
やること
・記事へのいいね機能をつける
・GoogleAnalyticsと連携する
いいね機能をつける
社内向けでも記事を投稿して、反応をもらえるとモチベーションになりますのでいいね機能はぜひつけたいものです。
プラグインの新規インストールで[WP ULike]をインストールします。
いいね機能のプラグインは何種類かあるので、好みの形式を見つけるといいと思います。
インストールしたら有効化します。
有効化されると、サイドバーにWP ULikeの項目が表示されます。
詳細設定ができます。
いいねのアイコンやいいねした時のコメント表示などの設定ができます。
設定すると、各記事上にアイコンが表示され、いいねできるようになります。
GoogleAnalyticsと連携する
どの記事が一番見られているか、どれくらいの人に見られているか知りたいものです。
ログの管理方法はいろいろあると思いますが、今回は私が一番使い慣れているGoogleAnalyticsを使ってみたいと思います。
GoogleAnalytics側の設定
GoogleAnalyticsの公式サイトでトラッキングコードを入手します。
https://analytics.google.com/analytics/web/provision/#/provision
画面に沿って必要な設定を入れていきます。
この辺は少し調べると丁寧な説明がたくさん出てくるので割愛します。
設定が完了するとトラッキングコードが表示されます。
これをWordPress用にコピペします。
WordPress側の設定
プラグインの新規インストールで[Google Analytics for WordPress]をインストールします。
有効化します。
サイドバーからGoogleAnalyticsの設定画面を開き、先ほどのトラッキングコードを入力します。
これで設定は完了です。
再び、GoogleAnalyticsにアクセスすると連携されているのを確認することができます。
おわりに
上記以外にも、ブログページのレイアウト変更など使いやすいブログを作るために必要な要素はたくさんあります。凝り始めたらキリがなさそうなので、ひとまずこのくらいで。
Azure Web Apps×Azure Active Direstoryでブログを作る
はじめに
社内への情報共有の手段が確立されていないと、
いくら外部の勉強会などで情報を得てきても、あまり活かせないのです…
要件
・指定した人しかアクセスできないようにする。
・誰でも参加がしやすいように一般的なブログの形式を選ぶ。
・いいねができる。
構成
Azure Web Apps(Freeプラン)(WordPress)
Azure Database for MySQL(Basicプラン)
Azure Active Directory
参考サイト様
Azure AD 認証を構成する | Microsoft Docs
GitHub - psignoret/aad-sso-wordpress: Single Sign-on with Azure Active Directory (for WordPress)
手順
以下、Azure Active Directoryで同じディレクトリの人だけがアクセスできるブログサイトの作成手順になります。
WordPressの新規作成
Azureで新規リソース作成をします。
「WordPress」で検索、作成します。
パラメータを設定します。
とりあえず一番安いものにします。
利用状況によってスケールアップしていきます。
ちなみに、この時点でのMySQLの見積もりはこのくらい。
リソースが作成されると、App ServiceからサイトURLに飛べます。
WordPressの初期設定をします。
ひとまず、WordPressが使える状態になりました。
Azure Active Directoryの設定
Azure Active Directory>[アプリの登録]を開きます。
[新規登録]をクリックし、新規アプリを追加します。
作成したら、[概要]にて各種IDが確認できるので、コピペして控えておきます。
この後の設定でよく使います。
各種設定をしていきます。
まず、[ブランド]で対象のサイトURLを登録します。
[認証]でリダイレクトURIとその他設定をします。
2種類のリダイレクトURIを登録します。
https://サイトURL/.auth/login/aad/callback
https://サイトURL/wp-login.php
[暗黙の付与]で[IDトークン]にチェックを入れます。
[既定のクライアントの種類]で[任意の組織ディレクトリ内のアカウント]にチェックを入れます。
[保存]します。
[証明書とシークレット]で新しいクライアントシークレットを発行します。
発行した直後しかキーを確認できないので、忘れずにコピーしましょう。
このキーはWordPress側の設定で使います。
[APIのアクセス許可]で[アクセス許可の追加]をします。
[Microsoft Graph]>[委任されたアクセス許可]>[Directory.Read.All]を選択します。
追加したら、[既定のディレクトリに管理者の同意を与えます]をクリックします。
[所有者]でサイトへのアクセスを許可するユーザーを追加します。
この所有者がアクセスできるユーザーの設定になるかと思ったのですが、そうではなさそうです。同じディレクトリのユーザーであればアクセスできるようになります。
AAD認証の設定
App Service側にAAD認証設定をします。
これを設定することで、サイトURLにアクセスすると認証画面がでてくるようになります。
App Serviceの[認証承認]を開きます。
[App Service認証]を[オン]にします。
[要求が認証されない場合に実行するアクション]を[Azure Active Direstoryでのログイン]にします。
認証プロパイダーの[Azure Active Direstory]をクリックします。
[詳細]にAADの概要で表示された各種IDを入力します。
クライアントID:アプリケーション(クライアント)ID
発行者のURL:http://login.microsoftonline.com/ディレクトリ(テナント)ID
許可されるトークン対象ユーザー:api://アプリケーション(クライアント)ID
設定ができたら、サイトURLにアクセスしてみます。
アクセス直後にMSのアカウント認証画面が出てきます。
WordPress側のAAD設定
WordPress側にもAADの設定を入れることで、記事の投稿のときに必要になるWordPress側のサインインにSingle Sign-Onが適用されて、ログイン情報入力の手間が省けます。
下記サイトよりプラグインをダウンロードします。
GitHub - psignoret/aad-sso-wordpress: Single Sign-on with Azure Active Directory (for WordPress)
管理者アカウントで作成したサイトにアクセスします。
[ダッシュボード]>[プラグイン]>[新規追加] >[プラグインのアップロード]にて上記でダウンロードしたzipファイルをアップロードします。
アップロードおよびインストールが完了したら、
プラグインを有効化します。
[設定]>[Azure AD]にてAADの設定を入れていきます。
入力する必要があるのは下記です。
クライアントID
クライアントシークレット
オブジェクトID
チェックボックスの項目は必要に応じて有効にします。
以上の設定が完了すると、サイトのサインインにシングルサインオンが適用されます。
おわりに
以上の手順で「指定した人しかアクセスできないようにする。」という要件を満たすための設定ができました。
他の要件を満たす、あったらいいなの機能をもう少し追加しているのですが、AzureではなくWordPressのお話なのでおまけ程度に別記事で書きます。
運用開始ができたら、コストについてもちゃんとまとめたいです。
※2020/02/01追記
Office365アカウントでの認証ができれば、一回のサインイン入力でさえも省けるようなのでもう少し試行錯誤してみる余地がでました。
Translator TextのWPFアプリ作成チュートリアルを触ってみた
QiitaのAzure AI Advent Calendar 2019 15日目の記事です。
動機
チーム内に外国籍の方が数名おり、日本語のみでのコミュニケーションに限界があるときがあります。
そこで、Cognitive ServicesのTranslator Textを使って少しでもコミュニケーションに役立つものが作れたらいいなと思い、まずはチュートリアルを触ってみました。
触ったもの
GitHubにもサンプルコードがあります。
GitHub - MicrosoftTranslator/Text-Translation-API-V3-C-Sharp-Tutorial
触ってみた
マルチサービスリソースにします。
リージョンは米国西部がおすすめらしいので米国西部です。
実行します。
【レポ】Power Platform Day Winter '19に参加してきました
Power Platform Day Winter '19 に参加したレポート記事になります。
概要
キーセッション含め、全22セッション+相談室が用意されたかなり豪華なイベントでした。
以下、主に感想や心に残った言葉などを書いていきます。
当日の会場の様子や私が参加した以外のセッションについて知りたい方はTogetterをご覧いただくのがいいかと思います。
Power Platform Day Winter '19 まとめ - Togetter
キーセッション
特別ゲストのBrian Dang先生によるお話。
吉田さんによる20分でのPower Platformすべてを使ったアプリを作るデモ。
手品のような素早さでアプリができていく様子は圧巻でした。
このスピード感が開発現場に導入されたらスーパーアジャイルどころではないですね。
1つ目のセッション
スピーカー:Tomomi Yoshidaさん、Yugo Shimizuさん
IT業界に転職して、初めてPower BIを触った時の経緯と成果物のお話でした。
吉田さんがPower BIを勉強するうえで参考にされたのが、Power BI王子こと清水さんのQiitaと下記のPDFだそうです。
http://niadqe.jp/wp/wp-content/uploads/2019/02/z004-1902-20190201_seminar_shiryo4.pdf
すでにPower BIを社内で使っている会場の人たちから出た普及方法例は下記でした。
例)トップダウンで使う。目につきやすいところにリンク張るなどして自然と慣れさせる。
効果的なプロモーションのひとつとしては、
ITに弱いと思っている(思われている)人にこそ実際に人前で触らせてみて成功体験をさせること。
Power BIについて聞かれることが多かったのですが、私自身はほぼ触ったことがなく…
吉田さんのお話を伺ってPower BIを触りたくなったので、手始めにブログのアナリティクスをPower BIでまとめてみようと思います。
2つ目のセッション
スピーカー:Taichi Nakamuraさん
→家庭利用向けにOffice365+αで家庭の諸々をサポートしている。
→MS Plannerで大掃除のタスク管理をすること。
誰がどこを掃除しているのかを一目でわかるようにしたい。
人がちょっとめんどくさいなと思う作業を効率化できるのがPowerPlatformが最も輝く場面なのではないかとのこと。
安否確認アプリ
位置情報も地図でわかりやすいようになってました。
筋トレ記録アプリ
感情蓄積アプリ
物理のボタンと連携したアプリ。
ネガティブな気持ちの時は物理ボタンを長押し。
ポジティブな気持ちの時はワンクリック。
緊急時はダブルクリック→通知が行く。
などで感情をデータ化して、Power BIで可視化してます。
アンガーマネジメントに導入したら良さそうだと思いました。
外食記録
外食の記録を位置情報と合わせて記録できるアプリ。
アプリの題材も日常に根付いた題材で、学習効率がすごくよさそうだと思いました。
なにより楽しんで作って利用されているのが伝わってきました。
後半はたいちさんとこだまさんによるPower Apps演奏会でした。
Power Appsで作った楽器アプリで演奏するというもの。
初めて生演奏を拝見しましたが、音がきれいで感動モノでした…!
https://www.youtube.com/watch?v=D95j5DJtC30
3つ目のセッション
スピーカー:Tomoyuki Obi さん
→JavaScript Object Notation。データの持ち方の種類。
→値の種類:数値、文字列、真偽値、配列、オブジェクト、null
{}で全体を囲むし、文字列なら””等。
私もまさにこれで、いつもコピペしているJSONについていつかちゃんと学ばねばと思っていたのでこのセッションはありがたかったです。
今後も今回のスライドを参考にします。
4つ目のセッション
スピーカー:Noriko Matsumotoさん
・Power AutomateはPower Platformのライセンスが必要
→人とサービスをつなぐもの
・Azure Logic AppsはAzureのライセンスが必要
→サービスとサービスをつなぐもの
それぞれ適材適所があるのでそこを理解して使い分けましょうとのこと。
Teams→Automate→Excel
上記構成で前回の欠点を改修!
・日付またぎがない。日付またぎはAutomateに向かないとのこと。
・AndroidのTeamsだと姓名の並びが逆になる。
・たまに打刻漏れと重複がある。
うちの勤怠システムもTeams×Automateでなんとかしようと錯誤中のところだったので参考にさせていただきます。
いつもブログ等でお世話になっている松本さんのセッションをMicrosoft Ignite The Tour Tokyoでは聞きそびれてしまったので今回参加できてよかったです。
5つ目のセッション
スピーカー:Teruchika Yamadaさん
社内でPower Platformを提案するにはどうするかというお話でした。
・数字
・事例
・流行
・完璧は目指さない。
困ってることの解決や効率化など、目的を達成することが大事。
社内利用の場合は特に本質を見失わない。
"システム"や"アプリ"は"利用する人""運用"まで含めて"システム"。
人の行動も含めて設計すると良い設計になる。
一つのアプリにすべての機能を盛り込もうとしない。
小さくて鋭いツールが良い。
なので東京でも企画したいと思います。
企画した際にはご参加いただけると嬉しいです。
感想
5つも濃いセッションが聞けてめちゃくちゃ充実した一日でした。
みなさんのPower Platformに対する熱意を直に感じて、私も創作意欲が沸いてきました。
運営の皆さんはこの日のために半年前からご準備されていたとのことで、確実にその結果が表れている素晴らしいイベントでした。ありがとうございました。
また半年後も楽しみにしてます。
今回の熱量を受けて、Jazug女子部でもAzure×Power Platformで何か企画したいと思いました。します。よろしくお願いします。