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

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

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で表現できるようにしたいと思います。

 

【レポ】Japan Azure User Group 9周年イベントに参加してきました

JAZUG9周年イベントに参加したレポート記事になります。

 

JAZUGとは?

Microsoft Azureを学び、楽しみ、活かす、日本のユーザーグループです。
月に1度、定期的な勉強会を開催しています。
今回は9周年イベントということで特別なプログラムのイベントを開催しました。
また、7月から開催されていたてらだよしおさんの「Japan Tour in Summer: Java & k8s on Azure まつり」もここでファイナルを迎えられました!すごい!

 

jazug.connpass.com

 

セッション

今回はRoom C+DとRoom Bで同時に別々のセッションが開催されました。
ここではRoom C+Dで行われていた9周年イベントの方のセッションについて書いていきます。
Room Bで開催されていた「てらだよしおまつりファイナル」については
女子部の時のレポート記事が参考になればと思います。

【レポ】Java & k8s on Azure まつり@女子部に参加してきました - オンプレ系インフラエンジニアがAzureを勉強する

 

私は受付をしていたため、1つ目のセッションは聞けなかったので、2つ目以降のセッションからになります。

 

「Azure DevOps × スクラム で実現するプロダクト開発のポイント」

スピーカー:関 満徳さん(@fullvirtue)
資料:

Azure DevOps × スクラム で実現するプロダクト開発のポイント #dotnetlab #jazug

 

AzureDevOpsで開発したときに誰が何をどの粒度で書けばよいかわからない
というよくある疑問についてのお話でした。

Azure DevOps、スクラム、プロダクト開発についての説明から始まり、
それぞれの歴史についてもお話があり大変興味深かったです!
個人的には歴史と同じくらい具体的に少し未来の話もあったのが面白かったです。

題になっているAzure DevOps × スクラムで実現するプロダクト開発については
具体的な参考事例をお話しくださったので、ポイントがわかりやすかったです。
エピック、フィーチャー、ユーザーストーリー、タスクを対応表に示すのが良さそうです。

 

「AzureでIoTって実際どうなの?皆さまに知っていただきたい 東京エレクトロンデバイスによるAzure IoT関連事例とその裏側」

今回のイベントのスポンサーである東京エレクトロンデバイスさんのセッションです。


スピーカー:茂出木さん

Windows EmbeddedとIoTへの愛があふれているお話でした。

現在の形のAzure IoT Plug and Playまでの道のりは長いものだったそうです。
昔のAzure IoTはPaaSとの組み合わせで、デバイス側とクラウド側両方の技術が必要であったり、シナリオを利用してもカスタムが大変だったりと一筋縄ではいかなかったそう…

現在はユーザーの希望に合わせて進化しているため、どんどんシンプルに、誰でも使えるようになっています。
現在のAzure IoT Plug and Playではデバイスのほうにすでに必要なものが埋め込まれていて
jsonファイルをダウンロードしてIot Hubに入れればすぐに動かせるらしいです!
これはぜひやってみたいです!

ちなみに、茂出木さんはお掃除ロボにラズパイを載せて自由に操縦したりするほど組み込みもお好きなようでした笑
デモ動画がおもしろかったです。

 

スピーカー:野崎さん

東京エレクトロンデバイスさんについて軽快な話口でご説明くださいました。
IoT,PoCは爆発的に伸びる可能性のある市場であること、
具体的にはコインランドリーなどで有効活用されていることなど興味深いお話が聞けました。

また、IoTだけでなくAzure関連も手広く携わられているようで、Azure×Veeamもされているとか!あらゆるバックアップをAzureに移行できますって!

東京エレクトロンデバイスさんでは、IoTビジネス共創ラボという勉強会も開催されています。

IoTビジネス共創ラボ - connpass

 

「Azure AD とアプリケーションを SAML 連携する際に陥る事例と対処方法について」

スピーカー:山口 真也さん(@izuru_yamarara)
資料:

Azure AD とアプリケーションを SAML 連携する際に陥る事例と対処方法について

togetter:

JAZUG 9 周年 イベント 「Azure AD とアプリケーションを SAML 連携する際に陥る事例と対処方法について」登壇時のまとめ。 - Togetter

 

AzureADとSSO、SAMLについてのお話で、図解を交えた大変わかりやすいお話でした。
いつ調べてもいまいちピンとこなかったAzureADとSSOについて今までで一番わかったような気がします。

とにかく図がわかりやすいので、是非togetterと合わせて資料を見てください!!!


山口さんはサポート担当の方ということで、実際にあった問い合わせへの回答等をご紹介くださいました。
エラーを再現して解消するまでのデモが本当にスムーズで見ていて気持ちがよかったです。

SSO関連のエラーはエラー画面がすべてを物語っているそうなのでエラーはちゃんと読みましょうね…

 

