LoginSignup
4
7

More than 1 year has passed since last update.

LINE bot から Notion API でメッセージを Everything It's you してみた!

Last updated at Posted at 2022-12-14

LINEDC のアドベントカレンダーを見たら空きが・・!
何か簡単で面白そうなネタないかなと考えた結果、こちらの記事に至りました。面白いかどうかは別ですが・・笑。
ただ、簡単にできてしまうところはやはりLINEプラットフォームの良さなのかな?と思います。

ということで、下記アドベントカレンダー14日目の記事でもあります。

こんな感じ&構成です

LINEからメッセージを送信すると Notion に反映されます。

line2notion.gif

line2notion2.gif

構成

image.png

ざっくりやることは

  • Notionでインテグレーションを作成
    • トークンをメモ(GASの実装で使用)
  • Notionでページを作成
    • ページIDをメモ(GASの実装で使用)
    • コネクトの追加
  • LINE bot準備(Developers Console)
    • Webhookの設定(GASのWebアプリURLを設定)
    • アクセストークンをメモ(GASの実装で使用)
  • GAS実装&デプロイ
    • ウェブアプリURLをメモ

です!

インテグレーションを作成(Notion)

https://www.notion.so/my-integrations より新規インテグレーションを作成

image.png

image.png

今回はコンテンツを挿入するだけなので、読み取りや更新の許可は不要と思いますが、とりあえずチェックを入れたままで「送信」。

トークンが発行されますのでメモしておきます。のちにGASで設定します。

スクリーンショット 2022-12-14 11.29.55.png

ページを作成(Notion)

Notion にて以下のようなページを作成しました。見出しのみで中身は特にないです。
LINEから送ったメッセージを、ページのブロックオブジェクトとして動的に追加していきます。

image.png

ブロックの追加方法やブロックオブジェクトの詳細は以下より(後述のGAS参考)

コネクトの追加

API経由でページを操作するために、「コネクトの追加」で作成したインテグレーションを追加します。

image.png

image.png

ブロックID(ページID)
ページURLに英単語が含まれる場合は、最後のハイフン以下のUUIDがブロックID(ページID)となるようです(太字部分)。
LINE-Notion-Everything-It-s-you-0be7581926734ddba05f94217b557eff

GAS

GASでやることは、

  • LINEプラットフォームからのメッセージを受ける
  • Notion APIを叩いて、Notionのページにメッセージ(ブロック)を追加
  • Messaging APIを叩いて、LINE botへ返信(応答メッセージ)
  • スクリプトプロパティにトークンなど機微情報を設定
    • PropertiesService.getScriptProperties() で、GAS に設定したスクリプトプロパティの値を取得できます。
      image.png
      プロパティ 設定値
      LINE_CHANNEL_ACCESS_TOKEN Developers Console で発行したアクセストークン
      NOTION_PAGE_ID Notion のURLで確認できるUUID部分
      NOTION_TOKEN Notion インテグレーションで発行されたトークン
GAS実装(ここクリック)
bot.gas
const NOTION_TOKEN = PropertiesService.getScriptProperties().getProperty("NOTION_TOKEN")
const NOTION_PAGE_ID = PropertiesService.getScriptProperties().getProperty("NOTION_PAGE_ID")
const LINE_CHANNEL_ACCESS_TOKEN = PropertiesService.getScriptProperties().getProperty("LINE_CHANNEL_ACCESS_TOKEN")
const LINE_REPLY_URL = "https://api.line.me/v2/bot/message/reply";

const doPost = (request) =>  {
    const receiveJSON = JSON.parse(request.postData.contents);

    const event = receiveJSON.events[0];

    // テキスト以外が送られてきたときは何もしない。
    if (event.message.type != "text") {
        return;
    }

    sendToNotion(event.message.text)
    replyToLine(event.replyToken)
}

const replyToLine = (replyToken) => {
  const replyText = {
        replyToken: replyToken,
        messages: [
            {
                type: "text",
                text: "Everything It's you しました!",
            },
        ],
    };

    const options = {
        method: "post",
        headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${LINE_CHANNEL_ACCESS_TOKEN}`,
        },
        payload: JSON.stringify(replyText),
    };

    // 応答を送信
    UrlFetchApp.fetch(LINE_REPLY_URL, options);
}

const sendToNotion = (message) => {
  const now = Utilities.formatDate(new Date(), 'Asia/Tokyo', 'yyyy/MM/dd');
  const object = {
    "children": [
      {
        "type": "heading_3",
        "heading_3": {
          "rich_text": [{
            "type": "text",
            "text": {
              "content": `${message}`
            }
          }],
          "color": "default",
          "is_toggleable": false
        }
      }
    ]
  }

  const options = {
    method: 'PATCH',
    headers: {
      'Content-Type': 'application/json',
      'Notion-Version': '2022-06-28',
      'Authorization': `Bearer ${NOTION_TOKEN}`
    },
    payload: JSON.stringify(object)
  };

  UrlFetchApp.fetch(`https://api.notion.com/v1/blocks/${NOTION_PAGE_ID}/children`, options)
}

スクリプトプロパティを設定し実装したらデプロイ!
デプロイが完了するとウェブアプリURLが発行されるので、次のLINE bot の作成で、 Webhook にセットします。

image.png

LINE bot

Developers Console からLINE botを作成します。

設定方法は以下を参考に、Webhook URLを設定し、アクセストークンを取得します。

以下を実施
  • 1.Developersコンソールにログイン
  • 2.プロバイダーとチャネルを作成
  • 4.Developerコンソール側の設定

ということで

LINE botで画像を受け取ることもできるので、Notion に画像も反映させるなんてこともできますね。
LINEDC のイベントで何かやってみようかなと思った今日この頃です。

4
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
7