「粗大ごみ受付Bot」開発の舞台裏
LINE・さくらインターネット・オルターブースが語る技術スタック

粗大ごみ受付Botの解剖 #2/2

2018年10月3日、LINE Fukuokaのオフィスにて「LINE API Developers Meetup in Fukuoka」が開催されました。今回のテーマは、「Bot開発技術を極めたいエンジニア大集合!  福岡市粗大ごみ受付Botを大解剖」。福岡市、LINE株式会社、LINE Fukuoka株式会社、株式会社オルターブース、さくらインターネット株式会社の協業により9月19日にリリースされた「福岡市粗大ごみ受付(@fukuokacity_sdg)」LINE公式アカウントの開発秘話と技術的裏側について、開発者たちがすべてを語ります。トークセッション「粗大ごみ受付Botの解剖」に登壇したのは、LINE株式会社中嶋一樹氏。粗大ごみ受付Botの開発にまつわるキーパーソンたちを招き、開発の舞台裏を語ります。後半の本パートでは、LINE株式会社の中嶋一樹氏が、粗大ごみ受付Botに使用された自然言語理解技術やHeadless Chromeの活用法を解説。また、ともに開発を行った株式会社オルターブース、さくらインターネット株式会社の2社が、本プロジェクトでの役割について語りました。
提供:LINE株式会社

チャットボットがもたらすもの

中嶋一樹氏(以下、中嶋):もう1つは、見た目の部分ではなくて、機能的な部分でのユーザーエクスペリエンスです。ちなみにニュースで出た時にけっこう「AIによる粗大ごみの受付が……」とニュースキャスターの方がよく言ってらしたのですが、先ほどのデモを見るかぎり「AIってどこにあるのかな?」と思われる方もいらっしゃると思うんですね。

実はこのチャットボットは、パネルをタップしなくても、ちゃんとユーザーが言ったリクエストを理解するように設定されています。

もう一度デモに戻ってそれを確かめてみようと思います。とあるユーザーからのフィードバックとしてあったのが、「チャットボットを作ってLINEから申請できるのはわかるけど、これ電話したほうが早いんじゃないか?」と言われたことがあります。

それはなぜかというと、その人はベビーベッドを出したいと思っていたのですが、そのベビーベッドを出すということをリストから選ばなきゃいけないじゃないかと。「電話したら電話口の人に『ベビーベッド出したいんですけど』と言ったらそれで終わるのに、自分で探さなきゃいけないのは面倒くさい」とおっしゃっていて、なるほどなと思いました。「ただ、こういうやり方もあるんだよ」とお伝えしたのがこれです。

先ほどまでは、パネルをタップするとその機能を開始できると紹介しましたが、そこではなくて、普通にキーボードで「扇風機を捨てたいのですが」と言っていただくと、「粗大ごみの申し込みですね。少々お待ちください」「扇風機の個数を選択してください」というかたちで、「これは粗大ごみの受付なんだ」ということと「ごみが扇風機だ」ということをちゃんと理解してくれています。

これは決まった言い方があるわけではありません。アプリケーションには決まった使い方がありますが、チャットボットの場合は、決まった使い方があるわけではなくて、自分の意思を伝えることによってチャットボットを動かすことができるようになっています。

なので、先ほどは「扇風機を捨てたいんですが」と言いましたが、例えばこの表現を変えて「粗大ごみで換気扇を出したい」と言っても、このように「換気扇の個数を選択してください」とちゃんと意図を理解してくれて、さらにその中の「粗大ごみ」というエンティティをちゃんと抽出してくれるようになっています。

これで同じように個数を選択していけば、それで進んでいけるわけなんですね。なので、これならわざわざリストから選ぶ必要もなく、電話口でオペレーターに話すのと同じような感覚で伝えていただければ、それでOKかなと思います。

