20200808のNode.jsに関する記事は5件です。

【今日から始めるAWS】LambdaでLINEのbotをつくる

はじめに

30代未経験からエンジニア転職をめざすコーディング初学者のYNと申します。お読みいただきありがとうございます。
コーディング初学者にとってのAWS入門といえばLambda!、サーバレスアプリを作ろう!、ということでメッセージをオウム返ししてくるLINEのbotをつくりました。
下記参考記事をそのままコピーした内容になってしまったのですが、学習ログとして投稿させていただきました。

今回やったこと

下記のように、こちらが送ったテキストメッセージをそのまま返答してくれる、オウム返しbotを作ります。
スクリーンショット 2020-08-08 11.16.49.png

下記のサーバレス構造を構築します。(こちらの記事から図を拝借させていただきました。)
スクリーンショット 2020-08-08 11.09.26.png

手順

  • 事前準備
  • Lambdaの設定
  • API-gatewayの設定
  • LINEチャンネルの設定

事前準備

  • LINEデベロッパー登録

Lambdaの設定

  • 1. ローカルPCでlambda関数のフォルダを作成
$ cd ~
$ mkdir line-bot
$ cd line-bot
  • 2. index.jsを作成
$ npm install @line/bot-sdk
line-bot/index.js
"use strict";
const line = require("@line/bot-sdk");
const client = new line.Client({ channelAccessToken: process.env.ACCESSTOKEN });
// ①SDKをインポート

const crypto = require("crypto");

exports.handler = function (event, context) {
  let body = JSON.parse(event.body);
  let signature = crypto
    .createHmac("sha256", process.env.CHANNELSECRET)
    .update(event.body)
    .digest("base64");
  let checkHeader = (event.headers || {})["X-Line-Signature"];

  if (signature === checkHeader) {
  // ②cryptoを使ってユーザーからのメッセージの署名を検証する


    if (body.events[0].replyToken === "00000000000000000000000000000000") {   
      let lambdaResponse = {
        statusCode: 200,
        headers: { "X-Line-Status": "OK" },
        body: '{"result":"connect check"}',
      };
      context.succeed(lambdaResponse);
      // ③接続確認エラーを確認する。

    } else {
      let text = body.events[0].message.text;
      const message = {
        type: "text",
        text,
      };
      client
        .replyMessage(body.events[0].replyToken, message)
        .then((response) => {
          let lambdaResponse = {
            statusCode: 200,
            headers: { "X-Line-Status": "OK" },
            body: '{"result":"completed"}',
          };
          context.succeed(lambdaResponse);
        })
        .catch((err) => console.log(err));
      // ④リクエストとして受け取ったテキストをそのまま返す

    }
  } else {
    console.log("署名認証エラー");
  }
};

下記、index.jsにおける処理を解説します。

①SDKをインポートする

const line = require("@line/bot-sdk");
const client = new line.Client({ channelAccessToken: process.env.ACCESSTOKEN });

githubのexampleでSDKの使い方が参照できます。

②cryptoを使ってユーザーからのメッセージの署名を検証する

