Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all 8825 articles
Browse latest View live

JavaScript/node.jsでsleep

$
0
0

ちょっとしたことだけど、JavaScriptにはsleepがないので。

awaitnewPromise(resolve=>setTimeout(resolve,1000));

Vue CLI のインストールで躓いた場合

$
0
0

公式サイトのインストールコマンドを打ったのにインストールできない。

環境 : Mac OS Catalina 10.15.6
シェル : ZSH
nodenv : 1.3.2
node : v8.11.3

インストールコマンド

% npm install -g @vue/cli

エラーメッセージ

npm ERR! code E404
npm ERR! 404 Not Found: @vue/cli-ui@^4.4.6

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/whoami/.npm/_logs/2020-08-06T07_59_42_517Z-debug.log

解決方法

以前インストールした(インストール失敗した?)すべてのvue cliを削除します。

sudo npm uninstall --global vue-cli
sudo npm uninstall --global @vue/cli

最新バージョンをインストールします。

sudo npm install --global @vue/cli@latest

バージョンを確認

vue -V

npm run でコマンドが実行できない[Windows Docker]

$
0
0

環境

  • Windows10
  • Docker Toolbox
$ docker -v
Docker version 18.09.0, build 4d60db472b

やりたいこと

$docker-composerun--rm/bin/bash
$ npm i --no-bin-links$ npm run eslint

みたいなコマンドを使いたい。

エラー

sh: 1: eslint: not found

こんな感じで怒られる。

原因

node_modules/.binにコマンドのリンクが置かれていないため。
Mac では自動で作成されていたため、Windows ではシンボリックリンクがはれない問題が原因なのかもしれない。

解決法

node_modules を一度全て削除し、docker を介さずに npm iを実行すると node_modules/.binが作成される。

>npmi>docker-composerun--rm/bin/bash
$ npm run eslint

とおった。

おまけ

http://minatooe.hatenablog.jp/entry/2017/12/15/234418

あとは、Win は管理者権限なら symlink を作れるようになるらしいので、vagrant を動かすコマンドプロンプトを管理者権限で起動すると--no-bin-links をつけなくても大丈夫になるらしい。

とあったのでやってみたができなかった…。

初めて書いたサーバーサイド側の処理で、Node.jsを使いログイン処理を実装してみました。

$
0
0

生JS(EC6)を3ヶ月ほど叩き込んだ後、HTMLとCSSを一通り学び、Node.jsでログイン処理を実装してみました。

【実装環境】
* Node.jsのStable版をインストール
* 実装が便利になるということで、Expressを導入。
* Vagrant上で8001のポートを空けて作業

Nodeでログイン処理を行うにあたり、
機能を追加した結果が以下の通り。

"dependencies": {
"body-parser": "^1.19.0",
"ejs": "^3.1.3",
"express": "^4.17.1",
"express-session": "^1.17.1",
"request": "^2.88.2"
}

Step1

ID、パスワードが入力され、POSTされるまで

処理のスクリプトを書いているファイル内の処理。
ブラウザで/loginが叩かれた際、login.htmlをレンダリング。

// /loginが開かれた場合の処理
app.get('/login', function (req, res) {
res.render('login.html', {err:""});
req.session.name = "";
})

この画面で「ログイン」ボタンを押すと、/loginSendにPOSTする。
スクリーンショット 2020-08-07 8.43.06.png

<form action="/loginSend" method="POST">
メールアドレス:<input type="text" name="mail" >
<br>
パスワード :<input type="text" name="password">
<br>
<br>
<input type="submit" value="ログイン" >
</form>

Step2

POSTされたデータを処理する

・ここで入力されたID/パスワードを、データベースに取得する
(その際にパスワードはハッシュ化してID/ハッシュ化されたパスワードの組み合わせを取得する)
・正常なログインができた際、セッション情報を付与する。

`//アイパス一致すれば、Main画面をレンダリングする。
if (result["結果"] === "OK"){
  res.render('main.html');

  req.session.mail = result["user_id"];
  req.session.name = result["user_name"];
}`

執筆中..

Node.jsよりJDBCでOracle, Salesforceなどに1ドライバで接続

$
0
0

はじめに

Node.jsアプリケーションからJDBCでSQL Server、Oracle、DB2、Postgres、MongoDBなどのDBや、Salesforce、Eloqua、Oracle Sales Cloud、Oracle Service CloudなどのSaaSアプリケーションにJDBCで接続する必要性があるならば、DataDirect JDBCドライバを利用すると楽勝です。

この記事では、DataDirect JDBC ドライバを使用して Node.js から Salesforce データに接続してみます。

事前準備
Node.js

DataDirect Oracle JDBC ドライバのダウンロード&インストール

1,こちらよりDataDirect JDBCドライバをダウンロードします(お試し版が15日使えます)。

2,jarファイルのダウンロードが終了したら、パッケージを実行してJDBCドライバをインストールします。

1)Windowsの場合、インストーラを実行し、JDBCドライバをインストールします。
2)Unix/Linuxの場合、以下のコマンドでドライバをインストールします。