ここ、先ほど「キャンセル」と言いましたが、例えば「やっぱやめておきます」と言っても、「了解しました。では、キャンセルします」と返答します。キャンセルするのも「キャンセル」という言葉で認識しているわけではなくて、その意味合いを理解してちゃんと判断しています。

そういった意味で、個人的にチャットボットをおもしろいなと思い、ここ2〜3年開発を続けているんですが、これは従来のアプリケーションとは完全に異なるパラダイムだと思うんです。

アプリケーションは、あくまでもユーザーが使い方を覚えて使っていくものだったと思うんですが、チャットボットの場合は、ユーザーが使い方を覚えるのではなく、チャットボットがユーザーが言っていることを理解して学習していくことによって機能を提供するものです。

ユーザーのリテラシーが高くても低くてもこのシステムに対してアクセスを提供できるという点で、チャットボットはこれまでのアプリケーションの概念を大きく覆せる可能性があるんじゃないかなと思っております。なので、この自然言語解析の部分はすごくこれから伸びてくる分野ではないかと思います。

チャットボットの構成とスキル

中嶋:あと、ここはサラッと流しますが、スキルですね。これは従来のアプリケーションにおける機能や仕様といった部分ですが、チャットボットの場合はちょっと擬人化して表現することが多いので、その機能を「スキル」と表現します。

今回のチャットボットの場合は、当然ながらそのスキルは「粗大ごみの申請」になるんですが、実際にはそれをキャンセルするスキルなど、いくつかのスキルが備わっています。

そのなかで、構成としてはこんな感じになっています。

ユーザーはLINEとコミュニケーションをとっています。Chatbotの本体はWebサーバになっていて、それがLINEからのリクエストを受け付けて適切に処理を行っています。

ただ、いろんなコンポーネントと連携しながらその機能を提供しています。例えば、自然言語解析といったエリアではDialogflowというサービスを利用していますが、そういったサービスに連携してユーザーがなにを言っているのか判定したり。

あるいは、これはただのデータベースですが、ユーザーの情報を記録しておいたり、あるいは申し込みのWebフォームなどを一つひとつプラグインすることによって、チャットボットを最終的には成立させています。

ただ、チャットボットのコーディングは正直難しいです。アプリケーションであれば、そのフィールドにはなにが入っているのかが決まっているのでエラーを出すのは簡単なんですが、チャットボットの場合は、数を聞いているのに「キャンセル」と言ってこられることもあるわけです。かなり柔軟に対応しなければいけないので、コーディングの難易度は低くありません。

Headless Chromeを採用した理由

中嶋:ただ、その部分をできるかぎりすっきり開発するために、今回は開発フレームワークを使っています。その中で連携のパターンとしては、Dialogflowでいったんこのユーザーがなにをしたいのかを判定してから、その判定した結果に応じて、どのスキルを使うかをフレームワーク側に教えてあげるようなかたちで組んでいます。

なので、開発者はスキルを開発するところにフォーカスして、今回の場合は1スキル1ファイルみたいなかたちでプログラムを作っていきました。

今回のチャットボットの中で、最も技術的にブレークスルーした部分は、このHeadless Chromeを使った部分だと思います。Headless Chromeを聞いたことがあるという方、どれぐらいいらっしゃいますか?

(会場挙手)

なるほど。20パーセントぐらいの方は聞いたことがあるようですね。Seleniumとかと同じような類のものだと思っていただければと思います。

ブラウザというのは、通常ブラウザを開いてGUIで操作するものだと思うんですが、Headless Chromeの場合は、実際には画面は開かずブラウジングするようなかたちになります。なんのためにそれが必要かというと、チャットボットのブラウザとしてこのHeadless Chromeを使っているんですね。

なぜそんなものを使っているかというと、現在インターネット受付というWebシステムがあって、申し込みデータを保存するデータベースが存在しています。

それに、今回チャットボットを追加するにあたり、チャットボットのWebサーバと、チャットボットから入力された申し込みを保存するデータベースが当然必要になるであろうと。

