GCPのCloud FunctionsでPuppeteerを動かす

経緯

ちょっと前に(2018/08)、GCPがNode8対応したとのことでPuppeteerを動かす記事が載っていましたので試してみました。記事によると以前のGCPでPuppeteerを動かそうと思ったら、クラウドにしてはそれなりにヘビーな環境が必要になっていたようです。
まぁこれはAWSでも同じことが言えますね。果たしてGCPはいかに。

cloud.google.com

Cloud Functionsの課金

初めて使うということと、お試しであるとうことで、おいくら万円？ってのが、まずありますよね。ざっくりまとめると次のとおり。

• 呼び出し : 0.0000004 [$/回]
• コンピューティング(メモリ) : 0.0000025 [$/GB秒]
• コンピューティング(CPU) : 0.0000100 [$/GHz秒]
• データ転送 : 上り無料、下りは 0.12 [$/GB]
• ローカルディスク : 使わないつもりなので無視

ただ、無料階層というものがあり
・200万回の呼び出し
・メモリ 400,000 [GB秒]
・CPU 200,000 [GHz秒]
・データ転送下り～5GB
が付いてますので、実質無料で試せそうです。

無料階層を使用する場合でも、有効な請求先アカウントが必要です

Pricing  |  Cloud Functions Documentation  |  Google Cloud

でもまぁ、登録は必要です。

Functionを作成します

関数を作成

関数の詳細を入力します

関数の名前を付けて、メモリ容量を選択して(公式では1GBを推奨)、トリガーはHTTP。今回はお手軽お試しということで、ソースコードはインラインエディタを選択。ランタイムはNode.js 8を選択。

