LoginSignup
18
15

More than 1 year has passed since last update.

@y-kazawa(Kakki Shoushou)in株式会社プロトソリューション

GASとLINE Messaging APIとNotion APIで、LINEからNotionにメモ登録できるようにしてみた

Posted at

はじめに

こんにちは、エンジニア歴1年半のGopherくんLoverなペーペーエンジニアです。

2週連続で書くことになったので、ちょっと今回はAnalyticsから離れてみようと思います。
誠に個人的な話なのですが、最近Notionを使い初めまして、使いやすさに感激しているところです。

そんなNotionなので、普段ふとした時のメモにも使いたい！と思うのですが、いちいち開くのも…
と思ったことがあり、最近APIも熱そうなイメージもアリ…

連携して簡単に入力できないか…？
という感じでちょっと作成してみたので、その内容をまとめたいと思います。

タイトルにある通りですが、LINEに連携してメッセージ送信した内容をメモとして登録しちゃえ！という内容です。

完全にプライベートでやったので、突っ込みどころは多いかもしれませんが、そこのところはご容赦ください。
では、いきましょーう。

～本日の流れ～

⓪LINE Messaging APIとNotion APIの導入について
①NotionDBへのデータのアップロード(Notion API)
②LINEメッセージからのデータ取得(LINE Messaging API)
③上二つの結合！

⓪LINE Messaging APIとNotion APIの導入について

【LINE Messaging APIの導入】

LINE Messaging APIの導入に際して必要になるアカウント発行などについては、こちらを参考にしてください。

上記の流れでLINEビジネスアカウントを作成し、チャネルアクセストークンを発行します。

Messaging API設定欄を下に行くと…

チャネルアクセストークンの欄があるので、そこで発行してください。

その上でGASでメッセージを取得する処理を書いて、Webhook URLを設定すればよいです。
導入に関してはここまでなので、一旦発行したチャネルアクセストークンを保存しておきます。

【Notion APIの導入】

続いて、Notion APIです。
こちらも公式に沿って進めていただければ発行できます。

上記のようにインテグレーションを作成し、ページへのコネクトを追加します。
※インテグレーションは↓ここ↓から作成可能です！

新しいインテグレーションを選択し、もろもろの情報を設定したのち、送信を押下

トークンが作成されるので、表示してコピーしておいてください。(後ほどGASで使います！)

その後、情報を挿入したいページにコネクトを追加します。

導入は以上です！

※ちなみに

GASではスクリプトプロパティ設定が可能なので、先ほど取得したトークなどは設定しておくと後々便利です。

設定画面を開き、LINEのチャネルアクセストークン、NotionのAPIトークンとDB IDを保存しておきます。
※NotionのDB IDは、挿入したいページのURLのうち、スラッシュから?vまでの部分です。
　「https://www.notion.so/ここの部分?v=#############」

①NotionDBへのデータのアップロード(Notion API)

つづいて、まずはNotion側のGASを書きます。
挿入したい内容をデータベースIDとともにjsonにし、トークンなどをoptionsに着けてUrlFetchAppします。

今回は、メモとして、以下の4つのプロパティを設定することにします。

・タイトル
・メモ
・ジャンル
・リンク

json形式でプロパティ値を送信するのですが、プロパティの種類によって記法が違うので、もし別のものを使用したければこちらを参照ください。

【実装したコード】