java -jar PROGRESS_DATADIRECT_JDBC_INSTALL.jar

Node.jsのJDBCパッケージをインストールする ​

1,Node.jsでは、JDBCドライバを利用するためにnode-jdbcパッケージをインストールする必要があります。
2,以下のコマンドでパッケージをインストールします。

npm i jdbc

3,DataDirect JDBCドライバを/install_dir/Progress/JDBC_XX/libからプロジェクトライブラリにコピーします。

今回はSalesforceで試すので、Salesforce JDBCドライバであるsforce.jarをコピーしました。

Node.jsからSalesforceに接続する

1,DataDirect JDBCドライバを経由し、Salesforceに接続。テーブルにクエリするサンプルコードを以下に記述します。必要に応じて変更くださいね!

var JDBC = require('jdbc');var jinst = require('jdbc/lib/jinst');var asyncjs = require('async');if (!jinst.isJvmCreated()) {
    jinst.addOption("-Xrs");    jinst.setupClasspath(['./drivers/sforce.jar']);  }
  var config = {
    // SparkSQL configuration to your server
    url: 'jdbc:datadirect:sforce://login.salesforce.com;DatabaseName=default;SecurityToken=stoken',
    drivername: 'com.ddtek.jdbc.sforce.SForceDriver',
    minpoolsize: 1,
    maxpoolsize: 100,
    user: 'saiteja09@gmail.com',
    password: 'password',
    properties: {}
  };  var sforcesqldb = new JDBC(config);//initialize
sforcesqldb.initialize(function(err) {
    if (err) {
      console.log(err);    }
  });
  sforcesqldb.reserve(function(err, connObj) {
    if (connObj) {
      console.log("Using connection: " + connObj.uuid);      var conn = connObj.conn;
      // Query the database.
      asyncjs.series([
        function(callback) {
          // Select statement example.
          conn.createStatement(function(err, statement) {
            if (err) {
              callback(err);            } else {
              statement.setFetchSize(100, function(err) {
                if (err) {
                  callback(err);                } else {
            //Execute a query
                  statement.executeQuery("SELECT * FROM SFORCE.Account;",
                      function(err, resultset) {
                        if (err) {
                          callback(err)
                        } else {
                          resultset.toObjArray(function(err, results) {
                            //Printing number of records
                            if (results.length >0){                              console.log("Record count: " + results.length);                              console.log(results);                            }
                            callback(null, resultset);                          });                        }
                      });                }
              });            }
          });        },
      ], function(err, results) {
        // Results can also be processed here.
        // Release the connection back to the pool.
        sforcesqldb.release(connObj, function(err) {
          if (err) {
            console.log(err.message);          }
        });      });    }
  });

2,setupClasspath メソッドに注意です。DataDirect Salesforce JDBC ドライバへのパスを指定する必要があります。

上記のコードを実行すると、レコード数とテーブルデータがコンソールに表示されます。

簡単ですね!

参考:Salesforce.com対応高速JDBCドライバー

MACでnodebrew(とNode.js)を入れたい

$
0
0

自分windowsユーザーなのにMacで入れたいとのことで、人に教えないといけない感じになり、自分のMacで試してみてできたので備忘録残します。
ターミナルMac便利ですね。。

基本的には
NodebrewでNodeをインストールする - Qiita
こちらの記事を参考にさせてもらいましたが、自分の環境だとちょっと出来ない箇所もあったので出来なかった分ここに残しておく感じです。

Homebrewを入れる

Homebrew
こちらからいれましょう
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

ターミナルで叩いてインストール

NPMとNode.jsは削除しておく

基本的にはnpm使わないので削除します。
https://nabewakashi.com/how-to-switch-to-nodebrew
こちらの記事を参考にしました。
sudo使うときは気を付けましょう。
ですが、nodeが削除できてなかったのでおそらくゴミが残っている感じだったので、

$ which node
/usr/local/bin/node
$ rm -rf /usr/local/bin/node \
>     node_modules

こちらで削除したらnodeが消えました。

nodebrewをインストール

インストール
brew install nodebrew

確認
nodebrew -v
バージョンが表示されればOK。

bashが無かったら入れる

最初、MACですと.bash_profileがないそうなので、作成します。
https://qiita.com/k3ntar0/items/eb8cdbd8eba9da388def
こちら非常に助かりました。

pathを通しておく

.bash_profileを開いたら
export PATH=$HOME/.nodebrew/current/bin:$PATH
こちらでパスを通します
保存したら
source ~/.bash_profile
で更新して反映します。

セットアップ

nodebrew setup
これやらないとインストールできないらしいです

Node.jsを入れます

・バージョン確認
nodebrew ls-remote

・指定したバージョンのインストール
nodebrew install-binary <version>

・インストールしたバージョンのリスト
nodebrew ls

・指定したバージョンを指定
nodebrew use <version>

node -v
で入ってればOK

参考文献

Node.js (JavaScript)でセミコロンを付けていなかったことで "TypeError: require(...) is not a function"が発生していた(JavaScriptの構文について)