公式のブログからソースコードをコピーします。
が、14～15行目のreturn res.send(がつながっててエラーになるので注意。

実行する関数には screenshot と入力し、作成ボタンをクリックします。

くるくる・・・

失敗するとこうなります (さきほどの14〜15行目が原因でした)

無事に成功するとこうなります

関数名クリックで詳細が見れます

URLがすでに出てるのでAWSで言うと API Gateway⇒AWS Lambda って感じなんでしょうきっと。

Postmanから叩いてみる

無事にscreenshot関数の結果が返ってきました＼(^o^)／

感想

Puppeteerをクラウドで動かそうとした場合パッケージが大きくて、アップしたり動かしたりするのが結構大変です。
その点GCPのCloud Functionsではインストール(npm i)がクラウド側で行われるのでライトな印象です。

Puppeteerといえば・・・本を執筆しました

「これが言いたかっただけじゃないの？」というツッコミは置いといて…

Puppeteerの入門書が秀和システムから出版されました。表紙は鶴田謙二さん。
表紙目当てで買って頂ける方もいらっしゃるようです。
Node.jsの知識がなくてもWebスクレイピングができるようになれるよう書きました。

www.shuwasystem.co.jp

Amazonのリンクはコチラ

LINE Beaconが当たったのでセットアップしてみた

LINE Beacon当たったぁぁあ!!

なんとLINE Beaconが当たった！！嬉しい。何か作ろう #スマートスピーカーを遊びたおす会 #linebootawards

— Ryoichi Obara (@ryoichi_obara) 2018年9月7日

と言っても、何か作る前にはまず設定です。

Beaconはコレ

なんと本体 5,400円(税込)に加えて送料は 1,080円！…高い！ありがたいっ！！

beacon.theshop.jp

ということで久しぶりにLINEにログイン・・・

と思ったら、アカウントの追加を失敗してしまいました。こちらにまとめました。

ryoichi0102.hatenablog.com

ryoichi0102.hatenablog.com

ここまでMessaging APIからWebhookでデータが飛ばせる所まできたと思います。

Beaconの設定を行う

ここから設定します。
https://admin-official.line.me/beacon/register#/

"ビーコン端末とbotの連携" をクリック。

"アカウント一覧"から対象のアカウントを選択

"ハードウェアID" と "パスコード" を入力

こちらの入力欄は HWID, CODE の順。

実機は、CODE, HWID の順で書かれています。(逆かいな)
CODEは-が入っていますが、これはどちらでも登録できました(ハイフンあったほうが読みやすいよね!)

アカウント連携が完了しました

一覧画面に遷移して追加されているのが確認できます

LINEアプリの設定を行います

手順はこちら

1. LINEがインストールされているスマートホンのbluetoothをonにしてください。
2.「LINE Beaconを利用」にチェックを入れてください。
a. 設定 → プライバシー管理 → LINE Beaconを利用。
3. Botアカウントと友達になってください。
a. 連携していないBotアカウントには、ビーコンの情報は送られません。
4. ビーコンの電源が入っていることを確認し、スマートホンを近づけて下さい。
a. LINEアプリがビーコンを検知し、その情報をLINEプラットフォームに送信します。https://admin-official.line.me/13555625/beacon/#/connect

Beaconの電源をON/OFFするには、筐体の中のこの部分のスイッチを切り替えます

表面のランプが点滅し、ランプの点滅が消えたら準備完了のようです

テスト

こんな感じのデータを受信するのを確認できると思います。

{
  "events": [
    {
      "type": "beacon",
      "replyToken": "e0f475d5c49249b48b1bb37f7406d4cc",
      "source": {
        "userId": "*********************************",
        "type": "user"
      },
      "timestamp": 1536757232074,
      "beacon": {
        "hwid": "**********",
        "dm": "",
        "type": "enter"
      }
    }
  ]
}

beacon.hwidが連携に使用したBeaconのハードウェアIDであり、Beacon端末を一意に特定するものです。
source.userIdユーザー(これはアプリごとかな…?)を一意に特定するものです。

botアカウントと既に友達で、BeaconとiPhoneが既に近い状態で、Beaconの電源をonにした場合(?)、なかなか飛んできませんでした。

書式のドキュメントはこちら
https://developers.line.me/ja/reference/messaging-api/#beacon-event

さて何つくろう・・・（勝負はここからｗ）

参考

https://developers.line.me/ja/docs/messaging-api/using-beacons/

engineering.linecorp.com

LINE Messaging APIのためにBotアカウントを追加した

経緯

ryoichi0102.hatenablog.com

アカウント追加の失敗編はこちら

ryoichi0102.hatenablog.com

手順

ログイン

ログインはこっちの方なんですよね。

https://developers.line.me/

ID・パスワード入力

場合によってはスマホのLINEアプリでパスコードを入力したりする必要があります。

プロバイダー名の部分クリック (作成ではない)

新規チャネル作成をクリック

チャネル選択ではMessaging APIをクリック

新規チャネル作成で必要事項を入力

アプリ名・アプリ説明・プラン・大業種・小業種・メールアドレスを入力します。
業種は今回はテスト用だったので、個人（その他）を選択。

同意

規約に同意して"作成"

作成されました

失敗編のLINE@アカウントの時と違って、LINEアプリ上では自動的に友達にはなってないので、詳細画面に飛んでQRコードから友達登録する必要があります。

Webhookの設定を行う 

"Webhook送信" を "利用する" に変更します。
"利用可能な機能" 欄にちゃんとPUSH_MESSAGEが入っていますね!
そしてWebhook URLを設定します。
ここで設定するURLでLINE Botに話しかけらたりしたデータやLINE Botアカウントが検知したBeaconのデータだったりを受け取ります。
なお、"自動応答メッセージ" は "利用しない" に設定します。

接続確認ボタンをクリック

下記のようなデータが送られてきます。

{
  "events": [
    {
      "replyToken": "00000000000000000000000000000000",
      "type": "message",
      "timestamp": 1536832520978,
      "source": {
        "type": "user",
        "userId": "Udeadbeefdeadbeefdeadbeefdeadbeef"
      },
      "message": {
        "id": "100001",
        "type": "text",
        "text": "Hello, world"
      }
    },
    {
      "replyToken": "ffffffffffffffffffffffffffffffff",
      "type": "message",
      "timestamp": 1536832520978,
      "source": {
        "type": "user",
        "userId": "Udeadbeefdeadbeefdeadbeefdeadbeef"
      },
      "message": {
        "id": "100002",
        "type": "sticker",
        "packageId": "1",
        "stickerId": "1"
      }
    }
  ]
}

たとえばAWSのAPI Gateway + Lambdaの構成で下記のようなコードを書いておけば簡単にログが確認できます。

exports.handler = async (event) => {
  console.log(JSON.stringify(JSON.parse(event.body)));

  const response = {
      statusCode: 200,
      body: JSON.stringify('Hello from Lambda!')
  };
  return response;
};

LINE@MANAGERからもPUSH_MESSAGEが有効になっているのが確認できます。

各種設定

Beaconの設定はコチラ

ryoichi0102.hatenablog.com