function addDataToNotion(splitedMessage) {    // splitedMessageとしてLINEで入力された値が来る想定

  // 一旦は仮のデータを設定
  var insertData = [
    "ネコちゃん", 
    "かわいい", 
    "保存用",
    "https://www.google.com/search?q=%E3%83%8D%E3%82%B3&rlz=1C1PWSB_jaJP1030JP1030&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjOrYumuc79AhUT82EKHXZ-BK4Q_AUoAXoECAEQAw&biw=1920&bih=947&dpr=1"];

  // スクリプトプロパティに格納したデータベースID、トークンを取得
  const props  = PropertiesService.getScriptProperties();
  const dbId   = props.getProperty('NOTION_DB_ID');
  const token  = props.getProperty('NOTION_TOKEN');

  const apiUrl = 'https://api.notion.com/v1/pages';

  // json形式のオブジェクトを作成
  let pageObj = {
    parent: {
      database_id: dbId,
    },
    properties: {
      "タイトル": {
        "title": [{
          "text": {
            "content": insertData[0];
          }
        }]
      },
      "メモ": {
        "rich_text": [{
          "text": {
            "content": insertData[1];
          }
        }]
      },
      "ジャンル": {
        "select":
        {
          "name": insertData[2];
        }
      },
      "リンク": {
        "url": insertData[3];
      }
    }
  }

  // optionsに必要な情報を設定
  const options = {
    method: "POST",
    headers: {
      "Content-type": "application/json",
      "Authorization": "Bearer " + token,
      "Notion-Version": '2022-06-28',
    },
    payload: JSON.stringify(obj),
  };

  //NotionAPIにポストでアクセスし、DBにデータを挿入
  try {
    let response = UrlFetchApp.fetch(apiUrl, options);
    let result = response.getResponseCode()

    // 成功の場合は200を返却
    if (result != "200") {
      result = response.getContentText("UTF-8")
    }

    return result;
  } catch (e) {
    // エラー文を返却
    let result = e;
    return result;
  }
}

これで実行すると…

データが挿入されます！

これでNotion側はOKなので、後はここにLINEからデータを送れるようにするだけです。

②LINEメッセージからのデータ取得(LINE Messaging API)

続いてラインです！
先程、LINE Messaging APIは導入しましたので、まずは簡単な返信Botを作ってみましょう。

メッセージはjsonデータとして送られてくるので、それを受け取ってそのまま返すコードです。

【実装したコード】

function doPost(e) {
  // スクリプトプロパティに格納したLINE Messaging APIのチャネルアクセストークンを取得
  const props  = PropertiesService.getScriptProperties();
  let token = props.getProperty('LINE_M_API_TOKEN');

  // 取得したJSONデータを取得
  let eventData = JSON.parse(e.postData.contents).events[0];

  //取得したデータから、応答用のトークン・メッセージを取得
  let replyToken = eventData.replyToken;
  let message = eventData.message.text;

  // 返信用のAPI URL
  let url = 'https://api.line.me/v2/bot/message/reply';
    
  // 返信メッセージを用意(取得したメッセージをそのまま代入)
  let replyMessage = message;

  // payloadに返信用トークンとメッセージを設定
    let payload = {
      'replyToken': replyToken,
      'messages': [{
          'type': 'text',
          'text': replyMessage
        }]
    };

    // optionsにPOST設定、チャネルトークン、jsonを設定
    let options = {
      'payload' : JSON.stringify(payload),
      'myamethod'  : 'POST',
      'headers' : {"Authorization" : "Bearer " + token},
      'contentType' : 'application/json'
    };

    //LINE Messaging APIにリクエストし返信
    UrlFetchApp.fetch(url, options);
}

LINEからWebhookを使用してGASを動かすので、デプロイします。

新しいデプロイを選択し、左側上部の歯車からウェブアプリを選択し、デプロイします。

完了したら、ウェブアプリの欄にあるURLをコピーして、LINE Messaging APIに設定します。
先程の、LINE Messaging APIの設定画面を開き、先ほどのURLを設定してください。

これで、メッセージを送った際にGASが動くようになりました。

試しにやってみると…

こんな形でちゃんと返ってきていればオッケーです！

③上二つの結合！

では最後に、LINE→Notionメモの挿入を作成します。
上記で記載したコードを少し編集していきます。

変更した内容としては以下の2点です。

・LINEメッセージの内容を改行で分割
・NotionAPIの実行可否をreturnし、失敗の場合はLINEメッセージにエラー情報を投下

変更したうえで、早速動かしてみると…

問題なく追加されていました！

以下、最終的に実装した内容になります。
【実装したコード】

