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

# FaceMashってなに？
[マーク・ザッカーバーグ](https://ja.wikipedia.org/wiki/%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%BB%E3%82%B6%E3%83%83%E3%82%AB%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B0)が大学時代に作った画像格付けサイトのことで二人の女の子の写真を見てどっちが可愛いか投票するというもの

## 利用サービス
サービスは下記のものを使用
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
対象の情報をシートに記載します
フォーマットは

|票数|出現数|名前|ニックネーム|年齢|画像リンク|
|:--|:--|:--|:--|:--|:--|
| 0 | 0 | 田中 | たなかっち | 20 | https://XXX |
| 0 | 0 | 鈴木 | ズッキー | 30 | https://XXX |
| 0 | 0 | 佐藤 | さとちゃん | 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](https://devdocs.line.me/ja/)をご確認ください

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の画面ではこのような感じ
![2017-05-23 14.54.31.png](https://qiita-image-store.s3.amazonaws.com/0/169001/60813d30-1f6a-4b30-3457-84cd0332fbac.png)


スプレッドシートはこんな感じ
![qiita_spreadsheet.png](https://qiita-image-store.s3.amazonaws.com/0/169001/38fde563-4757-c1a6-c2fa-e5517d399bd0.png)

画像はこちらからお借りしています
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
[あげました](https://github.com/utsuki-protein/linebot_facemash)


## LINEbot
[LINE Business Center](https://business.line.me/ja/)にログイン
MessagingAPIを始める、からアカウント(bot)を作成
LINE@MANAGERのBot設定からAPIを利用するを選択

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


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