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

Cloud Functions for Firebase上でExpressを動かす

Cloud Functions for Firebase ってなに?

image.png
データベースへの書き込みやHTTPSリクエストなどのイベントをトリガーにしてコードを実行できる機能であり、サポート言語としては、 Node.js のみとなっています。
※色々やればPythonやGoも使えるらしい(未検証)

firebase コマンドの導入

firebase-toolsとは、Firebaseプロジェクトの管理、表示、デプロイ等ができます。

# firebase toolをインストール
npm install -g firebase-tools

firebase ログイン

ブラウザが起動しポップアップが表示されるので使用したいgooogleアカウントでログイン

firebase login

実際のログイン画面の様子
ezgif-2-f7fa6e6c9e77.gif

Firebaseプロジェクト作成(GUI上)

Firebaseコンソールを開く

まず、コンソール画面にてプロジェクトの追加をクリックします。
図1.png

任意のプロジェクト名を入力して続行を押します。
図1.png

次の画面でも続行を押します。
図1.png

次のような画面が出ればプロジェクトが作成され完了します。
スクリーンショット 2020-10-23 23.45.25.png

プロジェクトを初期化(Firebaseプロジェクト作成)

構築するディレクトリに移動し、firebase initを実行します。
構築するディレクトリに指定はありません。今回はデスクトップ上にexpress_project名前でからディレクトリを作りました。

$ cd Desktop
$ mkdir express_project
$ cd express_project
$ firebase init

以上のコマンドを実行すると次のようなコンソールが出るのでスペースキーで利用するサービスを選択します。
(利用するサービスは複数選択することができます。)
選択し終えたらエンターを押し次へと進みます。
スクリーンショット 2020-10-24 0.02.50.png

先ほど作成したプロジェクトを選択するので Use an existing projectを選択します。

? Please select an option: (Use arrow keys)
❯ Use an existing project 
  Create a new project 
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project 

そうすると作成したプロジェクトが表示されるので該当するプロジェクトを選択します。

? Select a default Firebase project for this directory: (Use arrow keys)
❯ express-2c5fa (Express-test) 

どの言語使う?使うか聞かれます。本来であれば静的言語(TypeScript)を使いたいですが、初回なのでJavaScriptを選択します。

=== Functions Setup

A functions directory will be created in your project with a Node.js
package pre-configured. Functions can be deployed with firebase deploy.

? What language would you like to use to write Cloud Functions? (Use arrow keys)
❯ JavaScript 
  TypeScript 

ESLintを使用するか聞かれますが今回はnoで大丈夫なのでそのままEnterを押してください。

? Do you want to use ESLint to catch probable bugs and enforce style? (y/N) 

依存ファイル入れるかを聞かれるのでここではyを入力しEnterを押してください。

? Do you want to install dependencies with npm now? (Y/n) 

最終的に以下のような画面が表示されれば完了です。
スクリーンショット 2020-10-24 0.11.42.png

作業ディレクトリ直下に、functionsディレクトリができており、その中にindex.jsができてるので、それを編集していきます。

$ ls
firebase.json   functions
$ cd functions/
$ ls
index.js        package-lock.json
node_modules        package.json

Expressの導入

・ ExpressはNode.jsのフレームワーク.
・ APIのエンドポイントを手軽に実装できるので便利.

下記コマンドを実行してインストールしていきます。
※引数 --save は依存関係リストに保存することを意味します。

npm install express --save

インストール後の画面はこんな感じです。
スクリーンショット 2020-10-24 0.21.39.png

インストールが終わったらindex.jsを編集していきます。
お使いのエディターでindex.jsを以下のように編集していきます。

// Expressの読み込み
const express = require("express");

const app = express();

app.get('/hello', (req, res) => {
  // レスポンスの設定
  res.send('Hello Express!');
});

// 出力
const api = functions.https.onRequest(app);
module.exports = { api };

自分自身はWebStormを使っているのでこんな感じの画面になります。
スクリーンショット 2020-10-24 0.25.39.png

デプロイ

デプロイしていきます!と言いたいところですが実はnodev10というのが最新ではありますが、有料課金設定を行わなければなりません。なので今回はテストということでnode v8を使っていきます。

しかし注意して欲しいのがNode.js 8が非推奨になり2021年の3月中旬には全面的にサポートされなくなるので本番環境や実サービスなどでは利用しないようにしてください。

