オンプレ系インフラエンジニアがAzureを勉強する

いつか誰かの何かの役に立つと嬉しいな

Translator TextのWPFアプリ作成チュートリアルを触ってみた

QiitaのAzure AI Advent Calendar 2019 15日目の記事です。

 

動機

チーム内に外国籍の方が数名おり、日本語のみでのコミュニケーションに限界があるときがあります。

そこで、Cognitive ServicesのTranslator Textを使って少しでもコミュニケーションに役立つものが作れたらいいなと思い、まずはチュートリアルを触ってみました。

 

触ったもの

docs.microsoft.com

 

GitHubにもサンプルコードがあります。

GitHub - MicrosoftTranslator/Text-Translation-API-V3-C-Sharp-Tutorial

 

触ってみた

下記サイトを参考にAzureポータルでCognitive Servicesリソースを作ります。
マルチサービスリソースにします。

リージョンは米国西部がおすすめらしいので米国西部です。
コードの変更箇所も減ります。

f:id:mitsunooon:20191214171912j:plain

 

リソースができたらキーを取得します。

f:id:mitsunooon:20191214171928j:plain

 

Githubからとってきたコードの[COGNITIVE_SERVICES_KEY]の部分に上記のキーを入れます。

f:id:mitsunooon:20191214172135j:plain


実行します。
できました!

f:id:mitsunooon:20191214173911j:plain

f:id:mitsunooon:20191214173928j:plain

つまづいたところ

最初、Azureで作るリソースを間違えました。
マルチサービスリソースではなく、Translator Textの単一サービスリソースにしていました。

f:id:mitsunooon:20191214172407j:plain

 
これで作るとJSONのデシリアライズでエラーが出ます。

f:id:mitsunooon:20191214172724j:plain

f:id:mitsunooon:20191214172430j:plain

 

おわり

Cognitive Servicesには翻訳系や音声系のサービスがいくつかあるので
うまく組み合わせて、言語の壁を越えてコミュニケーションが取りやすくなるといいなぁと思います。

【レポ】Power Platform Day Winter '19に参加してきました

Power Platform Day Winter '19 に参加したレポート記事になります。

 

概要

Microsoft のPower Platform(Power BI/Power Apps/Power Automate/Power Virtual Agents)のコミュニティ主催のイベントです。
キーセッション含め、全22セッション+相談室が用意されたかなり豪華なイベントでした。
ハッシュタグ:#JPPUG #PowerPlatform #MSIgniteTheTour #MSIgnite #JPPUGWinter19

power-platform.connpass.com

 

以下、主に感想や心に残った言葉などを書いていきます。
当日の会場の様子や私が参加した以外のセッションについて知りたい方はTogetterをご覧いただくのがいいかと思います。

Power Platform Day Winter '19 まとめ - Togetter

 

キーセッション

特別ゲストのBrian Dang先生によるお話。
吉田さんによる20分でのPower Platformすべてを使ったアプリを作るデモ。
手品のような素早さでアプリができていく様子は圧巻でした。
このスピード感が開発現場に導入されたらスーパーアジャイルどころではないですね。

 

1つ目のセッション

テーマ:「非ITの初心者が王子のレポート集を見て、1か月で綺麗なレポートが作れるようになったお話」
スピーカー:Tomomi Yoshidaさん、Yugo Shimizuさん
 
元々は管理栄養士さんだった吉田さんが
IT業界に転職して、初めてPower BIを触った時の経緯と成果物のお話でした。
見せていただいたPower BIでまとめた成果物は、そのデータの用途や背景を知らない我々が見てもわかりやすいという印象を持つくらいきれいなものでした。

吉田さんがPower BIを勉強するうえで参考にされたのが、Power BI王子こと清水さんのQiitaと下記のPDFだそうです。

Power BI 王子のレポート集 - Qiita

http://niadqe.jp/wp/wp-content/uploads/2019/02/z004-1902-20190201_seminar_shiryo4.pdf

 

吉田さんの今後の課題は社内にもっとPower BIを普及させること。
すでにPower BIを社内で使っている会場の人たちから出た普及方法例は下記でした。
例)トップダウンで使う。目につきやすいところにリンク張るなどして自然と慣れさせる。
 
清水さん曰く、新しいものを「説明する→知る→習慣化する」の流れには時間が必要。
効果的なプロモーションのひとつとしては、
ITに弱いと思っている(思われている)人にこそ実際に人前で触らせてみて成功体験をさせること。
 
私は社内でPower Platformの話をすると、
Power BIについて聞かれることが多かったのですが、私自身はほぼ触ったことがなく…
吉田さんのお話を伺ってPower BIを触りたくなったので、手始めにブログのアナリティクスをPower BIでまとめてみようと思います。
 

2つ目のセッション

テーマ:「やっぱり TAICHI は Home 365」
スピーカー:Taichi Nakamuraさん
 
前日のMicrosoft Ignite The Tour Tokyoでセッションを拝見して、わかりやすいかつおもしろいセッションだったので今回も参加しました。
 
Home365とは?
→家庭利用向けにOffice365+αで家庭の諸々をサポートしている。
 
