kintone에서 LINE에 게시

개요

요 전날 LINE 채널의 친구 등록 및 게시 정보를 kintone에 저장에서 LINE에 구독하고 친구 등록 및 게시 정보를 kintone에 저장하거나 AWS Lambda에서 회신 할 수있을 때까지 확인했습니다.
이번에는 kintone에서 LINE 채널을 친구 등록한 사람에게 개별적으로 메시지를 보내는 방법을 시도했습니다.

kintone 앱의 항목 추가

먼저 이전에 만든 LINE 친구 등록 및 게시 정보를 저장하는 kintone 앱에 LINE에 보내는 메시지에 대한 필드를 추가합니다.



필드 이름
유형
피드 코트 요소 ID


line 사용자 ID
문자열(1행)
lineUserId

일시
일시
lineDateTime

line 타입
문자열(1행)
lineType

라인 모드
문자열(1행)
lineMode

line 메시지
문자열(여러 줄)
lineMessage

(추가) 라인으로 보내는 메시지
문자열(여러 줄)
sendMessage

(추가)
공간
sendSubmit


공백은 'LINE에 메시지 보내기' 버튼을 표시하기 위해 추가되었습니다.

kintone의 JavaScript 프로그램 작성

kintone의 상세 화면을 표시했을 때에 「LINE에 메세지 송신」버튼을 표시해, 클릭과 동시에 LINE 에, 레코드의 LINE 유저 ID 앞으로 「line에 보내는 메세지」필드의 값을 보내는 JavaScript 프로그램을 작성합니다.

LINE 사용자에게 메시지를 보내려면 Messaging API htps : // 아피. 네. 메/v2/보트/메사게/푸 sh에서 다음 헤더를 사용하여 JSON 데이터를 POST합니다.

· 헤더

let headers = {
    'Authorization': ' Bearer ' + '{' + token + '}',
    'Content-Type' : 'application/json'
};

token 의 값은 LINE 채널 친구 등록 및 게시 정보를 kintone에 저장 로 설명한 채널 액세스 토큰입니다.

· POST 데이터

let json = {
    "to":userId,
    "messages":[
        {
            "type":"text",
            "text":message
        }
    ]
};

message 에 LINE 유저에게 연락하는 텍스트 문서를 세트 해 둡니다.

· CORS로 인한 오류에주의

kinton JavaScript에서 외부 API를 사용하는 경우 XMLHttpRequest()를 사용할 수 없습니다. 그냥 나도 최초 XMLHttpRequest() 로 구현하려고 하고 나중에 깨닫습니다만, kintone.proxy() 를 이용합니다. 실수로 XMLHttpRequest() 로 구현하려고 한다면, 에러로 디버그 화면에서 이하를 확인하게 됩니다. 또한, 실망했습니다,,,, (땀)

Access to XMLHttpRequest at 'https://api.line.me/v2/bot/message/push' from origin 'https://yukataoka.cybozu.com' has been blocked by CORS policy: 
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

・이번에 구현한 코드 예

이번에는 다음과 같이 구현하여 kintone에서 LINE으로 메시지를 보낼 수 있습니다.
kintone.proxy() 는 Promise 가 아니고 좋았습니다만, 동기 처리가 되어 있습니다. (땀)

sendLineMessage.js

(function() {
    "use strict";

    const Protocol   = "https://";
    const LineHost   = "api.line.me";
    const LinePath   = "/v2/bot/message/push";
    const LineToken  = "LINEのチャンネルアクセストークン";

    // レコード詳細表示時イベント
    var eventsDetailShow = [
        'app.record.detail.show',
        'mobile.app.record.detail.show'];
    kintone.events.on(eventsDetailShow, function(event) {
        let sendButton  = makeSendButton(LineToken, event.record.lineUserId.value, event.record.sendMessage.value);
        if(event.type !== 'mobile.app.record.detail.show') {
            kintone.app.record.getSpaceElement('sendSubmit').appendChild(sendButton);
        }else{
            kintone.mobile.app.record.getSpaceElement('sendSubmit').appendChild(sendButton);
        }
    });

    // LINEにメッセージ送信ボタン作成
    function makeSendButton(token, userId, message) {
        let submitButton = document.createElement('div');
        let sendButton       = document.createElement('button');
        sendButton.innerText = ' LINEにメッセージ送信 ';
        sendButton.className = "gaia-ui-actionmenu-save";
        sendButton.onclick   = function() {
            let json = {
                "to":userId,
                "messages":[
                    {
                        "type":"text",
                        "text":message
                    }
                ]
            };
            let url = Protocol + LineHost + LinePath;
            let res = funcPostLine(url, token, json);
        };
        submitButton.appendChild(sendButton);
        return submitButton;
    }

    // line にメッセージを送信
    function funcPostLine(url, token, json)
    {
        let headers = {
            'Authorization': ' Bearer ' + '{' + token + '}',
            'Content-Type' : 'application/json'
        };
        kintone.proxy(url, 'POST', headers, json).then(function(args) {
            if (args[1] === 200) {
                alert("LINEにメッセージを送信しました！");
                return true;
            }else{
                alert("LINEのメッセージ送信にエラーがありました！\n" + args[0]);
                return false;
            }
        }, function(error) {
            alert("LINEのメッセージ送信にエラーがありました！\n" + error);
            return false;
        });
    }   
})();

실행 결과

kintone의 상세 화면에서 「LINE에 메시지 송신」버튼을 누르면, 즉시 「LINE에 메시지를 송신했습니다!」의 alert() 가 표시되어 LINE에의 메시지 송신을 확인할 수 있었습니다.

요약

요 전날 LINE 채널의 친구 등록 및 게시 정보를 kintone에 저장 에서 이번 kintoe 에서 LINE 에 게시할 때까지 다음을 확인할 수 있었습니다.

· LINE 채널 개설
· LINE 채널의 친구 등록 및 게시 정보를 kintone에 저장
· LINE 채널 게시물에 회신 보내기
· kintone에서 LINE으로 메시지 보내기

특히 kintone과의 연계의 예가 적고 상당한 고전을 예상하고 있었습니다만, 실제로는 비교적 간단하게 구현할 수 있었습니다. 구현을 위한 비용은 이외라도 들지 않는다고 추측합니다.

포인트로서는, 채널의 친구 등록시에 LINE 유저 ID 를 취득해, kintone 로 관리하는 어플리(예를 들면 고객 관리 어플리케이션)의 어떻게 묶는지가 열쇠가 될 것 같습니다. 채널의 친구 등록 시나 그 이후에도 kintone 앱의 정보와 끈끈한 구조를 어떻게 구현하는지가 kintone과 LINE을 연계하여 활용하기 위한 열쇠가 될 것 같습니다.

참고 정보

line 전송 설정
htps : //에서 ゔぇぺぺrs. 네. 비 · 자 / 레후 렌세 / 메사 긴 g 아피 / # 센 d 뿌 sh
외부 API 실행
htps : //에서 ゔぇぺぺr. cy 흐림. 이오/hc/쟈/아르치 cぇs/202166320