functionsフォルダー内のpackage.jsonのenginesの部分を 10 → 8 に書き換えます。

package.json
  "engines": {
    "node": "8"
  },
  "main": "index.js",
  "dependencies": {
    "express": "^4.17.1",
    "firebase-admin": "^8.10.0",
    "firebase-functions": "^3.6.1"
  },
  "devDependencies": {
    "firebase-functions-test": "^0.2.0"
  },
  "private": true
}

そしてデプロイを行います。

firebase deploy --only functions

完了するとこのような画面が出るので発行されたURLをクリックし、Expressが起動するか確認します。
スクリーンショット 2020-10-24 0.40.14.png

アクセスすべきURLは以下のような/apiで終わるURLです。

Function URL (api): https://us-central1-express-2c5fa.cloudfunctions.net/api

※以下のURLの後に/helloをつけるのを忘れないように
スクリーンショット 2020-10-24 0.43.53.png

以下で終了です!お疲れ様でした。

参考にさせていただいた記事

わかる!Firebase ~全てのサービスをおつまみ紹介~ - Qiita
5分でサーバレスを体験! Cloud Functions for Firebase を使ってみよう | SiTest (サイテスト) ブログ
Cloud Functions 最低限(セットアップ+HTTPトリガー) - Qiita
Cloud Functions + ExpressでサーバレスAPIを実装

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

Angular環境構築 これだけでOK!

はじめに

Angularの開発環境をはじめて構築する人に向けて書いています。
この記事を読むと,MacでのAngularの開発環境を構築できるようになります!!

この記事を実施した環境

・macOS Catalina 10.15.7
・Homebrew 2.4.12
・Nodebrew 1.0.1
・Nodo.js 12.13.1
・npm package manager 6.14.8
・Angular CLI 10.0.6
・Angular 10.0.6

ロードマップ

  1. Homebrewのインストール
  2. Nodebrewのインストール
  3. Nodebrewを用いたNodo.jsのインストール
  4. npmを用いたAngular CLIの導入
  5. 新規プロジェクトの立ち上げ

1. Homebrewのインストール

※ Homebrewが既にインストールされている方は,インストール済みまでスキップして下さい。

・Homebrewとは

HomebrewはMacで広く使われているパッケージマネージャです。
ソフトウェアのインストールを単純化し一元管理してくれます。
今回はNodebrewをインストーるするために使用します。
http://brew.sh/index_ja.html

手順

Homwbrew HPのインストールコマンドを実行する。

コマンド
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

※ 2020年10月23日現在に記載されているインストールコマンドです。

Xcodeのcommand linet toolがインストールされてない場合は自動でインストールされます。

コマンド
brew -v 
Homebrew 2.4.12  #バージョンが表示されれば,ひとまずインストール完了

インストール済みに続く…

インストール済みの場合

Homebrewの状態をチェックします。

コマンド
brew doctor  
Your system is ready to brew.  #このメッセージが出ればbrewは正常な状態です。

brew doctorで警告メッセージが出る場合は,関連するパッケージが古くなっているか,または何らかの問題があります。メッセージに従って警告を解消して下さい。

Homebrewを最新状態にしておきます。

コマンド
brew update  #Homebrew自体のupdate
brew upgrade  #Homebrewに関連するパッケージを含むupdate

2. Nodebrewのインストール

・Nodebrewとは

Node.jsのバージョン管理ツールです。
プロジェクトによりNode.jsのバージョンを管理したい時に便利です。
今回はNodebrew経由でNode.jsをインストーします。
https://github.com/hokaccha/nodebrew

コマンド
brew install nodebrew
nodebrew -v  #このコマンドでバージョンが表示されればインストール完了

3. Nodebrewを用いたNodo.jsのインストール

・Node.jsについて

Angularのプロジェクトを動かすにはNode.jsが必要です。
Node.jsをとても簡単に説明すると「サーバーサイドでjavascriptを使えるようにしたもの」です。Node.jsを利用するとリアルタイム通信やスケーラブルなネットワークプログラムを実現することができます。

インストール

Node.jsをインストールして行きましょう。
次のコマンドで,インストール可能なNode.jsのバージョンを確認することができます。

コマンド
nodebrew ls-remote

インストールは次のいずれかのコマンドを実行して下さい。

