自作のLINEbotにFlexMessageを実装したら使いやすくなった話

はじめに

以前、毎日エンジニアニュースというLINEbotを作成しました。

その時の記事はこちら

追加してもらえるとと嬉しいです。

FlexMessageを実装するまで

FlexMessageを実装する前のメッセージはこちらになります

このメッセージのよくない点は、「見にくい」のと「記事のタイトルとurlが離れているため見たいなと思った記事はどれだっけなあと確認する必要がある」の二つだと思います。
本当は作る過程でFlexMessageを実装したかったのですが、実装できない理由がありました。
　

なぜFlexMessageを実装できなかったのか

原因

なぜ実装できなかったのかというと配列での渡し方がわからなかったからです。
こちらがそのコードになります。

CreateMessage.ts

import { SetItem } from "./types/SetItemType";

export const FetchMessage = async (data: SetItem): Promise<any> => {
  try {
    let titleMessage = "";
    let urlMessage = "";
    let numberList = 1;
    data.setTitle.forEach((res) => {
      const addTitleMessage = res;
      if (titleMessage === "") {
        titleMessage = `[${numberList}]${addTitleMessage}`;
        numberList++;
      } else {
        titleMessage += `\n\n[${numberList}]${addTitleMessage}`;
        numberList++;
      }
    });
    numberList = 1;
    data.setUrl.forEach((res) => {
      const addUrlMessage = res;
      if (urlMessage === "") {
        urlMessage = `[${numberList}]${addUrlMessage}`;
        numberList++;
      } else {
        urlMessage += `\n\n[${numberList}]${addUrlMessage}`;
        numberList++;
      }
    });
    const message = titleMessage + "\n\n" + urlMessage;
    return message;
  } catch (err: unknown) {
    console.log(err);
  }
};

このコードは取得した記事をtitleMessage,urlMessageに格納している処理になります。
配列の渡し方がわからなかったので変数に文字列を格納しまくって一つのなが〜い文字列にし、それを出力していました。

解決

ですが、こちらの記事で実装法を知りました。
本当に感謝です！![

実装　

この様な感じでデザインしてみました!
上 QiitaAPI 下 NewsAPI

見比べるとだいぶ改善されていると思います。
QiitaはできるだけQiitaの記事っぽくなるようにデザインしてみました。

つまずいたところ

NewsAPIの記事を表示する際に画像が表示されていない箇所がいくつかありました。

原因

公式ドキュメントによるとpngとjpgの二つが対応しているとのこと。
表示されていないところを確認してみるとsvgであることがわかりました。

解決

svg形式の場合はunsplashの画像を出力するようにしました。

NewsArticleMessage.ts

 let urlImage = val.urlToImage;
    const fileExtension = urlImage.split(".").pop();

    if (fileExtension === "svg") {
      urlImage = "https://source.unsplash.com/featured/?programming";
    }
}

まとめ

今回はFlexMessageを実装してみました。
時間はかかったんですがデザインするのがとても面白く没頭していましたw
まだまだ改善点があるのでこれからもアップデートしていき、使いやすいbotにしていきます!!

最後までご覧いただきありがとうございました!!!

[GitHub]

参考