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

Nuxt.jsの動的ルーティングでQiitaっぽい構成を作ってみるメモ

$
0
0

Qiitaと同様の構成を作ってみたメモです。

通常のNuxt.jsの動的ルーティング

こんな構成にすると

pages/
--| users/
-----| _id.vue
--| index.vue

https://ドメイン/users/<ユーザー名>みたいな構成を作ることが出来ます。

https://ja.nuxtjs.org/guide/routing#%E5%8B%95%E7%9A%84%E3%81%AA%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0

このユーザー名の部分がURLにアクセスした際の値で動的に変わります。

Qiitaっぽい構成って?

(2020年9月時点)Qiitaの記事は以下のような構成です。

https://ドメイン/<ユーザー名>/items/<記事ID>

例: https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d

先ほどのユーザー名だけが動的な場合と違って、ネストされて記事IDも動的になっています。

これをNuxtで再現したいなという話です。

こんなディレクトリ構成

参考記事などを見ながら触ってたらこんな構成でうまく行きました。

pages/
--| _userid/
-----| items
--------| _itemid.vue
-----| index.vue
--| index.vue

末端となる記事ページは/pages/_userid/items/_itemid.vueになります。

スクリーンショット 2020-09-02 9.42.33.png

出来てみるとそんなもんかという感じですね。

記事ページのコード

メモ程度です。

_itemid.vue
<template><sectionclass="section">{{userid}}のitem:{{itemid}}</section></template><script>exportdefault{name:'item',data(){return{}},computed:{},mounted(){},methods:{},asyncasyncData({$content,params}){constuserid=params.userid;constitemid=params.itemid;return{userid,itemid};},}</script>

参考

https://qiita.com/notsunohito/items/46bc9c6ad88fed46ea14


gulp を使用したSCSS(SASS)環境の構築

$
0
0

普段はvsvcodeの拡張機能「Live Sass Compiler」を使用しているが、gulpを使用する機会があったので覚え書き

事前準備
Node.js https://nodejs.org/ja/
※インストール方法は@sefoo0104さんが紹介してくれているのでそちらを参照
Node.jsをインストールする

gulp(ガルプ)について詳しく知りたい方は公式サイトもしくはCodeGridを参照
・gulp 公式サイト
・CodeGrid 現場で使えるgulp入門

モジュール
Node.jsの設定が終わったら以下のモジュールをインストール
※今回はカレントディレクトリにインストール

一人で開発する場合(devDependencies)

>npminstall--save-devパッケージ名>npminstall-Dパッケージ名

開発環境を共有する場合(dependencies)

>npminstall--save-パッケージ名>npminstall-Sパッケージ名

devDependenciesとdependenciesの違い
パッケージ(package.json)を公開した場合、開発者以外の人がnpm installを実行すると、dependenciesに記録されたパッケージがnode_modules内にインストールされ、devDependenciesに書かれているパッケージはインストールされません。

SASS、SCSSコンパイルに必要なモジュール

モジュール名内容
gulpgulp本体
gulp-sassSass/SCSSのコンパイル。sourcemapが使えない
gulp-ruby-sassgulp-sassと同じ処理だがこちらはsourcemapが使える
gulp-postcssCSSパーサとそれを取り扱うのに便利なAPIを提供しているツール

gulp-sassとgulp-ruby-sassはお好みの方を選択
※npmjsサイトで提供されているモジュールと設定方法が紹介されている
https://www.npmjs.com/

gulpを動かすにはgulpfile.jsが必要となるので、node_modulesと同じ階層に
gulpfile.jsを作成。
gulpfile.jsの書き方は@y_sekitobaさんが紹介しているのでそちらを参照
初めてのGulp入門 ~gulpfile入門~

上記で必要最低限の環境は構築できたが、このままでは面倒な手順を踏んでgulpをインストールした意味がいないので、下記のモジュールも合わせてインストールする。

モジュール名内容
gulp-notifyMac,Linux,Windowに対してメッセージを通知する
gulp-plumberエラーが起きても処理を中断させない
autoprefixerコンパイル時にベンダープレフィックスを自動で記述してくれる

上記インストールが完了したらnpm list --depth=0でインストールされているパッケージ名を確認。

npmlist--depth=0+--autoprefixer@9.8.6+--gulp@4.0.2+--gulp-notify@3.2.0+--gulp-plumber@1.2.1+--gulp-postcss@8.0.0+--gulp-sass@4.1.0

保存時に自動でCSSを作成
gulpfile.jsを下記に修正

gulpfile.js
/*
src 参照元を指定
dest 出力さきを指定
watch ファイル監視
series(直列処理)とparallel(並列処理)
*/const{src,dest,watch,series,parallel}=require('gulp');//プラグインを呼び出しconstsass=require('gulp-sass');constplumber=require("gulp-plumber");constnotify=require("gulp-notify");constpostcss=require("gulp-postcss");constautoprefixer=require("autoprefixer");//参照元パスconstsrcPath={css: '../scss/*.scss',}//出力先パスconstdestPath={css: './css',}//処理constcssSass=()=>{returnsrc(srcPath.css).pipe(plumber(//エラーが出ても処理を止めない{errorHandler: notify.onError('Error:<%= error.message %>')//エラー出力設定})).pipe(sass({outputStyle: "expanded"})).pipe(postcss([autoprefixer({browsers: ['last 2 versions']})])).pipe(dest(destPath.css))//コンパイル先
}

/***Sassファイルを監視し、変更があったらSassを変換します*/
const watchSassFiles = () => watch(srcPath.css, cssSass);

//タスクをまとめて実行exports.default=watchSassFiles;

対象のscss(sass)ファイルと出力先は任意に変更」

gulpの実行
カレントディレクトリに必要なパッケージが保存されているので、下記コマンドで実行

npxgulp

上記方法ではSCSS(SACC)のコンパイルを記述したが、LESSのコンパイルも用意されているので、LESSを使用している場合、必要なモジュールをインストールしてgulpfile.jsを修正。

Azure Bot Service を node.js で作ってスクリプトで自動更新する方法

$
0
0

Microsoft Bot Framework(node/JavaScript) v4 で作成した BOT を、スクリプトで Azure Bot Service に自動デプロイする方法を調べました。
Azure Pipeline とか Visual Studio 2019 とかに載ってしまえば楽なのかも知れませんが、自力で自動化したい場合の情報が探しづらくて苦労しました。

0. 準備するもの

  • コマンドプロンプトか PowerShell(Core) か Bash など

cURL を使うだけなので Windows でも macOS でもどちらでもOKです(私は Windows を使っています)。

1. Bot Service を作る(JS Echo bot)

こちら、

を参考に、Azure に Bot を作成します。言語は node で、Echo Bot を選択します。

それぞれの設定名は次の通りとしました。
リソースグループ、App Service プランも新規作成した方が無難です。既存のを使うと後でごちゃごちゃになって管理しきれなくなる。
新規にリソースグループを作ってそこにぶら下げておけば、不要になったらリソースグループごと削除できます。

  • リソースグループ名: my_bot_001_rc
  • Web アプリ ボット名: my_bot_001
  • App Service 名: mybot001
  • App Service プラン名: my-bot-001-app-service-plan

デプロイが終わったら、 Web チャットでテストしておきましょう。

image.png

2. ソースコードをダウンロードする

ビルド → ボットのソース コードをダウンロードする で、Echo ボットのソースコードをダウンロードします。
ファイル名は my_bot_001-src.zipとします。

image.png

3. BOT の動きを少し変える

my_bot_001-src.zipを解凍して bot.jsの内容を次のように変更します。