function doPost(e) {
  // スクリプトプロパティに格納したLINE Messaging APIのチャネルアクセストークンを取得
  const props  = PropertiesService.getScriptProperties();
  let token = props.getProperty('LINE_M_API_TOKEN');

  // 取得したJSONデータを取得
  let eventData = JSON.parse(e.postData.contents).events[0];

  //取得したデータから、応答用のトークン・メッセージを取得
  let replyToken = eventData.replyToken;
  let message = eventData.message.text;

  // メッセージを改行ごとに分ける
  let splitedMessage = message.split(/\r\n|\n/);

  // Notionにデータを追加
  let result = addDataToNotion(splitedMessage);

  // 応答メッセージ用のAPI URLを定義
  let url = 'https://api.line.me/v2/bot/message/reply';

  if (result != "200") {
    //ユーザーからの投稿メッセージから応答メッセージを用意
    let replyMessage = "エラーにより失敗しました。\nエラー情報：" + result;

    // payloadに返信用トークンとメッセージを設定
    let payload = {
      'replyToken': replyToken,
      'messages': [{
          'type': 'text',
          'text': replyMessage
        }]
    };

    // optionsにPOST設定、チャネルトークン、jsonを設定
    let options = {
      'payload' : JSON.stringify(payload),
      'myamethod'  : 'POST',
      'headers' : {"Authorization" : "Bearer " + token},
      'contentType' : 'application/json'
    };

    //LINE Messaging APIにリクエストし返信
    UrlFetchApp.fetch(url, options);
  } else {
    //ユーザーからの投稿メッセージから応答メッセージを用意
    let replyMessage = "登録しました！\r\nURLをチェック：NotionのURL";

    // payloadに返信用トークンとメッセージを設定
    let payload = {
      'replyToken': replyToken,
      'messages': [{
          'type': 'text',
          'text': replyMessage
        }]
    };

    // optionsにPOST設定、チャネルトークン、jsonを設定
    let options = {
      'payload' : JSON.stringify(payload),
      'myamethod'  : 'POST',
      'headers' : {"Authorization" : "Bearer " + token},
      'contentType' : 'application/json'
    };

    //LINE Messaging APIにリクエストし返信
    UrlFetchApp.fetch(url, options);
  }
}

function addDataToNotion(splitedMessage) {

  //スクリプトプロパティに格納したデータベースID、トークンを取得
  const props  = PropertiesService.getScriptProperties();
  const dbId   = props.getProperty('NOTION_DB_ID');
  const token  = props.getProperty('NOTION_TOKEN');

  const apiUrl = 'https://api.notion.com/v1/pages';

  //データベースIDを渡しオブジェクトを生成
  const obj = generateObj(dbId, splitedMessage);

  //NotionAPIにポストしデータを追加
  const options = {
    method: "POST",
    headers: {
      "Content-type": "application/json",
      "Authorization": "Bearer " + token,
      "Notion-Version": '2022-06-28',
    },
    payload: JSON.stringify(obj),
  };

  try {
    let response = UrlFetchApp.fetch(apiUrl, options);
    let result = response.getResponseCode()

    // 成功の場合は200を返却    
    if (result != "200") {
      result = response.getContentText("UTF-8")
    }

    return result;
  } catch (e) {
    // エラー文を返却
    let result = e;
    return result;
  }
}


function generateObj(dbId, splitedMessage) {

  var title = splitedMessage[0];
  var text= splitedMessage[1];
  var genre = splitedMessage[2];
  var url = splitedMessage[3];

  let pageObj;

  // urlのみ必須ではないので、条件分岐でオブジェクトを作成
  if (url != null) {
    pageObj = {
      parent: {
        database_id: dbId,
      },
      properties: {
        "タイトル": {
          "title": [{
            "text": {
              "content": title
            }
          }]
        },
        "メモ": {
          "rich_text": [{
            "text": {
              "content": text
            }
          }]
        },
        "ジャンル": {
          "select":
          {
            "name": genre
          }
        },
        "リンク": {
          "url": url
        }
      }
    }
  } else {
    pageObj = {
      parent: {
        database_id: dbId,
      },
      properties: {
        "タイトル": {
          "title": [{
            "text": {
              "content": title
            }
          }]
        },
        "メモ": {
          "rich_text": [{
            "text": {
              "content": text
            }
          }]
        },
        "ジャンル": {
          "select":
          {
            "name": genre
          }
        }
      }
    }
  }

  return pageObj;
}

まとめ

以上、「GASとLINE Messaging APIとNotion APIで、LINEからNotionにメモ登録できるようにしてみた」でした。
今回はとりあえず動けばいいと思って作ったので、細かいところは後々改善していこうと思います。

やはりAPIって楽しいですね。
LINE Messaging API使って無限にほめてくれるLINE Botで作ろうかな…(ありそう)

LINEとNotion、どちらもAPIとしてはバリエーションがありそうなので、ご興味ある方はぜひ見てみてください！

18
15
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
Sign upLogin
18
15