LANG SELRCT

コードを書く場所についてはこちら

2017年10月21日土曜日

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



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

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

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をたたく



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

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





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

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

結論から言うと、リファレンスのコードの末尾の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 と書くと

この絵文字が出る
2つのコードに共通しているのは末尾の 84
LINE独自の絵文字の表を見ると、末尾の2桁以外は全部同じ
ということは、末尾の2桁だけ入れ替えれば良いだけか

というわけでやってみました

この絵文字を表示できるか試してみます


\uDBC0\uDC84 の末尾2桁を、78にして

"text": "\uDBC0\uDC78 LINE emoji" にすると


できた!

変換するとかコードの意味とか難しく深く考え過ぎて、余計な時間を使ってしまいましたが、末尾2桁を変えるだけで対応する絵文字を表示することができました