コマンド
nodebrew install-binary バージョン番号(例:v15.0.1)  #バージョンを指定する場合
コマンド
nodebrew install-binary latest           #最新版を取得する場合
コマンド
nodebrew install-binary stable                 #安定版を取得する場合

次にインストールされてたバージョンを確認します。

コマンド
nodebrew ls

v12.13.1 #インストールされているバージョンがリストアップされる

current: none #現在採用されているバージョンが表示される。インストール仕立ての場合はnone

有効化

次にインストールしたバージョンを有効化します。
インストールされたNode.jsリストの中で使用するバージョンを次のコマンドで有効化して下さい。

コマンド
nodebrew use v12.13.1

nodebrew ls  #有効化されたか確認

v12.13.1 
current: v12.13.1  #v12.13.1が設定された

パスを通す

次のコマンドで,nodeが使えるように環境パスを通します。(Catalina標準のzsh版)

コマンド
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile

ターミナルを再起動して変更を反映させた後、nodeコマンドが使えるか確認

コマンド
node -v  #バージョンが表示されればOK!

4. npmを用いたAngular CLIの導入

・npm Node Package Manager とは?

Node.jsのパッケージ(予め用意された便利な機能をまとめたもの)をインストールしたり管理するためのツールです。Node.jsをインストールした段階で同時にインストールされています。

・Angular CLI とは?

Angular CLIはAngularを構築するためのファイル群を自動生成してくれるツールです。
コマンド一つでAngularプロジェクトを構築してくれます。

このステップでは,Angular CLIパッケージをnpmを用いてインストールします。

コマンド
npm install -g @angular/cli #バージョンを指定したい場合は「cli@バージョン」と記述します。

途中でGoogleに使用状況の共有を許可するか聞かれます。許可する場合はyを入力して先に進んでください。

5. 新規プロジェクトの立ち上げ

いよいよ,Angularプロジェクトの立ち上げです。
プロジェクトを立てるディレクトリに移動し,次のコマンドを実行して下さい!

コマンド
ng new my-app
? Would you like to add Angular routing? Yes  #ルーティングファイルを作るか聞かれます
? Which stylesheet format would you like to use? SCSS  #プロジェクトで使うCSS形式を選択

プロジェクトのディレクトリに移動して、サーバーを起動しましょう。

コマンド
cd my-app
ng serve  #ファイルのコンパイルに少し時間がかかる

ブラウザでlocalhost:4200にアクセスしてページが表示されたらOKです!

まとめ

お疲れ様でした!
Angularの環境構築完了です。

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

LINE Messaging API + AWS + GASでサーバーレスな体温管理

LINEベースで連絡をとっているサークルで、体温を毎日はかり各自Googleスプレッドシートに書き込んで管理していたのですが、回答率が悪く、またLINEでリマインドをすると他の連絡事項などのメッセージが流れていく、、ということが起こっていました。
そこで、LINEの公式アカウントを作り、そこで毎日体温のリマインドをし、そこに返信したらスプシに自動で書き込まれる、というシステムを今まで触れたことがなかったLINE Messaging APIやGASの勉強も兼ねて作ってみました。

このソリューションのメリット

サークルに限らず会社や他のコミュニティでもそうだと思うのですが、COVID-19の感染が広がる中、メンバーの体温管理が必要な状況となっています。
体温を毎日測ってもらって、フォームで聞くかスプレッドシートに書き込んでもらうという手段が考えられるのですが、少しでもステップが多いと毎日行ってもらうのが厳しくなります。具体的に言うと、URLを送りそれに答えてもらうという形をとると回答率が一気に下がります。そして毎日リマインドをするのも大変で係の心理的負担にもなる上に大事な連絡事項が流れてしまいます。
そこで体温管理のソリューションに必要なことを2つに絞りました。

  • 毎日リマインドのラインを個人宛に送る
  • リマインドに対して画面を変えずに体温を送信できるようにする

そして個チャの中で送られたメッセージを処理してスプシに書き込むものを作れば、必要な要件を全て満たせているのではないかと言う考えです。

このソリューションのメリットは、LINEで1タップだけで体温登録でき自動でスプシに書き込んでくれること、そして毎日個人宛にLINEでリマインドを送信するためグループチャットでの連絡事項が流れないことです。

1タップで登録するというところの説明が足りていなかったので実際の画面をお見せします。
IMG_6158.PNG

