FaceMashってなに？

マーク・ザッカーバーグが大学時代に作った画像格付けサイトのことで二人の女の子の写真を見てどっちが可愛いか投票するというもの

利用サービス

サービスは下記のものを使用
1. Dropbox:画像の保存、参照
2. GoogleSpreadSheet:投票対象の情報の一覧と投票結果の保存
3. GoogleAppsScript:LINEbotからのWebhookを受けて処理を行う
4. LINEbot(LINEmessagingAPI):ユーザとのインターフェース

Dropbox

画像をアップロード後、共有ボタンを押してリンクを作成すると
https://www.dropbox.com/s/XXXXXXXXXXXXX/ファイル名?dl=0
のようなリンクが作成されます

このままではうまくリンクが貼れないので
・www.dropbox.comをdl.dropboxusercontent.comに書き換え
・?dl=0を削除して

https://dl.dropboxusercontent.com/s/XXXXXXXXXXXXX/ファイル名
という形にします、これはあとでLINEmessagingAPIで画像リンクとして使います

GoogleSpreadSheet

対象の情報をシートに記載します
フォーマットは

名前	ニックネーム	年齢	画像リンク
田中	たなかっち	20	https://XXX
鈴木	ズッキー	30	https://XXX
佐藤	さとちゃん	20	https://XXX

にしておきます
選択肢に出てきた時は出現数をインクリメントし、2択で選ばれた場合は票数がインクリメントされるようにします
票数/出現数=美女率ということで100%に近いほどかわいいということにします

また、スプレッドシートIDをGoogleAppsScriptで使用するのでリンクの共有からURLを取得しid=以降を控えておきましょう
https://drive.google.com/open?id=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

GoogleAppsScript

まずはGoogleAppsScript(以下GAS)の作成から行います。
Googleのマイドライブから
新規→その他→GASを選択しファイルを作成します。
(その他のところにGASがない場合はアプリの追加から追加しましょう)

エディタ画面になったら下記の関数を作成します

linebot.gs

function doPost(e) {
  var posted_json = JSON.parse(e.postData.contents);
  var events = posted_json.events;
  /*ここに処理を追加していく*/
}

このeventsの中にLINEサーバから送られてくるデータが入っています
詳細はLINEAPIのReferenceをご確認ください

LINEからメッセージを受けたら返信メッセージを作成しましょう
返信メッセージは2択の投票形式にしたいので
メッセージの形式をTemplate messageのCarouselにします。

linebot.gs

ret_msg =  {
        "type": "template",
        "template": {
          "type" : "carousel",
          "columns": [
            {
              "thumbnailImageUrl": "dropboxの画像リンク",
              "title": "Title欄(40文字まで)",
              "text": "text欄(60文字まで)",
              "actions": [{"type": "postback",
                          "label": "この娘にする!",
                          "data": "ボタンが押されたときにPOSTされるデータ",
                          "text": "投票しました。"}]
            },
            {
              "thumbnailImageUrl": "dropboxの画像リンク",
              "title": "Title欄(40文字まで)",
              "text": "text欄(60文字まで)",
              "actions": [{"type": "postback",
                          "label": "この娘にする!",
                          "data": "ボタンが押されたときにPOSTされるデータ",
                          "text": "投票しました"}]
            }
          ]
        },
        "altText": "代替テキスト"
      }
    }

thumbnailImageUrlはスプレッドシートの画像リンク列の値、titleやtext,actionsの中のdataは名前列やニックネーム列から取得します
スプレッドシートへのアクセスについては今回は省略します

返信用のメッセージができたら下記のような感じでLINEのサーバに返信します

linebot.gs

    var postData = {
      "replyToken" : event.replyToken,
      "messages" : [ret_msg]
    }
    var options = {
      "method" : "post",
      "headers" : {
        "Content-Type" : "application/json",
        "Authorization" : "Bearer " + "channel_access_token(後述)"
      },
      "payload" : JSON.stringify(postData)
    };
    var reply = UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply", options);

botへメッセージを送るときはLINEのアカウント管理画面からchannel_access_tokenを取得しておく必要があります
返信時にはreplyTokenが必要になりますがeventsのreplyTokenから引っ張ってきましょう

ここまでのコードだけでもFacemashのように楽しむことができますが集計しないと楽しみが半減してしまうので投票ボタンを押されたときの処理を追加しましょう

linebot.gs

    if("postback" in event){
      name = event.postback.data
      スプレッドシートの値をインクリメントする関数(name)
    }

投票ボタンが押されたときはactions.dataに設定しているデータが
event.postback.dataに格納されて送られてくるので好きなように扱ってください

ここまでができるとLINEの画面ではこのような感じ

スプレッドシートはこんな感じ

画像はこちらからお借りしています
https://pro.foto.ne.jp/free/product_info.php/cPath/21_28_70/products_id/113
https://pro.foto.ne.jp/free/product_info.php/cPath/21_28_70/products_id/4145

event.source.userIdにユーザIDが入っているので、ユーザ毎の傾向をとっても楽しいと思います

コードについてはgithubにあげる予定です
(アカウント作るところからなのでいつかやります)

2017/05/28
あげました

LINEbot

LINE Business Centerにログイン
MessagingAPIを始める、からアカウント(bot)を作成
LINE@MANAGERのBot設定からAPIを利用するを選択

LINE Business Centerのアカウントリストに戻り、LINE Developersの画面に
Basic information画面のEDITを押し、webhookの項目にGASのリンクを貼り付ける
VERIFYを押してSuccess.が出ればLINEbotとの接続は完了
Channel Access Tokenの値を先ほどGASのところで説明したところに貼り付けます

最後に

人の顔は勝手に使わないようにしましょう
うちのペットが一番！とかミスコンするんやで～ってときとかに使うといいと思います

LINEを使ってFacemashもどきを作った

FaceMashってなに？

利用サービス

Dropbox

GoogleSpreadSheet

GoogleAppsScript

LINEbot

最後に