「Puppeteer」+「LINE Notify」でサイトのサムネイルを通知してみる

「Puppeteer」+「LINE Notify」でサイトのサムネイルを通知してみる

今回は記事閲覧数が期待できそうなキーワードを用いて、ブログを書いてみようかと思います。
そのキーワードとは……
「Puppeteer」「LINE Notify」

「Puppeteer」って何?
「LINE Notify」って美味しいの?
そんな方々もいらっしゃるかとは思いますので、ここでカンタンにご説明させていただきます。

「Puppeteer」と「LINE Notify」

「Puppeteer」とは……

最近話題の「Headless Chrome」を「Node.js」で扱えるライブラリです。

そもそも「Headless Chrome」が分からないという方にも解説すると、「Headless Chrome」とは「Phantom.js」のようなヘッドレスブラウザを指しています。
つまり、ブラウザ立ち上げなくてもブラウザを操作ができるんですね。

いやいや、例文で出された「Phantom.js」が分からない……、そんな方は過去のbitWaveをご参照ください。
<bitWave関連記事『PhantomJSでスクリーンキャプチャをとろう!』>

「LINE Notify」とは……

約一年前に登場した、LINE上でカンタンに通知が行えるサービスです。

よく「LINE bot」と比較されがちなのですが、「LINE Notify」は一方的に通知オンリーという仕様です。
機能制限がある分、実装もカンタンにでき、無料で個人宛に通知することができたり、Webと連携したりすることができたりするのが特徴です。

以下のサイトをご覧いただければ、幾分かはイメージが湧きやすいのではないでしょうか。
<参照:LINE Corporation『LINE Notify』>
<参照:LINE Corporation『LINE Notify API Document』>

サイトのサムネイルを通知で見るには……

本記事のタイトルにもありますように、今回は「Puppeteer」と「LINE Notify」を用いてWebサイトのサムネイルを通知で見れるようにしたく思います。

それでは、1つずつ順を追って解説していきましょう。

手順1「LINE Notify」を準備する

<手順1-1>
まずはLINEアプリを起動して、公式アカウントから検索で「LINE Notify」を友達追加しましょう。

<手順1-2>
「LINE Notify」管理画面でアクセストークンを取得します。
ちなみに「LINE Notify」管理画面のログインにはLINEアカウントが必要になります。
「トークンを発行する」ボタンがあるはずですので、ここでトークンを取得したら大事に保管してください。
<参照:LINE Corporation『LINE Notify管理画面』>

<手順1-3>
取得したアクセストークンで試しに送信してみましょう。
[curl -X POST -H ‘Authorization: Bearer 取得したアクセストークン’ -F ‘message=花火’ https://notify-api.line.me/api/notify] (※左右の[]は外してくださいね)

すると……

今の季節だと、花火ってワードが入っていると花火が打ち上がるみたいですね。

ここまでできれば「LINE Notify」は準備OKです。
なお、[テストトークン] と書いてあるのは、「LINE Notify」管理画面で登録したタイトルです。
適当な名前をつけてしまいました。。。

手順2「Puppeteer」を準備する

<手順2-1>
さっそく「Puppeteer」をインストールしてみましょう。

本当はMacではなくlambdaやherokuで「Puppeteer」を動かしたかったので「–save」と入れてみましたが、外しても問題ないと思われます。
時間があれば次回に書きたいと思います。

<手順2-2>
任意名称のファイルを作成しましょう。

<手順2-3>
「Puppeteer」を動かし、サンプルで画像を取得して保存する。 

今回はbitWaveから画像を取得して、「bitwave.png」という名前でスクリーンショットを保存してみました。

では、さっそく試してみましょう。

こんな感じでスクショ画像が保存ました。なかなかに良い感じですね。

これができていれば「Puppeteer」の準備も完了です。

手順3「Puppeteer」で取得した画像を「LINE Notify」で通知して見る

<手順3-1>
「手順2」ファイルに以下のコードを追記します。

あまり説明する必要がないかもしれませんが、上記は以下の指示を加えています。

  • 画像をPostできるデータにする(fs.createReadStream)
  • 「request」モジュールを使ってPostする

するとこんな感じになりました!

「Puppeteer」+「LINE Notify」で初期設定時間が劇的短縮!

過去掲載の「Phantom.js」の記事を見てもらえばご理解いただけると思いますが、初期セットアップまでの微修正の時間がグッと減っていますね。

さて次回も、ご要望があれば「Puppeteer」+「LINE Notify」を使った、より便利な機能を作ってみたいと思います。

みなさんもお時間ある際には、ぜひ触って見てくださいね!

コメント