#技育祭 登壇資料「オタ駆動開発と Teams bot 開発」

参考資料：https://zenn.dev/chomado/articles/8ab50af04b52cc
イベントページ：https://talent.supporterz.jp/geeksai/2021/

Transcript

1. & Teams bot 開発ライブコーディング
2. ツイート大歓迎 写真撮影 スクショ撮影 OK！ Twitter 実況歓迎！ #技育祭 #ホールB 評判をチェック ＆リツイートします
3. たくさんのツイートありがとうございました！
4. たくさんのツイートありがとうございました！
5. たくさんのツイートありがとうございました！
6. たくさんのツイートありがとうございました！
7. HoloLens が好き 自己紹介：千代田まどか (ちょまど) • Microsoft 社員。 Cloud Developer Advocate • ゲームと漫画とプログラミング好き。オタク • 休日は 1 日 15 時間ゲームやってる廃人 • Twitter: @chomado (フォロワー 8.2 万人) • 前職はスマホアプリを開発していた プログラマ
8. 描いた絵
9. 2021年 内閣サイバーセキュリティ月間の公式冊子の 漫画 (全 9 話) を描きました！(『ラブライブ！サンシャイン!!』コラボ) https://www.nisc.go.jp/security- site/month/lovelive.html 私の描いた 漫画の一例
10. プログラミング言語擬人化漫画 『はしれ！コード学園』
11. 1. マイクロソフトの学習リソース 2. Bot 開発 3. オタ駆動開発の話 4. おわりに 今日お話すること (60 分間)
12. マイクロソフトの 学習リソース
13. Microsoft Learn aka.ms/OnlineLearn
14. Microsoft Learn aka.ms/OnlineLearn
15. Microsoft Learn aka.ms/OnlineLearn
16. 画面右半分に コマンドライン(Azure CLI のサンドボックス)が 埋め込まれている 画面左半分が テキスト aka.ms/OnlineLearn とくに、学生の皆様は 自由にクラウド使うの 大変だと思いますし なのでサンドボックス環境が 自由に使えるの めちゃ便利だと思う
17. 学生向けおすすめコンテンツ https://aka.ms/AzureForStudentsJapan https://aka.ms/StudentAmbassadorJapan
18. 学生 IT 世界大会で日本のチームが準優勝！ 自分の「声」を失ってしまった人たちが再び声で 会話することを可能にする電気式人工喉頭 (EL)。 Microsoft Azure の AI 技術を用いて装着者 の声の特徴を学び、より人間の声に近い自然な 音声を発することができるように ２２～２４歳の学生の方々！ リーダーは東大の竹内くん！ 世界で活躍していて本当にすごいね！
19. Teams bot 開発
22. aka.ms/teams-faq-bot-jp
23. アーキテクチャ図 ナレッジベース ボット アプリ が動く Azure Web Apps QnA Maker Web アプリ ボット (Azure Bot Services) Teams Azure Web Apps QnA Maker で トレーニングした 質問に対する 回答を返す Web API デプロイ ボットの設定 チャンネルの設定 API 呼び出し Teams からの 会話内容が 渡される
24.  一言でいうと「Bot 開発の統合環境」  bot アプリ開発用の SDK を用意してくれていて、それをもとに開発し、 Azure 上にホストして、 Teams や Skype、Slack、LINE などとの接続まで 面倒見てくれるサービス  以下が含まれます：  エンドポイントなどを定義する「Bot チャンネル登録」  Bot 開発用の SDK である「Bot Framework SDK」  Bot とチャネル (Teams など) の間で メッセージやイベントを送受信する「Bot Framework Service 」  など Azure Bot Services とは
25.  マイクロソフトが開発している、 対話型 UI を持つ bot アプリ作成のためのフレームワーク  SDK はオープンソースで開発中：https://github.com/microsoft/botframework-sdk  2016 年に v1.0 が公開され、現在 v4 が最新  対応言語は C#, JavaScript, Python (Java はプレビュー版) Bot Framework とは
26. QnA Maker とは • 質問＆回答リストから 学習し、FAQ を作成 • Bot Service または REST API で回答を取得 Knowledge Base •質問＆回答のリストを作成し •「Save and Train」で学習 Test •実際に web 上でチャットを試せる。 •質問データを手動で増やしたりなど Save & train / Publish •BotまたはRESTで呼び出し WebサービスとしてAPI経由で利用可能
28. オタ駆動開発の話 （まずは私の話）
31. “DevRel” (Developer Relations)職。 • 開発者 (Developer) や学生の皆様とのコミュニケーション • 開発者の皆様とマイクロソフトを繋ぐ職業。 • 具体的には：登壇、勉強会の開催、技術コンテンツ作成、製品 チーム (「中の人」) と繋げたり、など Cloud Developer Advocate
34. グローバルなチーム
35. 海外での登壇 (技術セッション)も アメリカ、台湾 オーストラリア マンガ描きやプログラミングなど 好きなことをやりながら 続けている
36. 本を出版『マンガでわかる外国人との働き方』 『マンガでわかる外国人との働き方』 102ページ目 よ り引用
37. フォロワーさん 8.2 万人を超えました！ Twitter : @chomado
38. プログラミング楽しい スマートスピーカー (LINE Clova) スキル開発
39. プログラミング楽しい スマートスピーカー (Google Home) スキル開発
40. • 好きで打ち込めることを探して (オタ駆動開発) • あなたの人生です • Follow your heart. 私が今日お伝えしたいこと これからの世界を創っていく皆様に お伝えしたいことは３つだけ
41. 「”推し” に対して並々ならぬ愛を 持っており、それに対し時間や労力、 お金などを投資している人」 「オタク」とは？私の中の定義： 私はいつでも 「推し」に対して 全力！ 鉄オタ ドルオタ 技術オタ 二次オタ
42. わたしの話（もくじ）
43. わたしの話（もくじ）
44. 幼少期 – 深刻な小児喘息で入院生活
45. 中学生の頃 – 「ルール」「普通の生徒」 先生 私 ストパーは 禁止でしょう！ 今すぐパーマを かけ直して 元の天然パーマに 戻しなさい ？？ 何故ストパーが ダメなのでしょうか？ 誰かに迷惑をかけている のでしょうか？ ？
46. 先生 私 ストパーは 禁止でしょう！ 今すぐパーマを かけ直して 元の天然パーマに 戻しなさい 何故ストパーが ダメなのでしょうか？ 誰かに迷惑をかけている のでしょうか？ 〇◎％ △▪×！！！ (ガチギレ) ？ 与えられた「ルール」に 黙って従わないと怒られた テストで良い点を 取ってればいいと 思ってんじゃないわよ！！ 謝りなさい！皆の前で！ ？？ ダメって言ったらダメなの よ！校則にもパーマ禁止っ て書いてあるでしょ！ 中学生の頃 – 「ルール」「普通の生徒」
47. 中学生の頃 – 暗黒 勉強ばかりしていた
48. 【質問】 「周りと同じように振る舞うことを強制された ことはありますか？」と 聞かれたらどう答えますか？ （コメント欄やツイッターに自由に書いてみてください）
49. 中学生の頃の趣味 – 英語との出会い ハリーポッターにハマり 翻訳が待てず原書を読んだ (誕生日にオーディオブックも 買ってもらい音読もした) そのため、文法の知識を得るために 塾の本棚から高校の英語の教科書を借りて 中1で高校1年程度まで独学した
50. 高校に入学 – 転機 自由な校風の女子高に入学 誰も私を怒らない、自由 プログラミングへの道 との出会い
51. わたしの話（もくじ）
52. わたしの話（もくじ）
53. 高校生(女子高)時代
54. 高校生(女子高)時代 「趣味」「好きなこと」が あるという幸せ！
55. 腐教活動（同じ沼に落とす活動）に勤しむ
56. ガラケー世代 （スマホなんて無かった） （Twitter やLINEなど SNS も無いよ） 高校時代 通塾用に与えられたケータイで BL 小説/漫画サイトを見まくった （母さんごめん）
57. 閲覧者 生産者 ネット上のオタ友に シェア 私 ガラケー 難しそ う 高校時代
58. そのうち大学受験シーズンに。 情報学科 PCを使える 受験してみる 高校時代
59. 結局、受験科目の中に数学の無い 私立大学(女子大)の英文科に入学 興味ない 情報学科行きたかった 高校→大学
60. そこで運命の出会いを果たす！(18歳) 大学入学祝い 母 大学時代 (文系)
61. ついに念願のmyパソコンを手に入れた！！ サイトを作って HTML CSS JavaScript サーバー構築 PHP プログラミング 大学時代 (文系)
62. 寝食も忘れてパソコンに没頭 (夏休み) 大学時代 (文系)
63. でも最初は初心者向けの本(「猫でもわかる～」)も読 めなかった コンパイル？ って何？ 高水準言語 機械語、実行可能形式、 低い水 準のコード えっ、待っ、 猫でも分かるらし いのに 私には分からない ググれば ググるほど 分からなくなる 大学時代 (文系)
64. Twitter で猛者たちに質問してみた 暗黒で恐ろしい言語 Haskell 大学時代 (文系) ツイッターの 猛者たち
65. 大学時代 (文系) ググれば ググるほど 分からなくなる
66. 一応本を買って Haskell 少し書いた 大学時代 (文系)
67. （当時書いたブログから抜粋）Haskell でシーザー暗号 大学時代 (文系)
68. （当時書いたブログから抜粋）Haskell でシーザー暗号 大学時代 (文系)
69. Twitter で猛者たちに質問してみた（その２） 大学時代 (文系) OS自作入門 「基礎」違い ツイッターの 猛者たち
70. Twitter で猛者たちに質問してみた（その３） 大学時代 (文系) プログラミング寄りの基礎 自分で作ってみる 処理系から書く ツイッターの 猛者たち 言語処理系の実装 普通に難しくて無理
71. 劣等感と罪悪感で潰れそうだった 大学時代 (文系) 私が頭悪い 申し訳ない 文系コンプ 楽しい つらい
72. 【質問】 「すごくすごく好きなのに、勉強してもしても 全然分からなくて、劣等感と焦燥感で つらいってことありますか？」 （コメント欄や Twitter に自由に書いてみてください）
73. 基礎から学ぶため、基本情報技術者試験 大学時代 (文系)
74. 絵やプログラミングの勉強をしつつ 塾講師 大学時代 (文系)
75. わたしの話（もくじ）
76. 就活して、新卒で SIer に入社 プログラミング学びたいから エンジニアとして雇ってもらうぞ 「就職氷河期」で かなり大変だった （ちなみに、今まで男女比が 0:10 だったのが突然 9:1 になって 最初は戸惑った）
77. 1か月半の新卒研修後、本業務に 新卒研修、楽しい！ 年の近い子たちとプログラミング！ ついにエンジニアとし てのお仕事が始まる ぞ！ワクワク
78. 業務開始、延々と単調な作業 プログラミングは？ 技術的な仕事は？ 皆が出来ることなの に私にはできない。 楽しくなくても 我慢して遂行 業務時間中 私語は禁止 めちゃ早起き 休み時間が昼だけ 何時間も集中し 淡々と作業 じっと 席に座る 与えられたタスクの 意味を問わずに 延々とやり続ける 忍耐力
79. 呼吸困難、適応障害 これから出勤と思うと 息が出来なくなる 適応障害です 持病の喘息 かな？
80. 仕事辞めたいと言った時 – 全員大反対 仕事がつらいのは お金貰ってるんだから 当たり前！ せっかく大手に 入ったのに！ どうして皆が できることが 出来ないの どうか安定した 人生を送って 安心させておく れ あと 3年は 我慢して 泣いちゃい そう ばかたれ！！
81. 私の「分岐点」 レールにのった 安全な人生 皆と同じ 安心 レールから 外れる 自分の道を 歩く 会社辞めない ルート 会社辞めるルート
82. 【質問】 「やりたいことができないけど安定」と 「やりたいことができるけど不安定 (仕事辞め る)」 選ぶならどちら？ （Twitter やコメント欄に自由に書いてみてください）
83. 実務2週間で退職願を提出 (受理までに1か月) 翌週、社員数20人の スタートアップに転職 楽しい！！！毎日 沢山プログラミング 学べて嬉しい！！ お仕事楽しい！ お前みたいな 社会不適合者を 雇ってくれる会社 なんてどこも無い
84. 2社目ではスマホアプリの開発者 iOS, Android などのアプリを C# でクロスプラットフォーム開発 できる開発環境 Xamarin (ザマリン) を使ってい た。 (のちに Microsoft に買収される サービス) バックエンドは Microsoft のクラウドサービス 「Azure」を使っていた
85. 初めての IDE (Visual Studio) と C# との出会い 今まで、ほぼ素の vim を使っていた。 コード補完や関数の定義などに飛べる 機能に大変感動した。 もう Visual Studio 無しではコード 書けない そして運命の C# との出会い！！ 今まで色んな言語を試してみたけど 一番しっくりくる言語だった。 (のちの Microsoft 入社の決め手となる動機が 「C# が好きだから」)
86. Xamarin についての記事を書きまくる
87. 副業で漫画家を始める
88. その連載先の web メディアの IT イベント 本業は プログラマで 普段は Microsoft Azure と Visual Studio と Xamarin, C# を使い スマホアプリを 開発しています 技術的な知識を生かした漫画を描いて、 それを通して人にプログラミングの 楽しさを広めたいです 面白い子が いるな！ その場に居合わ せたMS社員
89. 英語面接など経て日本マイクロソフト入社 技術を分かりやすく 人に教える職業 「テクニカルエバン ジェリスト」です
90. 最初(2016)は 人前に出られなくて 本番前は机の下に 隠れてガタガタ震える 癖があった でもそこから ガンガン登壇を重ねた
91. Developers Summit 2017 (デブサミ) で ベストスピーカー賞 総合第1位 受賞
92. 2年後、米国マイクロソフト本社に異動 Cloud Developer Advocate (技術を広 める職)として、 グローバルに 働いています
93. Connecting the Dots (点と点を繋ぐ) 好きなことに打ち込むことが大事で、 それが将来振り返ると今に必ず繋 がっている You've got to find what you love. その時に好きで夢中になれるものを 探しなさい
94. • 例えば、大学を辞めてタイポグラフィーの授業に潜り込み魅 了され打ち込んだ経験が、mac を作る時に美しいタイポグ ラフィーを備えた素晴らしい OS を作ることに役立ったエピ ソードを振り返って以下のようなことを言ってます。 • 「it was impossible to connect the dots looking forward when I was in college. But it was very, very clear looking backwards ten years later.」 点と点が繋がって将来を作っていくということを信じて打ち込 むのは大切。 ジョブズの「Connecting the dots」 引用元（15分程度なので見たことがなければ見てみましょう） https://www.youtube.com/watch?v=UF8uR6Z6KLc
95. • 「”推し” に対して並々ならぬ愛を 持っており、それに対し時間や労力、 お金などを投資している人」 「オタク」とは？私の中の定義： 私はいつでも 「推し」に対して 全力！
96. 中学生の頃 – 英語との出会い ハリーポッターにハマり 翻訳が待てず原書を読んだ (誕生日にオーディオブックも 買ってもらい音読もした) そのため、文法の知識を得るために 塾の本棚から高校の英語の教科書を借りて 中1で高校1年程度まで独学した
97. 腐教活動（同じ沼に落とす活動）に勤しむ
98. 大学入学祝いでデジタル絵描き 大学入学祝い 母
99. 念願のmyパソコンでプログラミング開始 サイトを作って HTML CSS JavaScript サーバー構築 PHP プログラミング
100. 絵やプログラミングの勉強をしつつ 塾講師
101. 私の「Connecting the Dots」 絵描き マンガ家 本(『マンガでわかる外国 人との働き方』)を出版 プログラミング エンジニア オタ布教活動 Microsoft で エヴァンジェリスト インターナショナルチームで アドボケイト 英語 (まだ勉強中ですが) 塾講師バイト “インフルエンサー” と呼ばれる (Twitter フォロワー 8万人) 松屋公式インスタ載ったり 大学の客員教授や インフルエンサーとして テレビやラジオへの出演や 取材など色々
102. インフルエンサー(と松屋ファン)として https://www.instagram.com/p/B0iOPMeAAxE/
103. インフルエンサーとして Adobe 社の公式カンファレンス Adobe Summit 2019 (in ラスベガス)に インフルエンサーとして招待されました
104. インタビュー受けたり
105. 世界のツイ廃 「インフルエンサー && Microsoft 社員」として Adobe 社と Microsoft 社の パートナーシップについて、 ラスベガス現地から、 日本語で分かりやすく 広く発信することが求められた
106. • 最低でも３つ「点」があると、より良い。 • 1点だけだと「点」 • 2点だと「線」 • 3点あると「面」になる • (勿論1つの点を突き詰めるのも 素晴らしい) 点と点の話でもうひとつ エンジ ニア マンガ 家 腐女 子 この範囲の人たちに リーチできる
108. 好きで打ち込めることを探して (オタ駆動開発) あなたの人生です Follow your heart. まとめ： 言いたいこと これからの世界を創っていくあなたたちに 伝えたいことは３つだけ
110. 手工業から 近代的工業に移る時の、 産業上の大きな変化。 （技術の発展が社会を変えた）
112. 蒸気機関車
114. 電気・石油 エネルギー
115. 1900年の ニューヨーク
116. 1920年の ニューヨーク
117. コンピューター
119. 計算能力、集積度の向上 Intel 4004 (740 KHz) 0.092MIPS Intel Core i7 5960x (3.0GHz) 298,190 MIPS 1971年 2014年 324万個 ＝
120. 携帯電話の 歴史
122. そして今は「第四次 産業革命」と呼ばれ ている
123. 産業革命の流れ 第一次 電力、 大量生産 コンピュータ による自動化 IoT、AI、 コンピュータの自 律化
124. 世界の未来を創るのは あなたたちです！ 皆様エンジニアは 可能性が無限大！ 今、色々なことを自由に 学べる重要な期間!
125. ありがとうございました！ 技育祭 楽しもうね！ 感想ツイート 楽しみにしてます！ #技育祭