LINEの公式アカウントのメッセージタイプの中にカードタイプメッセージというものがあったので、それを使ってみました。自分の体温に該当するカードを選んでタップするだけで体温を送信することができます。ボタンクリックした時のアクションは残念ながらLINE Messaging APIでは送ってもらえなかったので、タップしたら「36.3~36.5℃との回答ありがとうございます!」というメッセージがユーザー側からされるように(ちょっと変な感じですが)したら無事Messaging APIにも拾ってもらえたのでそのような構成にしています。なんで0.1℃刻みにしていないのか、という質問については、カードタイプメッセージのカード枚数の上限が9枚だったからです、、今後増えると嬉しいなと思います。

全体の構成

forQiita.png

カードをタップした際に出力されるメッセージがLINE Messaging APIを通してAWS LamnbdaにJSONの形で届きます。LambdaでGASに送りたいデータだけを選んで整形して送り、最後にGASで簡単に処理をしてスプシに書き込むという流れです。

LINEからスプシに直接行ってもいいじゃないかという声もあるかもしれないのですが、LINE Messaging APIのWebhook URLを一つしか指定できないことから今後の拡張性を考えるとAWSで一つAPIを作ったほうがいいかなという判断です。

前置きはこのあたりにして実際の作り方に入っていこうと思います。

作り方

作り方はざっくり5つに分けることができます。

  1. LINE公式アカウントを作る
  2. AWSのAPI GatewayとLambdaを使ってAPIを作る
  3. 作ったAPIとLINEの公式アカウントを結びつける
  4. Lambdaからスプシにデータを送る
  5. 送られたデータをGASで処理してスプシに出力する

ひとつひとつ説明していこうと思うのですが、長くなりそうなのでわかりやすい参考記事を知っているものについてはそれを貼るなどして省略させていただきます。

LINE公式アカウント・カードタイプメッセージを作る

公式アカウントの作り方に関しては、こちらの公式ドキュメントがわかりやすいので是非ご参照下さい。

ドキュメントを読んで公式アカウントを作り、LINE Official Account Managerの ホーム/友だち追加 をクリックした時に出てくるQRコードをスキャンしてまずは自分の友達登録をしてみて下さい。

今後色々試す時に不便なので。ホーム/応答メッセージ で出てくるタイトルがDefaultのステータスはオフに切り替えておきましょう

次に体温を聞くカードタイプメッセージを作っていこうと思います。LINE Official Account Managerの ホーム/カードタイプメッセージをクリックして下さい。

↓この画面になったら、作成をクリック
スクリーンショット 2020-10-23 18.31.31.png

↓タイトルとカードタイプを聞かれます。タイトルは何でもいいのですが、カードタイプはプロダクトにします。
スクリーンショット 2020-10-23 18.33.09.png

↓カードの設定は次のようにします。アクションタイプをテキストにして、〇〇℃との回答、ありがとうございます!とするようにして下さい。(℃が大事です、後で出てきます)
スクリーンショット 2020-10-23 18.36.13.png
温度ごとに細かく分けてカードをたくさん作り(9枚まで)、保存します。

↓保存したら、今度は ホーム/メッセージ配信を開いて下さい。作成をクリックです。
スクリーンショット 2020-10-23 18.39.27.png

希望の配信日時、メッセージはカードタイプメッセージを選び、先ほど作ったものを選択して下さい。
スクリーンショット 2020-10-23 18.41.20.png

それが配信され、カードをタップすると「〇〇℃との回答ありがとうございます!」というメッセージが見えたらセクション1は成功です。


AWSのAPI GatewayとLambdaを使ってAPIを作る

Webhookの設定上オープンAPIが必要です。API GatewayとLambdaを使って作っていきます。

まずAWSのアカウントを持っていない方は、こちらを参考にアカウントを開設して下さい。

※AWSマネジメントコンソールのUIは2020/10/23のものです
↓AWSのアカウントを作ったら、まずマネジメントコンソールでLambdaを検索してください。
スクリーンショット 2020-10-23 14.38.51.png
↓左側のメニューで関数が選択されているのを確認し、「関数の作成」をクリック
スクリーンショット 2020-10-23 14.40.05.png
↓設計図の使用、microservice-http-endpointをクリック、右下の設定をクリックして下さい。
スクリーンショット 2020-10-23 14.44.28.png
↓画面の様に設定をします。関数名・ロール名はご自由に設定して下さい。関数のコードはそのままにして、右下の関数の作成をクリック
us-west-2.console.aws.amazon.com_lambda_home_region=us-west-2.png