LT大会

セッションの後はLT大会でした。
おひとり5分という短さかつ様々なジャンルのお話ということで密度の高い時間でした。
アジェンダのご紹介と簡単な感想になります。
アジェンダはほぼconnpassから引用してきたので実際の題名と異なっていると思います。すみません。

 

1.「Azure Sentinel でどこまでログを集められるのか(仮)」

スピーカー:Shinsuke Saitoさん
実際にお家で稼働させているAzure Sentinelがどんな感じを見せてくださいました。
1人分の稼働でも結構なログがたまっていて、お金もそれなりにかかるというのが印象的でした。

 

2.「航空機事故から学ぶアーキテクチャとモニタリング」

スピーカー:しばやんさん
飛行機事故の事例から学べるアーキテクチャが多くてびっくりしました。
ベースは飛行機事故のお話でしたが、ITの現場でも同様の事故が起きるのが容易に想像できる内容でした…
人はミスするものなので、そもそも操縦ミスや整備ミスのせいにしないような仕組みづくりをするというのが心に刺さりました。

 

3.「今日から始めるARMテンプレート」

スピーカー:dz_さん
資料:

今日から始めるARMテンプレート

Azureリソース管理はどうする?→Azure Resource Managerテンプレートを使おう!
というお話でした。
5分という短い中でも華麗にテストデモまで披露してくださいました。
dz_さんはこの日「DevRel/Japan Conference 2019」のイベントで登壇した後にこちらでも登壇というハードスケジュールでした!(私もDevRelも行きたかった…泣

 

4.「IntuneとWSUSを使ってWindows Updateやってみた。」

スピーカー:ShotaYmmrさん
IntuneとWSUSを使ったWindows Updateが題材ということで
ヘイシャとも親和性が高い内容でびっくりしました。

ITエンジニアになった最初のころに実際に検証された内容ということで真に迫るものがありました。

 

5.「Micronaut on Azure試してみた」

スピーカー:ひらりんさん
資料:

Micronaut on Azure 試してみた

題名の通りMicronaut on Azureを試してみたお話で、簡単なコードでWebAPIが作れていました。
現段階では厳しいようなところも言及されていて勉強になりました。

 

6.「Microsoft Learnにコンテンツはどこまでマージされたか?(仮)」

スピーカー:akiyoshiさん
Microsoft Learnには現在676のモジュールがあるそうです!
私もお世話になっています。
コンテンツの統廃合などが激しいようで、リダイレクトされたコンテンツの紹介時のakiyoshiさんがあまりに寂しそうだったのが印象的でした。
常に進化しているMS Learnですので新鮮なうちに触っておきましょう!

 

7.「社内でnon azure勢から脱却をした話」

スピーカー:morihayaさん
AWS/IDCFからAzureに移行している中で感じたことのお話でした。
今回のJAZUGイベントがとても楽しかったようです!

 

8.「新しいAzure資格の体系と内容」

スピーカー:d-takadaさん
MS Learnの話に続き、Azure周りの資格も変化が激しいようです。
私もAzureの資格を取ろうかと思っているのですが、
変化があまりに怒涛過ぎて、勉強しているときや取った直後に廃止とかだと少し悲しいなと思って二の足を踏んでしまいます…ちゃんと更新すればいいんですけどね笑

 

懇親会

スポンサーの東京エレクトロン デバイスさんよりたくさんの食べ物飲み物をご提供いただきました!
ありがとうございます!

懇親会の最中もLT大会が開催され、飛び入りで何名かの方がお話しくださいました。

LTを聞きながらの懇親会は話が弾むのでとても好きです。

 

ノベルティ

今回もノベルティがたくさん用意されてました!
ステッカー、飴、Tシャツ、etc…

なんといっても目玉は東京エレクトロン デバイスさん提供の
イベントオリジナルサーモボトル!!!
素敵デザインはMS MVPの松本典子さんのものです!

Japan Azure User Group 9周年イベントのノベルティデザイン制作を担当しました。 | nrjlog

 

f:id:mitsunooon:20190908222539j:plain

f:id:mitsunooon:20190908222612j:plain

感想

初めてコアメンバーとしてJAZUGに参加させていただき、もうずっとドキドキでした。
朝の集合の時には誰に声をかけてご挨拶したらいいのか全くわからず途方に暮れてたら、足利さんが見慣れない人一人一人にお声をかけていて、そこで救われました。
また、受付の準備や懇親会の準備、撤収作業でもコアメンバーの方々、参加者の方々にお世話になりました。
皆様本当にありがとうございました。

今回のイベントもとても楽しく、学びが多かったので、
今後もJAZUGイベントを盛り上げるお手伝いをしていきたいと思います!

 

Azure Container Instancesで複数WebAPIを扱う

はじめに

Azure Container Instancesを使って
複数のWebAPIをコンテナグループで管理しようとしたときに
ポートを分ける方法でつまずいたので書いておきます。


目的

複数のWebAPI(コンテナ)をコンテナグループでまとめて、
IPアドレスやDNSnameは一つで、ポートを分けて各WebAPIにアクセスできるようにすることです。

<参考>

Azure Container Instances のコンテナー グループ | Microsoft Docs


使う環境

  • Azureアカウント
  • VisualStudio2019(WebAPI用)
  • Docker for Windows(version 19.03.1)

 

全体の流れ

Container Registryの作成(Azureポータル)


Dockerfileの作成(ローカル)


Dockerイメージのpush(ローカル)


Container Instancesの作成(Azureポータル)


手順

Container Registryの作成

Container Registryを作成します。
APIのDcokerイメージを置いておくところになります。

<詳細>

Azure Container Registry のドキュメント - チュートリアル | Microsoft Docs

 

Azureポータルにログインします。
新規リソース作成から[コンテナー]>[ContainerRegistry]をクリックします。

f:id:mitsunooon:20190825095208j:plain


簡単にパラメータを設定します。

f:id:mitsunooon:20190825095232j:plain


完成したら、アクセスキーを確認します。
後ほどDockerイメージをpushするのに使います。

f:id:mitsunooon:20190825000322j:plain

 

Dockerfileの作成

今回WebAPIはVisualStudio2019で用意しました。
ローカルで起動させるとこんな感じです。
それぞれ別のポートでアクセスします。
詳しいコードのついては省略します。

f:id:mitsunooon:20190825000502j:plain

f:id:mitsunooon:20190825000520j:plain


このAPIそれぞれにDockerfileを作成します。
VSにてプロジェクトを右クリックし、[追加]>[Docker サポート...]をクリックします。

f:id:mitsunooon:20190825000546j:plain


ターゲットOSは[Linux]で[OK]をクリックします。

f:id:mitsunooon:20190825000603j:plain


Dockerfileが作成されます。
この中の「EXPOSE 80」の部分を今回使いたいポートに変更します。
今回はDeleteApiを5000、GetApiを5001にします。
これはローカルで実行したときとは異なるポートですが、問題ありません。

f:id:mitsunooon:20190825000635j:plain


Dockerイメージをビルドします。
作成したDockerfileを右クリックし、[Dockerイメージのビルド]をクリックします。
これでDockerのイメージが作られます。

f:id:mitsunooon:20190825000828j:plain


コマンドプロンプトで確認します。
ちゃんと作られてますね。

>docker images

f:id:mitsunooon:20190825000932j:plain


Dockerイメージをレジストリにpushする

作成したイメージにタグをつけます。
Azure上のレジストリ内でバージョン管理するための認識です。
APIを編集更新するたびにDockerイメージをビルドしなおして
レジストリにあげる必要があるので、
タグを分けておくと、古いバージョンに戻すのも楽だと思います。

>docker tag <対象イメージのIMAGE ID> <接続先レジストリサーバー名>/<対象イメージ名>:tag

f:id:mitsunooon:20190825095402j:plain

レジストリにpush

Azure上で作成したレジストリにpushします。

まずAzure上のレジストリにログインします。

>docker login <レジストリサーバー名> -u <ユーザ名> -p <パスワード>

f:id:mitsunooon:20190825001440j:plain

 

その後にpushします。

>docker push <レジストリサーバー名>/<イメージ名>:tag

f:id:mitsunooon:20190825095434j:plain


Azureポータル上で確認します。
ちゃんとpushされてますね。

同様にもう一つのAPIレジストリにpushします。

f:id:mitsunooon:20190825001545j:plain


Container Instancesの作成

いよいよ本題のContainer Instancesを作成します。

今回は複数のサービスがあるコンテナグループになりますので
下記手順を参考にしています。

チュートリアル - Azure Container Instances に複数コンテナー グループをデプロイする - テンプレート | Microsoft Docs


テンプレートの作成

Container Instances用のテンプレートを用意します。
参考サイトをもとにazuredeploy.jsonを作ります。

{
    "$schema": "https://schema.management.azure.com/schemas/2015-01-01/deploymentTemplate.json#",
    "contentVersion": "1.0.0.0",
    "parameters": {
        "containerGroups_ContainerInstancesTest_name": {
            "defaultValue": "ContainerInstancesTest",
            "type": "String"
        }
    },
    "variables": {},
    "resources": [
        {
            "type": "Microsoft.ContainerInstance/containerGroups",
            "apiVersion": "2018-04-01",
            "name": "[parameters('containerGroupsName')]",
            "location": "japaneast",
            "properties": {
                "containers": [
                    {
                        "name": "deleteapi",
                        "properties": {
                            "image": "containerregistry0824.azurecr.io/deleteapi:1.0.0",
                            "ports": [
                                {
                                    "protocol": "TCP",
                                    "port": 5000
                                }
                            ],
"resources": { "requests": { "memoryInGB": 0.5, "cpu": 0.25 } } } }, { "name": "getapi", "properties": { "image": "containerregistry0824.azurecr.io/getapi:1.0.0", "ports": [ { "protocol": "TCP", "port": 5001 } ], "resources": { "requests": { "memoryInGB": 0.5, "cpu": 0.25 } } } } ], "imageRegistryCredentials": [ { "server": "レジストリサーバー名", "username": "レジストリユーザー名", "password": "パスワード" } ], "restartPolicy": "Always", "ipAddress": { "ports": [ { "protocol": "TCP", "port": 5000 }, { "protocol": "TCP", "port": 5001 }, ], "type": "Public", "dnsNameLabel": "ContainerInstancesTest" }, "osType": "Linux" } } ] }


編集する箇所としては各種名前、image、port、imageRegistryCredentials、各コンテナの設定あたりでしょうか。
各種名前:defaultValueがContainer Instancesの名前。dnsNameLabelがURLになるホスト名。nameが各コンテナの名前。
image:コンテナグループに入れるサービスのイメージ。
レジストリからコピーしてくると間違いないです。
port:VSで作成したDockerfileに記載したportを指定します。
imageRegistryCredentials:レジストリのアクセスキーの情報。

(補足)
リージョンによってCPU等の使用に制限があります。
最小値は1ではないので、動作に影響さえなければ0.5とかでも動きます。

Azure Container Instances リソースの可用性 | Microsoft Docs


テンプレートのデプロイ

AzureのCloudShellに接続し、作成したテンプレートをアップロードします。

アップロードしたファイルをコマンドでデプロイします。

>az group deployment create --resource-group <リソースグループ> --template-file <テンプレートファイル>

f:id:mitsunooon:20190825101337j:plain

 

テンプレートに間違いがあればエラーが表示されます。
問題なく実行されればしばらく待った後にContainer Instancesの情報が表示されます。

デプロイが終わったらポータル上で確認します。
コンテナが二つできてますね。(でも一つ動いてない…?

f:id:mitsunooon:20190825002332j:plain


接続してみます。
つながらない…なぜ…

f:id:mitsunooon:20190825002348j:plain


よくよく設定を見てみます。
プロパティではちゃんとポートが指定されてます。

f:id:mitsunooon:20190825002403j:plain


ログを見ると…むむむ。
なぜかポート80の表記が。

f:id:mitsunooon:20190825101418j:plain


これはデフォルトが変わってないのでは?
と思い調べるとやはり環境変数を変える必要がありました。

asp.net - Why does aspnet core start on port 80 from within Docker? - Stack Overflow


ということで、テンプレートの"containers"配下に以下の部分を追記します。

"environmentVariables": [
{
"name": "ASPNETCORE_URLS",
"value": "http://+:5000"
}
],


もし一つのコンテナに複数のポートを割り当てたい場合は;で仕切ります。

"environmentVariables": [
{
"name": "ASPNETCORE_URLS",
"value": "http://+:5000;http://+:5002"
}
],


Container Instancesを再デプロイします。

確認します。
うんうん、ちゃんとポートが割り当たってますね。

f:id:mitsunooon:20190825002653j:plain


接続します。
ちゃんと各ポートで接続されますね。めでたし。

f:id:mitsunooon:20190825002719j:plain

f:id:mitsunooon:20190825002736j:plain


おわりに

初めはDockerComposeを使いたかったのですが、
DockerOSがLinuxの場合、APIは一つまでしか対応していないようで断念…
API一つとDB等を組み合わせるには良いようです。
Preview版でなくなったときは複数APIも使えるようになってると嬉しいです。

 

【レポ】Java & k8s on Azure まつり@女子部に参加してきました

てらだよしおさん(@yoshioterada)の
Japan Tour in Summer: Java & k8s on Azure まつり@女子部に運営として参加したレポート記事になります。

今回はJava女子部さん(@java_women)との共催で、
コンテナ、Docker、Kubernetesについての
座学とハンズオン(モブプロ)というプログラムでした。

本記事では女子部のイベントがどんな雰囲気だったかを中心に書いていきます。
ハンズオンの詳細な内容はちゃんと復習してから別途書きたいと思います。

 

午前の部 座学

コンテナの基礎についての座学でした。
1人で参加されている方が多く、初めは皆さん緊張している様子でした。
それでも参加者の方から質問も出ていたので、質問はしやすい雰囲気だったのかと思います。

 

座学の内容については
イベントページに資料がありますのでご覧ください。

Japan Tour in Summer: Java & k8s on Azure まつり@女子部 - connpass

 

前回のJazug女子部の勉強会もコンテナ編でしたので
こちらの資料もあわせてご覧いただくと
よりコンテナについてのイメージがしやすいと思います。
この時はMicrosoftの真壁さんがお話ししてくださいました。
こちらの資料も初学者向けでとてもわかりやすいので是非!

JAZUG女子部 第14回勉強会 - connpass

 

当日、参加者の方から出た質問で個人的に印象に残ったものを記載します。

 

Q.Dockerのセキュリティ周り(脆弱性対策など)はどうしたらいいですか?
A.極力オフィシャルのイメージを使ってください。
最近はセキュリティチェックツール(Aqua SecurityやTwistlockなど)もあるのでそれを活用するのも一つの手です。

 

Q.コンテナの下側のマシンについては意識したほうがいいですか?
A.意識することは大事です。
コンテナは基盤になるマシンのリソースを借りて動いているので、
コンテナの設計は基盤のマシンのリソースを使い切らないように設計しないといけません。

 

Q.コンテナの利用シーンとは?
A.いろんなところで使われています。
特に開発やテスト等、統一された環境を用意する必要がある場面で有効です。
また、スケールアウトのものはコンテナ向きですが
スケールアップのもの(DB等)はあまりコンテナ向きではないです。

 

午後の部 ハンズオン

1チーム6人ほどに分かれてモブプロ形式のハンズオンをしました。
私のチームはJava女子部の方が多く、女子部の勉強会に参加されるのが初めての方も何人かいらっしゃいました。
皆さんLinuxコマンドなどの基礎知識をお持ちで、比較的スムーズに進められました。

他のチームも和気あいあいとした様子で、
時には拍手も起こるような盛り上がりでした笑

Microsoftさんのご厚意でお菓子もあったので、
おやつを食べながらできたのもよかったです。
(女子部イベントではおやつがある率が高い気がします笑

 

ハンズオン全体の流れ

<事前準備>
  • チーム内の共有メールアドレスを一つ作成
  • 共有のAzureアカウント作成

  • 情報共有のためのツール設定

  (私のチームはTeamsを使いました。初めてTeamsの画面共有など使いましたが、使い勝手もなかなか良かったです。

 

<Docker&Kubernetesハンズオン内容>

持ち回りでオペレーターを交代しながらやりました。
自分のオペレーションをみんなに見られるというのは緊張しましたが、
わからないところなどをみんなで相談しながらできたので心強かったです。
また、手順で詰まった時もすぐに寺田さんが丁寧に説明してくださるので
ストレスフリーなハンズオンでした。

モブプロは激しい意見のぶつかり合いをする怖いものだと思っていたので
かなり印象が改善されました笑

 

その他感想

運営側で丸一日イベントに参加するのは初めてだったので、前日からずっとドキドキしてました…
運営として参加した反省としては、もっと会場の様子を写真に撮っておけば良かったと思いました。

女子部のイベントの様子がわかることで来てみようと思える人がきっといると思ってるので、今後はイベントの様子がわかるような写真を撮ります!
(私は初めてJazug女子部のイベントに参加したときは、どんな感じか知りたくて事前にめちゃくちゃ調べたタイプなので笑

 

今後のイベント情報

てらださんのJapan Tour in Summerはまだまだこれからですので
各会場でご都合会う方はぜひ!
会場ごとにプログラムも異なるようなのでできることなら全通したいくらいです笑

 

JAZUG (Japan Azure User Group) - connpass

 

ツイッターハッシュタグ【#てらだよしおまつり】で検索いただくと
参加者の方の生の声や現地の様子がよりわかると思います。

 

おわり

朝から夕方までという長丁場でしたが、

暑い中ご参加いただいたみなさま、共催いただいたJava女子部のみなさま、本当にありがとうございました。

また女子部のイベントでお会いできると嬉しいです。

世界一簡単なFAQチャットボットの作り方

※2019/11/30更新

Microsoft Ignite 2019でPower Virtual Agentsが発表されました。

もしかしたら世界一簡単の称号を明け渡さなければいけないかもしれないので

こちらの記事もご参照ください。

Power Virtual Agentsでチャットボットを作ってみる - オンプレ系インフラエンジニアがAzureを勉強する

 

はじめに

MicrosoftのCognitive Servicesというサービスが手軽にできるAIで面白そうということで軽く触ってみようと思います。

 

Cognitive Servicesとは

Microsoftが提供するAIの人工知能パーツ群です。
画像認識や自然言語処理、音声処理などのサービスが用意されています。
今回はその中で言語の分野の「QnA Maker」というサービスを使って
Teamsのチャットボットを作ります。

azure.microsoft.com

 

今回つくるもの

Azureのサポートについて回答してくれるTeamsのチャットボットを作成します。
もちろん日本語対応です。

 

参考サイト様

QnA ボット - Azure Bot Service - QnA Maker - Azure Cognitive Services | Microsoft Docs

「QnAMaker」とは?Microsoftの自動チャットボット会話生成サービスを試してみた | Ledge.ai

 

準備するもの

  • Azureアカウント
  • チャットボットにするFAQサイト

 

作り方

KBの作成

QnA Makerにアクセスします。
[GET STARTED]をクリックし、Azureのアカウントでログインします。

新規でナレッジベースを作るので[Create a knowledge base]をクリックします。

f:id:mitsunooon:20190707191913j:plain

 

STEP1

AzureポータルにQnA Makerのリソースを作ります。
[Create a QnA service]をクリックすると、Azureポータルに飛びます。

f:id:mitsunooon:20190707191416j:plain

  

必要事項を入力します。
価格レベルは今回は最安にします。

f:id:mitsunooon:20190707192047j:plain

f:id:mitsunooon:20190707192021j:plain

 

STEP2

作成ができたらQnA Makerの方に戻ります。
先ほど作った情報を選択します。

f:id:mitsunooon:20190707192150j:plain

 

STEP3

KBの名前を設定します。
QnA MakerサイトのマイページにKBの一覧が表示されますが、その時の表示名になります。

f:id:mitsunooon:20190707192250j:plain

 

 

STEP4

参考にするFAQサイトのURLを入力します。
今回はAzureのサポートに関するFAQのサイトにします。

Microsoft Azure サポートに関する FAQ

f:id:mitsunooon:20190707192421j:plain

 

補足

[Chit-chat]という欄ではチャットボットの性格が指定できますが、
最低限の会話テンプレート(挨拶等)が登録されるだけで
特に口調が変わるとかではないようです。

f:id:mitsunooon:20190707192518j:plain

 

STEP5

[Create your KB]をクリックします。
しばらく待つとKBが作成され、FAQサイトの質問と回答が登録されているのが確認できます。
もちろんここで質問と回答をカスタマイズすることもできます。

f:id:mitsunooon:20190707192617j:plain

 

f:id:mitsunooon:20190707192634j:plain

 

 

Botの作成

作成したKBをbotとして出力します。
[PUBLISH>Publish]をクリックします。

f:id:mitsunooon:20190707192745j:plain

 

[Create Bot]をクリックするとAzureポータルのWeb アプリ ボット作成のページに飛びます。

f:id:mitsunooon:20190707192830j:plain

 

必要項目を入力します。
ここでも価格レベルは最安にします。

f:id:mitsunooon:20190707192904j:plain

 

作成が完了したらテストします。

f:id:mitsunooon:20190707192936j:plain

 

Teamsに接続する

作成したbotをTeamsで使えるようにします。

Webアプリボットの[チャンネル]をクリックします。

f:id:mitsunooon:20190707193053j:plain

 

チャンネルの追加でTeamsを選択します。
[保存]をクリックします。
特に設定は不要です。

f:id:mitsunooon:20190707195551j:plain

 

チェックボックスにチェックを入れ、[Agree]をクリックします。

f:id:mitsunooon:20190707195616j:plain

 

保存が完了したら、
[チャンネルに接続]のページからTeamsに接続します。

f:id:mitsunooon:20190707195713j:plain

f:id:mitsunooon:20190707195752j:plain

 

Microsoft App IDをTeamsで検索して表示させることもできます。

f:id:mitsunooon:20190707195825j:plain

 

チャットボットができています!やったー

f:id:mitsunooon:20190707195734j:plain

 

おまけ

アイコンと表示名を設定してチャットボットらしくします。

Webアプリボットのページで[設定]をクリックします。

アイコンを設定します。pngの画像をアップロード。

表示名もボットらしくします。

f:id:mitsunooon:20190707195953j:plain

 

Teamsで確認します。

名前とアイコンが変わって、チャットボットらしくなりました。

f:id:mitsunooon:20190708173057j:plain



 

 

おわり

こんなに簡単にチャットボットが作れると思ってなかったのでびっくりしました。

仕事中に癒してくれるようなチャットボットとかも作りたいですね…

他のCognitive Servicesも触ってみたいと思います。

 

 

GoogleHomeとAzureを使っておうちの小物の住所を決めよう!

テーマ

GoogleHomeに話しかけると、おうちの無くしがちな小物の片づけ場所(定位置)を教えてくれるものを作ります。

例)

人「メガネはどこにある?」

GoogleHome「メガネの置き場所は洗面所の棚の上です」

 

目的

今回はTableStorageの読み込み機能を使うことがメイン目的です。
ついでにGoogleHomeとAzureFunctionsを組み合わせます。

 

全体の流れ

  • TableStorageの設定
  • AzureFunctionsの作成
  • DialogflowとGoogleHomeの設定

 

TableStorageの設定

ストレージアカウントの作成

Azureポータルにログインします。
ストレージアカウントを作成します。
この辺は検索するといろんなわかりやすい記事が出てくるので詳細は割愛します。

ゼロからはじめるAzure(2) ストレージの種類と概要 | マイナビニュース

 

f:id:mitsunooon:20190609161808j:plain

 

Table作成

ストレージアカウントができたら、テーブルを作成します。
ひとまず名前だけ設定します。

 

f:id:mitsunooon:20190609161746j:plain

 

Microsoft Azure Storage Explorerの初期設定

上記で作成したテーブルを管理するためにMicrosoft Azure Storage Explorerをインストールします。

Azure Storage Explorer – クラウド ストレージ管理 | Microsoft Azure

 

インストールしたら起動させ、Azureのアカウントと紐づけます。
左サイドバーの人型をクリックします。

[Add an account...]をクリックします。

f:id:mitsunooon:20190609162019j:plain

 

[Add an Azure Account]を選択し、[Sign in...]をクリックします。

f:id:mitsunooon:20190609162112j:plain

 

上記でAzureポータルにログインしてたアカウントでログインします。

f:id:mitsunooon:20190609162148j:plain

 

追加されたアカウントが表示されます。

f:id:mitsunooon:20190609162213j:plain

 

Tableにデータを入れる

左サイドバーのToggleExplorerのアイコンをクリックすると、さっき作ったストレージアカウントと空っぽのテーブルが表示されます。
ここに.csvファイルをインポートして中身を入れます。
[Import]をクリックします。

f:id:mitsunooon:20190609162528j:plain

 

 事前に作っておいた.csvファイルを選択します。

対象の小物と置き場所をここで決めます。

 

f:id:mitsunooon:20190609162612j:plain

 

 インポートする項目が確認されます。
[Insert]をクリックします。

f:id:mitsunooon:20190609162640j:plain

 

 データが入ります。

TableStorageの設定はこれでOKです。

f:id:mitsunooon:20190609162702j:plain

 

 ちょっと補足

.csvファイルの用意について。
.csvファイルがどんなものかいまいちわからなかったので
最初はMicrosoft Azure Storage Explorerから直接テーブルに適当な値を入れて、
Exportして.csvファイルを手に入れました。
それをちょっと改変してImportさせました。
PartitionKeyとRowKeyが必須項目ですが、項目さえあればよくて空欄でもインポート自体はできます。
Excelファイルからデータをインポート、エクスポートができるのはかなり助かります。

 

AzureFunctionsの準備

今回の動作の本体になるAzureFunctionsの設定をします。

コード自体はGitHubを参照ください。
TableStorageの読み込みが、Microsoftの公式ドキュメントを参照してもなかなかうまくいかず苦戦しました。
(書き込みはドキュメント通りにすぐできました。

GitHub - kgnk-hkr/AddressManagement: TableStorage読み取りのためのFunctions

 

DialogflowとGoogleHomeの設定

GoogleHomeとやり取りをするキーワードの設定をします。
この辺りは過去記事と重複するので詳細は省きます。

Google HomeとAzure Functionsを連携させる - オンプレ系インフラエンジニアがAzureを勉強する

 

Entitiesは[items],[where]の二種類。f:id:mitsunooon:20190609163400j:plain

 

f:id:mitsunooon:20190609163417j:plain

 

Intentsは問いかけのテンプレートを登録します。

f:id:mitsunooon:20190609163515j:plain

 

f:id:mitsunooon:20190609163527j:plain

 

 

今回は追加で終了の文言を追加してみたのでそこだけ追記します。
[finish]というIntentsを作ります。

終わりにするときの言葉を登録します。
今回は「ありがとう」です。

f:id:mitsunooon:20190609164027j:plain


 [Responses]に終了の時にGoogleHomeが言う言葉を設定します。
今回は「どういたしまして」です。
[Fulfillment]は何も設定しません。
f:id:mitsunooon:20190609164049j:plain

 

あとはAzureFunctionsのURLを登録して完成です!

 

デモ

 シミュレーターで実行してみるとこんな感じです。やったー。

これで何をどこにしまうか決められますね!

決めた場所に片づけられればあわあわと探すこともなくなるはず…

 

f:id:mitsunooon:20190609164212j:plain

 

 

f:id:mitsunooon:20190609164528j:plain

 

改善点

  • 今は読み込みしかできないので、書き込みもできるようにして置き場所を変えたときに情報を音声でアップデートできるようにしたいです。
  • 逆引きができるようにしたいです。
  • コードがごりごりの力業のようになっているのでもう少しスマートにしたいです。

 

参考サイト様

Azure Functions における Azure Table Storage のバインド | Microsoft Docs

Google HomeにRSSを読み上げさせよう:完成編 (1/3):特集:Google Homeプログラミングを始めよう - @IT

 

 

Azure Logic Appsを使ってTwitter Botを作る

■動機

ブログの記事をツイッターで定期的に投稿して宣伝したいと思いました。

 

■目的

Azure Logic Apps機能を使って、
ツイッターに定期的な投稿をすること。

 

■必要なもの

Azureアカウント
Twitterアカウント

 

■Azure Logic Appsについて

Azure Logic Appsとは、Azureの機能の一つで
ワークフローを指定するだけで
いろいろなアプリやシステムを連携させて動かすことができるものです。
詳細はMicrosoftの公式ドキュメントを参照ください。

Azure Logic Apps のドキュメント - チュートリアル、API リファレンス | Microsoft Docs

 

■ロジックアプリを作る

Azureポータルにサインインし、

[新規作成[+]]>[logic]で検索>[Logic App]>[作成]をクリックします。

f:id:mitsunooon:20190430185921j:plain

 

f:id:mitsunooon:20190430185938j:plain

 

Logic Appの名前、リソースグループ、場所を指定します。
今回は以下のパラメータでやります。

f:id:mitsunooon:20190430190116j:plain

 

■ワークフローの作成(トリガー部分)

作成したロジックアプリのリソースに飛ぶとデザイナーのテンプレートがいくつか出てきます。
やりたいことに合わせて、テンプレートから選択するのもいいと思います。

今回はテンプレートを使わず1から作るので[空のロジック アプリ]をクリックします。

f:id:mitsunooon:20190430190236j:plain

f:id:mitsunooon:20190430190255j:plain

 

まず初めにトリガーを設定します。

[スケジュール]>[繰り返し]をクリックします。

f:id:mitsunooon:20190430190349j:plain

 

f:id:mitsunooon:20190430190430j:plain


1つ目のツイートを投稿したい日時を設定します。
今回は7日周期にします。

f:id:mitsunooon:20190430190454j:plain

 

■ワークフローの作成(アクション部分)

次にアクションとして実際にツイートする内容を設定します。

[+新しいステップ]をクリックします。

f:id:mitsunooon:20190430190603j:plain

 

[Twitter]>[ツイートの投稿]をクリックします。

f:id:mitsunooon:20190430190634j:plain

 

f:id:mitsunooon:20190430190649j:plain

 

Twitterへのサインインを求められます。
[サインイン]をクリックすると、Twitterへのサインイン画面が出てきます。
ツイートを投稿したいアカウントでサインインします。

f:id:mitsunooon:20190430190733j:plain


認証許可の確認画面が出るので[Allow access]をクリックします。

f:id:mitsunooon:20190430190828j:plain

 

アカウントの連携ができたらツイートの内容を設定します。
[新しいパラメーターの追加]をクリックし、
[ツイートテキスト]のチェックボックスを有効にします。

f:id:mitsunooon:20190430190904j:plain

 

[ツイートテキスト]に投稿内容を設定します。

f:id:mitsunooon:20190430190938j:plain

 

2つ目以降のツイートの設定をします。

[+新しいステップ]をクリックします。

[スケジュール]>[待ち時間]をクリックします。
前のツイートが投稿された次の日に投稿されるようにします。

f:id:mitsunooon:20190430191027j:plain

 

同様にツイートの内容を設定します。

f:id:mitsunooon:20190430191300j:plain

 

以降、投稿したいツイートの数だけ繰り返します。

完了したら[保存]をクリックします。

f:id:mitsunooon:20190430191334j:plain

 

■実行

作成したワークフローを実行します。
[実行]をクリックします。

f:id:mitsunooon:20190430191435j:plain

 

実際のTwitterアカウントを見に行くとちゃんと投稿されています。やったー!

f:id:mitsunooon:20190430191516j:plain


■コスト

Azureを使う上で気になるのはやはりコストですよね。
定期botに使って、知らない間にかさんでいたら…と思うと恐ろしいですが
LogicApps自体はほとんどコストはかからないようです。
1日1回投稿の今回程度のbotであれば個人的には許容内かと。

価格 - Logic Apps | Microsoft Azure

 

テストのために試行錯誤してた日のコストはこれくらいでした。

f:id:mitsunooon:20190430192424j:plain

 

■改善点

Logic Appsを突発で触って作った今のままだと、下記の点で不便です。
  • 記事を更新するたびにAzureにも設定を追加しないといけない。
  • 投稿が被らないように、記事の数に合わせてトリガーの日数間隔を計算しないといけない。

うーん、不便。
これなら完全無料のTwitterBotサービスを使ったほうがよさそうです。
理想はブログからランダムに記事を引っ張ってきて
1日2回くらい投稿させたいです。
アクションには機能がいろいろあるのでもう少しワークフローを練ります。
デザイナーじゃなくてコードで書いたほうが楽かもしれない。。。