Home365の原点
→MS Plannerで大掃除のタスク管理をすること。
誰がどこを掃除しているのかを一目でわかるようにしたい。
人がちょっとめんどくさいなと思う作業を効率化できるのがPowerPlatformが最も輝く場面なのではないかとのこと。
 
アプリ例①
カップラーメン専用アプリ。
なんのカップ麺を食べたかのデータ収集やタイマー機能等がついていました。
 
アプリ例②
安否確認アプリ
位置情報も地図でわかりやすいようになってました。
 
アプリ例③
筋トレ記録アプリ
筋トレのデモ付き!IgniteTourの時より腹筋カウントのセンサーは調子がよさそうでした。
 
アプリ例④
感情蓄積アプリ
物理のボタンと連携したアプリ。
ネガティブな気持ちの時は物理ボタンを長押し。
ポジティブな気持ちの時はワンクリック。
緊急時はダブルクリック→通知が行く。
などで感情をデータ化して、Power BIで可視化してます。
アンガーマネジメントに導入したら良さそうだと思いました。
 
アプリ例⑤
外食記録
外食の記録を位置情報と合わせて記録できるアプリ。
 
たいちさんの作るアプリはUIがシンプルでわかりやすい上に色使いのバランスが良くておしゃれです。お子さんでも使いやすそうなデザインです。
アプリの題材も日常に根付いた題材で、学習効率がすごくよさそうだと思いました。
なにより楽しんで作って利用されているのが伝わってきました。

後半はたいちさんとこだまさんによるPower Apps演奏会でした。
Power Appsで作った楽器アプリで演奏するというもの。
初めて生演奏を拝見しましたが、音がきれいで感動モノでした…!
YoutubeにもPower Apps演奏会の動画があるのでぜひご覧ください。

https://www.youtube.com/watch?v=D95j5DJtC30

 

3つ目のセッション

テーマ:JSON 値との付き合い方」
スピーカー:Tomoyuki Obi さん
資料:JSON Value into Power Automate

 

JSONに特化したお話でした。

 

JSONってなに?
JavaScript Object Notation。データの持ち方の種類。
 
JSONの書き方
→値の種類:数値、文字列、真偽値、配列、オブジェクト、null
{}で全体を囲むし、文字列なら””等。
 
Power Automate上のJSONにできること
スキーマによるデータの検証。値の取得。値のコピー。
値の変更はできない。
 
他にもいろいろ情報があるのですが、まだよくわかっていない私のメモ程度の要約を書くよりスライドを見ていただいたほうが確実なので割愛です。
 
JSON書けばいいよね簡単だよね」「簡単じゃない!」の流れは海外でもよくあることらしいです。
私もまさにこれで、いつもコピペしているJSONについていつかちゃんと学ばねばと思っていたのでこのセッションはありがたかったです。
今後も今回のスライドを参考にします。
 

 4つ目のセッション

テーマ:「タイムカード打刻チャットボット「ごえもん」誕生話」
スピーカー:Noriko Matsumotoさん
 
実際に自社に導入してるタイムカード打刻チャットボットのお話でした。
 
Power Automateの基礎から
・Power AutomateはPower Platformのライセンスが必要
→人とサービスをつなぐもの
・Azure Logic AppsはAzureのライセンスが必要
→サービスとサービスをつなぐもの
それぞれ適材適所があるのでそこを理解して使い分けましょうとのこと。
 
勤怠システムの要件:打刻は簡単にする。改修を手軽にする。
 
最初に使用していた勤怠システム
Slack→Functions→kintone→Excel
⇒欠点:エンジニアしか修正触れない。Excelの形式が違う。
 
「ごえもん」
Teams→Automate→Excel
上記構成で前回の欠点を改修!
 
今後の課題
・日付またぎがない。日付またぎはAutomateに向かないとのこと。
AndroidのTeamsだと姓名の並びが逆になる。
・たまに打刻漏れと重複がある。
 
打刻忘れ防止に、ある場所に入るとTeamsに投げるというような設定をLogic appsで作られているそう。勤怠管理に抜かりがないですね。
 
「誰でもできる」はなにもせずにできることではない。
最初の学習コストは大切。最初の学習コストさえちゃんと押さえておけばそのあとはどんどん進められる。

うちの勤怠システムもTeams×Automateでなんとかしようと錯誤中のところだったので参考にさせていただきます。
いつもブログ等でお世話になっている松本さんのセッションをMicrosoft Ignite The Tour Tokyoでは聞きそびれてしまったので今回参加できてよかったです。
 

5つ目のセッション

テーマ:「IT企業のジャーマネ視点からPower Apps 導入など」
スピーカー:Teruchika Yamadaさん
 
Power Platform初心者から一歩先に行くには、
社内でPower Platformを提案するにはどうするかというお話でした。
 
導入提案時のポイント
・数字
・事例
・流行
上記を抑えると誰にとってもわかりやすく伝わりやすくなる。
 
実運用するためのアプリを作る場合のポイント
・完璧は目指さない。
 困ってることの解決や効率化など、目的を達成することが大事。
 社内利用の場合は特に本質を見失わない。