Lambdaのデフォルトの関数コードをとりあえず以下の様に変えます(あとでもう一度変えます)

const AWS = require('aws-sdk');

exports.handler = (event, context) => {
    //console.log('Received event:', JSON.stringify(event, null, 2));
    let body;
    let statusCode = '200';
    const headers = {
        'Content-Type': 'application/json',
    };

    try {
        switch (event.httpMethod) {
            case 'DELETE':
                body = {"status":"delete success"};
                break;
            case 'GET':
                body = {"status":"get success"};
                break;
            case 'POST':
                body = {"status":"post success"};
                break;
            case 'PUT':
                body = {"status":"put success"};
                break;
            default:
                throw new Error(`Unsupported method "${event.httpMethod}"`);
        }
    } catch (err) {
        statusCode = '400';
        body = err.message;
    } finally {
        body = JSON.stringify(body);
    }

    return {
        statusCode,
        body,
        headers,
    };
};

今回はDynamoDBを使うことはないのでこの様に書き換えます。
Deployを押し忘れないようにして下さい。

次にAPI Gatewayの設定をしていきます。
↓API Gatewayを開くと「先ほど作った関数-API」という名前のAPIが既にあることを確認できます。自分の作ったAPIをクリックして下さい。
スクリーンショット 2020-10-23 15.23.45.png
↓するとこの様な画面になるはずです。真ん中のあたりにあるアクションをクリックして、APIのデプロイをして下さい。
スクリーンショット 2020-10-23 15.26.46.png
↓画面が変わった後のURLの呼び出しのところに書いてあるURLをコピーしてください。このように、~/defaultになっているはずです。この後に、リソースのところにあるメソッドの名前を入れてください。全体では、https://hogehoge.amazonaws.com/default/myFunction20201023 のようになっているはずです
スクリーンショット 2020-10-23 15.40.58.png
これでLINE公式アカウントやスプレッドシートとやりとりするAPIが完成しました。
簡潔にするために、本当はもっと設定した方がいいところなど省略しているのですが、この通りにやっていただいたらとりあえず動くものはできます。

作ったAPIとLINEの公式アカウントを結びつける

こちらをみながらLINE Messaging APIのアクティベートをし、LINE Developersコンソールに登録していない場合は登録し、こちらを見て自分の公式アカウントに先ほどコピーしておいたURLをWebhook URLとして登録します。

↓公式アカウントを作った時にも閲覧したLINE Official Account Managerを開き、自分のアカウントを選択したら、右上にある「設定」をクリックして下さい。
スクリーンショット 2020-10-23 16.08.20.png
左のメニューの中に「Messaging API」があるので、そこをクリックし、Messaging APIを有効にして下さい。Messaging APIのチャネルの設定は、LINE Developersコンソールで行います。 LINE Official Account Managerにログインするときに使っているLINEアカウントで、LINE Developersコンソールにログインします。

チャネルができたらWebhook URLを設定していこうと思います。LINE Developersコンソールで自分の作ったチャネルを選択し、Messaging APIを選択して下さい。

↓少し下にスクロールすると、このようにWebhookURLの下にEditという文字があるのでそれをクリックして下さい。
URLを入力するところがあるので、そこに先ほど用意してURLを入力します。/defaultの後にメソッド名を付け加えるのを忘れないようにして下さい。verifyを押し、200レスポンスが返ってくるのを確認して下さい。返ってこなかった時にはpostmanなどを使って原因を確認していきます。
スクリーンショット 2020-10-23 16.22.42.png

Verifyのボタンを押した際に200レスポンスが返ってくることが確認できたらこのセクションは成功です。

ここまで設定したことで、LINEの公式アカウントでユーザーがメッセージを送ったり、新しく公式アカウントを追加した際にLambdaにJSONデータが送られるようになりました!この調子で次は必要なデータを抽出してスプシに送る用意をしましょう。

Lambdaからスプシにデータを送る

新しくスプシを作り、スクリプトエディタで簡単な関数を作り、Web APIとして公開し、Lambdaからデータを送るように設定します。

GASに関してはこの連載がとても丁寧で非常に助かったので初めてGASを触る方はこれを片っ端から進めていくのがおすすめです。