最終的にはごみの業者さんが(粗大ごみの)収集にうかがうわけなので、そこにデータを集めなければいけません。なので、データを連携させる必要があったんですけれども、これはかなり難しいんですよね。

とくに自治体のシステムにおいて、外から穴を開けるであるとか、データを連携するであるとか、APIを作るであるとか、そういったことはかなり難しい話になります。なので、このプロジェクトもそこで頓挫しそうになりました。

家庭ごみの分別機能はいくつかの自治体でLINE経由で使えるものがありますが、この粗大ごみの受付は全国でここが初めてなんです。ですがこの部分がすごくハードルが高いわけです。

とくに今回の場合、個人情報も一緒に入れなければいけないので、それをどこに置くかという問題で、だいたいのプロジェクトは頓挫してしまうんだろうなと思います。

今回の場合はデータベースを置かないという選択をとりました。つまりこのチャットボットに、いまあるインターネット受付のWebフォームから、普通にユーザーが入力するみたいに入力させるということを行ったんです。

そうすることによって、裏側の人は普通にインターネット受付から入力されたデータだと思うので、いままでの運用フローをまったく変えなくていいというかたちになります。なので、このプロジェクトがスタートすることができました。

ただ、この部分は作る側はかなり面倒くさいので、作る側としてはあんまりやりたくはありませんが、ただ、このWebフォームに連携する、要はAPIではなくてWebフォームに連携するのが発想の転換だったんじゃないかと思います。

Headless Chromeを採用した図書館の事例

中嶋:これは福岡市ではなく、ほかのテストで作っていた「目黒区の図書館で本を予約する」というテストの仕組みなんですが、それがどのように動くのかは見ていただければおわかりになると思います。

チャットボットで「火花 又吉」とやると本が検索できるわけなんですけれども、「火花を選択」すると、『火花』は現在貸出中でした。「予約する」というボタンを押したら、そのあとWebブラウザが立ち上がったと思います。

これは私が入力しているわけではないんですが、チャットボットがまさにいま入力しているんですね。この入力が完了して予約できたら、LINEのほうに「予約しましたよ」というメッセージが来る仕組みになっています。

当然Webでもできるんです。Webで予約すればいい話なんですけれども、いま見ていただいたとおり、かなり多くのステップがあります。それを、LINEでただ「予約する」というボタンを押しただけで、Webでやっていた作業を全部行うことができるようなかたちになります。なので、作るのはちょっと大変なんですが、こんなやり方もあるのではないかという1つのアイデアになります。

Headless Chromeを使う上での留意点

中嶋:ただ、当然ながらこのHeadless Chromeを使う場合はいくつか留意点があります。当然ながらHTMLの構造にかなり深く依存しますので、サイトのWebフォームの構成が変更されると動かなくなる可能性が多々あります。とくに個々のフィールドをCSS Selectorで選択しているので、そこが変わってしまうとやっかいです。

あと、Headless Chromeを中で立ち上げますので、非常にメモリを消費します。1ユーザーあたり20MByteぐらい消費するので、システムによってはまったく適用できない構成だと思います。

ただ、粗大ごみの受付の場合はもともと全体の数を見てもそこまでの流量であるわけではなかったので、それを計算していくと「これぐらいのサーバであればいけるな」というところにあたりをつけて、システム構成を組んでいきました。

なので、通常であればチャットボットはPaaSを利用することが多いですが、今回はいわゆるIaaSの上にVMを立てて、そのVMの中にしっかりとシステムを構成していきました。

ただ、私が担当したのはあくまでBotのアプリケーション構造の部分で、インフラの部分はさくらインターネットさんとオルターブースさんに完全にお任せをして作っていただきました。

このメモリ消費の部分があったからこそ、そのシステムが必要になったんですが、それがどんな構成であったのか、さくらインターネットさんとオルターブースさんからお話をいただければと思います。

では、さくらインターネットの横田さんと櫻井さんからシステムについてお話をいただければと思います。

