20180621_Node学園LT - Speaker Deck

Slide 1

Slide 1 text

AzureのサーバレスでNode.jsテンプレート使って超絶簡単にAIチャットボット作れるよっていう話東京Node学園 #node_girls 2018/06/20 たける

Slide 2

Slide 2 text

注意 •資料公開しますんで手順などはさらっと進みますがあとで見てみてください。 •私なんかでよければSNSシェアOKです。

Slide 3

Slide 3 text

自己紹介たける株式会社チェンジエンジニア • 業務でスマートデバイスを導入・活用する際のコンサルティング及び業務アプリ開発（主にチャットやチャットボットに関わるコンサルティング、開発、ツール販売、導入支援など） • 元SIer（某銀行の融資システム維持開発のインフラ担当） • プログラミングレベル：ひよっこ（Node.js、C#） • チョットデキル：Azure、Office365、CognitiveService、チャット製品全般、チャットボット作成ツール • アマリデキナイケドキョウミアル：AWS、IoT、Ionic、Low-Code、音声系 • ハマっていること：スキューバダイビング、ゴルフ、リゾート、お酒、チャットボット作り

Slide 4

Slide 4 text

ちょっとアンケートとらせてください https://bit.ly/2LRJeiX

Slide 5

Slide 5 text

（追記）ぉお。

Slide 6

Slide 6 text

勉強会に参加するようになったきっかけ  9年間金融系SE（プロジェクトマネージャー）  飽きた  2017年2月大企業からベンチャー企業に転職。  圧倒的にWEB系や開発者としての知識が足りないことに気づく  メールや読み物の半分以上が英語。やばい。  常に新しい情報のインプット必要（事業内容：NewITトランスフォーメーションイミフ）  会社の9割がコンサルタント職種でエンジニア少なくて共感できる人少ない  「勉強会エンジニア」で検索したらたくさんあるじゃん  月7くらいで参加  ハンズオン大好き

Slide 7

Slide 7 text

チャットボットって？ • 「チャット」＋「ロボット」＝「チャットボット」 • チャットをUIとしてボットアカウントに接続したプログラムが処理を自動的に実行してくれる • 自然言語AIとつながってるSiriとかりんなとか有名。 • LINEとかSlackとかチャットツールから提供されてるAPI使う

Slide 8

Slide 8 text

チャットボットとの出会い • 転職して初めて参画したプロジェクトが「チャットボットコンサル」 • ちゃっとぼっと・・・？何それ美味しいの・・・？ • 当時ググってもあまり出てこず。本もほとんど出版されておらず。 • IT系勉強会なら多少あってコソコソ勉強してた • いつの間にか「チャットボット得意な人」扱い • 「チャットボットサービス作って！」っていうムチャぶり

Slide 9

Slide 9 text

作ってやったさ。 • 開発期間2か月でリリース • 超アジャイル開発（後から知った） • 奇跡

Slide 10

Slide 10 text

Node.jsとの出会い • Node.jsとの出会い≒Node学園との出会い • それ以降のびすけさんのqiitaとか見ながらチャットボット勉強

Slide 11

Slide 11 text

AzureでAIチャットボット作ってみる「QnAMaker」っていうFAQボット用のAIとつないで超簡単に作ります

Slide 12

Slide 12 text

Azureアカウント • 必要なもの • クレジットカード • Microsoftアカウント（無料で1分で作れる）

Slide 13

Slide 13 text

Azureログイン（https://portal.azure.com） • ダッシュボード • 無料アカウントで 22,500円使い切っても課金されない • 無料アカウントから有償アカウントへの切り替えすれば従量課金アカウントになる • ゲストユーザ招待して複数メンバーでも利用可

Slide 14

Slide 14 text

Azureで何する？ • Azure FunctionsBot • サーバレスのリソースの中にチャットボットフレームワークが用意されている。言語C#かNode.jsが対応されてる。 • QnAMaker • FAQ（よくある質問と回答データ）を登録するだけで簡単にFAQボットが作れる自然言語のゆらぎに対応したAI。学習させるとさらに賢くなる（はず）

Slide 15

Slide 15 text

QnAMakerリソース作る • 検索して

Slide 16

Slide 16 text

• 適当に設定して（プランは無料選んで） • 作成クリックして数分待つ • デプロイ成功

Slide 17

Slide 17 text

