専属秘書を作ろう！ - #21 タスクを完了する

前回は、"タスクを登録する" でしたね。

しかし、タスクを登録はしたけれど・・・
完了できないと、タスクは残ったままですよね💦

タスクは完了してこそ、タスクです！

なんだか名言っぽい😎
ということで、タスク完了を実装していきましょう✨

⬇️ 過去の note をまだご覧になっていない方はこちら ⬇️

専属秘書みどりこ｜Mr.Green＠ITxマーケティング｜やさしく・ふかく・おもしろく｜note

---

機能を追加する前に

機能を追加する前に、実施することを整理しておきましょう☝️

通常、リストを取得するためには "リスト取得関数" が、タスクを追加するためには "タスク追加関数" が準備されています。

しかし、なぜか "タスク完了関数" が準備されていません💦

何かしら理由があるのだと思いますが、内容を更新するための "update関数" のみ準備されています。

そのあたりの記載が全然ないのは問題だと思いますが、うーんって感じです。

以下のライブラリのドキュメントを見ても、タスクを完了させるにはどうしたらよいかがわからないのです・・・。

REST Resource: tasks  |  Google Tasks  |  Google for Developers

不親切！！

なぜこんなドキュメントになるのか・・・。
ちゃんとして欲しいものです。

ということで、わからない時は ChatGPT 先生に聞いてみよう！

少し前までは Google先生でしたが、ChatGPT先生も台頭してきましたね。

ChatGPT先生の答えは・・・

ほうほう。

タスクの "status" というフィールドを "completed" に変えれば、完了になるのか。

やり方も教えてくれるので、マニュアルやドキュメント読むよりもわかりやすい。
Googleさん、ちゃんとしてくださいね。
ChatGPT にやられちゃいますよ💦

正式な設定内容に変更する

使用できるように正しい内容に変更しましょう。

リッチメニュー画像の変更

リッチメニューB の画像内容を以下に変更します。

・リッチメニューB
　・FUNC3　⇒　タスクを完了する(アイコンも適切なものに)

スプレッドシートの設定内容の変更

スプレッドシートの内容を以下のように変更します。

・リッチメニューB
　・画像リンクの変更　⇒　新たに作成した画像B の URL
　・FUNC3
　　・【メッセージ】FunctionB-3　⇒　【メッセージ】タスク完了##

すでにプログラムは作成していますので、内容を変更してメニューから設定すれば LINE に反映されます。

タップすると、上記のメッセージを受信しました。

・message.text = タスク完了##

特に問題ありませんね。

受信データをリスト化する

ちゃんとデータが受信できていることが確認できましたので、実際に受信したデータに対応していきましょう。

受信したメッセージは以下です。

{
  "destination":"U7b74f9ba63d6d056e55577xxxxxx",
  "events":[{
    "type":"message",
    "message":{
      "type":"text",
      "id":"5031923121271xxxx",
      "quoteToken":"6KJOlY3xzuPNK1eyXMoEjxxxxxx",
      "text":"タスク完了##"
    },
    "webhookEventId":"01HV44MHMQDNPY2M85Zxxxxxx",
    "deliveryContext":{
      "isRedelivery":false
    },
    "timestamp":1712757294236,
    "source":{
      "type":"user",
      "userId":"U922fa85f2c3047418d5xxxxxxx"
    },
    "replyToken":"d794261b7a8e4ae9a3eb818axxxxxx",
    "mode":"active"
  }]
}

単純に文字列を取得するだけなので、細かな処理は割愛して、実際に実行する処理に移りましょう。

タスクは複数あって、その中のどれを完了とするか、というのはユーザーしか決められません。

ですので、ユーザーに対してすべてのタスクを提示して完了するタスクを指定してもらう必要があります。

今までフォームなどを使ってきましたが、ここでは
"複数の中から１つのタスクを選択する" ということをしたいので、
FlexMessage のボタンを使ってみましょう☝️

FlexMessageのボタンを返す

LINE Messaging API には、メッセージと同様に送ることのできるものに FlexMessage というものがあります。