(会場拍手)

さくらインターネット福岡オフィスの活動

横田真俊氏(以下、横田):残りあと8分で我々2社、がんばりましょう(笑)。「さくらのクラウドについて」ということでお話しさせていただきたいと思います。どうもおつかれさまです。横田と申します。さくらインターネットのエバンジェリストやっております。

櫻井裕氏(以下、櫻井):さくらインターネットの福岡オフィスの責任者の櫻井と申します。よろしくお願いします。

横田:では、パッパといきましょう。さくらインターネットのご紹介ですね。みなさん、さくらインターネットご存じの方いらっしゃいますかね?

(会場挙手)

ありがとうございます。じゃあ、飛ばします(笑)。

次に、さくらのインターネットサービスなんですが、今日の主役であるさくらのクラウドについてご紹介させていただきたいと思います。

いろいろありますが、最も大きな特徴はシンプルなクラウドであるところです。基本的に価格体系が非常にわかりやすくなっています。

また、いろいろなリージョンのデータセンターがあります。先日すこし話題になりました石狩にもデータセンターがございます。

というわけで、残りは福岡オフィスの紹介をお願いいたします。

櫻井:櫻井です。すいません、ビールを飲むペースを間違えて、だいぶ酔っ払ってるんですけど(笑)。

福岡オフィスは赤坂駅にオフィスを構えております。遊びに来ていただいた方もなかにはいらっしゃるんじゃないかなと思います。

「Growth Next」の運営にも携わらせていただいておりまして、そちらでもお世話になっている方は多いんじゃないかなと思います。

あとは、「メルチャリ」さんですね。私たちはサーバー屋なんですが実は鍵に内蔵されているSIMも出していまして、こんなかたちで関わらせていただいております。

今回はFukuoka AI Communityのご縁で携わらせていただきました。もともとオルターブースさんとはいろいろな案件でご一緒させていただいておりますので、勝手知ったるところというところで、楽しくプロジェクトに参加させていただきました。

以上です。ありがとうございます。

(会場拍手)

オルターブースの紹介

藤崎優氏(以下、藤崎):こんばんは。オルターブースと申します。オルターブース、知っている方いらっしゃいますか?

(会場挙手)

ありがとうございます。我々2015年から始まったまだまだ若い会社なのですが、これだけ知っていただけてうれしいです。

「Cloud Pointer」「KOSMISCH」といったサービスをやっています。そして、4月からさくらインターネットさんのパートナーにならせていただいております。

自己紹介です。株式会社オルターブースで業務執行役員COOをやっております藤崎と……。

加藤司氏(以下、加藤):私は、加藤司と言います。オルターブースの中ではテクニカルアーキテクトという立ち位置で、クラウドやアーキテクチャを設計する立場で仕事をさせていただいています。

藤崎:今日は、私のほうで簡単に会社の説明をさせていただいて、加藤から今回のチャットの基盤の話をさせていただきます。会社の説明はさらっとさせていただきます。

「KOSMISCH」というMicroserviceのIntegrationサービスと、「Cloud Pointer」という。「Azure専門の」と書いているんですが、さくらのクラウドのほうもやらせていただいております。

あとは、「マイソースファクトリー」というドレッシングや調味料を1本から受注生産するサービスをやっております。1本からお買い上げできるのでぜひお願いいたします。

あと、このロゴはなんだと思いますか?

とても会社のロゴとは思えないと思うのですが、私いま着てるTシャツも実は「alterbooth」と書いてます。会社の公式Tシャツでございます。Alternative Architecture DOJO、Alternative Architectur……言えてないです(笑)。

というのを、10月からテックブログとリアルイベントとして始めていきます。第0回が10月23日に、東京、株式会社ISAOさんで開催します。11月に福岡でもやる予定がございますので、ぜひオルターブースのcompassをご覧になってください。

ここからチャットボットフォームの基盤について、加藤にお願いしたいと思います。

インフラの構成

