フロントエンドの地獄

みせてやりますよ。本当の地獄ってやつをね。

#Webサービス分解 「Peing-質問箱-」の分解

こんばんはワタナベです。

Webサービス大好き芸人の私は新しいWebサービスやアプリを見かけると「このサービスのこの機能はこういう技術で実現しているんじゃないかな」とサービスの機能の因数分解をするのが好きなんですが、それをある程度まとまった形にしてみようと思い書き始めました。

あとチャーリーさん#ビジネスモデル図解シリーズを見ていて、同じ様にシリーズ化してみたら面白いんじゃないかと思いまして、好評だったら #Webサービス分解 シリーズとして他のも書いてみます。

Peing - 質問箱 - ってどんなサービス?

まずは第一回としてとりあげるWebサービスは皆さんご存知質問箱から行ってみようと思います。

質問箱は せせりさん が半日くらいで作って話題になり、そのままユーザーを増やしつづけあっという間に 株式会社ジラフ に売却されたことで更に話題となりました。

それ以前にあった類似サービスとしてsarahahやask.fmやお題箱などがありました。基本的にシステムは「Twitterに特化したSarahah」として誕生したのが質問箱です。

サービス内容

  1. Twitterアカウントかメールアドレスでログイン(今は他のSNSも対応)し、
  2. ユーザー固有の質問募集ページがサイト上に作られます。
  3. そのページには他のユーザーが匿名で質問を投稿することができ、
  4. 質問の解答時には質問の内容が記載された画像とともに解答をツイートする事ができます。
  5. 嫌な質問があった場合には投稿した人をブロックすることも出来ます。
  6. 質問が来たら登録しているメールアドレス通知が来ます。

サービスの特徴

SNSで質問を募集・解答するサービスは他にもありましたが、特にTwitterでは文字数制限があり140字では質問と解答を両方含めることが難しく、サービス内ですべての文章を完結させるのが基本でした(ask.fmなど)

しかしSarahahおよび質問箱では「質問内容を画像にして」回答をツイートとともに投稿することでその問題を解決しました。

主な技術

Ruby on Rails を conohaVPS で動作させて 画像は AmazonS3 メールは SendGridで送信という形で開発と、作者のせせりさんはつぶやいていました。

今は運営がジラフに変わったため大きく変わっている可能性が高いです。多言語対応などもされているようです。

質問内容を画像にする技術

まず特徴の一つである「質問内容を画像化する」のは ImageMagick という画像処理ソフトを Rubyというプログラミング言語で動作させるための RMagick を利用して画像を生成していると思われます。

このソフトを利用して 質問が投稿されたら予め決めておいたフォーマットにそって文言の入った画像をawsのs3などのストレージサービスに格納しておきます。

↓こんな感じの画像ですね。 f:id:tatsuaki_w:20180504003753p:plain

これによって文字数問題は解決されましたが、その画像を添付してつぶやく利用者が増えてくると「質問箱で画像がたくさん流れてきてウザい」「Twitterのメディア欄が埋まるのが嫌」という要望がつぶやかれるようになってきました。

それを解決するしたのがOGPという仕組みです。

URLをつぶやいた際に指定した画像を表示する技術

TwitterやFacebookではURLをつぶやいた際に、そのサイトで設定された画像を表示するOGPという仕組みがあります。

↓こんなの

この機能を利用して、質問固有のURLに応じて予め作成してあった質問のテキストが入った画像をOGP画像として指定しておくことで、画像を添付してつぶやく事無くTwitterのタイムライン上で質問の内容が確認することが出来るようになりました。

OGPはそのURLにアクセスした際にmetaの内容に表示したい画像のURLを入れておくことで表示が可能になります。

嫌な質問があった場合には投稿した人をブロック

質問が匿名で行えることから、悪口を書かれるという懸念があります。そこで、質問箱には悪意のある質問があった場合にはその人をブロックする機能があります。

しかし匿名でTwitterログインもしてないのにどうやってブロックしているのでしょうか。

質問箱ではIPアドレスを利用して質問者をブロックしています。

IPアドレスはスマホなどの通信機器一つ一つに割り当てられた、インターネット上の住所のようなもので、どんなWebサイトも閲覧している機器のIPアドレスを調べる事ができます。

IPアドレスだけではざっくりとした住所がわかるだけで個人を特定することは難しいですが、例えば殺人予告など明らかに犯罪になるような内容が記載されていた場合にはそのIPアドレスを発行しているプロバイダ(Docomo等)に「裁判のためにそのユーザーの情報開示を請求する」ことなども出来ます。(みなさんネットの世界に匿名なんてないようなものなのですよ)

↑という様な事を分かるように掲示しておくだけで悪意のある質問が来ないように啓蒙するのが主たる目的だとは思いますが、これによって嫌な質問をするIPアドレスのユーザーから質問が来ても、システム側でそれを質問として追加しないように出来ます。

後発の類似サービスであるマシュマロではAIを利用して悪意のある質問を初めから除外することでユーザー数を伸ばしているようです。

質問がきたらユーザーにメールで通知

こちらですが、メールアドレスを登録しておくことで質問箱からメールが飛んできます。

システムと連携してメールを飛ばすサービスは幾つかありますが、質問箱の開発時にせせりさんはSendgridを利用しているとつぶやいていました。

sendgrid.kke.co.jp

Sendgridを利用することで、質問箱に質問が来た時には「このユーザーにこういう質問がきたという内容のメールを送って」と連携しておくことでメールを送信する事ができます。

まとめ

以上質問箱のサービス分解でした。

Webサービス開発が本業の方には当たり前の内容だとは思いますが、初心者は「こういうのやりたいけど名前もわからないしググれない」ということがあると思い、名称などできるだけ具体的に記載しました。

もしこういうサービスの中身どうやって作ってるのか知りたい!ということがあれば私のTwitterまでお知らせください。

twitter.com

最後まで読んでいただきありがとうございました。気に入ったらぜひぜひブックマークやツイートをお願いします。