Flex Messageを送信する

その要素としてボタンがあります。

これを使って、完了したいタスクをタップしてもらえれば、簡単にタスクを完了させることができそうです。

今回はこれを使っていきましょう。

ボタンを配置して送る場合は、以下のようにメッセージを送ればよいとのこと。

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "spacing": "md",
    "contents": [
      {
        "type": "button",
        "style": "primary",
        "action": {
          "type": "uri",
          "label": "Primary style button",
          "uri": "https://example.com"
        }
      },
      {
        "type": "button",
        "style": "secondary",
        "action": {
          "type": "uri",
          "label": "Secondary style button",
          "uri": "https://example.com"
        }
      },
      {
        "type": "button",
        "style": "link",
        "action": {
          "type": "uri",
          "label": "Link style button",
          "uri": "https://example.com"
        }
      }
    ]
  }
}

なので、これに合わせて作っていきます。

サンプルでは、3つのボタンをスタイルを変えて作っていますが、タスクはいくつあるかわかりませんので、いくつあっても対応できるように変えてしまいましょう。

  let contents=[];
  sortedList.forEach((data)=>{
    let content = {
      "type": "button",
      "style": "secondary",
      "action": {
        "type": "message",
        "label": data.title,
        "text": "tc-id##"+data.id+"##"
      }
    };
    contents.push(content);
  });

  const reply = {
    "replyToken": rtoken,
    "messages": [
    {
      "type": "flex",
      "altText": "this is a flex message",
      'contents': {
        "type": "bubble",
        "body": {
          "type": "box",
          "layout": "vertical",
          "spacing": "md",
          "contents": contents
        }
      }
    }]
  }

ベースの部分はそのままで、ボタン要素を構成している "contents" のところをタスクの数だけ生成するように変更しました。

また、タップされた時のアクションとして、タスクID をメッセージとして送る、というアクションを登録しています。

これでいくつタスクがあってもその数だけボタンが作られます👍

今回は５つのタスクを登録してチェックしてみます。
きちんと５つのタスクが出てきましたね。

ここでは、"サンプルタスク" をタップしてみましょう。

完了したいタスクをタップすると、そのタスクID を送るようにしましたので、タスクID が送られます。

タスク完了処理を追加する

上記で送られてきた "タスクID" のタスクを完了する処理を追加します。

  sortedList.forEach((data)=>{
    if(data.id===list["tc-id"]){
      data.status = "completed";
      let link = data.selfLink;
      let textList = link.substring((link.indexOf("/lists/")+7),link.indexOf("/tasks/"+data.id));
      title = data.title;
      Tasks.Tasks.update(data,textList,data.id);
    }
  });

IDが等しいものを抽出して、そのタスクを完了します。

data.status = "completed";

ChatGPT先生 が教えてくれた通り、"status" を "completed" にすればいいんですよね✨

これを "update関数" を使用して更新すればOKです。

Tasks.Tasks.update(data,textList,data.id);

これで、タスクが完了します👍

この処理が終わったことをユーザーに知らせるために、どのタスクが完了したかメッセージして終わりにしましょう。

動作確認

では、実際に起動から登録するところまで流れで見てみましょう。

リッチメニューをタップする。

タスク一覧が送られてくるので、完了したタスクをタップする。

タスクID が送られる。

タスクを完了させて、通知する。

まとめ

今回は、"タスクの完了" を行いました。

タスクの完了は完了した時にすぐに処理しておかないと、忘れがちです・・・。

終わっていれば問題ないと言えばないのですが、管理すること、それを定型化することは非常に重要ですので、しっかりと終わらせておきましょうね。

さて最後に、"動きも見たい！" というお声もあると思いましたので、動画も置いておきます。
ぜひご覧ください。

もしわからないことがありましたら、お気軽に LINE公式アカウント でご質問ください。

今回のご提供ファイルのキーワードは【専属秘書みどりこV15】です。

LINE公式アカウントにご登録の上、キーワードを送信してくださいね。

⬇️LINE公式アカウントに登録してご連絡ください⬇️