いやいや、久しぶりにゴリッとしたウェブサービス作っちゃいましたよ！

最近ちょこちょこ話題になってる「チャットボット」、なんとなく耳にしたことあるって方も多いんじゃないでしょうか。

今年の4月にはLINEが公式BOT APIを公開したり、はたまたFacebookがMessenger向けチャットボット用プラットフォームを発表したりなど、界隈がにわかに盛り上がって参りました。

そいつは面白そうだ、やれどんなボットがあるんだい？ → チャットボットのポータルサイト的なのが未だあんまり世に無くて見つけにくい → ひょっとして、こいつは宝の種やないか？！？！

と、そんな感じでせっせこ作ってみました。

その名も「BotDept」、つまりボットのデパートや！！

とゆーワケで、ちゃらっとご紹介しちゃいましょー！！

チャットボット専門プラットフォーム「BotDept」

「BotDept」とは

「BotDept」とは、今後ますます重要性が高まってくるであろう「チャットボット」の専門プラットフォームであります！

で、プラットフォームと銘打ってはいるんですが、全部載せだと制作工数が半端無くなっちゃうので、先んじてディレクトリサービスを提供しています。

ユーザーさんは自分が作ったボットや、掲載したいボットの情報を投稿してみたり、はたまたカテゴリーやプラットフォーム(LINEやらFB Messengerやらkikやら)から面白そうなボットを検索してみたり。

今後は国内外のボット情報を扱うキュレーションメディアとか、ボット制作者同士のコミュニティやらマッチングやら、そんなとこも手を伸ばしていけたらいいなと思ってます。

制作過程

きっかけは愛読してる THE BRIDGE さんの「ついにこんなサービスも登場か、ボット上で広告を配信する BotRevenue.com - THE BRIDGE（ザ・ブリッジ）」という記事。

ほほーボットもなかなか盛り上がってきてるじゃねーの、そういやLINEもチャットボットAPI公開してたっけな、最近はSlackも人気だし、いよいよボットくるんじゃねーの？

そんなことを思いながら、上記記事にちょこっと載ってた「BotFamily」ってのを覗いてみたら、なんともシンプルなボットディレクトリサービスで。

そーいやLINEのボットAPIが出た時に、作ってみました系の記事がけっこうあったけど、それってどっかでまとまってたりするのかな → 見つからない → よし作るか！

思い立ったので新しいウェブサービスを作り出してみる at 20:35

— smkn (@smkn) 2016年5月10日

ちょうど仕事もガラ空きウィークだったこともあって、２～３週間で完成・公開を目標にしてさっそく着手。

まずは競合検索、サイトマップ概案、ドメイン探しから

— smkn (@smkn) 2016年5月10日

こっから検索して思案して、たまに仕事して、おおよそのコンテンツ内容とデザインイメージを固めていきます。

案を練りながら、使えそうなライブラリとか導入したい機能とか競合サイト同士の共通項とか、いろいろストックしておくのも忘れずに。

１週間位して、トップページとボット紹介ページのデザインがなんとなく完成したので、HTML/CSSコーディングの段に進行。

さて、コーディングしますかね(^o^)

— smkn (@smkn) 2016年5月21日

コーディングができたら、いよいよシステム周りの制作に。

まずはデータベース構造をしっかり考えて、テーブルを作っていきます。

今回の場合はざっくりと分ければユーザー情報・ボット情報の２テーブルですが、ボット情報用のカテゴリーリストとかプラットフォームリストも別枠でデータベースに置いて、ボットに対するレビュー用のテーブルも用意。

あとはもうゴリゴリと書いていくべし！自作テンプレートと自作スニペットを最大限活用して、たまにそれをリファクタリングしたりして、ガンガン書いていきます。

そんなこんなでほぼほぼ完成したのが6月14日前後。

とりまできたーーーーーー”！”””！！！！！！

続きまして公開に先立つ下準備など。
。。。の前に、ねるるzzz

— smkn (@smkn) 2016年6月14日

目標にした２～３週間には及ばなかったものの、モチベーションが下がり始める前に完成出来ましたよ！

それからプレスリリース用の文章考えたり、細かい挙動確認して気になる箇所を直したり、宣伝先のピックアップしたりして、ついに本日お披露目となったのでした！

おめでとー！ありがとー！！

なんかバグとか見つかりましたら、こっそり教えて下さい m(_ _)m

技術詳細

技術系ブログらしく、導入したライブラリやら作業内容をちょこっと。

まず、oAuth認証(SNSログイン)周りは、愛用の「HybridAuth」を使って実装しています。

ログインの対象サイトは王道の Facebook、Twitter の他、ターゲット層も考えて Slack と GitHub も用意しました。

これがちょっとクセモノで、王道側の情報はいっぱいあるんですけど、Slack とか GitHub の認証を導入する具体的な記載方法が見つからなくて。

紆余曲折の末、ついに実装できたのが下記記述です。

/*
 hybidauth/config.php
 */
return
	array(
		"base_url" => "http://xxxxxxxx/path/to/hybridauth/",
		"providers" => array(
			"Facebook" => array(
				"enabled" => true,
				"keys" => array("id" => "xxxxxxxx", "secret" => "xxxxxxxx"),
				"scope" => "email",
			),
			"Twitter" => array(
				"enabled" => true,
				"keys" => array("key" => "xxxxxxxx", "secret" => "xxxxxxxx"),
			),
			"Slack" => array(
				"enabled" => true,
				"keys" => array("id" => "xxxxxxxx", "secret" => "xxxxxxxx"),
				"wrapper" => array("path" => __DIR__."/Hybrid/Providers/Slack.php", "class" => "Hybrid_Providers_Slack"),
				"scope" => "users:read",
			),
			"Github" => array(
				"enabled" => true,
				"keys" => array("id" => "xxxxxxxx", "secret" => "xxxxxxxx"),
				"wrapper" => array("path" => __DIR__."/Hybrid/Providers/GitHub.php", "class" => "Hybrid_Providers_GitHub"),
			),

wrapper はこのまんまで大丈夫かと思いますが、id / secret はそれぞれのサイトで取得した client_id / client_secret なんかを記載してくださいね。

あと、jQueryのポップアップ系プラグインで「Magnific Popup」ってのを初めて使ってみました。

いつもは colorbox ってヤツを愛用してたんですが、ポップアップの背景とかに画像ファイルを使うのがどうしても気になって、なんかいいのないかなーと探してたところ見つかったのがコレで。

特に珍しい機能もなく、ただただシンプルなポップアッププラグインですが、逆にそれが良い感じなので、今後は多分コレメインで使っていくと思います。

おまけ

今後はパートナー企業とか、個人でも興味持ってくれる方がいらっしゃれば、例えば外部のチャットボット制作サービスとの連携とか、ボット制作者同士のマッチング機能、企業とのタイアップなどなそ、さまざまな共同事業をやっていきたいなと。

興味をお持ちになられる企業様・事業者様がいらっしゃいましたら、ぜひぜひご一報くださいな☆

一緒にボットという金鉱のリーバイスになろうぜ！！

BotDept - The favorite bots department.