・利用者の動きを理解した仕組みにする
 "システム"や"アプリ"は"利用する人""運用"まで含めて"システム"。
 人の行動も含めて設計すると良い設計になる。
・役割でアプリを分割する
 一つのアプリにすべての機能を盛り込もうとしない。
 小さくて鋭いツールが良い。
 
山田さんは名古屋でコミュニティ活動で、途中まで作ったけどつまづいて先に進めないアプリを発表してみんなで解決する会をしているらしく、めちゃくちゃ行きたいと思いました!
なので東京でも企画したいと思います。
企画した際にはご参加いただけると嬉しいです。
 

感想

 5つも濃いセッションが聞けてめちゃくちゃ充実した一日でした。
みなさんのPower Platformに対する熱意を直に感じて、私も創作意欲が沸いてきました。
運営の皆さんはこの日のために半年前からご準備されていたとのことで、確実にその結果が表れている素晴らしいイベントでした。ありがとうございました。
また半年後も楽しみにしてます。
今回の熱量を受けて、Jazug女子部でもAzure×Power Platformで何か企画したいと思いました。します。よろしくお願いします。

 

【レポ】Microsoft Ignite The Tour Tokyo Day2に参加してきました

Microsoft Ignite The Tour Tokyo Day2に参加したレポート記事になります。

 

概要

2019年12月5,6日でMicrosoft Ignite The Tour Tokyoというテクニカルカンファレンスが開催されました。
今回はIgniteの最新情報というよりも入門編が多めの印象でした。

www.microsoft.com

 

目的

コンテナについての情報を得る。
 
今回の参加にあたり、魅力的なセッションが多すぎたため目的を定めました。
現在業務でAzure Container Instancesを利用しています。
その利用方法を見直す必要が生じたため、コンテナについての情報を収集し社内に展開するというのが私の今回の目標のひとつでした。
ということで、参加セッションはコンテナ周りが中心となっています。
 

 参加セッション

1つ目のセッション

「Azure でのコンテナーとオーケストレーションを調べる」
 
ACIやAKSについての概要説明とデモのセッションでした。
 
コンテナについて
 アプリ開発者がコードに専念するためのもの。
 隔離された環境で同じように使うことができる。→生産性の向上につながる。
 特徴として動作が軽い。
 
デモ①
 Dockerfileのデプロイ。
 細かいコマンドとオプションの説明もありました。
 
Azure Container Instancesについて
 シングルコマンドでコンテナ実行ができるお手軽さ。
 一秒単位での課金となり、実行中のみ換算される。
 仮想マシンの管理はAzureがする。
 
どういうとき使うのか?
 バッチ的な処理が向いている。
 LogicAppsを使うようなアプリに向いている。
 AKSの追加リソースとして使える。
 
Azure Container Repositoryについて
 プライベートなレジストリ
 全てのタイプのコンテナイメージの管理ができる。
 地理冗長もできる。
 
デモ②
 ACRの作成。
 Web App for Containersについて
 コンテナ化されたアプリの実行が簡単。
 
Azure Kubernetes Serviceについて
 デモがよかったです。
 実際に動いているAPIとかが確認できました。
 
全体的に入門という感じで分かりやすかったです。
見よう見まねでやっていたことが間違いでなかったことが確認できて安心しました。
ただし、ACIを常時利用の構成にしていたのでこれは見直さなければいけないとわかりました!

 

2つ目のセッション

「Azure Kubernetes Service を活用したマイクロサービス開発」
前日にJazugでもお世話になった原さんのセッションでした。
AKSについて、基礎的なお話から活用方法までのお話でした。
 
AKSを利用するにあたって、本当に必要な現場なのかを考えることが重要とのこと。
本当に今の構成にAKSは必要なのか?
頻繁にアップデートされるサービスか?
どんどん更新を追加していくものか?
⇒上記がYesならばAKS向きだそう。
 
コンテナは揮発性であり、中身は永続化されない。
永続化したいデータは別DBにちゃんと保管しておいて、クラスタ自体はすぐに捨てられるようにしておく。
k8sは流行っていてよく聞くワードではあるが、
難しいのも事実なので、最初はシンプルな構成から挑戦するのがいい。
 
上記以外にも、用語の説明や構成の説明、デモ等が盛りだくさんかつ分かりやすいセッションでした。
資料が公開されると嬉しいです。

会場にはスピーカーQ&Aというブースが設けてあり、
セッションを終えたスピーカーの方々と直接お話ができました。
今の業務の構成について、原さんに直接ご相談させていただき、解決策をご指南いただきました。
今回の参加で最も有益な機会でした。

 

3つ目セッション

「【アイデア次第!】 Microsoft Teams +α をノーコード・ローコードでカンタンに一層便利に利活用!」
Power Platform界隈でお世話になっている太一さんのセッションでした。
TeamsとPower Platformで業務を効率化するお話でした。
 
