チャネルトークとほかのツールと連携したい（スニペット・asana編）　その３

tmd

2023年2月1日 22:36

どうもtmdです。１月から花粉を感じているtmdです。２月になって花粉からの圧も増してきましたね。
チャネルトークのスニペットを使ってasanaと連携したい！！第３弾です。

この記事シリーズの目標

・チャネルトークで気になるチャットを見つけた時に、スニペットにあるボタンを押したらasanaにタスクが作成されるようにしたい。
・すでにasanaにタスクがある場合はチャネルトークのスニペットに表示させたい。

初回＆前回について

▼１回目
チャネルトークのスニペットを稼働させてみた。

▼前回
チャネルトークのスニペットから飛んできた値をスニペットに返してみた

今回の目標

asanaから取得したデータをスニペットに表示です。
先にasanaに書き込みをしても良かったんですが、正直なところ作ってみた感じ、読むのは書き込むより楽だっから。。。
ってことで、
チャネルトークのユーザーIDと同じ値がasanaの指定したプロジェクトのタスクの説明欄にもある場合、そのasanaのタスクのURLを取得してチャネルトークのスニペットに表示する！！！
※ただし、該当するAsanaのタスクは０つもしくは１つと想定する。

用意するもの

asanaにアクセスするための個人アクセストークン
読み込むためのasanaのタスク
- 今回はasanaのタスクの説明欄にチャネルトークのユーザーIDを入れておきます。入ってないと一致は０件です！

個人アクセストークの設定方法

公式に書いてあるので参照しながら設定しましょう。

参考にしたもの

▼参考１：asanaからデータを取得する

今回はzennにこれでほぼ解決では？というコードを書いている人がいたので、こちらを参考にさせていただきました。ありがとうございます。

▼参考２：fieldsの種類

取れる情報はこちらから

サンプルのコード

function doPost(e) {
  var snippetData = JSON.parse(e.postData.getDataAsString());
  var asanaData = getAsanaTasks(snippetData["user"]["id"]);
  var data ={
    "snippet": {
    "version": "v0",
     "layout": [
      {
        "id": "title",
        "type": "text",
        "text": snippetData["user"]["name"],
        "style": "h1"
      },
      {
      "id": "asanablock",
      "type": "text",
      "text": asanaData,
      "style": "h3"
     }
    ],
    "params": {
       "customerKey": "channelIO"
    }
    }
  };
  return ContentService.createTextOutput(JSON.stringify(data))
    .setMimeType(ContentService.MimeType.JSON);
};

function getAsanaTasks(userID1) {
    var options = {
    'method': 'get',
    'contentType': 'application/json',
    'headers': {
      'Authorization': 'Bearer ' +　【アクセストークン】
    },
  }
 var response = UrlFetchApp.fetch('https://app.asana.com/api/1.0/projects/【プロジェクトID】/tasks?opt_fields=notes,permalink_url', options);
  var result = JSON.parse(response);
  var list = "";  
  if(result.data){
    for(var i = 0; i < result.data.length; i++){
      var asanaNotesData= result.data[i]["notes"].replace(/\r?\n/g,",");
      var asanaNotesDataSplit= asanaNotesData.split(",");
        if((asanaNotesDataSplit[0])==userID1){
         list = result.data[i]["permalink_url"];
        };
    };
  };
  return list;
};

コードのポイント

前回からコードが増えてる場所で、数年後のtmdと初心者が悩みそうなところをざっくり説明します。

▼別で用意したasanaからのデータ取得のfuncitonを動かす
このコードを追加することで、asanaからデータとりに行くfunctionにアクセスして結果を変数に入れています。
これによってgetAsanaTasksというファンクションが動きます。ユーザーIDを受け取って動きます。

  var asanaData = getAsanaTasks(snippetData["user"]["id"]);

▼スニペットの表示部分を増やす
はい、これ増やさないと値を無事に受け取っても表示されないのでちゃんと追加しましょう。

},
      {
      "id": "asanablock3",
      "type": "text",
      "text": asanaData,
      "style": "h3"

▼取得する項目を指定してデータを取得する
この項目については「参考２：fieldsの種類」のリンク先を参考にしてもらえたらわかりやすいかと思います。
今回は説明欄を比較する、urlを返すなので、2つです

UrlFetchApp.fetch(`https://app.asana.com/api/1.0/projects/【プロジェクトID】/tasks?opt_fields=notes,permalink_url`, options);

▼該当するタスクかを確認して該当する場合は変数に入れる
ここはasanaの説明欄に追記があったときのために1行ずつ分割して変数にいれて、1行目と一致するかを見ています。
そのため2行目にIDとか3行目にIDを入れてほかの欲しい情報を上に入れても対応可能です。
逆に説明欄にはIDしか入らないのであれば、単純に比較で大丈夫かも？

      var asanaNotesData= result.data[i]["notes"].replace(/\r?\n/g,",");
      var asanaNotesDataSplit= asanaNotesData.split(",");
        if((asanaNotesDataSplit[0])==userID1){
         list = result.data[i]["permalink_url"];
        };

▼プロジェクトIDってどこ？
プロジェクトのIDは該当のプロジェクトを開いたときのURLのこの部分です
https://app.asana.com/0/【プロジェクトID】/list

ということで、だんだん出来上がってきましたね。
次回も記事化できるところまで進捗するよう頑張ります。

次は、こちらで2つ以上のタスクにも対応できるようにしました。

この記事が気に入ったらサポートをしてみませんか？