Google Apps Script試行錯誤 Blog: LINE BOTで「LINEの絵文字」を使う

2017年10月21日土曜日

LINE BOTで「LINEの絵文字」を使う

LINE独自の絵文字を使えるようなので、テキストに追加してみましょう

公式リファレンスでここに書かれていることを実際にやってみます

LINE BOTをつくる方法はこちらの記事にまとめました

LINE BOTの作り方

以下は入力したテキストに絵文字を付けて返すBOTの例です
\uDBC0\uDCA9　で　0x1000A9の

が表示されます

コード.gs

var CHANNEL_ACCESS_TOKEN = "TOKEN"; 
 
function doPost(e) {
  var contents = e.postData.contents;
  var obj = JSON.parse(contents);
  var events = obj["events"];
  for (var i = 0; i < events.length; i++) {
    if (events[i].type == "message") {
      reply_message(events[i]);
    }
  }
}

function reply_message(e) {
  if (e.message.type == "text") {
    var reply_text = e.message.text;
    var postData = {
      "replyToken": e.replyToken,
      "messages": [{
        "type": "text",
        "text": reply_text + "\uDBC0\uDCA9"
      }]
    };
  }
  var options = {
    "method": "post",
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + CHANNEL_ACCESS_TOKEN
    },
    "payload": JSON.stringify(postData)
  };
  UrlFetchApp.fetch("https://api.line.me/v2/bot/message/reply", options);
}

意訳.gs

アクセストークンを設定する

この処理は以下を実行する
送信されたデータの内容を取得し
そのJSONをオブジェクトに変換し
eventsを取得する
eventsの数だけ以下を繰り返す
もしtypeがmessageなら
reply_messageに渡す




この処理は以下を実行する
もし受け取ったmessageのtypeがtextなら
reply_textに入れて
postDataに
replyTokenを設定し
messagesの
typeを設定し
textを絵文字のコードを付けて設定する



optionsに
methodを設定し
headersに
Content-Typeを設定し
Authorizationを設定し

payloadにはpostDataをJSONに変換したものを設定する

optionをつけてLINEのmessage reply APIをたたく

絵文字の使い方について調べました

使える絵文字の種類はこちらの表に載っています

LINE独自の絵文字

しかし、この表で対応しているコードをそのままコピー＆ペーストしても意図した絵文字は表示されません

もしかしたら同じところでハマってしまう人がいるかもしれないので、いくつか試した記録を残しておきます

結論から言うと、リファレンスのコードの末尾の2桁を変えるだけでよいです

ではまず、リファレンスの例を使って試してみます

"text": "\uDBC0\uDC84 LINE emoji"

上のリファレンスのコードで実際に送るとこうなります↓

しかし、この絵文字はLINE独自の絵文字の表で見るとこれです

\uDBC0\uDC84　と　0x100084　何やら違いますね（末尾の84は同じ）

試しに\uDBC0\uDC84　の部分を　0x100084にして送ってみるとこうなります
"text": "\uDBC0\uDC84 LINE emoji"
↓こうしてみる
"text": "0x100084 LINE emoji"

対応した絵文字は表示されず、そのまま表示されます

おそらく、0x100084　を　\uDBC0\uDC84に変換すればよさそう
…どうやって？

そもそもそれぞれのコードが何を意味しているのか
0x　とか　\u　ってなに？

「0xとは」でググってみると、0xは16進数の表記
こちらのサイトの説明が分かりやすかったです

16進数って何？
というのが気になる方はこれも同じサイトのこちらで説明してくれています

「\uとは」でググってみると、「\」はコンピュータ的に特殊な文字なので無視されて「u」の結果しか出てこない
「"\u"」にしてググってみるといろいろ出てきましたが、欲しい情報は見つからなかったのでこれは考えないことにして、この記事でやりたいことを実現する方法に立ち返ります

やりたいことは、「LINE独自の絵文字をBOTで使いたい」

0x100084　は　\uDBC0\uDC84　と書くと