QnAMakerにデータ入れる（https://www.qnamaker.ai ） • [Create a knowledge base]から新規作成 • さっき作ったリソース指定 • よくある質問集のURLを指定 • 自動的にURL先から質問と回答データ判定して登録（ただ日本語まだ苦手）

Slide 18

Slide 18 text

QnAMaker登録でけた • URLだけで自動抽出して登録する機能、便利ね。

Slide 19

Slide 19 text

QnAMakerテスト • 登録されたFAQの文言の表現をちょっと変えてみても回答してくれる。 • 日本語もっと頑張れ。

Slide 20

Slide 20 text

QnAMaker公開 • [PUBLISH]クリックして公開 • キーとか表示されるんでメモ ( ..)φメモメモ

Slide 21

Slide 21 text

FunctionsBotリソース作る • FunctionsBot作成 • プログラムテンプレート選択で「Node.js」選択 • 「Question and Answer」選択 • 数分でデプロイ完了

Slide 22

Slide 22 text

QnAmakerとつなぐ • アプリケーション設定でさっきメモしたキーなどコピペ

Slide 23

Slide 23 text

チャットから使ってみる • 用意されたチャンネルなら簡単につなげる • なくても「DirectLine」でアダプタを作ればつなげられる（LINEとか）

Slide 24

Slide 24 text

Skype / Teams / Skype for Business 接続が簡単に

Slide 25

Slide 25 text

Web埋め込み型のチャットボット設置

Slide 26

Slide 26 text

ブラウザ上に開発エディターもあるのでちょっとした開発ならここでOK

Slide 27

Slide 27 text

ブラウザ上に開発エディターもあるのでちょっとした開発ならここでOK

Slide 28

Slide 28 text

私はローカルに落としてVS Codeで開発してます • もっと他にもいい開発環境方法あるよ！って方知ってたら教えてください。（私Azureではほぼぼっち開発者）

Slide 29

Slide 29 text

ね？簡単でしょ？是非皆さんも作ってみてください♪ って話をするはずだった

Slide 30

Slide 30 text

一昨日（6/18）の話 • さてそろそろLTの準備しようと思って Node.jsでボット作ってみたら… うんともすんとも動かず。。 • ログ見ても何も残っておらず。

Slide 31

Slide 31 text

まただ… • 何か始めると高確率でバグを引く • コミュニティ見てもあがっておらず。 • え？この機能使ってるの世界中で私だけじゃないか？って思ってしまうほどの標準的な所。 • サポート問合せするとやっぱりいつも報告1人目。 • 確かにAzureのサーバレス（FunctionsBot）でボット開発してる人はグローバルでもあまりいないっぽい。皆PaaS（WebApps）で作ってる。

Slide 32

Slide 32 text

なぜ直らないのだ。 • 今回のはまだいい。LT 向けだし。 • 実際の案件でぼっち開発してる時こういうのにぶち当たるとけっこうツライ。 • 公開されて結構経ってるリソースにも不具合結構ある。

Slide 33

Slide 33 text

そう。たぶんこういう状態。

Slide 34

Slide 34 text

さっそくサポートに報告 • 3,000円～/月 • Azureサポートめっちゃいい • マジオススメ。 • 数えてみたら200件/ 年以上チケット切ってた。すげえ私。

Slide 35

Slide 35 text

バグじゃなくて改善依頼とかならコミュニティに上げる • こんな機能あったらいいな！などはコミュニティ（ https://cognitive.uservoice.com/ ）にあげる。 • （私含めて）英語苦手な人や日本語特有のフィードバックはサポートに手伝ってもらってあげることもできる（と思う）。 • 日本人でフィードバック上げる人ほとんどいない…

Slide 36

Slide 36 text

Azureサポートエンジニア、とても優秀です。 • 緊急度や優先度をヒアリングし、とても理解ある対応してくれる。 • 問合せした当日の夜には暫定対処方法の回答くれた。 • 今日の朝（問合せ2日後）にはバグ直してくれた。 • いい人多い。

Slide 37

Slide 37 text

つまり消防車は呼べば来る。

Slide 38

Slide 38 text

まとめ • Azureサーバレスでチャットボット簡単に作れるよ♪ • 皆も作ろうよ！ • 使っていて見つけたバグやフィードバックはサポートやコミュニティに報告しよう！（サポート契約ないなら私に共有して再現できたら報告あげますよ！）