まずはスプシを一枚作ってみて下さい。この時にある方はG Suiteアカウントで作成すると後の権限の設定が簡単になるのでそちらを使った方がいいと思います。

↓上のメニューの中の「ツール」をクリック、その中にある「スクリプトエディタ」をクリックして下さい。
スクリーンショット 2020-10-23 17.08.47.png

↓このようにエディタが開かれます。
スクリーンショット 2020-10-23 17.22.26.png

ここに、

function doPost() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = SpreadsheetApp.getActiveSheet();
  const range = sheet.getRange(1,1);
  range.setValue("hello world");
}

このようにコードを書きます。これはスプシのA1にhello worldと出力するコードです。cmd+sで保存、プロジェクト名を記入、cmd+rで実行です。許可を求められるのでG Suiteアカウントの方は許可を確認と押して下さい。無料アカウントの場合は、もう少し複雑です。この記事をご参照下さい。

A1にhello worldと書き込まれたのを確認できたら、次はこれをweb APIとして公開してみます。

↓公開→ウェブアプリケーションとして導入をクリックして下さい。
スクリーンショット 2020-10-23 17.34.47.png

↓このようなモーダルが出てきたら、下のように設定し、Deployをクリック
スクリーンショット 2020-10-23 17.37.16.png

URLが表示されるので大切に取っておきましょう。

次はLambdaの関数コードをもう一度いじっていきます。
AWSマネジメントコンソールに移動です。
先ほどいじったLambdaをもう一度開き、今度は次のようにコードを変更してみて下さい。

const AWS = require('aws-sdk');
const https = require("https");

exports.handler = (event, context) => {
    console.log('Received event:', JSON.stringify(event, null, 2));
    let body;
    let statusCode = '200';
    const headers = {
        'Content-Type': 'application/json',
    };

    try {
        switch (event.httpMethod) {
            case 'DELETE':
                body = {"status":"delete success"};
                break;
            case 'GET':
                body = {"status":"get success"};
                break;
            case 'POST':
                body = {"status":"post success"};
                //ここからスプシに投稿するコード

                const json = JSON.parse(event.body);

                var postMessage = {
                    'text': json.events[0].message.text,
                    'timestamp': json.events[0].timestamp,
                    'userId': json.events[0].source.userId
                }

                var postDataStr = JSON.stringify(postMessage);
                console.log("postData↓");
                console.log(postDataStr);
                console.log("postData↑");
                let options = {
                    host: 'script.google.com',
                    path: '/先ほどコピーしたURLのscript.google.com/と/execに挟まれている部分/exec',
                    port: 443,
                    method: 'POST',
                    headers: {
                                    'Content-Type': 'application/json',
                                    'Content-Length': Buffer.byteLength(postDataStr)
                    }
                };
                var post_req = https.request(options, function(res) {
                    console.log("https requested")
                    res.setEncoding('utf8');
                    res.on('data', function (chunk) {
                      console.log('Response: ' + chunk);
                      context.succeed();
                    });
                    res.on('error', function (e) {
                    console.log("Got error: " + e.message);
                    context.done(null, 'FAILURE');
                    });
                 });
                post_req.write(postDataStr);
                post_req.end();
                //ここまでスプシに投稿するコード

                break;
            case 'PUT':
                body = {"status":"put success"};
                break;
            default:
                throw new Error(`Unsupported method "${event.httpMethod}"`);
        }
    } catch (err) {
        statusCode = '400';
        body = err.message;
    } finally {
        body = JSON.stringify(body);
    }

    return {
        statusCode,
        body,
        headers,
    };
};

関数をDeployするのを忘れないようにして下さい。関数がDeployできたら、LINEで公式アカウントに何かメッセージを送ってみて、スプシにhello worldが書き込まれるのが確認できたらこのセクションは成功です。

送られたデータをGASで処理してスプシに出力する

スプシに送られたユーザーID、timestamp、メッセージをGASの中で処理して、スプシに出力していきます。

私の場合は既にスプシに名前の順番が決まっていて、それがラインの表示名とは違う名前での並びだったので、最初のメンバーの名前とLINEのユーザーIDの照らし合わせは手作業でやってしまったのですが、人数が多い場合は、こちらのようにプロフィール情報をゲットできるAPIがあるのでそれも組み合わせるとより効率的にできるのではないかと思います。

先ほどのスプシのスクリプトエディタで、

