【Node.js】Line Messaging APIでLine Botを作るまでに躓いた箇所をまとめる

#はじめに
普段はVue.jsやNuxt.jsを使っている者です。バックエンド側の知見も得ようと言うことでExpressを最近触りはじめたのですが、今回はLINE botを作るにあたって躓いた箇所をまとめていきたいと思います。

#LINE Messageing APIの導入①（ngrokでトンネリングさせる）

LINE Messageing APIのwebhookを使用する際はhttps通信でやりとりをしなくてはいけません。しかしhttpsでやりとりをローカルで行うことはできずherokuに一度アップして動作の確認をする記事が散見しました。

毎回デプロイする手間を省くためにngrokを使用することによってローカルでhttps通信でLINE Messageing APIを試すことができるのでこちらを採用した方が良いかと思います。不便な点としては1時間でsessionが切れてしまうので都度URLを登録し直すのがめんどくさいというところでしょうか。

###■ngrokで引っかかったポイント

ngrokを使用する際は、ターミナルを2つ開く必要があり、片方ではlocalhost3000

【Nuxt.js】ボタンクリックで画面を表示させる方法（アプリ開発アウトプット）

#はじめに
こんにちは！
今回は【Nuxt.js】ボタンクリックで画面を表示させる方法についてアウトプットしていきます！

#前提
・Nuxtの新規プロジェクト作成が既に済んでいる
・vue.jsの基礎学習が済んでいる

#対象
・真偽値を使用しての開発を学びたい方
・診断アプリケーションを作りたい方

#実装
“`vuejs:template

診断を始める！

SAP BTPのCloud Foundry EnvironmentにNode.jsアプリをデプロイする

この記事は[Node.js Advent Calendar 2021](https://qiita.com/advent-calendar/2021/nodejs)の12日分の記事です。

今回はNode.js+expressのアプリを作ってSAP BTPのCloud Foundry環境にデプロイする方法について説明します
#環境
OS:Windows10
Node.js：16.13.1
CF-CLI：V8

#Node.jsとは
サーバーサイドで動くJavaScriptの実行環境です。

#SAP BTPのCloud Foundry環境について
SAP BTPは、インテリジェントエンタープライズアプリケーションとデータベース、およびデータ管理機能、アナリティクス、統合機能、拡張機能が一つに統合された、クラウド環境とハイブリッド環境の両方に対応したプラットフォームです。
数百もの SAP アプリケーションとサードパーティアプリケーションの事前構築済み統合も含まれています。

https://www.sap.com/japan/products/business-technology-

Reactのコンポーネントライブラリの開発では、ライブラリの依存関係の指定に気を付けなければいけないという話

## はじめに
Reactのコンポーネントライブラリを初めて開発しました。
今回はライブラリの依存関係で少し詰まった際に調べた内容を中心にお話しします。

## コンポーネントライブラリ開発で参考にした記事
以下の記事を参考に作成しました。大変分かりやすかったです。

– 公開方法の参考記事
– [3分でできるnpmモジュール](https://qiita.com/fnobi/items/f6b1574fb9f4518ed520)
– コンポーネントライブラリ開発の参考記事
– [React Component な npm のパッケージを作って TypeScript のプロジェクトで使う](https://qiita.com/pure-adachi/items/a9a39b3ffcb5af4c5b59)

## コンポーネントライブラリ開発プロジェクトの構成
– この後の説明をスムーズにするために、プロジェクトの構成を記載しておきます。

“`
root
├ sample-app (動作確認用プロジェクト)
│ ├ src
│ │ └ index.js
│ └

react-nativeでMapにマーカーを動的に表示させる

（１）react-native-mapsで動的にマーカーを表示する

普段はソーシャルワーカー(PSW)として障がいをお持ちの方の支援をしています。ReactやReact Nativeでアプリ作成を楽しんでいます。以前作成したReactNativeアプリでreact-native-mapsを使用したので、まとめておこうと思います。

参考にした記事【ReactNative】react-native-mapsで地図の表示領域が描画される度に領域情報を取得する

React Native のアドベントカレンダーを作成してくれた@nekonikiさんの記事です、ありがとうございます:blush:

（２）およそ 25000 か所

