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

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

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

今回は記事閲覧数が期待できそうなキーワードを用いて、ブログを書いてみようかと思います。
そのキーワードとは……
「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」をインストールしてみましょう。

npm i puppeteer --save 

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

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

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

const puppeteer = require('puppeteer');
(async () => {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 await page.goto('https://bitwave.showcase-tv.com/');
 await page.screenshot({path: 'bitwave.png'});

 browser.close();
})();

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

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

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

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

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

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

 var request = require('request');
 var fs = require('fs');
 var headers = {
     "Authorization" : "Bearer Line Notifyで取得したToken"
 }  

 var formData = {
     message: "hoge",
     imageFile: fs.createReadStream("bitwave.png")
 }

 var options = {
     url: "https://notify-api.line.me/api/notify",
     headers: headers,
     formData: formData
 }
  
 request.post(options,function(error,response,body){});

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

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

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

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

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

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

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

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