加藤:はい。今日はチャットボットということなので、アプリケーション開発者の方の属性が多いのかなと思うんですが、「実はインフラをやっていますよ」という方はどのぐらいいらっしゃいますか?

(会場挙手)

少ない。片手で数えられるぐらいしかいらっしゃらないですね(笑)。なので、軽くサラッといきたいと思います。

実際いま中嶋さんのほうから紹介のあったアプリケーションの実行基盤は、さくらのクラウドの上で構築しています。

全体的には、赤っぽい枠で囲んでいる「External Network」に、ロードバランサー、サーバを2つ用意しまして、そこにモニタリングも用意しています。下の「Internal Network」というところは、外につながらないようなネットワークのところに、アプリケーションのサーバとデータベースというかキャッシュですね、キャッシュのサーバを置いていて、そこでアプリケーションの実行とデータのキャッシュをするようなかたちで構成しております。

さくらのクラウドの機能でWebのモニタリングの機能もありますので、そこで死活監視をやっていたり、仮想マシン自体のバックアップ機能がございますので、そこで構成を組んでいます。

さくらインターネットを使用する利点

加藤:さくらインターネットで使ってみてよかった点です。

データ転送量による従量課金は、普通のパブリッククラウドを使うと気になるところだと思います。AWSやAzure、GCPなどを使うとかなり費用がかさむところですが、実はさくらさん課金なしなんですね。なので、大量のデータを扱うときはけっこう費用が抑えられるので、使ってよかったなというところですね。

あとは、OSのイメージなんですけど、これも同じくパブリッククラウドだと決まったイメージを使うことが多いですが、さくらさん実はISOから持ち込みできて自分の好きなサーバを構築できるので、柔軟な構成で組むことができます。

また、国産クラウドなので、日本語のドキュメントがしっかりしていますし、サポートも日本人がちゃんと対応してくれますので、海外のサービスよりは日本語にも対応しています。

あと、今回の構成でちょっとできていないところとかもあるんですが、ログの監視の実装はちゃんとできていないので、そこは改善していきたいなと思っています。あとは、統計情報の取得も現状手動でやっているので、そこも近々改善する予定です。あとは、ロードバランサーのセッションの管理ももうちょっと改善していきたいなと思ったりしています。

あとは、より管理しやすい構成の検討です。いまは実証実験なので、実際にチャットが動き出すときにはもうちょっと管理のしやすい構成が必要かなと思っています。というところでご紹介を終わらせていただきたいと思います。

ともに開発するパートナーを探して

中嶋:ありがとうございました。前半の話はこれで終了です。1つだけお伝えしておきたいのは、今日こういった勉強会をさせていただいているのは、純粋に勉強会という目的が1つと、もう1つは、これから一緒にこういった開発をしていただける同志を探しているというところがあります。

1つは、そんなLINEで一緒に働きたいというリクルーティングの観点もありますが、もう1つは、開発のパートナーとして、こういった粗大ごみだけではなくて、これから我々は福岡市でもっといろんなものを便利にしていきたいと思っています。そういうものを一緒に開発したいと思っていただけるような開発パートナーの方々を常に探しています。

なので、今日のお話を聞いていただいて、もし「うちに任せろ」というところがあれば、ネットワーキングの際にお話しできればと思います。ぜひそのつもりでよろしくお願いいたします。

Occurred on , Published at

このログの連載記事

1 LINEが明かす、福岡市「粗大ごみ受付Bot」の仕組み 快適なUXを実現するために工夫したこと
2 「粗大ごみ受付Bot」開発の舞台裏 LINE・さくらインターネット・オルターブースが語る技術スタック

スピーカー

関連タグ

人気ログ

ピックアップ

編集部のオススメ

ログミーTechをフォローして最新情報をチェックしよう!

人気ログ

ピックアップ

編集部のオススメ

そのイベント、ログしないなんて
もったいない!

苦労して企画や集客したイベント「その場限り」になっていませんか?