Teamsについて
 ただのビジネスチャットじゃない。
 ハブとして使ったときに真価が発揮される。
 Teamsだけでも業務が完結するくらいになってきている。
 このTeamsと相性がいいのがPowerPlatform!
 例)
  データ入力:Power Apps
  繋げる:Power Automate
  可視化:Power BI
  bot:Power Virtual Automate

Teams×Power Platformでの業務効率化の一例として
訪問販売のシミュレーションのお話をされていました。
効果を数字で表されると本当に圧倒的でした。
 
弊社でもTeamsはどんどん活用されているので
Power Platformと組み合わせてさらに効果的に使えたらいいなと思いました。
すべてはアイデア次第…

 

4つ目のセッション

失敗させない! Microsoft Teams 利活用促進への道!」
こちらも太一さんのセッションです。
本当は別のセッションを聞きに行く予定だったのですが、
前のセッションがあまりに面白かったので連続で参加することにしました。
 
Teamsを利活用するために必要なのは何か?
 ・Teamsへの愛
 ・ユーザー仲間への愛
 ・会社への愛
 愛のある人が使い倒して、説得することで響くものがある。
 
Teamsの導入とは?
 ・今までの働き方や考え方を変える必要がある。
 (メールの置き換えやコミュニケーションツールの追加ではない
 ・会社を変えるレベルの話
 ・経営層、力のある人を巻き込む必要がある
 ・好きな会社だから変えようという本気の人たちじゃないと成し遂げられない
 
Teamsの活性化に効果的な方法のひとつとしてチャンピオンプログラム(アンバサダー制度)があげられる。
個人のやる気を会社がどれだけ活かしてあげられるかが肝である。

全体的にマーケティング寄りのお話でした。
何かに愛を持って活動されている人は輝いているなと常々思っていたので
愛を持って行動することの重要性を再認識しました。
私もそれくらい愛を持てるものが早く見つかるといいなぁ

 

感想

今回は知りたいことの目標を定めてセッション選びをしたのでかなり満足度の高い参加ができました。
ちゃんと社内に情報共有します。
セッションそのものも有益ですが、スピーカーQ&Aやエキスパートブースがかなり重要だったと思います。
普段ならばなかなか聞くことができない技術的な悩みをその道のエキスパートさんたちに直接伺えるというのは最高に贅沢でした。
大阪にもあるかと思いますので、参加される方は是非ご活用ください。

Power Virtual Agentsでチャットボットを作ってみる

はじめに

以前、世界一簡単なチャットボットの作り方という記事を書きました。
 
しかし、Microsoft Ignite 2019でPower Virtual Agentsというチャットボットに特化したPower Platformが発表されてしまいました。
そのため、世界一の称号は明け渡さなければいけないかもしれません。
 
ということで
どれくらい簡単にチャットボットが作れてしまうのか見てみたいと思います。
 
 

目標

  • 簡単な性格診断botを作る。
  • Teamsでも使えるようにする。

 

 用意するもの

  • Office365アカウント
  • Webブラウザ(本記事はChromeのシークレットウィンドウを使っています)

  

診断出典元

性格診断をするにあたり、下記サイト様のコンテンツを拝借いたしました。

ご協力いただき、ありがとうございます。

性格診断セブン | 無料の面白性格診断


作成

下記からPower Virtual Agentsにログインします。

右上のロボットマーク>[+New bot]をクリックします。

f:id:mitsunooon:20191129183958j:plain

 

botの名前を入力します。

f:id:mitsunooon:20191129184028j:plain

 
botが作られるまで、ロボットのloading画面が表示されます。
これがかわいくて、loadが全然苦じゃないです。

f:id:mitsunooon:20191129184049j:plain

 

botの用意ができると、この画面が出ます。

f:id:mitsunooon:20191129184113j:plain

 
メインの会話の部分を設定します。
左メニュー>[Topics]>[+New topic]をクリックします。
デフォルトですでにいくつか登録されています。

f:id:mitsunooon:20191129184139j:plain

 
トリガーの設定をします。
今回は簡単な性格診断botにしますのでそれらしいトリガーを登録します。
設定ができたら、[Go to authoring canvas]をクリックします。

f:id:mitsunooon:20191129184203j:plain

 

Netronのような画面が表示されます。
ここで質問と回答を設定していきます。

f:id:mitsunooon:20191129184238j:plain

 

質問に対する選択肢も設定できます。

f:id:mitsunooon:20191130120544j:plain

 
各回答ごとに分岐できますので、
それぞれの回答ごとの診断結果を設定します。

f:id:mitsunooon:20191130114808j:plain

f:id:mitsunooon:20191130114857j:plain

f:id:mitsunooon:20191130114929j:plain

 
同じ回答を使用する場合は、線を引っ張るだけで結合できます。

f:id:mitsunooon:20191130115002j:plain


縮小拡大も自在にできますので、入り組んできたら縮小して全体図を確認することもできます。

f:id:mitsunooon:20191130115050j:plain


 一通りできましたら、右上で[Save]します。
左下の[Test your bot]から動作テストができます。

f:id:mitsunooon:20191130115113j:plain

 
作ったチャットボットを公開することもできます。

左メニュー>[Manage]>[Channels]>[Demo website]をクリックします。

f:id:mitsunooon:20191203175038j:plain

 

ウェルカムメッセージとトリガーの候補を設定します。

[Save]をクリックします。

(この工程は必須ではないですが、せっかくなので。

f:id:mitsunooon:20191203175158j:plain

 

左メニュー>[Publish]>[Publish]をクリックします。

f:id:mitsunooon:20191129184712j:plain

 

その下の[demo website]をクリックすると、デモ画面が出てきます。
背景が超絶かわいいですね。

f:id:mitsunooon:20191203175309j:plain

 

Teams連携

以前の記事の対比になるように今回もTeamsでも使えるようにします。
左メニュー>[Manage]>[Channels]>[Teams]をクリックします。

f:id:mitsunooon:20191129184850j:plain

 

[Add]をクリックします。

f:id:mitsunooon:20191129185001j:plain

 

AppIDが発行されます。

f:id:mitsunooon:20191129185043j:plain

 

AppIDを使ってTeamsで検索すると出てきます。

f:id:mitsunooon:20191129185101j:plain

 

同じように選択肢も出てきて使えますね。
やったー

f:id:mitsunooon:20191130115243j:plain

f:id:mitsunooon:20191130115309j:plain

 

性格診断botデモ版

今回作った性格診断botは下記にて公開しています。

Power Virtual Agents

 

感想

直感的に触っても全然問題ないくらい簡単に作れました!楽しい!
Analyticsもあるので、どのトピックがどれくらい使われたのかも確認できるのは嬉しいですね。

今回いそいで作ったので本当に最低限しか設定できてません。
Demo画面やTeamsにつないだ時のアイコンとかも凝りたいところ…。
題材も簡単な診断にしたので分岐も少なくて済んでますが、もっと質問数が増えたりすると、クリックで作れるとはいえ、途方もない作業になるので診断系はやり方を考えないといけなさそうです。
QnAMakerやLUISとの比較はまた今度改めてやろうと思います。
次はCognitive Servicesと連携させられるといいなー!
 

参考サイト様

 

【レポ】Global Microsoft 365 Developer Bootcamp 2019 Tokyo に参加してきました

Global Microsoft 365 Developer Bootcamp 2019 Tokyo に参加したレポート記事になります。

 

概要

Microsoft 365/Office 365の開発手法を学びたい人向けのハンズオンセッションです。
午前と午後でそれぞれひとつずつハンズオンを選択できます。
ハッシュタグ:#OfficeDev
 
以下、主に感想を書いていきますが、
内容や雰囲気を知りたい方はTogetterをご覧いただくのがいいかと思います。
 

午前の部

私が参加した午前のハンズオンは下記です。
今回はMicrosoft Graphについて学ぶために参加したようなものでした。

テーマ: Microsoft Graph
担当: 中村 亮太さん / 株式会社ソントレーゾ 取締役 CTO
担当: 杉本 和也さん(Microsoft MVP - Business Applications) / CData Software Japan 株式会社
資料:

Global Microsoft 365 Developer Bootcamp 2019 Tokyo:Microsoft Graph API · GitHub


座学

今日の目的
APIとは何かを学ぶ
Microsoft Graph APIのアプリを作る
・明日以降の業務に活かす!

 

APIとは何か?
・明示的にhttpメソッドを使用する:HTTP・URIなどによるネットワーク仕様に準拠したものが、RESTと呼ばれているAPI全般を指している。(GET,POST,DELETE,PUT,PATCH
・ステートレスであること:サーバー側でユーザーのセッション状態を保持しない。
なぜなら死ぬほど要求が来るので保持してたらサーバーが持たないから!
ある程度オペレーターが状態を管理しておかないといけない。
ディレクトリ構造に似たURIを公開すること:何をしているか一目瞭然なURIにすること。
XMLまたはJSONまたは両方を返すこと

APIを使えばWebで簡単にデータが取れる!
→その分セキュリティは大丈夫なの???
→大丈夫!認証と認可の体制。期限付きのアクセストークンで使用することでセキュリティを担保している!

Microsoft Graphで何ができるの?
→ユーザー作成をチャットボットで自動作成したり、メールの通知をしたり。

Microsoft Graphを使う流れ(全体)
アプリケーション登録(一度だけ必要)
トークン発行(都度必要)
→各種GraphAPI発行(都度必要)

Microsoft Graphを使う流れ(個々詳細)
アプリケーション登録:AzureADにアプリを登録
トークンの発行のための準備:アプリケーションIDとアクセスキーの取得。
権限付与:「委任されたアクセス許可」と「アプリケーションの許可」は違う権限なので目的によって使い分ける必要がある。
トークンの発行:有効期限で切れるので都度都度発行する
APIの発行:
URIは階層構造になっている。
1次階層/1次階層のパラメータ/2次階層/2次階層のパラメータ/3次階層
1次階層は操作先の指定。usersとか。次の階層でさらに細かいパラメータに絞り込む。
2次階層は操作機能の指定。1次階層によって変化する部分。


ハンズオン

手順がとってもわかりやすいのでぜひ資料をご参照ください!
 
その1
Microsoft Graph エクスローラーを触ってみる」
Webブラウザからどんなものかを見てみました。
あわせてPOSTMANもおすすめだそうです。

Postman | The Collaboration Platform for API Development

 
その2
会議室予約表示アプリを作る」
Power AutomateやPower Appsと組み合わせたアプリです。
既存の会議室予約表示アプリを使うとn万円とコストがかかりますが、
今回のハンズオンで作れてしまえば、大幅コスト削減です!
 
私はOffice365開発者サイトでのリソース作成がうまくできず挫折しました…
手順の後半でPower Automateが出てきてて、大変気になるのでリベンジします…!
 

ランチタイムLT

お昼はMS本社様からSUBWAYの差し入れをいただきました!
おいしいサンドウィッチをいただきながらLTを楽しめるという贅沢仕様でした笑

LT1人目

斎藤さん
「AccessRuntimeの今を探る」
OfficeDeveloper→Office365の変化について等

LT2人目

中山さん
「Microsoft365で使えるソフトウェア開発について」
Officeアドインというマイナーすぎる存在を広めるためのお話。
わずかな時間でもデモ付きというボリューム感。

 LT3人目

目代さん
「人生は学びの連続である」
学習リソースについての話で
Microsoft Learn | Microsoft Docsがいかに便利かというお話。

 

午後の部

私が参加した午後のハンズオンは下記です。
午前中に学んだMicrosoft Graphの知識が活きました!

テーマ: Adaptive Cards
担当: 篠原 敬志さん(Microsoft MVP - Office Development) / アバナード株式会社
担当: 高尾 哲朗さん(Microsoft MVP - Developer Technologies)
資料:

GitHub - karamem0/m365devbootcamp2019: Global Microsoft 365 Developer Bootcamp 2019 Japan の Adaptive Cards ハンズオンの資料です。

 

座学

Adaptive Cardsとは?
→カード形式のコンテンツが送れる新しい方法。
・美しいエクスペリエンス(JSON形式)
・オープンフレームワーク
マルチプラットフォーム
・ネイティブパフォーマンス
 
利用できるサービスも多様:BotFramework、Cortana、OutlookActionableMessage、WindowsTimeline、MS Teams

基本的なスキーマは2つ:body、actions
 
コントロールの種類がいくつかある:コンテナ、要素、入力
 

ハンズオン

こちらのハンズオンも本当に資料がわかりやすかったのでぜひご参照ください。
 
その1
「Adaptive Cards Designerを触ってみる」
Webブラウザで簡単に触れました。
 
その2
「Power AutomateからTeamsに投稿する」
Automateを実行するとTeamsにAdaptive Cardsが送信されるものです。
ちゃんと動くのをみると感動しますね笑
 
その3
「GraphからOutlookに送信する」
今度は表示先がOutlookになります。
事前に用意いただいたコードで動かします。
このコードがきれいで見やすかったです。
 
その4
「アンケート収集システムを作ってみる」
Outlookに送られたアンケートに回答すると、結果がExcelに自動で記載されるというものです。
Power Automate→Outlook→Azure Functions→Excel
私はOffice365開発者アカウントとAzureサブスクリプションのアカウントが分かれていたので不安だったのですが、それでも問題なく動いたので良かったです。達成感!

 
全体の感想

朝の10:00から開始で雨で寒い中でも、運営の方も参加者の方もたくさんいらしててみんなすごいえらいと思いました。
ノベルティにはステッカー、Tシャツ、おしゃれなウォーターボトルがありました。
午前も午後もハンズオンの資料がすごくわかりやすくて、一体どれだけご準備されたのか…計り知れないです。今後の勉強に使わせていただきます。
午前と午後で自分で選んでハンズオンが受けられたのが良かったです。私はMicrosoft Graphが目的だったので、どちらでも触れられて大満足でした。
ハンズオンの成功を左右したのは下準備だと思いました。事前に必要な環境が告知されていましたので、それをもっとちゃんと用意しておけば午前のハンズオンもうまくできたのかなぁと…
全体を通して、充実感のある素敵な一日でした!
運営の皆様ありがとうございました。来年も参加したいです!
 

 

Azure FunctionsのDialogflow v2 API対応

はじめに

Google Homeで遊ぶときに利用しているDialogflowのv1 APIが2020年3月に完全シャットダウンしてしまいます。
(元々は2019年10月まででしたが延長されてました。

Release Notes  |  Dialogflow Documentation  |  Google Cloud

 
以前の記事で
Dialogflow+Azure Functionsで
Google Homeの設定をしていたので
こちらのv2対応版を書いていきます。

流れ

  • Azure Functionsの設定

  • Dialogflowの設定
 


Azure Functionsの設定

ちょっと変える程度かと思いきや、がらりと変わりました。
v1の時より汎用性のあるすっきりしたコードにできたので個人的には満足度が高いです。
コード自体はGitHubに記載してます。
 

Dialogflowの設定

設定から[API VERSION]の[V2 API]を有効にします。
[SAVE]します。

f:id:mitsunooon:20191120151855j:plain

f:id:mitsunooon:20191120151913j:plain

FulfillmentのURLを新しいものに書き換えます。

f:id:mitsunooon:20191120151933j:plain

以上で設定は終わりです。
 

動作確認

ちゃんと動きました。やったー。
 

f:id:mitsunooon:20191120155324j:plain

 

つまづいたところ

・WindowsAzure.Storageのバージョン

パッケージのバージョンをすべて最新安定版にしていたら以下のエラーが出てきました。

f:id:mitsunooon:20191120152148j:plain

Microsoft.Azure.WebJobs.Extensions.Storage:Can't bind Table to type 'Microsoft.WindowsAzure.Storage.Table.CloudTable'
 
調べたところ、WindowsAzure.Storageのバージョンが影響しているとのことでした。
9.3.3から9.3.1にダウングレードしたところ無事に動きました。

f:id:mitsunooon:20191120152207j:plain

 

・Table Storageの型

今回の例ではすべてstring型なので影響はないですが、
会社の備品管理を同様の構成でしようとしたところ、備品番号がFunctionsで認識できなくてハマりました。
原因としては、備品番号がTable Storage上ではint型で登録されているのに、Functions上ではstring型にしていたというだけの話でした。
Table Storageのほうを変更しました。
 
 

参考サイト様

 

QnAMaker×PowerAppsで作るチャットボット

過去記事でQnAMakerを使った世界一簡単なチャットボットの作り方を書きました。
その時はTeamsのチャットボットでしたが、今回はPowerAppsを使って独立したアプリの形にします。

 

参考サイト様

PowerAppsとCognitive Serviceでチャットボットを作ろう - 吉田の備忘録

QnAMaker × Azure Bot Service でノンコーディング AI Chatbot 作成 (2019年4月版) - Qiita

 

必要なもの

・Azureアカウント(QnA Maker用)
・PowerAppsが使えるMSアカウント

 

構成イメージ

f:id:mitsunooon:20191015222314j:plain

 

QnAMakerの設定

こちらの過去記事を参照ください。

世界一簡単なFAQチャットボットの作り方 - オンプレ系インフラエンジニアがAzureを勉強する

 

PowerAppsの設定

カスタムコネクタの設定

PowerAppsにサインインします。

カスタム ビジネス アプリケーションの構築 | Microsoft PowerApps

 

[データ]>[カスタムコネクタ]>[+カスタムコネクタの新規作成]をクリックします。

[OpenAPIファイルをインポートします]をクリックします。

f:id:mitsunooon:20191015222716j:plain

 

コネクタ名とインポートするOpenAPIファイルを設定します。

f:id:mitsunooon:20191015222830j:plain

 

OpenAPIファイルはQnAMakerのPublish情報をもとに下記の内容のJSONファイルを用意します。

 "host"と"paths"の部分をQnAMakerのPublish情報のものに書き換えます。

f:id:mitsunooon:20191015223057j:plain

 

{
  "info": {
    "version": "1.0.0",
    "title": "PowerApps",
    "description": "PowerApps"
  },
  "host": "chatbot1015.azurewebsites.net
",
  "basePath": "/",
  "schemes": [
    "https"
  ],
  "consumes": ,
  "produces": [
    "application/json"
  ],
  "paths": {
    "QnAMakerのPOST情報
": {
      "post": {
        "summary": "QnAMaker",
        "description": "QnAMaker",
        "operationId": "QnAMaker",
        "parameters": [
          {
            "name": "Content-Type",
            "in": "header",
            "required": false,
            "type": "string",
            "default": "application/json",
            "description": "Content-Type",
            "x-ms-summary": "Content-Type"
          },
          {
            "name": "body",
            "in": "body",
            "schema": {
              "type": "object",
              "properties": {
                "question": {
                  "type": "string",
                  "description": "question",
                  "x-ms-summary": "question"
                }
              },
              "default": {
                "question": "hi"
              }
            },
            "required": true
          }
        ],
        "responses": {
          "default": {
            "description": "default",
            "schema": {
              "type": "object",
              "properties": {
                "answers": {
                  "type": "array",
                  "items": {
                    "type": "object",
                    "properties": {
                      "answer": {
                        "type": "string",
                        "description": "answer",
                        "x-ms-summary": "answer"
                      },
                      "questions": {
                        "type": "array",
                        "items": {
                          "type": "string"
                        },
                        "description": "questions",
                        "x-ms-summary": "questions"
                      },
                      "score": {
                        "type": "integer",
                        "format": "int32",
                        "description": "score",
                        "x-ms-summary": "score"
                      }
                    }
                  },
                  "description": "answers",
                  "x-ms-summary": "answers"
                }
              }
            }
          }
        }
      }
    }
  },
  "definitions": {},
  "parameters": {},
  "responses": {},
  "securityDefinitions": {
    "api_key": {
      "type": "apiKey",
      "in": "header",
      "name": "Authorization"
    }
  },
  "security":
,
  "tags": []
}
 

 

[1.全般][2.セキュリティ][3.定義]の各項目は特に設定はせずに進めます。

f:id:mitsunooon:20191015223302j:plain

f:id:mitsunooon:20191015223314j:plain

f:id:mitsunooon:20191015223328j:plain

 

[4.テスト]まで来たら、[コネクタの作成]をクリックします。

f:id:mitsunooon:20191015223401j:plain

 

[接続]の項目が出てきます。

f:id:mitsunooon:20191015223445j:plain

 

[+新しい接続]をクリックし、APIキーを入力します。
このAPIキーはQnAMakerのPublish情報の「Authorization」の項目の値を入れます。
EndpointKeyから入れます。

f:id:mitsunooon:20191015223511j:plain

 

[作成]をクリックすると画面が戻ってしまいますので、
また[データ]>[カスタムコネクタ]をクリックします。
先ほど作ったカスタムコネクタをクリックします。

f:id:mitsunooon:20191015223601j:plain

f:id:mitsunooon:20191015223612j:plain

 

[4.テスト]で質問を入力してテストします。

200が返ってくれば問題なく動いてます。
これでカスタムコネクタの作成が完了です。

f:id:mitsunooon:20191015223644j:plain

 

画面の設定

 次に画面の部分を作ります。
PowerAppsで[アプリ]>[+アプリの作成]をクリックします。

f:id:mitsunooon:20191015223824j:plain

 

[キャンバスアプリを一から作成]をクリックします。

f:id:mitsunooon:20191015223853j:plain

 

アプリ名を設定し、
今回はスマフォアプリにする予定なので[電話]を選択します。

f:id:mitsunooon:20191015223915j:plain

 

編集画面が表示されます。

まず最初にアプリを開いたときに表示される文言を設定します。
[Fill]の部分をプルダウンで[OnVisible]にします。
右側の欄の関数を下記にします。
ClearCollect(chat,{name:"答える君",text:"ようこそ。何でも聞いてください"})

f:id:mitsunooon:20191015223955j:plain

 

チャットボットの表示部分を追加します。
[ギャラリー]>[高さ(伸縮可能)]をクリックします。

f:id:mitsunooon:20191015224230j:plain

 

[データソースの選択]>[コネクタ]で先ほど作ったカスタムコネクタをクリックします。

f:id:mitsunooon:20191015224259j:plain

f:id:mitsunooon:20191015224315j:plain

f:id:mitsunooon:20191015224328j:plain

 

文章の長さによって枠の高さを自動調整してほしいのでレイアウトを変更します。
[Gallery]>[レイアウト]>[ニュースフィード]を選択します。

f:id:mitsunooon:20191015224345j:plain

 

[Item]の部分を「chat」に変更します。

f:id:mitsunooon:20191015224437j:plain

 

[Title]の関数を「ThisItem.name」にします。

f:id:mitsunooon:20191015224504j:plain

 

[Body]の関数を「ThisItem.text」にします。

f:id:mitsunooon:20191015224528j:plain

 

チャットボットのアイコンになる画像を設定します。
[ファイル]>[メディア]>[参照]からアイコンにする画像を選択します。

f:id:mitsunooon:20191015224548j:plain

 
編集画面に戻ります。
[Image]の関数を下記にします。
If(name="答える君",'アップした画像の名前',User().Image)
 
アイコンの位置も変わるように設定します。
[X]の関数を下記にします。
If(name="答える君",16,570)

f:id:mitsunooon:20191015224615j:plain

 
会話の入力部分を作ります。
[挿入]>[テキスト]>[テキスト入力]をクリックします。

f:id:mitsunooon:20191015224727j:plain

 
[ボタン]をクリックします。
[Text]部分を「送信」にします。

f:id:mitsunooon:20191015224751j:plain

 
ボタンの[OnSelect]を下記の関数にします。
Collect(chat,{name:"あなた",text:TextInput1.Text});
Collect(chat,{name:"答える君",text:First(PowerApps.QnAMaker({question:TextInput1.Text}).answers).answer});
Reset(TextInput1)

f:id:mitsunooon:20191015224818j:plain

 
これで大体の設定ができました。
右上の再生ボタンで試してみます。

f:id:mitsunooon:20191015224904j:plain

それっぽく動きました!
ちゃんと文章に合わせて高さも変わりますね。

これに追加でラベルやボタンの色などを変えて見た目を整えます。

f:id:mitsunooon:20191015224922j:plain

よりチャットボットらしくなりましたね!
 

用途

チャットボットはカスタマーなどのお客様対応に使われる印象が強いですが、情報共有としても有用だと思います。

私は今回作ったチャットボットを個人用のKBチャットボットとして使っています。
アカウント情報や作業手順などの情報が整理できて重宝してます。
少し応用して、社内の情報共有アプリにできたらいいなと思っています。

 

おわり

PowerAppsの好きなところは、表現の幅が広くて凝ろうと思えばいくらでも凝ったUIにできるところです。

また、iPhoneでもAndroidでも使えるアプリが簡単に形にできるのは本当にストレスフリーです。

今回触れていないですが、QnAMakerのmulti-turnという機能もとても便利で好きなので、その機能もPowerAppsで表現できるようにしたいと思います。