$
0
0

今日JavaScript(Node.js)を書いていたときに遭遇した出来事を備忘録がてら書き残しておく。

エラーになったコード

下記のコードはエラーになる。

constfs=require('fs')(async()=>{console.log(fs)})()

実行結果

(async ()=>{
^

TypeError: require(...) is not a function

上のエラーを解決させたコード

JavaScriptは;を書こうが書かまいがが動く、と思っていたが、1行目の末尾に ;をつけることで、今回のコードは問題なく動くようになる。

constfs=require('fs');(async()=>{console.log(fs)})()

※実行結果は長くなるので省略。サンプルコードが悪かった...

"TypeError: require(...) is not a function"が出る仕組み

これはどういうことかなと思ったけど、考えてみれば単純なことだった。

JavaScriptは文末にセミコロンを付けなかった場合、その後の文が構文的に解釈可能な場合、解釈しようとする。
自分もここらへんは自信がないので、JavaScript Primerの記述も引用させていただく。

JavaScriptには、特殊なルールに基づき、セミコロンがない文も行末に自動でセミコロンが挿入されるという仕組みがあります。 しかし、この仕組みは構文を正しく解析できない場合に、セミコロンを足すという挙動を持っています。 これにより、意図しない挙動を生むことがあります。そのため、必ず文の末尾にはセミコロンを書くようにします。

引用元のページ: https://jsprimer.net/basic/statement-expression/#statement-expression-summary

つまり先ほど私が書いたコードは下記のように解釈された形となる。

// require('fs')(/* ~ */) 的な解釈となっていたconstfs=require('fs')(async()=>{console.log(fs)})()

余談: prettierでセミコロンを付けない設定をした際の挙動

気になったので試してみた。

prettierの設定で semi: falseにしたとき、;はどこにつくのか?
結果は下記の通り。

constfs=require('fs');(async()=>{console.log(fs)})()

あとがき

普段 ;は付ける派なのだが、なんとなくプロトタイプのコードを書いていてつけないでいた。後から prettierかければ済む話だとか考えていたら、思わぬエラーに引っかかった。
おかげでJavaScriptのことを少し知ることができたので結果的に良かったと思う。

Reactでデータグリッド/テーブルを実装するときに見てほしいおすすめコンポーネント集

$
0
0

データグリッド

Reactでデータグリッドを実装したいときにおすすめしたいコンポーネント集です。
Material UIが好きなので、Material UIを使っている私の目線でのコメントが多いですが、ご容赦ください。

まだ実装お試ししていないけど良さそうなものがいくつかあるので、少しづつ追加しますよ :D

コンポーネント集

見る専部門

データを見せることに向いている系です。

Material UI - Table Component

Table React component - Material-UI
MaterialUI純正のテーブルコンポーネントです。ソートやフィルタは自分で実装してイベントで差し込んでいく感じですね。仮想テーブルもできますが、他のライブラリとのあわせ技なので、このコンポーネントの特徴ってことでもないですね。なにより、Material UIの純正なので、Material UIをアプリの全体荷適用しているなら第一候補ですね。見た目もスッキリ統一感が出ますしね。あとはなんて言ったって、Material UIはデモページもAPIのページもとっても詳しい。ありがたい。

React-Table

tannerlinsley/react-table

Reactのテーブルといえばこれですね。名前もそのままReact-Table。いろいろな方がコントリビュートしてくれているので、やりたいことはなんだってできるような印象です。デモページもとっても豊富でわかりやすいですね。Material UIにこだわらないなら、第一候補ではないでしょうか?ちょっと見た目の調整は頑張らないといけないかもしれないですね。Style差し込んで行きましょう。

Grid.js

Grid.js - Advanced table plugin

比較的新しいライブラリです。TypeScriptで実装されているのがいいですね!新しい割にGitHubスター数が結構多いので、これからグイグイくるんじゃないかなぁ、という期待と、TypeScriptを採用しているので仲良くなれそうだなぁという理由から、序盤で紹介させていただきました。見た目もかっこいいですね。

Material-table

mbrn/material-table

Materialデザインを踏襲して実装されたテーブルコンポーネントですね。Material UIのサイトでも紹介されているので、公式もその良さを認めているのかな?テーブル自体の操作感はよく、いいコンポーネントだと思います。

mui-datatables

gregnb/mui-datatables

Material-table と対を成すのが、mui-datatablesです。テーブル自体の操作感はかなり良いです。デモページも結構見やすくて、見ているだけでも楽しくなるので、おすすめです。gregnb/mui-datatables

SpreadSheet寄り編

データを見ながらちょちょっと修正したいときに便利なコンポーネントです。ほとんどExcelじゃん、ってのもあります。

react-data-grid

React Data Grid · Excel-like data grid component built with React

Excelライクな感じになっているが、それなりにWeb感も残しています。Excelほど自由自在にコピペできる感じではないのがちょっと惜しい。

React Datasheet

React Datasheet Component

かなりExcelライクな感じですね。テーブルのほとんどの要素を編集可能にしないといけないケースには向いていそうですね!

ブルジョワ編

金の力は偉大だ!!!

ReactGrid (有償)

React Grid

なにもいうことはないです。すげーよ。


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

$
0
0

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などの編集

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

$
0
0

概要

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

ソースコード

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

get_redirect.js
'use strict'consthttps=require('https')consthttp=require('http')// リダイレクト先 URL を取得する関数functionget_redirect_url(src_url){returnnewPromise((resolve,reject)=>{try{// https と http で使うモジュールを変えるconstclient=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()=>{// コマンドライン引数を取得constsrc_url=process.argv[2]// リダイレクト先URLを取得constredirect_url=awaitget_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

参考資料

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

$
0
0

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

■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

bottlejs hello 💩

$
0
0

動機

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

前準備

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

実装

index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="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
importBottlefrom'bottlejs'window.kms=window.kms||{};window.kms.Unko=function(){this.color="brown";}window.kms.rootBottle=newBottle();window.kms.rootBottle.service("💩",window.kms.Unko);window.kms.unko=window.kms.rootBottle.container["💩"];alert("💩の色は"+window.kms.unko.color);

image.png

結論

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

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

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

$
0
0

はじめに

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";constline=require("@line/bot-sdk");constclient=newline.Client({channelAccessToken:process.env.ACCESSTOKEN});// ①SDKをインポートconstcrypto=require("crypto");exports.handler=function(event,context){letbody=JSON.parse(event.body);letsignature=crypto.createHmac("sha256",process.env.CHANNELSECRET).update(event.body).digest("base64");letcheckHeader=(event.headers||{})["X-Line-Signature"];if(signature===checkHeader){// ②cryptoを使ってユーザーからのメッセージの署名を検証するif(body.events[0].replyToken==="00000000000000000000000000000000"){letlambdaResponse={statusCode:200,headers:{"X-Line-Status":"OK"},body:'{"result":"connect check"}',};context.succeed(lambdaResponse);// ③接続確認エラーを確認する。}else{lettext=body.events[0].message.text;constmessage={type:"text",text,};client.replyMessage(body.events[0].replyToken,message).then((response)=>{letlambdaResponse={statusCode:200,headers:{"X-Line-Status":"OK"},body:'{"result":"completed"}',};context.succeed(lambdaResponse);}).catch((err)=>console.log(err));// ④リクエストとして受け取ったテキストをそのまま返す}}else{console.log("署名認証エラー");}};

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

①SDKをインポートする

constline=require("@line/bot-sdk");constclient=newline.Client({channelAccessToken:process.env.ACCESSTOKEN});

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

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

constcrypto=require("crypto");exports.handler=function(event,context){letbody=JSON.parse(event.body);letsignature=crypto.createHmac("sha256",process.env.CHANNELSECRET).update(event.body).digest("base64");letcheckHeader=(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..."のリクエストが来ます。

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

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

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

lettext=body.events[0].message.text;constmessage={type:"text",text,};client.replyMessage(body.events[0].replyToken,message).then((response)=>{letlambdaResponse={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を組み合わせれば、面白いことができそうです。
ご覧いただきありがとうございました。

Mac セットアップ(2)

$
0
0

コマンドラインインストール

brew

https://brew.sh/index_ja

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

途中でXCodeのインストール確認があるのでEnterを押す

Node

nodebrewでバージョンを管理したい

brew install nodebrew

途中経過

Updating Homebrew...
==> Auto-updated Homebrew!
Updated 1 tap (homebrew/core).==> New Formulae
osm
==> Updated Formulae
Updated 10 formulae.

==> Downloading https://github.com/hokaccha/nodebrew/archive/v1.0.1.tar.gz
==> Downloading from https://codeload.github.com/hokaccha/nodebrew/tar.gz/v1.0.1
######################################################################## 100.0%==> Caveats
You need to manually run setup_dirs to create directories required by nodebrew:
  /usr/local/opt/nodebrew/bin/nodebrew setup_dirs

Add path:
  export PATH=$HOME/.nodebrew/current/bin:$PATH

To use Homebrew's directories rather than ~/.nodebrew add to your profile:
  export NODEBREW_ROOT=/usr/local/var/nodebrew

Bash completion has been installed to:
  /usr/local/etc/bash_completion.d

zsh completions have been installed to:
  /usr/local/share/zsh/site-functions
==> Summary
🍺  /usr/local/Cellar/nodebrew/1.0.1: 8 files, 38.6KB, built in 2 seconds

インストールできたか確認

nodebrew -v

(成功した場合の)結果

nodebrew 1.0.1

Usage:
    nodebrew help                         Show this message
    nodebrew install<version>            Download and install<version> (from binary)
    nodebrew compile <version>            Download and install<version> (from source)
    nodebrew install-binary <version>     Alias of `install`(For backword compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for`list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias<key> <value>          Set alias
    nodebrew unalias<key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in<version> to current version
    nodebrew exec<version> --<command>  Execute <command> using specified <version>

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4

zshにパスを追加

vi ~/.zsh_profile

以下を追加

export PATH=$HOME/.nodebrew/current/bin:$PATH

セットアップをしてnodebrewのインストールを完了する

nodebrew setup

結果

Fetching nodebrew...
Installed nodebrew in$HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH========================================

Node v10.xをインストール

v10.22.0が最新なので以下のコマンドでインストールする

nodebrew install-binary v10.22.0

結果

Fetching: https://nodejs.org/dist/v10.22.0/node-v10.22.0-darwin-x64.tar.gz
############################################################################################################################################################################################### 100.0%
Installed successfully
rouc@roucnombp ~ %

インストールできたか確認

nodebrew ls

結果

v10.22.0

current: none

スイッチする

nodebrew use v10.22.0

スイッチされたか確認

nodebrew ls

結果

v10.22.0

current: v10.22.0 ## <<<--- 現在どのバージョンが使われているかが表示されている

Linux 環境に Node.js インストール

$
0
0

いろんな Linux 環境に Node.js をインストールした記録

方針

「Ubuntuに最新のNode.jsを難なくインストールする」
https://qiita.com/seibe/items/36cef7df85fe2cefa3ea
を参考に、以下の方法を採ることにした。

  1. Linux ディストリビューションの公式パッケージで Node.js と npm を入れる
  2. npm install で最新の Node.js を入れる
  3. 古い Node.js を削除する

検証環境

  • Ubuntu14.04 (2020/07に実行)
  • Ubuntu18.04 (2020/08に実行)
  • 2020-02-13-raspbian-buster-lite (2020/07に実行)

Linux ディストリビューションの公式パッケージで Node.js と npm を入れる

$ sudo apt update
$ sudo apt install nodejs npm
$ sudo node -v 

ここで、 RaspberryPi だと v10.21.0
Ubuntu18.04 だとv8.10.0 だった。

npm install で最新の Node.js を入れる

$ sudo npm install n -g

Ubuntu14.04 でのエラーと対処

ここで Ubuntu14.04 でエラーが出た。

npm http GET https://registry.npmjs.org/n
npm http GET https://registry.npmjs.org/n
npm http GET https://registry.npmjs.org/n
npm ERR! Error: CERT_UNTRUSTED
npm ERR!     at SecurePair.<anonymous> (tls.js:1370:32)
npm ERR!     at SecurePair.EventEmitter.emit (events.js:92:17)
npm ERR!     at SecurePair.maybeInitFinished (tls.js:982:10)
.
.
.

「npm install で SSL Error になった時の対処法。」
https://blog.yug1224.com/archives/563d9b67bf652a600632d01e/

を参考にして、SSL鍵のバリデーションを一旦OFFしたらうまくいった。

# sudo npm config set strict-ssl false
# sudo npm install n -g

その後設定を元に戻す。

# sudo npm config set strict-ssl true

古い Node.js を削除する

node をインストールした後、aptでインストールしたものを削除、ログオン。

$ sudo n stable
$ sudo apt purge -y nodejs npm
$ exec $SHELL -l

バージョン確認。

$ node -v
v12.18.2

実行してみる。

WebSocketを使ったものをテスト実行するために、モジュールをインストール

# npm install -g ws

実行

# node index.js

Ubuntu14.04では以下のようにエラーが出た

Error: Cannot find module 'ws'
Require stack:

「Node.jsで、存在するはずのmoduleがrequireでエラーになることについて」
https://qiita.com/DNA1980/items/11fdb7233fc288ac3502

を読んで、

echo $NOTE_PATH

で設定されていなかったので以下のように実行すればエラー解消した

export NODE_PATH=`npm root -g`

Node.js の再インストール

$
0
0

Nodeがおかしくなった

$ node
Illegal instruction

環境

2020-02-13-raspbian-buster-lite

既存の Node.js

「Linux 環境に Node.js インストール」
https://qiita.com/nanbuwks/items/ed8adb2d4324c939a349
の通り、以下のようにインストール

1.Linux ディストリビューションの公式パッケージで Node.js と npm を入れる
2.npm install で最新の Node.js を入れる
3.古い Node.js を削除する

削除

node のインストール先を調べる
```

$ which node
/usr/local/bin/node
```

ファイル削除

$ sudo rm -rf /usr/local/bin/node
sudo rm -rf ~/.npm

削除できたかな?

$ npm
/usr/bin/env: ‘node’: No such file or directory

このあと、先の資料「Linux 環境に Node.js インストール」をもう一度実行して入れ直します。

さくっとDenoを試してみる

$
0
0

Denoの特徴

  • JavascriptとTypescriptの実行環境
  • Typescriptのコンパイラを内包している(tsc-,ts-nodeなど不要)
  • 標準ライブラリーは非同期処理にPromiseを採用
  • 実行時に必要な権限のオプション指定が必要
  • モジュールの扱いがNode.jsと異なる
  • etc

環境構築

Docker

こちらのイメージを使用します。
https://hub.docker.com/r/hayd/deno

Dockerfile
FROM hayd/alpine-deno:1.2.2# Prefer not to run as root.USER deno# Cache the dependencies as a layer (the following two steps are re-run only when deps.ts is modified).# Ideally cache deps.ts will download and compile _all_ external files used in main.ts.COPY deps.ts .RUN deno cache deps.ts

# These steps will be re-run upon each file change in your working directory:ADD . .# Compile the main app so that it doesn't need to be compiled each startup/entry.RUN deno cache main.ts
docker-compose.yaml
version:'3'services:app:build:.command:"run--allow-net--allow-readmain.ts"ports:-"8000:8000"volumes:-.:/appworking_dir:"/app"

HelloWorld

main.ts
import{serve}from"./deps.ts";constPORT=8000;consts=serve(`0.0.0.0:${PORT}`);constbody=newTextEncoder().encode("Hello World\n");console.log(`Server started on port ${PORT}`);forawait(constreqofs){req.respond({body});}
$ docker-compose up -d

APIの作成

Servestを使用
https://github.com/keroxp/servest

main.ts
import{createApp}from"https://servestjs.org/@v1.0.0/mod.ts";constapp=createApp();app.handle("/",async(req)=>{awaitreq.respond({status:200,headers:newHeaders({"content-type":"text/plain",}),body:"hello World!",});});app.listen({port:8000});

参考

https://qiita.com/ryo2132/items/8b957ed8b649f941fc3f

https://knowledge.sakura.ad.jp/24150/

Vue-CLI 3でnpm run serveが失敗するときの解決方法

$
0
0

事象

Dockerコンテナ内の環境にて、npm run serveを実行すると、下記のようなエラーが発生していました。

ERROR Failed to compile with 2 errors

This relative module was not found:

* ./src/main.js in multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.js, multi (webpack)/hot/dev-server.js (webpack)-dev-server/client/index.js ./src/main.js

環境

  • Microsoft Windows 10 Pro
  • Docker for Windows
  • Visual Studio Code
  • node.js : 12.18.2
  • npm : 6.14.5

原因

筆者の場合、npm installを実行してもpackage.json内に含まれているdevDependenciesがインストールされておらず、必要なライブラリ(ここでは@vue/cli-service)が存在していなかったというのが原因でした。

解決策

node.js側の環境変数であるNODE_ENVdevelopment(あるいはdev)にしてからnpm installを実行する必要がありました。

NODE_ENVを設定する方法は、①.コマンドラインからexportする方法と、docker-composeを使っている場合は②.docker-compose.xmlに記載する方法があります。

①.exportコマンドで設定する

下記のコマンドでNODE_ENVに環境値を設定できます。

# NODE_ENVを設定$ export NODE_ENV=development

# 設定した値を確認する$ echo$NODE_ENV
development

②.docker-compose.xmlのenvironmentキーに設定する

docker-composeでコンテナを立ち上げている場合、environmentキーを使って設定することができます。

version:'3'services:web:build:.ports:-"8080:8080"environment:-NODE_ENV=developmenttty:true

exportで設定したときと同様に、$NODE_ENVをechoすると設定値を確認すると、developmentが設定されているのが確認できるはずです。

問題の原因を特定するには?

今回の場合、package.jsonに記載されているパッケージが正しくインストールできていると早とちりし、「パスが通っていない」か「windowsでシンボリックリンクが使えないのが悪さしている」と思い込んでいたのが、原因の特定が遅れてしまった原因でした。

ちなみに、パッケージが正しくインストールされているかは、npm list --depth=0で確認することができます。

# インストールされているパッケージの一覧(一階層のみ)を表示$ npm list --depth=0
project@0.1.0 /app
+-- core-js@3.6.5
`-- vue@2.6.11
# core-js と vue しか入ってないやん!

もし、筆者と同様にnpm run serveが正しく動作しない場合は、このコマンドで確認してみるといいかもしれません。

Vue.js+Node.js+MongoDBで簡単なクライアントサーバシステムを作ってみた

$
0
0

この記事は株式会社富士通システムズウェブテクノロジーが企画するいのべこ夏休みアドベントカレンダー 2020の10日目の記事です。本記事の掲載内容は私自身の見解であり、所属する組織を代表するものではありません。

はじめに

Vue.jsとNode.jsを使い、MongoDBに登録された今までに読んだ本の名前をブラウザで確認できるアプリケーションを作りました。
どんな本を読んだか把握しやすくすることで今後の勉強に役立てたいと思います。

環境

以下は使用するソフトウェアのバージョンです。
OSはWindows10 Enterprise バージョン1809です。

$ node -v
v12.16.1
$ npm -v
6.13.4
$ vue -V
@vue/cli 4.4.6
$ mongo
>db.version()
4.2.8

事前準備

  • Node.jsとMongoDBのインストールをして、データベースに本のデータを登録します。

Node.jsのインストール

  • Node.js公式サイトからNode.jsをダウンロードします。 コマンドプロンプトで以下のコマンドを入力し、バージョン情報が出てきたら問題なくインストールされています。
$ node -v
  • Node.jsと一緒にnpmもインストールされるので、以下のコマンドで確認します。
$ npm -v

MongoDBのインストール

  • 今回はローカル環境でアプリケーションが動くことを確認したいので、まずWindows環境にMongoDBをインストールします。
  • MongoDB公式サイトからServerのダウンロードを選択し、ダウンロードしたインストーラーを起動してください。
  • Windowsのシステム環境変数Pathに以下のパスを追加します。 ※バージョンによって、4.4の部分は変わります
C:\Program Files\MongoDB\Server\4.4\bin\
  • Windowsの再起動後にコマンドプロンプトで以下のコマンドを入力してバージョン情報を確認します。
$ mongo
> db.version();

データベースの準備

  • MongoDB shellでデータベースとコレクションの作成を行います。
$ mongo
> use mydb
switched to db mydb
> db.createCollection('mylist');
{ "ok" : 1 }
> show collections
mylist
  • 以下のコマンドでデータベースに読んだ本の名前を登録します。
$ mongo
> use mydb
switched to db mydb
> db.mylist.insert({name:'アジャイルサムライ'});
WriteResult({ "nInserted" : 1 })
> db.mylist.insert({name:'エクストリームプログラミング'});
WriteResult({ "nInserted" : 1 })
> db.mylist.insert({name:'テスト駆動開発'});
WriteResult({ "nInserted" : 1 })
> db.mylist.insert({name:'スクラム現場ガイド'});
WriteResult({ "nInserted" : 1 })

クライアントサイドの作成

  • 以下のコマンドでクライアントサイドとサーバーサイドをまとめるディレクトリ、クライアントサイドの作業ディレクトリを作成します。 ※質問形式でプロジェクトの作成を行う部分がありますが、Install vue-router?はyesとしてください。
$ mkdir my_project
$ cd my_project
$ vue init webpack frontend
$ cd frontend
$ npm run dev
  • この状態でhttp://localhost:8080に接続すると、Welcome to Your Vue.js Appと出力された画面を確認できます。

サーバーサイドの作成

  • 以下のコマンドでサーバーサイドの作業ディレクトリを作成し、必要なモジュールをインストールします。
$ cd my_project
$ mkdir backend
$ cd backend
$ npm init
$ npm install --save express body-parser cors mongoose
  • 作成されたpackage.jsonのscriptsの部分を以下のように編集します。
package.json
{"name":"backend","version":"1.0.0","description":"","main":"index.js","scripts":{"start":"node index.js"},"author":"","license":"ISC","dependencies":{"body-parser":"^1.19.0","cors":"^2.8.5","express":"^4.17.1","mongoose":"^5.9.27"}}

APIの作成

  • backendにindex.jsを作成し、データベースに登録した本の名前を取得するメソッドを書きます。 ※connectOptionはmongooseでデータベースに接続する際に出る警告を避けるため書いています。
backend/index.js
constexpress=require("express");constbodyParser=require("body-parser");constcors=require("cors");constmongoose=require("mongoose");constBooksList=require("./models/module");constconnectOption={useNewUrlParser:true,useUnifiedTopology:true,};mongoose.connect("mongodb://localhost/mydb",connectOption);constapp=express();app.use(bodyParser.urlencoded({extended:false}));app.use(bodyParser.json());app.use(cors());app.get("/mydb",(req,res)=>{BooksList.find(function(err,result){if(!err){returnres.json(result);}else{returnres.status(500).send("post mylist faild");}});});app.listen(process.env.PORT||3000);
  • modelsフォルダとmodule.jsを作成し、データベースのスキーマ設定をします。
models/module.js
constmongoose=require("mongoose");constSchema=mongoose.Schema;constBooksListSchema=Schema({name:String},{collection:"mylist"});module.exports=mongoose.model("BooksList",BooksListSchema);
  • コマンドプロンプトでnpm startとコマンドを入力し、データベースとAPIの確認をします。
$ cd backend
$ npm start
  • この時点でhttp://localhost:3000/mydbに接続するとデータベースに登録した本の名前が出ています。 image.png

API通信部分と画面の作成

API通信部分の作成

  • frontendにaxiosをインストールします。
$ cd frontend
$ npm install --save axios
  • frontendにapiフォルダを作成します。以下のようにindex.jsとmethods.jsを書き、通信部分を作ります。
api/index.js
importaxiosfrom"axios";exportdefault()=>{returnaxios.create({baseURL:`http://localhost:3000/`});};
api/methods.js
importApifrom"./index";exportdefault{getBooksData(){returnApi().get("/mydb");}};

画面の作成

  • src/componentsフォルダにBooksList.vueを作成します。デフォルトで作られていたHelloWorld.vueは削除しました。
src/components/BooksList.vue
<template><divclass="bookslist"><h1class="title">読んだ本リスト</h1><divclass="books"><liv-for="book in books":key="book.index">{{book.name}}</li></div></div></template><script>importMethodsfrom"@/api/methods";exportdefault{name:"BooksList",data(){return{books:""};},created(){this.getData();},methods:{asyncgetData(){letbooks_data=awaitMethods.getBooksData();this.books=books_data.data;},},};</script><style>.bookslist{max-width:300px;margin:0auto;text-align:center;font-family:Century;}.books{display:inline-block;text-align:left;}.title{color:#5b5b5b;background:linear-gradient(transparent70%,#6088c670%);}</style>
  • frontend/router/index.jsに先ほど削除したHelloWorld.vueがコンポーネントとして登録されているので、BooksList.vueに書き換えます。
frontend/router/index.js
importVuefrom"vue";importRouterfrom"vue-router";importBooksListfrom"../components/BooksList";Vue.use(Router);exportdefaultnewRouter({routes:[{path:"/",name:"BooksList",component:BooksList}]});
  • 画面上にデータベースに登録した本の名前が出ているか確認します。
  • backendとfrontendでそれぞれnpm startとコマンド入力をします。
$ cd backend
$ npm start
$ cd frontend
$ npm start
  • http://localhost:8080/に接続すると、読んだ本の名前がリストになっています。 image.png

さいごに

今回はMongoDBに直接データを入力し、画面上に表示するアプリケーションを作成しました。
今後は画面上からデータを入力できるようにする機能や、本のカテゴリー別の表を作って表示するなどの機能も追加していきたいと思っています。

参考

vueとexpressでSPAを作る
MongoDB超入門
Node.jsからMongoDBに接続してみる

【Node.js】APIサーバからマイクラ鯖をコントロールしよう #1

$
0
0

はじめに

会員(友人)制のMinecraftの鯖管をやっている筆者であるが、稼働率が高くすぐ負荷に耐えられなくなり、よくサーバの再起動を命ぜられる👍

以前はPHPでAPIとWebサイトを簡易的に作り、ログイン式のWebサイトから再起動やバックアップの作成を行えるようにして鯖管をサボっていたわけですが、今回そのAPI部分をNode.js+TypeScript+Expressで新規機能を追加しながら作成してみたいと思います✨

このソースコードはGitHubに公開しているので、修正点やアドバイス等があれば是非プルリクをお願いします。またMITライセンスにしておりますので、どうぞご自由にお使いください!

GitHub ー smpny7

仕様

基本的には以下のことができるAPIサーバを作成する。(予定)

  • サーバ稼働状況やバージョンの取得 ← 今回
  • オンラインメンバーの一覧取得 ← 今回
  • Discordへのエラー通知とDBへのログの保存
  • サーバアイコンの取得
  • サーバの起動・停止・再起動
  • ワールドデータの日常的なGoogleDriveへのバックアップ

プログラムと説明

index.ts
importexpressfrom'express'import{pingAsync,pingOnlineAsync}from"./ping"constapp:express.Express=express()constrouter:express.Router=express.Router()app.use((req,res,next)=>{res.header("Access-Control-Allow-Origin","*")res.header("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept")next()})app.use(express.json())app.use(express.urlencoded({extended:true}))// --- Get Operational Status --------------------------------------------------router.get('/api/state',(req:express.Request,res:express.Response)=>{pingAsync().then((json)=>{res.send(json)}).catch((err)=>{res.send(err)})})// -----------------------------------------------------------------------------// --- Get Online Member -------------------------------------------------------router.get('/api/state/online',(req:express.Request,res:express.Response)=>{pingOnlineAsync().then((json)=>{res.send(json)}).catch((err)=>{res.send(err)})})// -----------------------------------------------------------------------------app.use(router)app.listen(3000,()=>{console.log('Listening on port 3000...')})
ping.ts
require('dotenv').config()constmc_ping=require('mc-ping-updated')exportfunctionpingAsync():Promise<any>{returnnewPromise((resolve,reject)=>{mc_ping(process.env.SERVER_URL,process.env.SERVER_PORT,function(err:any,res:any){if(err)reject('stop')elseresolve(res)})})}exportfunctionpingOnlineAsync():Promise<any>{returnnewPromise((resolve,reject)=>{mc_ping(process.env.SERVER_URL,process.env.SERVER_PORT,function(err:any,res:any){if(err)reject('stop')elseif(res.players.sample)resolve(res.players.sample)elseresolve('nobody')})})}

Minecraftサーバとの通信は、mc-ping-updatedを使用させていただきました。
api/stateにGETメゾットを送ることで このようなフォーマットのJSONを返し、api/state/onlineにGETメゾットを送ることで、オンラインメンバーの一覧を取得できます。

.env
SERVER_URL='example.com'
SERVER_PORT=25565

.envファイルにまとめてサーバアドレスやポート番号など(随時追加)を記述してあるので、お好みの値に書き換えることで自由にお使えいただけます。

次回はサーバの起動・停止・再起動の追加と、その際のDiscordへのエラー通知とDBへのログの保存機能を搭載したいと思います。ぜひご覧ください!

参考

https://qiita.com/notakaos/items/3bbd2293e2ff286d9f49
https://qiita.com/pochopocho13/items/79a4735031ce11a91df7
https://www.npmjs.com/package/mc-ping-updated
https://wiki.vg/Server_List_Ping

Viewing all 8825 articles
Browse latest View live