function doPost(e) {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = SpreadsheetApp.getActiveSheet();
  const member = {自分の団体の人数(わからない場合は大きめの値を入力するといいと思います)}
  var jsonString = e.postData.getDataAsString();
  var data = JSON.parse(jsonString);

  var userId = data.userId;
  var time = data.timestamp+32400000; //日本時間に合わせています
  var dateRow = Math.floor(time/86400000)-18521(18521は適当な値に変更して下さい。); //epoch時間がミリセカンド単位になっていたので1日単位になるように割り、日時が希望する列に合うように1970年1月1日からの日数を計算して引きます。
  var text = data.text;
  var temperature = text.split("℃"); //メッセージを℃の文字で分け、数字の部分だけがスプシに書き込まれるようにします。
  const peopleRange = sheet.getRange(3, 3, member, 1);//UserIdを3列目、上から3行目から書き始めた場合です。
  const peopleValues = peopleRange.getValues()
  var peopleArrayNumber;  

  for(let i=1; i<member; i++){
    if(String(peopleValues[i])===userId){
      peopleArrayNumber = i+3 //上から3行目から始まっているためです。
    }   
  }

  const range = sheet.getRange(peopleArrayNumber,dateRow);
  if(text.match("℃")){
    range.setValue(temperature);
  }
}

このように変更して、保存、公開をして下さい。
最初に作ったカードタイプメッセージを送信してタップし、このように書き込まれていったら成功です。
スクリーンショット 2020-10-23 18.19.52.png
注意点としては、ユーザーIdで検索をかけているので、ユーザーIdだけは最初に用意しておかなければいけないです。今後改善していってその部分は直していこうと思います。


長い記事に最後までお付き合いいただきありがとうございました!このソリューションがより多くの方のお役に立てたら幸いです。

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

npm v7で`npm ci`後にプロジェクト自身の`postinstall`が実行されなくなった

2020-10-20にリリースされたNodeJS 15系からnpmはV7になっている。
https://nodejs.org/en/download/releases/

TravisCIで特定のバージョンを指定せず node 指定していた場合、
2020/12/23時点でがインストールされる。

$ node --version
v15.0.1
$ npm --version
7.0.3
$ nvm --version
0.36.0

https://travis-ci.com/github/mobilusoss/textlint-browser-runner/jobs/403527216

TravisCIのライフサイクルにおいてインストール時には npm ci が用いられる。
このとき、npm v6以前では npm ciの完了後、そのプロジェクトのnpm postinstall が実行されていたが、
v7からはこれが実行されなくなった。
[BUG] npm ci doesn't run postinstall script #1905 というチケットが作成されているが、バグではない模様。

もともと postinstall はそのプロジェクトがライブラリとして別のプロジェクトにインストールされた際に実行されることを想定して、そのプロジェクト自身の npm install (あるいは npm ci)が実行された後に実行される挙動が誤っていたと理解している。


この挙動が変わったことによってこんな問題が発生した。
lerna で管理していたプロジェクトにおいて

 "postinstall": "lerna bootstrap",

といった感じで子パッケージの依存モジュールをインストールしていたときに、ルートにあるpackage.jsonに定義してあるモジュールはインストールされるが、子パッケージのpackage.jsonに記載されている内容はTravisCI上でインストールされない。

そのため後続のテストライフサイクルにおいて実行される、lerna run test で各子パッケージのtestスクリプト実行時に依存モジュールが存在しないので mocha: not found となってテストが落ちることになった。

TravisCI上の問題に対しては、postinstall ではなく手動で lerna bootstrap実行することで解決した。

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

Windows10 Node.jsのバージョン管理

背景

windows10でnode.jsをインストール、バージョン管理の方法についてまとめる。

開発環境
windows10 64bit

結論

この記事がとても参考になった。m(_ _)m
nvm-windowsでNode.jsバージョン管理

方法

nvmのwindows版であるnvm-windowsをインストール
coreybutler/nvm-windows

  • nvm-setup.zipをダウンロード
  • c直下に配置
  • コマンドプロントを開く
> nvm --version
Running version 1.1.7
> nvm list available

今回は10.22をインストール

> nvm install 10.22

インストール後、使用バージョンを指定

> nvm use 10.22
> node -v
v10.22.0
> npm version
6.14.6

まとめ

  • node.jsの公式サイトからダンロードするよりもこちらの方がバージョン管理が楽
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む