自己紹介
はじめましての方も、そうでない方も、はじめまして！ かれこれ高専キャリアで数年ぐらい色々と活動している のむのむ です！主に高専キャリアでは、イベントの企画や開発をメインでやっています！ 自己紹介はリンクを張っておくので気になる方はご覧くださいまし👼
本題
さて、1月16日からクラウドAI開発講座の第1タームが始まったわけですけれども... （今回からは通年なので、第1タームに参加できなかった人でも第2, 第3があるのでお楽しみに！）
まず訪れる最初の難関といえば環境構築！！そしてネットで調べても流用できないOSの差！！🙄
今回の環境構築はMac編です。環境構築の中でも「実際に作ってみたアプリをTeamsで使えるようになるまで」を取り上げたいと思います。
Windows, Macの最初の方の環境構築に関する部分は高専キャリアの「ドラクエお姉さん」こと「おーちょさん」が書いてくれているので、こちらを参考にしてみてください！
Windows編
■ じっくり環境構築を公式通りにやってみたい人用 qiita.com
■ とにかく早く動かしてみたい（せっかちな）人用
qiita.com
Mac編
■ とにかく早く動かしたい人用 qiita.com
追記
少しだけ画面に表示される内容とかが変わっていましたが、特に気にすることなく進められました。 選択肢を選ぶところで選択肢が出てこないときには新規作成をしないといけないことが多いですが、その場で新規作成できるので心配なしです！
リージョン（どこの地域のデータセンターを使うか）は基本的に Japan East で合わせておくほうがよいです！ データが散らばってるとやり取りするだけで時間かかったりすることもあるので👀
おーちょさんの記事を見てやってみた結果
僕も初めてやりますが、Webチャットでテストをするまで30分もかからないぐらいです。 コードに関しては1つも打ってません。ぜーんぶ選択肢を選んだりするだけ。簡単便利だ...
ローカルでも無事に動作検証できた。感動。 ここまで来ても、まだノーコード。天才か👀
AzureのWebサービスにまでデプロイ完了。ここまでの所要時間1時間も無いぐらい...。えぐぅ〜
ちゃんとコードで変更した部分が変わってる。最＆高
Teamsで使えるようにする
さて、ここからです。実際にこのオウム返しBotをTeamsで使えるようにします。自分で作ったものをどっかで使えるようにアップしたりすることを「デプロイ」といいます。今回の場合だと「オウム返しBotをTeamsにデプロイする」ですかね👀
専門用語多いですが、調べればすぐに意味は出てくるのでググりましょうъ(ﾟДﾟ)ｸﾞｯｼﾞｮﾌﾞ!!
参考にする記事はこちら！みんな大好き「ちょまどさん」でｓ！
基本的な部分はAzureのWeb画面で行うため、Win, Mac関係なく行うことができます。この記事では、詰まりそうな部分を抜き取って説明していきたいと思います！ちょまどさんの記事と並行して読んでもらえると分かりやすいかもです！
manifest.jsonの作成
ちょまどさんが紹介してくれている、公式に載っているmanifestのテンプレートはフルフルのコミコミなので、めっちゃ量多いです。今回必要ないものもたぶんあります。なので、最低限必要そうなものだけピックアップしたmanifest.jsonのテンプレートを下に記載するので、各自値を書き換えてお使いください！
■ manifest.json のテンプレート
{ "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.8/MicrosoftTeams.schema.json", "manifestVersion": "1.8", "version": "1.0.0", "id": "<Botソース内のappsettings.jsonに書いてあるMicrosoftAppIdの値>", "packageName": "com.kosen.cloud.<アプリの英語名（自由）>", "localizationInfo": { "defaultLanguageTag": "ja-jp" }, "developer": { "name": "<作者名>", "websiteUrl": "https://online.kosen-career.tech/fixer-x-ai", "privacyUrl": "https://online.kosen-career.tech/fixer-x-ai", "termsOfUseUrl": "https://online.kosen-career.tech/fixer-x-ai" }, "name": { "short": "<アプリの名前>" }, "description": { "short": "<アプリの説明（80文字以下）>", "full": "<アプリの説明（4000文字以下）>" }, "icons": { "outline": "32x32.png", "color": "192x192.png" }, "accentColor": "#ffffff", "bots": [ { "botId": "<Botソース内のappsettings.jsonに書いてあるMicrosoftAppIdの値>", "scopes": [ "team", "personal", "groupchat" ] } ] }
■ のむのむが作ったBotの manifest.json
{ "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.8/MicrosoftTeams.schema.json", "manifestVersion": "1.8", "version": "1.0.0", "id": "9e78dd9c-f895-4505-a5c0-xxxxxxxxxxxxxx", "packageName": "com.kosen.cloud.teams-test-nomunomu0504", "localizationInfo": { "defaultLanguageTag": "ja-jp" }, "developer": { "name": "hiroki nomura", "websiteUrl": "https://online.kosen-career.tech/fixer-x-ai", "privacyUrl": "https://online.kosen-career.tech/fixer-x-ai", "termsOfUseUrl": "https://online.kosen-career.tech/fixer-x-ai" }, "name": { "short": "オウム返しBot - テスト" }, "description": { "short": "ただ単に言ったことを返してくるBotだよ。", "full": "ただ単に言ったことを返してくるBotだよ。" }, "icons": { "outline": "32x32.png", "color": "192x192.png" }, "accentColor": "#AA3333", "bots": [ { "botId": "9e78dd9c-f895-4505-a5c0-xxxxxxxxxxxxxx", "scopes": [ "team", "personal", "groupchat" ] } ] }
アイコンの作成
Teamsにアップするためには、Botアプリのアイコンを設定する必要があります。スマホのゲームとかでもホームにアイコンありますよね？あんな感じのやつです。どんな画像でもよいのですが、サイズが決まっています。
- 横 32px, 縦 32px, png形式
- 横 192px, 縦 192px, png形式
この２つが必要になってきます。こちらのサイトで自由に画像のサイズを変更して、ダウンロードすることができます。
Teamsにデプロイ
ここまでで作成したZipファイルを実際にTeamsにアップして、Botアプリをデプロイします。「カスタムアプリをアップロード」を押すと、以下のような表示が出てくる方がいるかも知れません。
違いとしては、「チーム全員が使えるようにするか」or「自分自身だけしか使えないか」という違いです。みんなに使ってもらいたい！ということであれば、「自分または自分のチームを...」というやつを押してアップロードしましょう！
これで無事Teamsでも、Botが動きました。めでたしめでたし🎉