this.onMessage(async(context,next)=>{constreplyText=`Echo2: ${context.activity.text}`;// ← Echo: を Echo2: に変更

保存したら、再び ZIP ファイルに圧縮します。ファイル名は my_bot_001-src-2.zipとします。

4. 自動デプロイに必要な認証情報を得る

image.png

  1. Azure ポータルで、AppService の mybot001 を開き、デプロイセンターを選択します。
  2. FTP を選択し、ダッシュボード を押します。

image.png

  1. アプリの資格情報に表示される ユーザー名 と パスワード をコピーします。ちなみに「資格情報のリセット」を押すとパスワードが変わります。

5. コマンドでデプロイする

コマンドプロンプトまたは Terminal などで、次のコマンドを実行します。

curl -X POST -u "<user>:<password>" --data-binary @"<アップロードするZIPファイルパス>" https://<AppService名>.scm.azurewebsites.net/api/zipdeploy
  • user: 3 でコピーしたユーザー名の \以降。(例: mybot001\$mybot001 → \$mybot001)
  • password: 3 でコピーしたパスワード。$ などが含まれる場合は \でエスケープが必要と思われる。
  • アップロードするZIPファイルパス: アップロードするZIPファイルのパス
  • AppService名: 1 で作成した App Service 名。この例では mybot001 。

実際のコマンド

bash

curl -X POST -u"\$mybot001:xxxxxxx"--data-binary @"my_bot_001-src-2.zip" https://mybot001.scm.azurewebsites.net/api/zipdeploy

PowerShell

curl.exe-XPOST-u'$mybot001:xxxxxxx'--data-binary@my_bot_001-src-2.ziphttps://mybot001.scm.azurewebsites.net/api/zipdeploy

コマンドプロンプト

curl.exe -X POST -u "$mybot001:xxxxxxx" --data-binary @my_bot_001-src.zip https://mybot001.scm.azurewebsites.net/api/zipdeploy

実行して、何もエラーが出ずに次のプロンプト(bash-5.0#) が表示されたらアップロード成功。

7. 確認

Azure ポータルで Bot Service: my_bot_001 を開き、Web チャットでテストします。

image.png

2 の修正の通り、"Echo:" が "Echo2:" に変わっていれば成功です。

まとめ

これで、Docker があれば、スクリプトから Bot Service を自動デプロイできるようになりました。
次は、TypeScript のソースをビルド → WebPack → ZIP化 → デプロイという一連の流れを実現したいと思います。

参考

愚痴

  • AWS や Firebase のような、CI 用の CLIログインの方法が Azure CLI に用意されているのかよくわかりませんでした
  • デプロイは FTP や SCP でも可能と書いてありますが、それらでは認証エラーになってしまい先へ進めませんでした
  • ターミナルの種類により微妙に書き方が異なるのがイラッ
  • Azure CLI と格闘した結果、「Azure CLI は要らんかったんや」と気づいたのがこの記事を書き終わる直前

EXPOフォトフレーム -人類の進歩とロゴとの調和-

$
0
0

はじめにから、おわりにの一歩手前まで...

逃げない、はればれと立ち向かう、それがぼくのモットーだ

...どうも僕です。

最近の注目のニュースといえば大阪・関西万博ロゴマークの決定ですね。
そう!あの「いのちの輝きくん」です。

logo_expo.png

引用元: 公益社団法人2025年日本国際博覧会協会

皆さんはどんな印象でしたでしょうか?
twitterでも話題になったようですが賛否両論あるみたいですね。

そして、最近はこんなニュースも出ていました。

つかみはOK、大阪万博ロゴ 賛否両論も……創作意欲かき立てる?

ロゴをモチーフにして、パンやサラダなどが創作されているようです。

そう創作意欲かき立てる!

...

...

そう創作しよう!

...

...

で久しぶりの休みを利用して創作してしまいました。

その名も「EXPOフォトフレーム」
スクリーンショット 2020-09-02 21.20.44.png

お気に入りの画像をフォームから選択またはドラッグすると...

スクリーンショット 2020-09-02 21.24.00.png

あのロゴと一体になれますw

皆様も是非、以下のリンクから大阪・関西万博ロゴマークと一体となってみてください!
* 画像サイズが大きいとエラーになっちゃうので注意

EXPOフォトフレーム

きっと大阪・関西万博がより身近なものとなるでしょう!

芸術は爆発だ!

おわり

おわりに

著作権等の問題があるようであればひっそりとサイトを閉じようと思いますw

Node.js:LTSバージョンのコードネームの意味

$
0
0

LTSバージョンのコードネーム

nvm aliasで確認すると
lts/<コードネーム> -> <バージョン>
とそれぞれNode.jsのLTS(長期サポート)バージョンにはコードネームが割り振られています。アルゴン、カーボン、、うすうす規則性は見えてきますが気になったので調べました。

nodecodename.jpg

  • v4.9.1 → argon(アルゴン:原子番号18、元素記号はAr。)
  • v6.17.1 → boron(ホウ素:原子番号5、元素記号はB。)
  • v8.17.0 → carbon(炭素:原子番号6、元素記号はC。)
  • v10.22.0 → dubnium(ドブニウム:原子番号105の元素、元素記号はDb。)
  • v12.18.3 → erbium(エルビウム:原子番号68、元素記号はEr。)

今のところアルファベット順になっているので近々リリースされるv14の候補は

  • fluorine(フッ素:原子番号9、元素記号はF。)
  • ferrum(鉄:原子番号26、元素記号はFe。)
  • flerovium(フレロビウム:原子番号114、元素記号はFl。)
  • fermium(フェルミウム:原子番号100、元素記号はFm。)
  • francium(フランシウム:原子番号87、元素記号はFr。)

あたりですかね。

このコードネームをコマンドで指定するとインストールやバージョンの切替えができる。

% nvm use lts/dubnium
Now using node v10.22.0 (npm v6.14.6)

『nvmを使ったnode.jsのバージョン管理』

【Gatsby】node最新バージョンでyarnするとエラーが出るのでnodeのバージョンを変えてyarnしてみた

$
0
0

gatsby.jsのテーマをcloneして使おうとした時にyarnの時点でエラーが出たのでnodeのバージョンを変えて挙動を確認しました。

Nodeバージョン

  • v14.9.0(最版)
  • v12.18.3 (LTS:長期サポート版)
  • v10.22.8 (LTS:長期サポート版)
  • v8.17.0 (LTS:長期サポート版)

yarn、gatsby、Macのバージョン

% yarn -v
1.22.4
% gatsby -v
Gatsby CLI version: 2.12.87
% sw_vers
ProductName:    Mac OS X
ProductVersion: 10.15.6
BuildVersion:   19G2021

検証に使ったGatsbyテーマ

GitHub
gatsby-theme-juliaとういうテーマをgit cloneして使いました。

検証方法

  • gatsbyのテーマをgit clone
  • node バージョンを切替える
  • yarn

1.v14.9.0(現時点の最新版)

% node -v
v14.9.0
% yarn

gypのエラーがめちゃくちゃ出ます。ググるとxcodeを再インストールするよう言われますが、したところで解決しないです。その他brewを消すとか色々試しましたが今だに解決してないです。
スクリーンショット 2020-09-02 23.11.38.png

2.v12.18.3(LTS)

% node -v
v12.18.3
% yarn

✨ Done in ..が出たのでこれは成功。
スクリーンショット 2020-09-02 23.19.33.png

READMEに書いてある通りyarn workspace demo developを実行するとlocalhost:8000/も大丈夫でした。
スクリーンショット 2020-09-02 23.23.21.png

3.v10.22.8(LTS)

% node -v
v10.22.0
% yarn

これも成功。
スクリーンショット 2020-09-02 23.30.38.png

4.v8.17.0

これも成功。

% node -v
v8.17.0
% yarn

スクリーンショット 2020-09-02 23.37.59.png

LTSのバージョンであればv8〜12は大丈夫でした。
これをきっかけにnvmを使ったnode.jsのバージョン管理を覚えました。
yarnで同じエラーが出る方はnodeのバージョンを確認してみると簡単に解決するかもしれないです。

Kotlin/JSでもサーバーサイドしたい!

$
0
0

こんにちは、マヤミトです。
今回はKotlin/JSとkotlinx-nodejsを使ってサーバーを立てる簡単なサンプルを作ってみました。

kotlinx-nodejsの紹介

kotlinx-nodejsは、Node.jsのAPIのKotlin/JS向けの型定義を提供します。TypeScriptでいう d.tsファイルがまとまっていると考えるとわかりやすいかもしれません。
https://github.com/Kotlin/kotlinx-nodejs

導入

build.gradleに依存を追加し、targetをnodejsにします。

build.gradle.kts
repositories{mavenCentral()jcenter()// 追加}dependencies{implementation(kotlin("stdlib-js"))implementation("org.jetbrains.kotlinx:kotlinx-nodejs:0.0.7")// 追加}kotlin.js{nodejs()// 追加}

簡単なhttpサーバーを書いてみる

リクエストが来たらそれのurlとmethodを返すだけの簡単なサーバーを書いてみます。

main.kt
funmain(){valserver=http.createServer{req,res->res.write("url: ${req.url}\n")res.write("method: ${req.method}")res.end()}server.listen(8080)}

Node.jsでサーバーを書いたことのある人ならわかるかもしれませんが、用意されている関数の使い方などはほぼ変わりません。私はNode初心者ですが、JavaScriptで書かれたサンプルをほぼそのままKotlinに書き換えることができました。

サーバーの起動

ターミナルで

./gradlew nodeRun

を実行すると、指定したポート(今回は8080)でサーバーが起動します。
実際にcurlで叩いてみるとこんな感じです。

curl -X GET localhost:8080/hoge
url: /hoge
method: GET

curl -X POST localhost:8080/hoge
url: /hoge
method: POST

JSへのビルド

Gradle経由ではなく、JSのファイルを吐き出してnodeコマンドで実行したい場合、追加でいくつか設定が必要です。

まず、 build.gradlewebpack-node-externalsの依存を追加し、ターゲットにbrowserを追加します。

build.gradle.kts
dependencies{implementation(kotlin("stdlib-js"))implementation("org.jetbrains.kotlinx:kotlinx-nodejs:0.0.7")implementation(npm("webpack-node-externals","2.5.1"))// 追加}kotlin.js{browser()// 追加nodejs()}

プロジェクトルートの webpack.config.dディレクトリの中に webpack.config.jsファイルを以下の内容で作成します。

webpack.config.js
varnodeExternals=require('webpack-node-externals');config.target='node';config.externals=[nodeExternals()];

ターミナルで

./gradlew browserWebpack

を実行すると、 build/distributions以下にビルド後のJavaScriptのファイルが生成されます。デフォルトだと生成されるファイル名は プロジェクト名.jsですが、任意の名前に変更したい場合は以下の内容を build.gradlewebpackTaskに追加します。

build.gradle.kts
kotlin.js{browser{webpackTask{outputFileName="main.js"// 生成したいファイル名}}nodejs()}

生成されたJavaScriptのファイルは、nodeコマンドから実行することができます。

node main.js   

まとめ

  • Kotlin/JSでもサーバーサイドはできる
  • JSを吐き出したいときにはターゲットをブラウザにしてWebpackでビルドするという直感に反する作業が必要

情報が少なかった割には意外とすんなりできてしまいました。Kotlin好きの皆さんもぜひ一度試してみてください。

今回のサンプルコードは自分のGitHubにて公開しているのでよかったらどうぞ。
https://github.com/yt8492/KotlinOnNodeJSSample

参考

https://github.com/Kotlin/kotlinx-nodejs
https://saku.io/build-for-node-runtime-using-webpack/

Amazon Linux2 で Puppeteer/Chrome headless ブラウザが動かない

$
0
0

はじめに

Amazon Linux2 上で、Puppeteer から Chrome を起動しようとしたところ、起動しなかった。ググったところ、こうすれば動く!みたいなものはいくつか出てきたが、「なんで?」が不明なものが多かった。

先に結論として、Chrome を起動するために必要なライブラリが足らなかったのが原因で、それは、yum install では、すんなり入らない(ものがある)ので、調べて入れる必要がある。

実行環境

$ node -v
v14.9.0
$ npm -v
6.14.8

Chrome のインストール

puppeteerを使ってCentOSでheadless chromeを動かす

ここに書いてある通り。

以下を追加

/etc/yum.repos.d/google.chrome.repo
[google-chrome]
name=google-chrome
baseurl=http://dl.google.com/linux/chrome/rpm/stable/$basearch
enabled=1
gpgcheck=1
gpgkey=https://dl-ssl.google.com/linux/linux_signing_key.pub
$ sudo yum search google-chrome
...
google-chrome-beta.x86_64 : Google Chrome (beta)
google-chrome-stable.x86_64 : Google Chrome
google-chrome-unstable.x86_64 : Google Chrome (unstable)

$ sudo yum install google-chrome-stable -y
$ sudo yum install ipa-gothic-fonts -y

Puppeteer のサンプルプログラム

よくある記念スクショのヤツ。

test.js
constpuppeteer=require('puppeteer');(async()=>{constbrowser=awaitpuppeteer.launch({args:['--no-sandbox','--disable-setuid-sandbox']});constpage=awaitbrowser.newPage();awaitpage.goto('https://www.google.com');awaitpage.screenshot({path:'example.png'});browser.close();})();

puppeteer インストール

$ npm install puppeteer

実行、そしてエラー

$ node test.js
(node:7520) UnhandledPromiseRejectionWarning: Error: Failed to launch the browser process!
..../node_modules/puppeteer/.local-chromium/linux-782078/chrome-linux/chrome: error while loading shared libraries: libXss.so.1: cannot open shared object file: No such file or directory
...

libXss.so.1がないと。
本当にないのは、それだけか調べる。

$ cd node_modules/puppeteer/.local-chromium/linux-782078
$ ldd chrome | grep not
    libXss.so.1 => not found

確かにこれだけ。こいつをインストールすれば動くようになるはず。

解決方法

足らないものは、yum でそのままインストールできてしまうか、それを含む何らかのパッケージを探してインストールするか、の2通り。libXss.so.1は後者なので、これを含むパッケージを調べてインストールする。これ以外のファイルが足らないと出た場合も手順は同様。

調べる。

$ yum whatprovides */libXss.so.1
Loaded plugins: extras_suggestions, langpacks, priorities, update-motd
Repository google-chrome is listed more than once in the configuration
google-chrome                                                                                                                                          3/3
amzn2-core/2/x86_64/filelists_db                                                                                                    |  34 MB  00:00:00
amzn2extra-docker/2/x86_64/filelists_db                                                                                             |  14 kB  00:00:00
google-chrome/filelists                                                                                                             | 1.8 kB  00:00:00
nodesource/x86_64/filelists_db                                                                                                      | 250 kB  00:00:00
yarn/filelists_db                                                                                                                   | 165 kB  00:00:00
libXScrnSaver-1.2.2-6.1.amzn2.x86_64 : X.Org X11 libXss runtime library
Repo        : amzn2-core
Matched from:
Filename    : /usr/lib64/libXss.so.1



libXScrnSaver-1.2.2-6.1.amzn2.0.2.i686 : X.Org X11 libXss runtime library
Repo        : amzn2-core
Matched from:
Filename    : /usr/lib/libXss.so.1



libXScrnSaver-1.2.2-6.1.amzn2.0.2.x86_64 : X.Org X11 libXss runtime library
Repo        : amzn2-core
Matched from:
Filename    : /usr/lib64/libXss.so.1

libXScrnSaverこいつに含まれているようなので、インストール。

$ sudo yum install libXScrnSaver -y

確認

$ ldd chrome | grep not

何も出てこないので、OK

再度実行

$ node test.js

example.png

成功!おしまい。


Arduino Due✖️Ethernet shield2をつかってNode.js✖️ExpressでAPIをたたく

$
0
0

はじめに

最近は、ESP32でWiFi通信をして何か作ってばかりです。
そういえば有線LANにつないでインターネット接続したことがあまりありませんでした。
なので、有線LANをつなぎNode.jsとExpressをつかったAPIをArduino Dueからたたいてみます。

必要なもの、環境

  • Arduino Due(Ethernet shield2がつかえれば良いのArduino Unoでも構いません)
  • Ethernet shield2
  • Node.js (v12.13.0)
  • Express

プログラム

Node.js側のプログラム

node.jsをインストールしている前提です。
適当なディレクトリに下記を実行します。そしてプログラムはindex.jsに書きます。

npm init
npm i express
touch index.js
varexpress=require('express');constbodyParser=require('body-parser');varhttp=require("http"),url=require("url"),server;varapp=express();app.use(express.json());constport=process.env.PORT||3200;app.listen(port,()=>console.log(`Listening on port ${port}...`));app.use(bodyParser.urlencoded({extended:false}));app.use(bodyParser.json());app.get('/',(req,res)=>{res.setHeader('Content-Type','text/plain');res.json("Hello World !!");//res.sendStatus(200);});app.post('/api',(req,res)=>{//Arduinoからの送られたデータvalをコンソール画面に表示するconsole.log(req.query.val);res.setHeader('Content-Type','text/plain');res.json("Hello");//res.sendStatus(200);});

Arduino側のプログラム

#include <SPI.h>
#include <Ethernet2.h>
// Arduino Due : SerialUSB// Arduino Uno : Serial// 参考// https://www.arduino.cc/reference/en/language/functions/communication/serial/#define SERIAL SerialUSB
// Ethernet shield2のMACアドレス// シールドの裏面に記載してある番号の前に0xをつけるbytemac[]={0xDE,0xAD,0xBE,0xEF,0xFE,0xED};// Arduinoの固定IP// ここを適当なIPアドレス(ルーター内で空いているもの)に変更IPAddressip(192,168,1,177);// PCのIPアドレスを入力charserver[]="192.168.11.66";// クライアントEthernetClientclient;intval=0;// POSTする間隔intINTERVAL=500;boolpost(intval){//データを送るのでメソッドはPOSTStringheader="POST /api/?val=";header+=String(val);header+=" HTTP/1.1";SERIAL.println("connecting...");//今回は3200番のポート番号を使ったif(client.connect(server,3200)){SERIAL.println("connected");client.println(header);client.println("Host: 192.168.11.66");client.println("Content-Type: application/x-www-form-urlencoded");client.println("User-Agent: Arduino Post Client");client.println("Connection: close");client.println();client.print("");client.stop();SERIAL.println("disconnecting.");returntrue;}else{SERIAL.println("connection failed");returnfalse;}}voidsetup(){SERIAL.begin(115200);while(!SERIAL){;// wait for serial port to connect. Needed for Leonardo only}if(Ethernet.begin(mac)==0){SERIAL.println("Failed to configure Ethernet using DHCP");Ethernet.begin(mac,ip);}delay(1000);}voidloop(){val=random(255);SERIAL.println(val);//ランダムな数をPOSTpost(val);delay(INTERVAL);}

動作確認

Node.jsのindex.jsを

node index.js

で動作させ、Arduino Dueにプログラムを書き込み電源をいれれば、コンソール画面にランダムな数がPOSTされます。

image.png

所感

POSTだけでなくGETや他のメソッドも簡単に実装できそうです。

参考

https://kimizuka.hatenablog.com/entry/2016/07/12/235535

【LINEWORKS API】新機能!BOT でファイルを送受信!

$
0
0

ver 2.9 で(個人的に)待望の BOT でのファイル受信が追加されました!ヾ(´∀`)ノ
[リリース] アップデートのお知らせ (8月25日)

ではではさっそく使ってみましょう!

ngrok を使って Callback を受信

おなじみ ngrok さんの登場です!
もう 2年の付き合いになりますか…長いような短いような。
本当に色々助かっております。今回もよろしくお願いしますね!

・・・え、ngrok さんを知らない!?Σ( ゚Д゚)
ngrok さんはローカル PC の外部公開用 URL を取得してくれるステキモジュールなんですよ!
細かい設定は、過去の記事になりますがこちらの記事をどーぞ(*_ _)
ローカル環境で LINEWORKS Bot を動かす話

Bot にファイルを送信する

ファイルの送信はとっても簡単です。
LINEWORKS のトークサービスを開いて、ファイルをクリック&ドロップするだけ!

1599125206.png

すると、Bot がファイルを受信します。

{type:'message',source:{accountId:'name@domain.xyz'},createdTime:1599112511707,content:{type:'file',resourceId:'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'}}

受信内容の resourceIdを使って LINEWORKS のメンバーにファイルを転送することができます。

別のメンバーに File を送信

これは従来のメッセージ送信 API とほぼ変わりませんね。
LINEWORKS API - メッセージ送信 (File)

contenttypefileに指定します。

constrequest=require('request');constoptions={'method':'POST','url':'https://apis.worksmobile.com/r/API ID/message/v1/bot/1035964/message/push','headers':{'consumerKey':'xxxxxxxxxxxxx','Content-Type':'application/json','Authorization':'Bearer xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'},body:JSON.stringify({"accountId":"name@domain.xyz","content":{"type":"file","resourceId":"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"}})};request(options,function(error,response){if(error)thrownewError(error);console.log(response.body);});

1599125265.png

別のユーザに転送できました!
これで、色々なファイルのやりとりができますね~♪

おわりに

ここまでお付き合いいただきありがとうございました。

待ちに待った新機能!
ファイル扱えるとなると、Bot の利用幅が凄く広くなると思うんですよね~。
音声や動画ファイルとかもいけるのかな?
色々試してみたいですね!

ではまた!(^^)/

参考にさせていただきましたm(_ _)m

LINEWORKS Developers

Nodebrewでnodeのversionの変え方

$
0
0

Nodebrewでnodeのversionの変え方

1. Nodebrewをインストールする

brew install nodebrew

2. 環境変数を追加

vi ~/.bash_profileで、以下を追加。

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

3. bash_profileを更新して設定を反映させる。

source ~/.bash_profile

4. セットアップ。これやらないとインストールできない。

nodebrew setup

5. バージョン指定してnodeをインストールするために、インストール可能なバージョンを確認

nodebrew ls-remote

6.nodeのインストール(versionを指定する)

nodebrew install-binary <version>

7. 現在自分でインストールしたnodeのversionを確認

nodebrew ls

v10.22.0
v14.9.0

8.currentに出てくるのが、現在利用中のversion。

例えば10.12をインストールしただけで利用するように設定していない場合、noneになる

nodebrew ls

v10.22.0
v14.9.0
current: none

9.nodebrew use v14.9.0 で 既にインストール済みのnodeに切り替えられる

nodebrew use v14.9.0

use v14.9.0

参考リンク

NodebrewでNodeをインストールする
Node.jsのversionを管理するためにnodebrewを利用する

Cloud Toolkitを使用したECSインスタンスへのNode.jsアプリケーションのデプロイ

$
0
0

この記事では、Cloud Toolkitを使ってAlibaba Cloud ECSインスタンスNode.jsアプリケーションをデプロイする方法を紹介します。

本ブログは英語版からの翻訳です。オリジナルはこちらからご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです。

前回の記事では、Alibaba Cloud Elastic Compute Service (ECS) インスタンスに直接ローカル Java アプリケーションをデプロイする方法について説明し、読者から多くのフィードバックをいただきました。そこで、読者からの質問に答えるために、今回の記事ではさらに、Alibaba Cloud ECSインスタンスにNode.jsアプリケーションをデプロイする方法をご紹介します。

image.png

ローカルでアプリケーションを開発する

この記事では、Webページに「Hello World」を印刷するNode.jsアプリケーションを例に、デプロイ方法を解説します。

const http = require('http');
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Alibaba Cloud Toolkit: Hello World');
});
server.listen(port, '0.0.0.0', () => {});

前述のコードは、Webページに「Hello World」という文字列を表示するための標準的なNode.jsプロジェクトです。

プラグインのインストール

Alibaba Cloudは、開発者がローカルIDEで書かれたアプリケーションをECSインスタンスに効率的にデプロイできるようにするEclipseベースのプラグインを提供しています。

プラグインのURL: https://www.aliyun.com/product/cloudtoolkit_en

このEclipseベースのプラグインのインストール手順は、一般的なプラグインと似ているため、ここでは詳細を説明しません。

プラグインの環境設定

プラグインをインストールしたら、選択して環境設定を行います。

トップメニュー > ウィンドウ > 環境設定 > Alibaba Cloud Toolkit > アカウント

以下のページが表示されたら、Alibaba CloudアカウントのAKとSKを設定して、環境設定の設定は完了です(RAMユーザーアカウントを使用している場合は、RAMユーザーのAKとSKを入力してください)。

image.png

アプリケーションのデプロイ

Eclipseでプロジェクト名を右クリックし、ショートカットメニューからAlibaba Cloud > Deploy to ECSを選択します。以下のようなデプロイ画面が表示されます。

image.png

デプロイメント設定ダイアログボックスで、デプロイメントパラメータを設定し、デプロイをクリックして初期デプロイを完了します。

/root/nodejs-demo/restart.shファイルには、以下の内容が含まれています。

source ~/.bash_profile
killall node
nohup node /root/nodejs-demo/helloworld.js > nohup.log 2>&1 &

配置パラメータの説明

  • Deploy File: 2つのオプションがあります。オプションのUpload FileはNode.jsプロジェクトで使用します。
  • Maven ビルド:現在のプロジェクトのビルドに Maven を使用している場合、Alibaba Cloud Toolkit を使用してアプリケーションを直接ビルドしてデプロイすることができます。
  • ファイルのアップロード: 現在のプロジェクトのビルドにMavenを使用していない場合、またはローカルにパッケージ化されたデプロイファイルが既に存在する場合、ローカルのデプロイファイルを選択して直接アップロードすることができます。
  • デプロイする ECSの選択:ドロップダウン リストからリージョンを選択し、そのリージョンにデプロイするECSインスタンスを選択します。
  • デプロイ先の場所:ECS インスタンス上のデプロイパスを入力します。
  • コマンド:アプリケーションの起動コマンドを入力します。このパラメータは、デプロイが完了した後に実行するコマンドを指定します。Node.js プログラムの場合、通常は起動コマンド node XXX.js です。

アリババクラウドは日本に2つのデータセンターを有し、世界で60を超えるアベラビリティーゾーンを有するアジア太平洋地域No.1(2019ガートナー)のクラウドインフラ事業者です。
アリババクラウドの詳細は、こちらからご覧ください。
アリババクラウドジャパン公式ページ

Twitter API v2 でキーワードから直近1週間分ツイートを収集する

$
0
0

8月12日(米現地時間)、Twitter API v2 がアーリーアクセスで正式リリースされました。
https://developer.twitter.com/en/docs/twitter-api/early-access

そこで早速、直近1週間分のツイートのキーワード検索ができる recent search APIでツイート集計・保存するコードを作ったので、一例として共有します。

ソースコード

node.js
'use strict'constfs=require('fs');constaxios=require('axios');constQs=require('qs');constsleep=msec=>newPromise(resolve=>setTimeout(resolve,msec));// Set target queryconsttarget_query='qiita.com';// Format nested params correctlyaxios.interceptors.request.use(config=>{config.paramsSerializer=params=>{// Qs is not included in the Axios packagereturnQs.stringify(params,{allowDots:true,arrayFormat:"brackets",encode:false});};returnconfig;});// Set API configconstconfig_common={method:'get',baseURL:'https://api.twitter.com/2/tweets',url:'/search/recent',headers:{Authorization:'Bearer <YOUR_BEARER_TOKEN>',}};constinit_config=Object.create(config_common);constloop_config=Object.create(config_common);// Set paramsinit_config.params={query:target_query,start_time:'<STRAT_TIME>',// ex. 2020-09-01T00:00:00.000Zend_time:'<END_TIME>',// ex. 2020-09-03T00:00:00.000Zexpansions:'author_id',tweet:{fields:'created_at',},};letoutput=[];constgetReq=cfg=>{returnaxios(cfg).then(function(res){output=output.concat(res.data.data);if(res.data.meta.result_count===10&&Date.parse(res.data.data[res.data.meta.result_count-1].created_at)>Date.parse(init_config.params.start_time)){// Update paramsloop_config.params={query:target_query,until_id:res.data.meta.oldest_id,expansions:'author_id',tweet:{fields:'created_at',},}returntrue;}else{returnfalse;}}).catch(function(error){console.log(error);});}constloop=async(result)=>{awaitsleep(3000);if(result){constresult=awaitgetReq(loop_config);awaitloop(result);}elseawaitfs.writeFile('tweetList.json',JSON.stringify(output,null,''),(err)=>{if(err)console.log(`error: ${err}`);});}// Run(async()=>{constresult=awaitgetReq(init_config);awaitloop(result);})();

実行後、保存したデータ(qiita.comをクエリにした例)

[{"id":"1300598977407016961","text":"RT @omiita_atiimo: 畳み込みよ、さようなら。畳み込み層を全てSelf-Attentionに取り替えた新時代のモデル「SAN」の解説記事を書きました!\n\nhttps://t.co/BXydQsNpf5\n\nSAだけで従来のCNNよりも優れた精度/ロバスト性を示して…","created_at":"2020-09-01T00:58:54.000Z","author_id":"1123585826623868934"},{"id":"1300598327080177670","text":"RT @ErdLaravel: Laravel 爆速プロトタイプ作成ツール「 https://t.co/4QQvMWoqiJ 」\nER図テーブル設計で『Migrationコード』を自動生成!!\n世界 900人以上を超える開発者に使用してもらっています。\nDB設計の勉強にも使って…","created_at":"2020-09-01T00:56:19.000Z","author_id":"1042801642460987392"},{"id":"1300598272239652866","text":"RT @ErdLaravel: Laravel 爆速プロトタイプ作成ツール「 https://t.co/4QQvMWoqiJ 」\nER図テーブル設計で『Migrationコード』を自動生成!!\n世界 900人以上を超える開発者に使用してもらっています。\nDB設計の勉強にも使って…","created_at":"2020-09-01T00:56:06.000Z","author_id":"712515194925219840"},...}

Javascript で RDSの起動・停止を制御して節約する

$
0
0

やったことまとめ

RDSの起動・停止するスクリプトを書いて、cronで営業時間の間だけ起動するように制御しています

なぜやろうと思ったか?

開発環境を業務時間外の時間で稼働させるとお金がもったいない
reactを勉強しててjavascript が思ったより面白かったから何か作りたくなった

やってみた感想

dash というスニペットツールで課金すると 公式ドキュメントが簡単に見れて文言で検索できたのがすごく便利でドキュメントを探す手間がかなり省けたので助かりました
image.png

javascript の書き方を理解し切れていないけれど、今後 react を触る過程で慣れたいな、、

実装した内容

事前準備

※ RDSを制御可能な権限を持った iam の認証情報を使います

~/.aws/credential
[プロファイル名]
aws_access_key_id = xxxxxx
aws_secret_access_key = xxxxxx

aws-sdk と @slack/web-api をインストールする

$yarn add @slack/web-api @slack/events-api
$yarn add aws-sdk

crontab サンプル

これを cron で起動時と終了時を指定して呼び出してます


PATH=/sbin:/bin:/usr/sbin:/usr/bin
MAILTO=root
HOME=/root

# For details see man 4 crontabs

# Example of job definition:
# .---------------- minute (0 - 59)
# |  .------------- hour (0 - 23)
# |  |  .---------- day of month (1 - 31)
# |  |  |  .------- month (1 - 12) OR jan,feb,mar,apr ...
# |  |  |  |  .---- day of week (0 - 6) (Sunday=0 or 7) OR sun,mon,tue,wed,thu,fri,sat
# |  |  |  |  |
# *  *  *  *  * user-name command to be executed

#開発環境のDBを平日(月 ~ 金の 8時 ~ 19時)稼働制御
## dev01-03(jty)
00 8 * * 1,2,3,4,5 root node <配置したディレクトリパス>/dev-rds-controler.js start <RDS識別子>
00 19 * * 1,2,3,4,5 root node <配置したディレクトリパス>/dev_rds_controler.js stop <RDS識別子>

node での実装サンプル

constAWS=require('aws-sdk');const{WebClient}=require('@slack/web-api')//#### SlackconstslackNotifiCation=async(message)=>{consttoken='<SlackのトークンID>'constchannel='<通知するチャンネル名>'constclient=newWebClient(token)constparams={channel:channel,text:message}constresponse=awaitclient.chat.postMessage(params)//console.log(response)}constcredentials=newAWS.SharedIniFileCredentials({profile:'プロファイル名'});AWS.config.credentials=credentials;//利用する環境のリージョンを指定するAWS.config.update({region:'<利用するリージョンを指定する>'});// 東京とか→「ap-northeast-1」// Create RDS objectconstrds=newAWS.RDS({apiVersion:'2014-10-31'})// RDS AZを停止するconstfetch_rds_az={// RDSパラメータ定義params:{DBInstanceIdentifier:''},dbInstanceParams:"",// RDS の情報を取得getRdsStatus:asyncfunction(){awaitrds.describeDBInstances(this.params).promise().then(data=>{this.dbInstanceParams=data.DBInstances[0]}).catch(err=>{console.log(err)})},fetchRdsParams:asyncfunction(){awaitthis.getRdsStatus()awaitconsole.log(this.dbInstanceParams.DBInstanceStatus)},rdsController:asyncfunction(commandParam){awaitthis.fetchRdsParams()switch(commandParam){case'start':if(this.dbInstanceParams.DBInstanceStatus==='available'){slackNotifiCation(`${this.dbInstanceParams.DBInstanceIdentifier}は起動中だよ!`)break}rds.startDBInstance(this.params).promise().then(data=>{slackNotifiCation(`${this.dbInstanceParams.DBInstanceIdentifier}を起動するよ!`)}).catch(err=>{slackNotifiCation(`【test】起動処理中にエラー発生 message:${err}`)slackNotifiCation(`【test】起動処理中にエラー発生 message:${this.dbInstanceParams.DBInstanceStatus}`)})breakcase'stop':console.log('stop')if(this.dbInstanceParams.DBInstanceStatus==='stopped'){slackNotifiCation(`${this.dbInstanceParams.DBInstanceIdentifier}は停止中だよ!`)break}rds.stopDBInstance(this.params).promise().then(data=>{slackNotifiCation(`${this.dbInstanceParams.DBInstanceIdentifier}を停止するよ!`)}).catch(err=>{slackNotifiCation(`【test】停止処理中にエラー発生 message:${err}`)slackNotifiCation(`【test】停止処理中にエラー発生 message:${this.dbInstanceParams.DBInstanceStatus}`)})breakcase'watch':// RDS の AZ を監視するためのメソッドawaitthis.getRdsStatus()constcurrentAz=this.dbInstanceParams.AvailabilityZoneconstrdsInstance=this.dbInstanceParams.DBInstanceIdentifierawaitslackNotifiCation(`【test】${rdsInstance}${currentAz}で稼働しています`)breakdefault:console.log('arg params is Inappropriate ')slackNotifiCation(`残念でしたー、コマンド実行時の引数に誤りがあります${commandParam}`)break}}}//##>> コマンド引数を取得する( $node env-dev-rds-controller watch |start | stop)constcommandParam=process.argv[2].toString()//##>> 起動、停止するDBのインスタンス情報を指定するconsttargetRds=process.argv[3].toString()fetch_rds_az.params.DBInstanceIdentifier=targetRds//##>> 起動・停止するRDSの指定をオブジェクト内として実行fetch_rds_az.rdsController(commandParam)

【node.js】process.env.{変数名}

$
0
0

大抵の場合、環境変数はハードコードされていて、

process.env.ENVNAME

たまに必要になってぼちぼち忘れてしまうので、メモ

process.env[ENVNAME]// ユースケース(条件によって環境変数を出し分けたい時)constenv1='ENV1';process.env[env1];// process.env.ENV1 と同じ

こんな感じ。:sunglasses:


Vue.js+Node.jsを利用したチャットアプリの作成

$
0
0

はじめに

最近Node.jsの勉強をしたので、何かしらのアウトプットを行おうとチャットアプリを作成しました。その備忘録です。
機能としては、簡単なログイン・ログアウト機能、チャット機能を実装しました。

成果物

sample_other.gif

利用したライブラリ

  • Vue.js
    • VueCLI…Vue.js向けのアプリケーション開発環境セットアップなどの機能を提供するCLIツール
    • vuetify…Vueのアプリケーションのデザインを容易に整えてくれるライブラリ
    • vuex…vue全体で利用できるデータストアを管理できるライブラリ
    • vuex-persistedstate…vuexの値をローカルストレージに保存するプラグイン
    • socket.io-client…socket.ioでサーバへ接続するためのクライアント用ライブラリ
  • Node.js
    • express…Node.jsで使用するWebアプリのフレームワーク
    • socket.io…Webのリアルタイム通信を可能にするライブラリ
    • mysql…MySQLをNode.jsから扱えるライブラリ

ディレクトリ構成

chatapp/
├ frontend/ ( VueCLIで作成されたプロジェクト )
|  ├ src/
|  | ├ components/
|  |   ├ Chat.vue
|  |   └ MenuBar.vue  
|  ├ store
|  | ├ index.js
|  ├ views
|  | ├ Home.vue
|  | ├ Login.vue
|  ├ App.vue
|  └ …etc
└ backend/ (自分で作成)
   ├ bin/
   | └ www
   ├ public
   | └ javascripts
   |    └ db_config.js
   ├ routes
   | ├ delete.js
   | ├ getHistories.js
   | └ login.js
   ├ app.js
   └ …etc

環境イメージ図

全部localhostで完結せず、勉強のためにDBだけ別にしてみました。
image.png

初期準備

Node.jsのインストール

公式サイトからダウンロードします。

$ node -v
v12.18.3

$ npm -v
6.14.6

フロントエンド(Vue.js)の初期準備

公式サイトに従ってインストールしていきます。

$npm install -g @vue/cli

$vue --version
@vue/cli 4.5.4

次にプロジェクトを作成します。

$vue create frontend

コンソールに選択肢が出てくるのですが、Manually select featuresを選択し、Vuexを追加で選択します。

Vue CLI v4.5.4
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support        
 ( ) Router
>(*) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

次にVue.jsのバージョンを選択します。今回は2.xを選択します。

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)     
> 2.x
  3.x (Preview)

次にESlintの設定を選択します。今回はエラー防止のみのESLint with error prevention onlyを選択します。

? Pick a linter / formatter config: 
> ESLint with error prevention only 
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

次にLintをかけるタイミングをどうするか選択します。今回はセーブした場合にかけます。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

次に各種設定をどこに置くか選択します。設定ファイルは個別に管理するのでIn dedicated config filesを選択します。

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

最後にこの設定をプリセットとして保存するか選択できます。今回はNを選択します。

? Save this as a preset for future projects? (y/N) N

プロジェクトを作成できたので、コマンドを入力し、http://localhost:8080にアクセスします。

$ cd frontend/
$ npm run serve

無事起動できたことが確認できました。
image.png
次にVuetifyを利用するためにVuetifyをインストールしましょう。
Vuetifyでもプリセットを聞かれるのでDefaultを選択します。

$ vue add vuetify

Vuetifyが適用されたのが確認できました。
image.png

バックエンド(Node.js)の初期準備

今回はExpressを利用してバックエンドのアプリケーションを作成するのですが、一から作るのには時間がかかるので、Express Generatorを利用して基本的な部分は作ってもらいます。
※ただExpress Generatorを利用すると今回は利用しないejsファイル( javascript用のテンプレートエンジン)までも作成されたり、不要なルーティングの設定も追加されてしまいます。

$ npm install -g express-generator
$ express -e backend

まだ必要なパッケージが用意されていないので、インストールしましょう。

$ cd backend
$ npm install

実際に起動できるか確認します。コマンドを入力し、http://localhost:3000にアクセスします。

$ npm start

無事起動できたことが確認できました。
image.png

DBの初期準備

今回はVM(CentOS Linux release 8.1.1911)を立ててそこにMySQLをインストールしてきます。
まずはインストールして利用しているMySQLをアンインストールしていきます。
参考記事:CentOSにインストールしたMySQLを削除する

MySQLのアンインストール

①稼働しているMySQLを停止します。

$ mysqld --version
/usr/libexec/mysqld  Ver 8.0.17 for Linux on x86_64 (Source distribution)

$ su

# systemctl stop mysqld.service
# systemctl status mysqld.service
   mysqld.service - MySQL 8.0 database server
   Loaded: loaded (/usr/lib/systemd/system/mysqld.service; enabled; vendor preset: disabled)
   Active: inactive (dead) since Sun 2020-08-23 17:36:29 JST; 42s ago

②インストール済みのMySQLの確認をします。

# rpm -qa | grep -i mysql
mysql-8.0.17-3.module_el8.0.0+181+899d6349.x86_64
mysql80-community-release-el8-1.noarch
mysql-common-8.0.17-3.module_el8.0.0+181+899d6349.x86_64
mysql-server-8.0.17-3.module_el8.0.0+181+899d6349.x86_64
mysql-errmsg-8.0.17-3.module_el8.0.0+181+899d6349.x86_64

③MySQL8をアンインストールします。

# yum remove mysql*
モジュラーの依存に関する問題:

 問題 1: conflicting requests
  - nothing provides module(perl:5.26) needed by module perl-DBD-SQLite:1.58:8010020191114033549:073fa5fe-0.x86_64
 問題 2: conflicting requests
  - nothing provides module(perl:5.26) needed by module perl-DBI:1.641:8010020191113222731:16b3ab4d-0.x86_64
依存関係が解決しました。
=============================================================================================================================================================================================
 パッケージ                                         アーキテクチャー               バージョン                                                    リポジトリー                          サイズ
=============================================================================================================================================================================================
削除中:
 mysql                                              x86_64                         8.0.17-3.module_el8.0.0+181+899d6349                          @AppStream                             67 M
 mysql-common                                       x86_64                         8.0.17-3.module_el8.0.0+181+899d6349                          @AppStream                            518 k
 mysql-errmsg                                       x86_64                         8.0.17-3.module_el8.0.0+181+899d6349                          @AppStream                            7.8 M
 mysql-server                                       x86_64                         8.0.17-3.module_el8.0.0+181+899d6349                          @AppStream                            138 M
 mysql80-community-release                          noarch                         el8-1                                                         @@commandline                          29 k
未使用の依存関係の削除:
 mariadb-connector-c-config                         noarch                         3.0.7-1.el8                                                   @AppStream                            497
 mecab                                              x86_64                         0.996-1.module_el8.0.0+41+ca30bab6.9                          @AppStream                            2.2 M
 protobuf-lite                                      x86_64                         3.5.0-7.el8                                                   @AppStream                            508 k

トランザクションの概要
=============================================================================================================================================================================================
削除  8 パッケージ

解放された容量: 216 M
これでよろしいですか? [y/N]: y
トランザクションの確認を実行中
トランザクションの確認に成功しました。
トランザクションのテストを実行中
トランザクションのテストに成功しました。
トランザクションを実行中
  準備             :                                                                                                                                                                     1/1
  scriptletの実行中: mysql-server-8.0.17-3.module_el8.0.0+181+899d6349.x86_64                                                                                                            1/1
  scriptletの実行中: mysql-server-8.0.17-3.module_el8.0.0+181+899d6349.x86_64                                                                                                            1/8
  削除             : mysql-server-8.0.17-3.module_el8.0.0+181+899d6349.x86_64                                                                                                            1/8
  scriptletの実行中: mysql-server-8.0.17-3.module_el8.0.0+181+899d6349.x86_64                                                                                                            1/8
  削除             : mysql-errmsg-8.0.17-3.module_el8.0.0+181+899d6349.x86_64                                                                                                            2/8
  削除             : mysql80-community-release-el8-1.noarch                                                                                                                              3/8
  削除             : mysql-8.0.17-3.module_el8.0.0+181+899d6349.x86_64                                                                                                                   4/8
  削除             : mysql-common-8.0.17-3.module_el8.0.0+181+899d6349.x86_64                                                                                                            5/8
  削除             : mariadb-connector-c-config-3.0.7-1.el8.noarch                                                                                                                       6/8
  削除             : mecab-0.996-1.module_el8.0.0+41+ca30bab6.9.x86_64                                                                                                                   7/8
  scriptletの実行中: mecab-0.996-1.module_el8.0.0+41+ca30bab6.9.x86_64                                                                                                                   7/8
  削除             : protobuf-lite-3.5.0-7.el8.x86_64                                                                                                                                    8/8
  scriptletの実行中: protobuf-lite-3.5.0-7.el8.x86_64                                                                                                                                    8/8
  検証             : mariadb-connector-c-config-3.0.7-1.el8.noarch                                                                                                                       1/8
  検証             : mecab-0.996-1.module_el8.0.0+41+ca30bab6.9.x86_64                                                                                                                   2/8
  検証             : mysql-8.0.17-3.module_el8.0.0+181+899d6349.x86_64                                                                                                                   3/8
  検証             : mysql-common-8.0.17-3.module_el8.0.0+181+899d6349.x86_64                                                                                                            4/8
  検証             : mysql-errmsg-8.0.17-3.module_el8.0.0+181+899d6349.x86_64                                                                                                            5/8
  検証             : mysql-server-8.0.17-3.module_el8.0.0+181+899d6349.x86_64                                                                                                            6/8
  検証             : mysql80-community-release-el8-1.noarch                                                                                                                              7/8
  検証             : protobuf-lite-3.5.0-7.el8.x86_64                                                                                                                                    8/8

削除しました:
  mysql-8.0.17-3.module_el8.0.0+181+899d6349.x86_64             mysql-common-8.0.17-3.module_el8.0.0+181+899d6349.x86_64      mysql-errmsg-8.0.17-3.module_el8.0.0+181+899d6349.x86_64
  mysql-server-8.0.17-3.module_el8.0.0+181+899d6349.x86_64      mysql80-community-release-el8-1.noarch                        mariadb-connector-c-config-3.0.7-1.el8.noarch
  mecab-0.996-1.module_el8.0.0+41+ca30bab6.9.x86_64             protobuf-lite-3.5.0-7.el8.x86_64

完了しました!

④データベースを削除します。

rm -rf /var/lib/mysql
次にMySQL8をインストールしていきます。

参考記事:
CentOS7にMySQL8をインストールして初期パスワードを変更する
MySQL 8.0 を CentOS 8.1 にインストールする手順

① dnfコマンド利用してrpmパッケージをインストールします。

# dnf localinstall https://dev.mysql.com/get/mysql80-community-release-el8-1.noarch.rpm
mysql80-community-release-el8-1.noarch.rpm                                                                                                                    21 kB/s |  30 kB     00:01
依存関係が解決しました。
=============================================================================================================================================================================================
 パッケージ                                                アーキテクチャー                       バージョン                              リポジトリー                                 サイズ
=============================================================================================================================================================================================
インストール:
 mysql80-community-release                                 noarch                                 el8-1                                   @commandline                                  30 k

トランザクションの概要
=============================================================================================================================================================================================
インストール  1 パッケージ

合計サイズ: 30 k
インストール済みのサイズ: 29 k
これでよろしいですか? [y/N]: y
パッケージのダウンロード:
トランザクションの確認を実行中
トランザクションの確認に成功しました。
トランザクションのテストを実行中
トランザクションのテストに成功しました。
トランザクションを実行中
  準備             :                                                                                                                                                                     1/1
  インストール中   : mysql80-community-release-el8-1.noarch                                                                                                                              1/1
  検証             : mysql80-community-release-el8-1.noarch                                                                                                                              1/1

インストール済み:
  mysql80-community-release-el8-1.noarch

完了しました!

②MySQLのリポジトリが有効になっていることを確認します。

dnf repolist enabled | grep "mysql.*-community.*"
mysql-connectors-community           MySQL Connectors Community               74
mysql-tools-community                MySQL Tools Community                    33
mysql80-community                    MySQL 8.0 Community Server               51

デフォルトデフォルトのMySQLモジュールを無効化します。
# dnf module disable mysql
依存関係が解決しました。
=============================================================================================================================================================================================
 パッケージ                                   アーキテクチャー                            バージョン                                      リポジトリー                                 サイズ
=============================================================================================================================================================================================
モジュールプロファイルの無効化:
 mysql/server
モジュールの無効化:
 mysql

トランザクションの概要
=============================================================================================================================================================================================

これでよろしいですか? [y/N]: y
完了しました!

③リポジトリからインストールするパッケージを確認します。

dnf info mysql-community-server
利用可能なパッケージ
名前         : mysql-community-server
バージョン   : 8.0.21
リリース     : 1.el8
Arch         : x86_64
サイズ       : 53 M
ソース       : mysql-community-8.0.21-1.el8.src.rpm
リポジトリー : mysql80-community
概要         : A very fast and reliable SQL database server
URL          : http://www.mysql.com/
ライセンス   : Copyright (c) 2000, 2020, Oracle and/or its affiliates. Under GPLv2 license as shown in the Description field.
説明         : The MySQL(TM) software delivers a very fast, multi-threaded, multi-user,
             : and robust SQL (Structured Query Language) database server. MySQL Server
             : is intended for mission-critical, heavy-load production systems as well
             : as for embedding into mass-deployed software. MySQL is a trademark of
             : Oracle and/or its affiliates
             :
             : The MySQL software has Dual Licensing, which means you can use the MySQL
             : software free of charge under the GNU General Public License
             : (http://www.gnu.org/licenses/). You can also purchase commercial MySQL
             : licenses from Oracle and/or its affiliates if you do not wish to be bound by the terms of
             : the GPL. See the chapter "Licensing and Support" in the manual for
             : further info.
             :
             : The MySQL web site (http://www.mysql.com/) provides the latest news and
             : information about the MySQL software.  Also please see the documentation
             : and the manual for more information.
             :
             : This package includes the MySQL server binary as well as related utilities
             : to run and administer a MySQL server.

④確認できたので、インストールします。

# dnf install mysql-community-server

依存関係が解決しました。
=============================================================================================================================================================================================
 パッケージ                                           アーキテクチャー                     バージョン                                  リポジトリー                                    サイズ
=============================================================================================================================================================================================
インストール:
 mysql-community-server                               x86_64                               8.0.21-1.el8                                mysql80-community                                53 M
依存関係のインストール:
 mysql-community-client                               x86_64                               8.0.21-1.el8                                mysql80-community                                12 M
 mysql-community-common                               x86_64                               8.0.21-1.el8                                mysql80-community                               621 k
 mysql-community-libs                                 x86_64                               8.0.21-1.el8                                mysql80-community                               1.4 M

トランザクションの概要
=============================================================================================================================================================================================
インストール  4 パッケージ

ダウンロードサイズの合計: 67 M
インストール済みのサイズ: 317 M
これでよろしいですか? [y/N]: y
パッケージのダウンロード:
(1/4): mysql-community-common-8.0.21-1.el8.x86_64.rpm                                                                                                        906 kB/s | 621 kB     00:00
(2/4): mysql-community-libs-8.0.21-1.el8.x86_64.rpm                                                                                                          2.1 MB/s | 1.4 MB     00:00
(3/4): mysql-community-client-8.0.21-1.el8.x86_64.rpm                                                                                                        4.6 MB/s |  12 MB     00:02
(4/4): mysql-community-server-8.0.21-1.el8.x86_64.rpm                                                                                                        4.3 MB/s |  53 MB     00:12
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
合計                                                                                                                                                         5.2 MB/s |  67 MB     00:12
警告: /var/cache/dnf/mysql80-community-b1f1ed5ba88ce0f8/packages/mysql-community-client-8.0.21-1.el8.x86_64.rpm: ヘッダー V3 DSA/SHA1 Signature、鍵 ID 5072e1f5: NOKEY
MySQL 8.0 Community Server                                                                                                                                    27 MB/s |  27 kB     00:00
GPG 鍵 0x5072E1F5 をインポート中:
 Userid     : "MySQL Release Engineering <mysql-build@oss.oracle.com>"
 Fingerprint: A4A9 4068 76FC BD3C 4567 70C8 8C71 8D3B 5072 E1F5
 From       : /etc/pki/rpm-gpg/RPM-GPG-KEY-mysql
これでよろしいですか? [y/N]: y
鍵のインポートに成功しました
トランザクションの確認を実行中
トランザクションの確認に成功しました。
トランザクションのテストを実行中
トランザクションのテストに成功しました。
トランザクションを実行中
  準備             :                                                                                                                                                                     1/1
  インストール中   : mysql-community-common-8.0.21-1.el8.x86_64                                                                                                                          1/4
  インストール中   : mysql-community-libs-8.0.21-1.el8.x86_64                                                                                                                            2/4
  scriptletの実行中: mysql-community-libs-8.0.21-1.el8.x86_64                                                                                                                            2/4
  インストール中   : mysql-community-client-8.0.21-1.el8.x86_64                                                                                                                          3/4
  scriptletの実行中: mysql-community-server-8.0.21-1.el8.x86_64                                                                                                                          4/4
  インストール中   : mysql-community-server-8.0.21-1.el8.x86_64                                                                                                                          4/4
  scriptletの実行中: mysql-community-server-8.0.21-1.el8.x86_64                                                                                                                          4/4
  検証             : mysql-community-client-8.0.21-1.el8.x86_64                                                                                                                          1/4
  検証             : mysql-community-common-8.0.21-1.el8.x86_64                                                                                                                          2/4
  検証             : mysql-community-libs-8.0.21-1.el8.x86_64                                                                                                                            3/4
  検証             : mysql-community-server-8.0.21-1.el8.x86_64                                                                                                                          4/4

インストール済み:
  mysql-community-server-8.0.21-1.el8.x86_64     mysql-community-client-8.0.21-1.el8.x86_64     mysql-community-common-8.0.21-1.el8.x86_64     mysql-community-libs-8.0.21-1.el8.x86_64

完了しました!

⑤MySQLがインストールされていることを確認します。

# mysqld --version
/usr/sbin/mysqld  Ver 8.0.21 for Linux on x86_64 (MySQL Community Server - GPL)
次にMySQLの初期設定をしてきます

①パスワードのポリシーの設定を変更します。デフォルトではパスワードポリシーの制約が強く、なかなかパスワードを登録できませんでした。

# vi /etc/my.cnf
[変更:コメントアウトを外す]
default_authentication_plugin=mysql_native_password

[追加]
# パスワードポリシー
validate_password.length=4
validate_password.mixed_case_count=0
validate_password.number_count=0
validate_password.special_char_count=0
validate_password.policy=LOW

②MySQLを起動し、自動起動の設定を追加します。

# systemctl start mysqld.service
# systemctl enable mysqld.service

③mysqld.logから初期パスワードを検索します。

# grep 'temporary password' /var/log/mysqld.log
2020-08-23T08:55:06.087398Z 6 [Note] [MY-010454] [Server] A temporary password is generated for root@localhost: 43+;S.lyoamX

④パスワードの更新と初期設定

# mysql_secure_installation
# mysql -u root -p
Enter password:[更新したパスワードの入力]
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 13
Server version: 8.0.21

Copyright (c) 2000, 2020, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

⑤localhost以外からも接続できるdevユーザを作成します。
MySQLはデフォルトでlocalhostからしか接続できない設定なので、localhost以外から接続できるユーザを作成しないと疎通できません。

mysql> create user 'dev'@'%' identified by '[パスワード]';
mysql> grant all on *.* to 'dev'@'%';

⑥データベースの作成

mysql> create database chat_app_db;
mysql> use chat_app_db
Database changed

mysql> INSERT INTO user_informations (user_id, password)
VALUES ('test', '1234');

あとはNode.jsからSQL文を実行してDB操作をするため、Node.jsのポート3000番を開けます。これをしないとファイヤーウォールでNode.jsからのアクセスが弾かれてDB操作ができません。

# firewall-cmd --zone=public --add-port=3000/tcp --permanent

ログイン・ログアウト機能

ログイン機能ではフロント(Vue.js)からaxiosを利用してバックエンド(Node.js)にHTTPリクエストを送ります。
なのでまずaxiosをインストールします。

$ npm install --save axios

ただこのままだとフロントとバックが異なるオリジンとして捉えられてしまい、CORSを有効化していないため、HTTP通信ができません。フロントはnpm run serveでオリジンがhttp://localhost:8080、バックはnpm startでオリジンがhttp://localhost:3000となり、ポート番号が異なるため、異なるオリジンとして捉えられます。

CORSの有効化を行うためには、Node.jsのapp.jsに以下を追加しましょう。
app.use()がまとまっている部分がありますが、その一番最初に記載しましょう。順番を間違えるとCORSの有効化ができません。

app.js
app.use((req,res,next)=>{res.header('Access-Control-Allow-Origin','*');res.header('Access-Control-Allow-Headers','Origin, X-Requested-With, Content-Type, Accept');res.header('Access-Control-Allow-Methods','GET, POST, PUT, DELETE, OPTIONS');next();});

また、バックエンド側ではMySQLへのアクセスを行うために、MYSQLモジュールをインポートします。

$ npm install --save mysql

実際にログインの処理を記載してみたらうまくいきました。
○Vue.js

App.vue
<template><v-app><loginv-if="!isLogin"></login><homev-else/></v-app></template><script>importLoginfrom"@/views/Login.vue";importHomefrom"@/views/Home.vue";import{mapState}from"vuex";exportdefault{name:"App",components:{Login,Home,},computed:{...mapState(["isLogin"]),},};</script>
Login.vue
<template><divclass="login"><v-containerclass="fill-height"fluid><v-rowalign="center"justify="center"class="headline font-italic font-weight-medium text--secondary"><v-colcols="12"sm="8"md="6"lg="4"><v-iconlarge>mdi-chat-processing-outline</v-icon>ChatApp
        </v-col></v-row><v-rowalign="center"justify="center"><v-colcols="12"sm="8"md="6"lg="4"><v-cardclass="elevation-12"><v-toolbarcolor="primary"darkflat><v-toolbar-title>Login form</v-toolbar-title><v-spacer></v-spacer></v-toolbar><v-card-text><v-form><v-text-fieldlabel="UserId"name="login"prepend-icon="mdi-account"type="text"v-model="userId"></v-text-field><v-text-fieldid="password"label="Password"name="password"prepend-icon="mdi-lock":append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'":type="showPassword ? 'text' : 'password'"@click:append="showPassword = !showPassword"@keyup.enter="login"v-model="password"></v-text-field></v-form></v-card-text><v-card-actions><v-rowalign="center"justify="space-around"><v-btncolor="#B2EBF2"@click="login">Login</v-btn></v-row></v-card-actions></v-card></v-col></v-row></v-container></div></template><script>exportdefault{name:"Login",components:{},data:()=>({showPassword:false,userId:"",password:"",}),methods:{login(){// 入力されたログイン情報が正しいか確認this.$store.dispatch("login",{userId:this.userId,password:this.password,});},},};</script>
store>index.js
importVuefrom'vue'importVuexfrom'vuex'importaxiosfrom'axios'importcreatePersistedStatefrom'vuex-persistedstate';Vue.use(Vuex)exportdefaultnewVuex.Store({state:{isLogin:false,userId:'',password:''},mutations:{login(state,param){state.isLogin=true;state.userId=param.userId;state.password=param.password;},logout(state){state.isLogin=false;state.userId='';state.password='';}},actions:{asynclogin({commit},{userId,password}){constparam={userId:userId,password:password}try{constloginResult=awaitaxios.post('http://localhost:3000/login',param);if(loginResult.data==='OK'){// 認証に成功した場合commit('login',param);}else{// 認証に失敗した場合console.log('認証に失敗しました。');}}catch{alert('処理に失敗しました。')}},logout({commit}){commit('logout');}},plugins:[createPersistedState()]})

○Node.js

login.js
varexpress=require('express');varrouter=express.Router();varmysql=require('mysql');constconfig=require('../public/javascripts/db_config.js');/* GET home page. */router.post('/',function(req,res,next){// フロントからのパラメータ取得constuserId=req.body.userId;constpassword=req.body.password;// コネクションの用意constconnection=mysql.createConnection(config.mysql_setting);connection.query(config.loginSQL,[userId,password],function(error,results,fields){console.log(results);if(results.length>=1){res.send('OK');}else{res.send('NG');}});});module.exports=router;

最初は下記mysql_settingtimezoneを入れずに確認をしていたのですが、datetime型の値をNode.jsで操作した場合、JSTではなくUTC表記で出力されたため、timezone:jstを入れています。
参考記事:mysqlモジュールでDB操作

db_config.js
exports.mysql_setting={host:'*',user:'dev',password:'*',database:'chat_app_db',timezone:'jst'};exports.loginSQL='SELECT * from user_informations where user_id=? AND password=?'exports.insertRecordSQL='INSERT INTO chat_histories(history_index,user_id,message,date_time) VALUES(?, ?, ?, ?)';exports.getHistoriesSQL='SELECT * FROM chat_histories';exports.deleteHistorySQL='TRUNCATE TABLE chat_histories';

チャット機能

○Vue.js

MenuBar.vue
<template><v-app-barappcolor="primary"dark><v-spacer></v-spacer><v-btn@click="logout"><spanclass="mr-2">Logout</span><v-icon>mdi-home-export-outline</v-icon></v-btn></v-app-bar></template><script>exportdefault{name:"MenuBar",components:{},methods:{logout(){// ログアウト処理実施this.$store.dispatch("logout");},},};</script>
Chat.vue
<template><v-container><v-rowclass="text-center"><v-colcols="12"style="height:80vh"><v-toolbarcolor="#BBDEFB"light><v-toolbar-title>Welcome ChatApp</v-toolbar-title><v-spacer></v-spacer><v-btn@click="deleteRecord">Delete Old Chat</v-btn></v-toolbar><!-- v-card内チャットをスクロールさせるためにclass="overflow-y-auto"を指定 --><v-cardheight="90%"width="100%"class="overflow-y-auto"><!-- チャットの表示 --><v-listtwo-linesubheader><v-list-itemv-for="(message,index) in messages":key="index"><v-list-item-avatar><v-icon>mdi-account-circle</v-icon></v-list-item-avatar><v-list-item-content><v-list-item-titlev-text="message.user_id"></v-list-item-title><v-list-item-subtitlev-text="message.message"></v-list-item-subtitle><v-list-item-subtitlev-text="message.date_time"></v-list-item-subtitle></v-list-item-content></v-list-item><v-dividerinsetv-if="messages.length > 0"></v-divider></v-list></v-card><v-cardheight="10%"width="100%"color="#B2DFDB"class="pa-sm-3 pa-lg-3 pa-md-4"><v-text-fieldv-model="message"soloclearableappend-outer-icon="mdi-send"@click:append-outer="sendMessage"@keyup.enter="sendMessage"></v-text-field></v-card></v-col></v-row></v-container></template><script>importiofrom"socket.io-client";importaxiosfrom"axios";exportdefault{name:"Chat",data:()=>({message:"",messages:[],userId:"",socket:"",}),methods:{//チャットを投稿する処理sendMessage(){this.userId=this.$store.state.userId;constdate=newDate();constdate_time=`${date.getFullYear().toString()}-${("00"+(date.getMonth()+1).toString()).slice(-2)}-${("00"+date.getDate().toString()).slice(-2)}${("00"+date.getHours().toString()).slice(-2)}:${("00"+date.getMinutes().toString()).slice(-2)}:${("00"+date.getSeconds().toString()).slice(-2)}`;// Socketを利用してサーバと通信を行う。this.socket.emit("SEND_MESSAGE",{user_id:this.userId,message:this.message,date_time:date_time,});this.message="";},// 投稿したチャットの削除asyncdeleteRecord(){try{constresult=awaitaxios.post("http://localhost:3000/delete");if(result.data==="OK"){// 削除に成功した場合履歴の初期化this.messages=[];}else{// 削除に失敗した場合console.log("削除に失敗しました。");}}catch{alert("処理に失敗しました。");}},},asyncmounted(){this.socket=io("localhost:3000");// 初期表示時にDBのレコードを取得するtry{constresult=awaitaxios.post("http://localhost:3000/getHistories");if(result.data!=="NG"){// 履歴の取得に成功した場合this.messages=result.data;}else{// 履歴の取得に失敗した場合console.log("履歴の表示に失敗しました。");}}catch{alert("処理に失敗しました。");}// 投稿されたデータの取得this.socket.on("MESSAGE",(data)=>{this.messages=data;});},};</script><stylescoped>.v-list-item__content{text-align:left;}</style>

○Node.js

wwwファイルに以下の記述を追加することで、Socket.ioの機能を利用することができます。

/**
 * ADDED!! Socket.IO Connection.
 */
var mysql = require('mysql');
const config  = require('../public/javascripts/db_config.js');

io.on('connection', function (socket) {
  // フロント側からチャットが投下された時に発火するイベント
  socket.on('SEND_MESSAGE', function (data) {

    // コネクションの用意
    const connection = mysql.createConnection(config.mysql_setting);

    // レコード件数の取得
    connection.query(config.getHistoriesSQL, function (error, results, fields) {
      const countUpNum = results.length + 1;
      data.index = countUpNum
      results.push(data);
      // 後続の作業を待つ必要がないため、フロントに値を返す。
      io.emit('MESSAGE', results)

      // レコード挿入
      connection.query(config.insertRecordSQL, [countUpNum, data.user_id, data.message, data.date_time],
        function (error, results, fields) {
          // ログ出力
          if (!error) {
            console.log(`INSERT成功:${results}`);
          } else {
            console.log(`INSERT失敗:${error}`);
          }
        }
      );
    })
  });
});

delete.js
varexpress=require('express');varrouter=express.Router();varmysql=require('mysql');//★追加constconfig=require('../public/javascripts/db_config.js');// 削除フォームの送信処理router.post('/',(req,res,next)=>{// データベースの設定情報varconnection=mysql.createConnection(config.mysql_setting);// データを取り出すconnection.query(config.deleteHistorySQL,function(error,results,fields){if(!error){res.send('OK');}else{res.send('NG');}});});module.exports=router;
getHistories.js
varexpress=require('express');varrouter=express.Router();varmysql=require('mysql');constconfig=require('../public/javascripts/db_config.js');// 画面が表示された際に実行される処理router.post('/',(req,res,next)=>{// データベースの設定情報varconnection=mysql.createConnection(config.mysql_setting);// データを取り出すconnection.query(config.getHistoriesSQL,function(error,results,fields){if(!error){res.send(results);}else{res.send('NG');}});});module.exports=router;

Vuejsのコードはこちらに、Node.jsのコードはこちらにアップしております。
よろしればアドバイス頂けますと幸いです。

最後に

次はこのチャットアプリの機能を充実させるか別のアプリをVue.jsとNode.jsを利用して作ってみたいと思っています。

参照

Vue.js公式サイト
CentOSにインストールしたMySQLを削除する
CentOS7にMySQL8をインストールして初期パスワードを変更する
MySQL 8.0 を CentOS 8.1 にインストールする手順
mysqlモジュールでDB操作
ブラウザからWebAPIと非同期通信を行う
Vue.js+Express+Socket.IO 最小構成でリアルタイムチャットを作成する

Puppeteerで日本語文字化けを防ぐRTA

$
0
0

たぶんこれが一番早いと思います

FROM buildkite/puppeteer:5.2.1ENV LANG ja_JP.UTF-8RUN apt-get update &&\
    apt-get -yinstall locales fonts-ipafont fonts-ipaexfont &&\
echo"ja_JP UTF-8"> /etc/locale.gen && locale-gen
$ docker build .-t puppeteer_ja

実行

qiita.js
constpuppeteer=require('puppeteer');(async()=>{consturl='https://qiita.com/';constbrowser=awaitpuppeteer.launch({args:['--no-sandbox','--disable-setuid-sandbox']});constpage=awaitbrowser.newPage();awaitpage.goto(url);awaitpage.screenshot({path:'image.jpg'})awaitbrowser.close();})();
$ node qiita.js
  • image.jpg

image.jpg

YouTubeチャンネルにアップロードされた動画を埋め込みHTML形式で取得してみた

$
0
0

はじめに

YouTube Data API を使って、YouTubeチャンネルにアップロードされた動画を埋め込みHTML形式で取得してみました。

JavaScriptのYoutube用ライブラリもいくつかあるみたいですが、
今回はURLを直打ちする形で実装しました。

GET URLやJSONの仕様は下記を参照しました。
https://developers.google.com/youtube/v3/docs

環境は下記になります。
macOS Catalina 10.15.6
Node.js v14.8.0
(Node.js Library)request 6.14.7

コードと実行結果

コードは下記になります。

youtube.js
constrequest=require('request');constURL_YOUTUBE_API='https://www.googleapis.com/youtube/v3/';constYOUTUBE_APP_KEY=process.env.YOTUBE_APP_KEY;constMY_YOUTUBE_CHANNEL_ID=process.env.YOUTUBE_CHANNEL_ID;constURL_YOUTUBE_CHANNELS=URL_YOUTUBE_API+'channels?key='+YOUTUBE_APP_KEY+'&part=snippet,statistics,contentDetails&id='+MY_YOUTUBE_CHANNEL_ID;constURL_YOUTUBE_PLAYLISTITEMS=URL_YOUTUBE_API+'playlistItems?key='+YOUTUBE_APP_KEY+'&part=snippet,contentDetails&playlistId=';constURL_YOUTUBE_VIDEOS=URL_YOUTUBE_API+'videos?key='+YOUTUBE_APP_KEY+'&part=player&id=';varget_yotube_options_base={url:'',method:'GET',json:true};varhtml_data=[];varget_youtube_options_1=get_yotube_options_base;get_youtube_options_1.url=URL_YOUTUBE_CHANNELS;request(get_youtube_options_1,function(error,response,ch_info){varplaylistId=ch_info.items[0].contentDetails.relatedPlaylists.uploads;varget_youtube_options_2=get_yotube_options_base;get_youtube_options_2.url=URL_YOUTUBE_PLAYLISTITEMS+playlistId;request(get_youtube_options_2,function(error,response,playlist_info){varvideoId_list=[];playlist_info.items.forEach(item=>{videoId_list.push(item.snippet.resourceId.videoId);});varget_youtube_options_3=get_yotube_options_base;get_youtube_options_3.url=URL_YOUTUBE_VIDEOS+videoId_list.join(',');request(get_youtube_options_3,function(error,response,video_info){video_info.items.forEach(item=>{html_data.push(item.player.embedHtml);});console.log(html_data);});});});

実行結果は下記になります。
「XXXXXXXXXXXXX」の部分は自分の情報に書き換えてください。

% export YOTUBE_APP_KEY=XXXXXXXXXXXXX
% export YOUTUBE_CHANNEL_ID=XXXXXXXXXXXXX
% node youtube.js
[
  '<iframe width="480" height="270" src="//www.youtube.com/embed/uRML4cHJKsE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
  '<iframe width="480" height="270" src="//www.youtube.com/embed/BuHrzydYE2s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
]

コードの説明

YouTubeに対して3回HTTPリクエストをする形になってます。

(1回目) チャンネルIDから再生リストIDを取得 => URL:「URL_YOUTUBE_CHANNELS」
(2回目) 再生リストIDから動画IDを取得 => URL:「URL_YOUTUBE_PLAYLISTITEMS」
(3回目) 動画IDから埋め込みHTMLを取得 => URL:「URL_YOUTUBE_VIDEOS」

事前準備が必要です。
・App Keyについては、
「Google APIs Console」というサイトで発行しておきます。

・YouTube Channel IDはIDを取得したいチャンネルのページに行って、ソースを表示=>「CHANNEL_ID」で文字列検索すると出て来ます。

下記の画像で言うと「UCD0it6kq_2HBn3uMACiX_3A」の部分です。
スクリーンショット 2020-09-06 0.55.16.png

以上です。

【JavaScript】String配列の要素をキーとするオブジェクトを作成する方法

$
0
0

はじめに

ループしながら、配列内の要素をキーとするオブジェクトを作成する方法を紹介します。

方法

constarray=['key1','key2','key3',]constcreateObj=(array)=>{constobj=newObject();array.forEach(item=>(Object.defineProperty(obj,item,{enumerable:true,// ループのために必要!value:'ここに値'})));returnobj;}}console.log(createObj(array));// {key1: 'ここに値', key2: 'ここに値', key3: 'ここに値'}

オプションとして設定する、enumerable: trueが重要です。
これがないと動きません。

まとめ

配列内の要素をキーとするオブジェクトを作成することができました。

Node.js nを使い複数バージョンを共存させる

$
0
0

仕事でnode.jpを使用する機会があったのですが、
複数のシステムで様々なnodeのバージョンを使う機会があり、仮想環境(CentOs)でnodeのバージョン切り替えれるようにしました

Node.js と npm インストール

とりあえず、nodeとnpmをインストールします (CentOs)

yum install gcc gcc-c++
yum install nodejs npm –enablerepo=epel

※ついでにMacの場合は以下のコマンドで

brew install node

n のインストール

npm install -g n

nのパスを通す

~/.bash_profileを使用しパスを指定する
※ない場合は、作成してください。~/.profile, ~/.bashrcでも自分の好みのもので構いません

cd
vi .bash_profile

.bash_profileに以下の文言を買い込みます

export N_PREFIX=$HOME/.n
export PATH=$N_PREFIX/bin:$PATH

調整を適用

source .bash_profile

これで準備できました!

特定バージョンのインストール

最新バージョン

$ n –stable
$ n –latest
$ n latest

特定バージョン

$ n 5.7.1

バージョン切り替え

nコマンドを使用すると矢印キーとEnterキーで切り替えることができます

# n

ο   node/10.17.0
    node/12.18.3

Use up/down arrow keys to select a version, return key to install, d to delete, q to quit

これでnodeのバージョンを気楽に切り替えれるようになりました、本当に助かる

参考文献

https://qiita.com/jaxx2104/items/2277cec77850f2d83c7a
https://blog1.mammb.com/entry/2019/11/26/090000
https://qiita.com/bigplants/items/2d75bf552e0da4a7e822

Viewing all 8890 articles
Browse latest View live