const crypto = require("crypto");
exports.handler = function (event, context) {
  let body = JSON.parse(event.body);
  let signature = crypto
    .createHmac("sha256", process.env.CHANNELSECRET)
    .update(event.body)
    .digest("base64");
  let checkHeader = (event.headers || {})["X-Line-Signature"];
  if (signature === checkHeader) {
    // ここでlambdaの処理を記載
  }

cryptoはnode.jsに標準で組み込まれている暗号化に関するライブラリで、botにおける実装の詳細についてはLINE公式ドキュメントに書いてあります。
(暗号化についてはこちらの記事が分かりやすかったです)

ここでは、下記2点が一致するかを検証しています。

  • signature: ユーザーから送られてきたリクエスト(event.body)を、秘密鍵(CHANNELSECRET)を使って暗号化したもの

  • event.headers["X-Line-Signature"]:リクエストヘッダーに含まれる署名

③接続確認の場合の処理を実装する

botが接続確認を行う場合、replyToken="000..."のリクエストが来ます。

let body = JSON.parse(event.body);
if (body.events[0].replyToken === "00000000000000000000000000000000"){
      let lambdaResponse = {
        statusCode: 200,
        headers: { "X-Line-Status": "OK" },
        body: '{"result":"connect check"}',
      };
      context.succeed(lambdaResponse);
      }

④リクエストとして受け取ったテキストをそのまま返す

ユーザーから送られてきたリクエストの中身(イベントオブジェクト)はLINE公式ドキュメントにまとめられています。
リクエストに含まれるメッセージがテキストの場合、body.events[0].message.textに含まれます。
また、client.replyMessage(replyToken, message)のメソッドを使うことで、ユーザーにメッセージを返信することが出来ます。

let text = body.events[0].message.text;
   const message = {
     type: "text",
     text,
   };
   client
     .replyMessage(body.events[0].replyToken, message)
     .then((response) => {
       let lambdaResponse = {
         statusCode: 200,
         headers: { "X-Line-Status": "OK" },
         body: '{"result":"completed"}',
       };
       context.succeed(lambdaResponse);
     })
  • 3. index.jsとnode_modulesを圧縮しLambdaにアップロードする

スクリーンショット 2020-08-08 17.59.05.png

  • 4. アクセストークン(ACCESSTOKEN)とChannelSecret(CHANNELSECRET)を環境変数に登録する

スクリーンショット 2020-08-08 18.04.54.png

API-gatewayの設定

  • 1 POSTメソッドを作成する
    スクリーンショット 2020-08-08 18.13.44.png

  • 2 リクエストヘッダーによる認証を追加する
    スクリーンショット 2020-08-08 18.15.21.png

  • 3 統合リクエストに作成したLambda関数を設定する
    スクリーンショット 2020-08-08 18.18.58.png

  • 4 APIをデプロイ
    スクリーンショット 2020-08-08 19.24.39.png

LINEチャンネルの設定

LINE Official Account Managerからユーザーからのメッセージに対するあいさつや応答の設定をすることができます。
スクリーンショット 2020-08-08 19.29.07.png

最後に

Lambdaを使うことで、簡単にLINEのbotを作ることができます。
初学者でも1時間弱でつくることができました。
機械学習や外部のAPIを組み合わせれば、面白いことができそうです。
ご覧いただきありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

bottlejs hello ?

動機

自作のSPAをスクラップ&ビルドするので今度はDIを使ってみようと思ったけどinverify はなんだか面倒くさそうなので bottlejs を使う。

前準備

Webpackとnpm install --save bottlejs とかやっておいた。

実装

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>Kamishibai framework</title>
</head>
<body>
    <!-- IE11 promise -->
    <script src="https://www.promisejs.org/polyfills/promise-7.0.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.4/fetch.min.js"></script>
    <script src="/js/bundle.js"></script>
</body>
</html>
app.js
import Bottle from 'bottlejs'
window.kms = window.kms||{};
window.kms.Unko=function(){
    this.color = "brown";
}
window.kms.rootBottle = new Bottle();
window.kms.rootBottle.service("?",window.kms.Unko);
window.kms.unko = window.kms.rootBottle.container["?"];
alert("?の色は"+window.kms.unko.color);

image.png

結論

見事にボトルに?を詰めておくことができた。
これで何ができるかってことだけど、処理の流れとオブジェクトの作られ方が分離できるってことかなと思う。
例えば、その?に?がついていたとしても、ロジック側でその設計を考える必要がなくなるというか。あらかじめ?付きの?をボトルに詰めときゃいいじゃんっていう。

その用途だったらかなり古いけど bottlejs で十分機能するかなと思って実験中。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【HOMEBREW】 Mac OSのパッケージマネージャーについて node.jsやってたら学んだ事

【この記事で身に付くこと】

■HOMEBREWとは基礎
■mysqlを自身のMacへ

【背景】

■node.jsでの開発途中で、mysqlが無く、先に進めなかった為

【開発環境】

■ Mac OS catalina
■ Homebrew 2.4.9
■ mysql Ver 8.0.21

【実装】

HOMEBREW入れます。

*Xcodeも自動的にインストールされます。便利

mac.terminal
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
.
.
.
// 5分くらい待ちます。下記の文は自動で出てきます。
$ Downloaded Command Line Tools for Xcode 

mysql入れます。

mac.terminal
$ brew install mysql 

確認

mac.ternminal
$ brew -v
Homebrew 2.4.9
Homebrew/homebrew-core (git revision b32b4; last commit 2020-08-08)

$ mysql --version
mysql  Ver 8.0.21 for osx10.15 on x86_64 (Homebrew)

以上。

【まとめ】

■HOMEBREWとはMACのOSを動かす、パッケージマネージャー
■mysqlはDBの種類

 パッケージマネージャー = app store
 パッケージ = app
みたいな感じでしょうか。。
appstoreがあるからappがダウンロードできる。

【合わせて読みたい】

■ 【node.js】 node.jsインストール 芋っていたけど、簡単だった件...
https://qiita.com/tanaka-yu3/items/739db5ffed24a8d9ae4b

■ 【comandLine】 一言で コマンドライン 各種コマンド ターミナル
https://qiita.com/tanaka-yu3/items/b32e353bd6d7c9ebd4fb

■作業環境を整えるMacOSXのパッケージマネージャ「Homebrew」のインストール方法と使い方
https://liginc.co.jp/web/tool/mac-iphone/151069

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Node.js + JavaScript で HTTP リダイレクト先の URL を取得する

概要

  • Node.js + JavaScript で HTTP リダイレクト先の URL を取得する
  • 動作確認環境: Node.js 14.7.0 + macOS Catalina

ソースコード

get_redirect.js というファイル名で以下の内容を保存する。

get_redirect.js
'use strict'

const https = require('https')
const http  = require('http')

// リダイレクト先 URL を取得する関数
function get_redirect_url(src_url) {
  return new Promise((resolve, reject) => {
    try {
      // https と http で使うモジュールを変える
      const client = src_url.startsWith('https') ? https : http
      // 4xx や 5xx ではエラーが発生しないので注意
      client.get(src_url, (res) => {
        // HTTP レスポンスから Location ヘッダを取得 (ヘッダ名は小文字)
        resolve(res.headers['location'])
      }).on('error', (err) => {
        reject(err)
      })
    } catch(err) {
      reject(err)
    }
  })
}

(async () => {

  // コマンドライン引数を取得
  const src_url = process.argv[2]

  // リダイレクト先URLを取得
  const redirect_url = await get_redirect_url(src_url)
    .catch(err => {
      console.log(err)
    })

  // リダイレクト先URLを出力
  if (redirect_url) {
    console.log(redirect_url)
  }
})()

実行例。

$ node get_redirect.js https://bit.ly/3kmTOkc
https://t.co/yITSBp4ino
$ node get_redirect.js https://t.co/yITSBp4ino
https://qiita.com/niwasawa
$ node get_redirect.js https://qiita.com/niwasawa

参考資料

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

node.js x express.js x mysql x TablePlusでCRUD処理

node.jsで基本のCURDをしてみた

参考にしたサイト
https://reffect.co.jp/node-js/express-js-connect-mysql#MySQL-3
こちらのサイトがとても解説が丁寧でわかりやすかった。

作成結果

ezgif.com-resize.gif

スクリーンショット 2020-08-08 1.55.09.png

実装方法は上記記事を参照
やってみて分かったことは感想に記述

【感想】

・node.jsのCRUDはphpと動きが似ている
・mysqlのDBとtableはjsファイル内で記述してサーバーが更新されると自動で作成される。
その後も更新のたびに新しく同じDBとtableを作成しようとしてエラーになるので、一度作ったDBとtableのjsファイル内の記述はコメントオフか削除が必要でした。
・table plusはやはり便利

TablePlus使い方

参考
https://reffect.co.jp/windows/tableplus-connect-mysql-sqlite

初期設定のパスワードやuserはmysqlのことなので、自分のユーザー名やパスワードではなく、
user:root(mysqlの場合)
パスワード:なし(mysqlの場合)
記述の保存は基本comand + s
基本クリックして登録、更新、削除をする
Data:データの登録、更新、削除
Structure: VARCHARやIDなどの編集

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む