LINE Messaging APIとGoutteを使用して最新記事を送信してもらう

はじめに

2020年度XTechグループアドベントカレンダーの13日目を担当します、iXIT株式会社の21卒内定者、小長谷です！
LINE Messaging API と Goutte を使用したボットについて書きます。

作成したもの

私が普段閲覧しているTechableの最新記事を、Goutte（PHPのライブラリ）を用いてスクレイピングし、LINEで送信してもらうボットを作成しました。

Techable（テッカブル） -海外・国内のネットベンチャー系ニュースサイト

fabpot/goutte - Packagist

最新記事 と送信すると、その時の最新記事の一覧を返してくれます。

　

記事の詳細を見たい場合、 サイトへ をタップすることでサイトへ移動します。

　

実行時のページ画像

環境

macOS BigSur 11.0.1
PHP 7.3.22

テンプレートメッセージを送信するボットを作成する

LINE Developersのガイドに、サンプルのボットを作成するまでのチュートリアルがあるので、スムーズに始めることができました！
https://developers.line.biz/ja/docs/messaging-api/

カルーセルテンプレートの作成

送信するメッセージには様々なタイプがあります。私は今回カルーセルテンプレートを使用しました。
https://developers.line.biz/ja/docs/messaging-api/message-types/#carousel-template

カルーセルテンプレート

複数のカラムを表示するテンプレートです。カラムは横にスクロールして順番に表示できます。

私が作成したものは、それぞれのカラムに画像、タイトル、テキスト、アクションを配置しました。

１つのカラムだけ配置するコードを以下のように書きました。

<?php
require_once dirname(__FILE__) . '/vendor/autoload.php';

use LINE\LINEBot\Constant\HTTPHeader;
use LINE\LINEBot\HTTPClient\CurlHTTPClient;
use LINE\LINEBot;
use LINE\LINEBot\TemplateActionBuilder\UriTemplateActionBuilder;
use LINE\LINEBot\MessageBuilder\TemplateBuilder\CarouselColumnTemplateBuilder;
use LINE\LINEBot\MessageBuilder\TemplateBuilder\CarouselTemplateBuilder;
use LINE\LINEBot\MessageBuilder\TemplateMessageBuilder;

$channel_access_token = 'xxxxx';
$channel_secret = 'xxxxx';

$httpClient = new CurlHTTPClient($channel_access_token);
$bot = new LINEBot($httpClient, ['channelSecret' => $channel_secret]);

$events = $bot->parseEventRequest(file_get_contents('php://input'), $_SERVER['HTTP_' . HTTPHeader::LINE_SIGNATURE]);
$event = $events[0];

$columns = [];

$action = new UriTemplateActionBuilder("サイトへ", "クリックしたとき、開かれるURI");
$column = new CarouselColumnTemplateBuilder("タイトル（40字以内）", "テキスト（画像、タイトルを指定する場合60字以内）", "画像URL", [$action]);

$columns[] = $column;

$carousel = new CarouselTemplateBuilder($columns);
$templateMessageBuilder = new TemplateMessageBuilder("メッセージのタイトル", $carousel);
$response = $bot->replyMessage($event->getReplyToken(), $templateMessageBuilder);

Goutteで記事をスクレイピングする

次に、カラムに必要な画像、タイトル、テキスト、アクション（に使用する、記事へのURL）を、Goutteを用いてTechableからスクレイピングしました。
１つの記事を取得するコードを以下のように書きました。

<?php
require_once dirname(__FILE__) . '/vendor/autoload.php';

$goutteClient = new Goutte\Client();
$crawler = $goutteClient->request("GET", "https://techable.jp/");

$articleUrl = $crawler->filter("#panel-whatsnew")->filter(".te-articles__list__item")->filter("a")->extract(["href"])[0];
echo "記事のURL: " . $articleUrl . PHP_EOL;

$title = $crawler->filter("#panel-whatsnew")->filter(".te-articles__list__item")->filter(".te-articles__list__item__content__title")->text();
echo "記事のタイトル: " . $title . PHP_EOL;

$text = $crawler->filter("#panel-whatsnew")->filter(".te-articles__list__item")->filter(".te-articles__list__item__content__summary")->text();
echo "記事のテキスト: " . $text . PHP_EOL;

$img = $crawler->filter("#panel-whatsnew")->filter(".te-articles__list__item")->filter(".te-articles__list__item__thumb__img")->extract(["style"])[0];
$img = getUrl($img);
echo "画像URL: " . $img. PHP_EOL;

/*
 * CSSプロパティで設定された背景画像のURLを取り出す
 * " background-image: url( https://xxx.png ); "
 *    ↓
 * " https://xxx.png "
 */
function getUrl($img)
{
    preg_match("/(https).*\.(png|jpg|jpeg)/i", $img, $match);
    return $match[0];
}

$ php index.php

記事のリンク: https://techable.jp/archives/143963
記事のタイトル: 楽天、UGVによるスーパーからの商品配送サービス実現に向け横須賀市で実証実験
記事のテキスト: 楽天株式会社と神奈川県横須賀市は、2019年に「西友 リヴィンよこすか店」から港湾緑地「うみかぜ公園1年前半には、同市...
画像URL: https://techable.jp/wp-content/uploads/2020/12/32156cdde08f9a24d1d321145576baed.png

上記コード実行時のページ画像

以上の処理を取得したい記事に対して行い、カラムを作成しました。

最後に

LINE Messaging API と Goutte を使用したボットについて書かせていただきました。
今後は人気記事を送信してくれる機能などを追加して、多機能なボットにしようと思います！

XTechグループのアドベントカレンダーはまだまだ続きます。お楽しみに！

以下の情報を参考にしました

Messaging APIリファレンス
line-bot-sdk-php
[PHP] Messaging APIを使ったLINEbotで色々試してみる
Packagist