こちらは日本全国にある障がい者向けの就労支援事業所の数です、近年とても増えてきておりIT技術を学ぶことができる事業所もあります。すべての事業所を一度マップにしてみたい

[Prisma] チートシート

## 概要
Prismaを使ったプロジェクトを半年くらい担当していたが、そのプロジェクト離れることになったのでまた使う時のためのメモ

**公式ドキュメント**

[prisma-client](https://www.prisma.io/docs/concepts/components/prisma-client)
[Prisma Client API reference](https://www.prisma.io/docs/reference/api-reference/prisma-client-reference#model-queries)

https://www.prisma.io/

## CRUD

|メソッド | アクション |メモ |
|—|—|—|
| create |作成 | |
|createMany |一括作成 | bulk insert |
|findUnique |取得 | 一意の識別子またはIDを指定する必要がある |
|findFirst |取得 | 条件に一致する最初のレコードを取得 |
| findMan

nodebrewのインストール方法

## 最初に打つコマンド
“`
$ curl -L git.io/nodebrew | perl – setup
“`

## .bash_profileにパスを通すために設定を記述する。
“`
$ echo ‘export PATH=$HOME/.nodebrew/current/bin:$PATH’ >> ~/.bash_profile
“`

## .bash_profileの変更を適用させる。
“`
$ source ~/.bash_profile
“`

## nodebrewがインストールされているのか確認する。
“`
$ nodebrew help
nodebrew 1.1.0

Usage:
nodebrew help Show this message
nodebrew install Download and install (from binary)
nodebrew compile

複数のOpenID Connect認証を（Google/Azure/Yahoo）、ExpressとPassportによる実装クライアントで試してみる

# 概要

複数のサービス（Google/Azure/Yahoo）が提供する、OpenID Connect（以下、「OIDC」と略記）のIdentity Provider（以下、「IdP」と略記）に対して、次の2つを説明する。なお、ここでは対象サービスとして「無償で**試用が可能**なもの」を選んでいる。

1. 実際にIdP側に設定・登録する内容と、各サービスごとの操作手順
2. Relying Party(以下「RP」と略記）側への反映方法

その目的は、「OIDCのIdP提供元によってIdP側の設定手順や呼称が異なるが、それをOIDCのクライアントID、シークレットキーに注目して実際のIdp側の操作画面の紐づけること」である。

本記事ではRP側の実装は同一とし、認証要求先のIdPの設定に応じて「それぞれのOIDC認証が動作すること」を検証する。PR側は、Node.jsのExpressを使ったWebページ上にPassportを使って簡単に実装したサンプルを用いる。

本記事で用いるRP側のサンプルコードは、以下を参照。

https://github.com/hoshimado/

nodist

# はじめに
開発するシステム毎に特定のNode.jsのバージョンが指定されている場合がある。
nodistを使うとバージョンを切り替えられるので便利でした。
しっかし、最新バージョンで動くようにメンテしておいて欲しいですわ！
ダウンロードサイトと基本的なコマンドを記録しておきます。

# ダウンロードサイト
https://github.com/nullivex/nodist/releases

# コマンド

“`bash
nodist
nodist -v
nodist install バージョン
nodist npm match
nodist rm バージョン
“`

家計簿のデータをNode.jsでスプレッドシート連携してみた

この記事は[レコチョク Advent Calendar 2021](https://qiita.com/advent-calendar/2021/recochoku)の11日目の記事となります。

# はじめに
はじめまして、最近サウナにどハマりしている株式会社レコチョクの酒見です。
サ活こそ正義ですね。
私も音楽が好きで有名どころしか知らないかもですが、学生時代からいろんな名曲や
アーティストの音楽と共に過ごしてきました。
BUMP OF CHICKEN / ELLEGARDEN / ONE OK ROCK / UVERworldあたりが大好きで、泣かされたり背中を押されたりテンションを上げてもらったりと、思い入れが特に強いです。（世代がわかってしまうかもですね）

そんな私は、普段はサーバサイドエンジニアとしてPHPを触る機会が多いんですが
今回はNode.jsを使用して、Google スプレッドシートへのデータ連携を作ったことを書きたいと思います。

# 前提として
私はスプレッドシートを家計簿代わりに使っています。
PCから入力する分には気にならなかったのですが、スマホからの

NodejsからArduino IoT Cloudを操作するためのメモ

# はじめに
Arduino IoT Cloudを課金プランにすることでNode-REDで操作できることを確認したので、今回はNode.jsからそのまま操作できるか確かめた。

# 結論
wrapperコードを使いつつもLチカで動作確認できた。

# 準備

**重要：APIキーを取得する都合から、今回はArduino IoT Cloudの課金プランを使用する。最低でも400円/月弱の課金が必要。**
**2021/12/11確認にて、Entryプランの月払いができなくなったようです。Entryプランであれば年払いで$24程度必要です。**
一応課金プランからFreeプランに戻すのは可能。

– Arduino IoT Cloudアカウント(Entryプラン以上)
– [Arduino MKR Wifi 1010](https://www.switch-science.com/catalog/7384/)
– ブレッドボード
– [抵抗付きLED(秋月電子通商)](https://akizukidenshi.com/catalog/g/gI-16687/)
– n

AzureAppServiceにVueやReactのアプリがうまくデプロイできない問題

# はじめに

こんにちは。先日、[ハッカソンリーグ2021 -ルーキーリーグ](https://mashupawards.connpass.com/event/225670/)というハッカソンに参加してきました。
「azure製品を使いたおして、”ポストコロナの〇〇”をつくりだそう！」というハッカソンです！
シェアハウスの友達と4人でwebサービスを作成し、なんと、優秀賞をいただくことができました！！！ ?????

今回は、サービスを作成するにあたって,デプロイ時に**どハマった**ことを記事にしました。
同じ問題で時間を食い潰される方がでないように祈りを込めて……

# 要約

– 表題の問題が出たときは、以下のコマンドを、スタートアップ コマンド に設定しよう

“`shell
pm2 serve /home/site/wwwroot –no-daemon –spa
# or
pm2 serve /home/site/wwwroot/build –no-daemon –spa
“`

# 何が起こったか

– いつも通りvueプロジェクトを作成、ローカ

まいばすけっとのレシートをtesseract.jsでOCR読み込みしてみる #リテールテック

[リテールテックアドベントカレンダー](https://qiita.com/advent-calendar/2021/retailtech)の10日目の記事です。

スーパーといえばレシートが発行されると思いますが、このデータを上手く読み込んでテキスト情報にできないか試してみたいと思ったのでトライしてみます。

調べるとよく出てくるtesseract.jsを使ってみたいモチベもありつつ、アドベントカレンダー間に合わせよう的な勢いで執筆しています。

https://www.npmjs.com/package/tesseract.js

## レシートの写真はグーグル先生がいっぱい持っている

もう最寄りのまいばすけっとが閉まっている(現在23:30)のでグーグル先生に画像を貸してもらいます。

> ![スクリーンショット 2021-12-10 23.27.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/cd362447-b348-690d-224a-e3848d381606.png “

ibm cloud functionsを使ってみた(決まった時間に、ローカルで動いているAPIをコール)

# はじめに
メールの定期送信を行いたいという要件があり、ibm cloud functionsを使ってみたのでその覚書を記しておきます。

今回はfunctionsを使って決まった時間に、ローカルで動いているAPIをコールする部分を作りたいと思います。

## ibm cloud functions

サービスからfunctionsを選択し、「作成の開始」を選択します。

おそらく初めて使う場合は、名前空間を作成することになりますが、ここでは割愛します。

この画面で、fuctionsのコンポーネントを作成していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227613/8a43e956-559a-9018-41d9-ead1bb0ff

Node.js + TypeScript からC++のライブラリを呼び出す

# 目的
– Node.jsからC++のライブラリをコールしたい
– node-gypを使えばできるっぽいが、どのサンプルも動かない・・・（当方intel Mac / Big Sur）
– v8のAPIが色々変更してるっぽい。最新環境で動作確認できるサンプルが欲しい

# 成果物
とりあえず作ってみたサンプル一式は以下です。
https://github.com/swmokyun/sample-node-gyp

# 環境
– intel Mac
– macOS Big Sur (11.6)
– Node.js 14

# Cまわりのセットアップ
以下を参考にCをビルドできる環境を作っておく
https://github.com/nodejs/node-gyp#installation

# nodeまわりのセットアップ
– Node.js 14 を動作できるようにする。自分はnodebrewを使って切り替えています。
– 以下をyarnで追加

　”@types/node”: “^16.11.12″,
　”node-gyp”: “^8.4.1″,
　”ts-node-dev”: “

Node.js + fastify + TypeScript + SwaggerでRESTサーバを構築する

# 概要
Node.js、fastify、TypeScript、Swaggerで簡単なサンプルを作ってみたので共有します。
サンプルコード: https://github.com/swmokyun/sample-fastify-typescript-swagger

# 目的
– とにかくラクにRESTサーバを作りたい
– pythonでもいいけどフロントエンドでNext.jsとかつかうからNode.jsで言語を統一したい
– TypeScriptで型の恩恵を受けたい
– SwaggerでRESTスキーマまわりのあれこれをラクしたい

# expressよりfastifyがいいらしい
Node.jsでサーバといえばexpressと思ってたけど、最近ではKoa.jsとかfastifyが有力候補らしい。fastifyの方がtypescriptまわりがいい感じにサポートされているっぽいのでこっちをチョイス。

https://www.fastify.io/docs/latest/Getting-Started/

# fastify-swaggerがいい感じ
調べた感じではfastify-s

DIY Mini PCB Ruler(DIYミニPCB定規)


![s

Shopify App CLIとNode.jsを使用してShopifyアプリを構築する

## この記事を書こうと思った背景と、記事を読ん得られるもの
　- Shopifyアプリを構築する必要があったので、その手順と備忘録です。
　- ハマった箇所があったのでその説明
　 – 結論だけいってしまうと、Node 17で構築しようとするとエラーがでるので、公式推奨の16.13.1にすべき（21年12月時点）
　- Nodeバージョン変更するのに便利なツールを紹介します

## 記事の対象者
– Shopifyアプリ構築者
– 未来の自分　

## 環境
– MacOS 10.15.6
– Node 17.2.0 => 16.13.1に変更
– Homebrew 3.3.7

## 参考にした記事・動画
#### Shopify Japanが出してる動画
– 2021年12月現在で、少し古い内容だが全体像をつかむのにためになる。動画内で叩くShopifyAppCLIコマンドが少し古いので、その場合は公式ドキュメントを読んで確認をする。
– https://www.youtube.com/watch?v=2zDFNS6r1aQ&t=4259s
– https://www.

【BTP】SAP Feature Flags Serviceを使ってみた

この記事は [SAP Advent Calendar 2021](https://adventar.org/calendars/6252) の12月10日分の記事として執筆しています。

# はじめに

今回、SAP BTP Trialで利用できるサービスのなかからSAP Feature Flags Serviceを使ってみました。
Help Portalのドキュメントは[こちら](https://help.sap.com/viewer/2250efa12769480299a1acd282b615cf/Cloud/en-US/d485374a71a149a7ba96b7403985a1a6.html)

## Feature Flagとは？
> アプリケーションを再デプロイまたは再起動せずに新しい機能を有効または無効にできます。

とあるように、「コードを書き換えることなく動的にシステムの振る舞いを変更できる」開発手法です。
アプリケーションの外部にフラグを持つことで機能のON/OFFを切り替えることができます。

あらかじめアプリケーションからFeature Flagの状態を参照する

【Node.js】ExpressとPassport.jsで認証機能を実装する

#はじめに
普段はVue.js, Nuxt.jsに使っている者です。最近バックエンド側の知見も得ようということでExpressで個人アプリを作っているのですが、ログイン・ログアウトの実装において初めてPassport.jsというモジュールを使ったので忘れないうちにメモします。

実装の過程で躓いた箇所や不明で調べた箇所を実装コードとともに解説をしていきます。

“`javascript:server.js
if (process.env.NODE_ENV !== “production”) {
require(“dotenv”).config();
}
const express = require(“express”);
const app = express();
const bcrypt = require(“bcrypt”);
const passport = require(“passport”);
const methodOverride = require(“method-override”);
const flash = require(“express-flas