- 1. PlayCanvasでTypeScriptを使うためのメモ(Webpack未使用編)
- 2. Node.jsアプリケーションをElastic Beanstalkにデプロイする
- 3. IBM CloudでCloud Foundryアプリケーションをデプロイをする
- 4. [LINE BOT]FizzBuzz体験BOT
- 5. Express.jsにPassport.jsで、任意のフォルダ配下のみをBasic認証する
- 6. anyenvでNodeやRubyやPythonのバージョン管理
- 7. IMI住所変換コンポーネントでいろんな住所を正規化してみた
- 8. ラズベリーパイ4にNode.jsをインストールするまで
- 9. webpack はじめ方
- 10. Node.jsでパスワードを暗号化 | mongoose , Express, MongoDB
- 11. GitHub Actions上でPuppeteerを動かす
- 12. Vercel上でPuppeteerを動かす
- 13. ESLint簡単導入 × VSCode
- 14. Expressを使ってみた ~ Expressに「ようこそ」と言われるまで ~
- 15. Node.js インストールからREPL、ファイル実行まで(mac)
- 16. 【初心者】Puppeteerでよく使うコードベスト3
- 17. Node.jsとMongoDBのAPIをHerokuにデプロイするまで
- 18. VSCodeのSSH接続機能で、RaspberryPi内のNode.jsコードをデバッグ
- 19. JupyterLabでnode.jsのカーネルが立たない
- 20. SlackBOT Node.js axios await asyncを使ったPOSTリクエスト
PlayCanvasでTypeScriptを使うためのメモ(Webpack未使用編)
#概要
[前回の記事(準備編)](https://qiita.com/riafeed/items/d79615260c0cf3f47e92)でアセットをアップロードするための設定までやりましたが、今回はgulpを使ってトランスパイルからアップロードまで一括で行えるようにgulpタスクを作ります。
なぜgulpを使うのかというと、前回の記事にも書いた通り、[PlayCanvas用のgulpタスクが公開されている](https://qiita.com/yushimatenjin/items/5f0f178e8a4ba4a5ee57)からです。
#gulpfile.js
後述の問題のため、through2というgulp用のプラグインを使い、トランスパイル後のコードの先頭に2行ほどコードを書き加えるという泥臭い処理を行っています…(´・ω・`)
“`gulpfile.js
const gulp = require(“gulp”);
const playcanvas = require(“gulp-playcanvas”);
const pcOptions = require(“./
Node.jsアプリケーションをElastic Beanstalkにデプロイする
以下の記事を参考に進めます。
[Express アプリケーションを Elastic Beanstalk にデプロイする – AWS Elastic Beanstalk](https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/create_deploy_nodejs_express.html)
## EB CLI のインストール
“`
brew update
brew install awsebcli
eb –version
> EB CLI 3.18.1 (Python 3.8.2)
“`## eb init コマンドを使用してリポジトリを作成
“`
mkdir node-express
cd node-express
eb init –platform node.js –region ap-northeast-1
> You have not yet set up your credentials or your credentials are incorrect
> You must pr
IBM CloudでCloud Foundryアプリケーションをデプロイをする
こんにちは。Cloud IaaS超初心者です。
先日IBM Cloud のCloud Foundryを使用してアプリケーションをデプロイしようとした時に少し詰まったので備忘録として残しておきます。まずはコンソール上でCloud Foundryアプリケーションを作る。
1. 「カタログ」->「Cloud Foundry」を検索
2. 「パブリックアプリケーション」を選択
3. リージョン「シドニー」(東京はない)、ランタイム「SDK for Node.js」、あとはドメイン名やホスト名などよしなに。作成すると、コンソール上から「Cloud Foundryアプリケーション」として確認できる。
次にCLIからあらかじめ作成したプロジェクトをデプロイしてみる。
ログインとCLIコマンドインストール“`
ibmcloud login
ibmcloud cf install
“`targetを対話的に設定、、と思ったらここで問題発生。
“`
~/Desktop/cloudfoundry/test $ ibmcloud target –cf
失敗
Cloud Fo
[LINE BOT]FizzBuzz体験BOT
#目次
* はじめに
* サンプルコード
* サンプル画像と使用例
* おわりに
* 参考にしたサイト#はじめに
今回は、LINE BOTでFizzBuzzをやってみた。
なお、当LINE BOTを作成する際に、[この記事](https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d)をベースにした。#サンプルコード
“`javascript
‘use strict’;// 使用パッケージ群
const express = require(‘express’); // Node.jsで利用できるWebアプリケーションフレームワーク
const line = require(‘@line/bot-sdk’); // ボットサーバへのリクエストが当LineBOTからきたものかどうかを検証してくれる(要は署名検証)
const PORT = process.env.PORT || 3000; //Node.jsアプリケーションを使用するポートを設定
// LineBOT用定数群
const config = {
cha
Express.jsにPassport.jsで、任意のフォルダ配下のみをBasic認証する
# 概要
ExpressフレームワークにBasic認証を適用する方法について記載します。
任意のフォルダのみにBasic認証を適用するものとし、そのフォルダにVue-CLIによるSPA(=Single Page Application)を置くことを目的とします。
# 方針
最小限のBasic認証を認証する場合はExpress.jsプロジェクトにて提供されるbasic-auth-connectライブラリでもよいのですが、他の認証への差し替えの容易性を考慮して、Passport.js を用いることとします。
* basic-auth-connect
* https://github.com/expressjs/basic-auth-connect
* Passport.js
* http://www.passportjs.org/認証を要求する領域と、不要とする領域を共存させたいので、任意のフォルダ配下のみをBasic認証の対象とします。
ついでに、Vue CLIで作成したSPAを任意フォルダへ配置するものとします。
なお、ユーザー名は「user」でパスワ
anyenvでNodeやRubyやPythonのバージョン管理
# 概要
– github:https://github.com/anyenv/anyenv
– anyenvはnodenv, rbenv, pyenvなど*env系を管理するライブラリ
– nodenv, rbenv, pyenvは、Node, Ruby, Pythonのバージョンを管理してくれる。anyevnでnodenvをインストールしてnodenvでほしいバージョンのNodeをインストールして管理しておくという感じ
# anyenv インストール
“`shell:
$ git clone https://github.com/riywo/anyenv ~/.anyenv
$ echo ‘export PATH=”~/.anyenv/bin:$PATH”‘ >> ~/.bash_profile
$ echo ‘eval “$(anyenv init -)”‘ >> ~/.bash_profile
$ exec $SHELL -l# 確認
$ anyenv -v
anyenv 1.1.1# 初期化しておく
$ anyenv install –init
“`
IMI住所変換コンポーネントでいろんな住所を正規化してみた
先日、経済産業省から「IMIコンポーネントツール」というものが公開されました。
IMIコンポーネントツール
https://info.gbiz.go.jp/tools/imi_tools/今回、この中の「(1) 住所変換コンポーネント」をいろいろ使ってみたので、そのことについて投稿したいと思います。
住所変換コンポーネントについて、以下のブログで詳しく解説されています。
[経産省発の npm モジュール!住所や電話番号の正規化、ジオコーディングなどができる IMI コンポーネントツールを試した!](https://blog.geolonia.com/2020/05/29/imi-tools.html)
住所変換コンポーネントは、簡単に言うとあいまいな住所表記を正規化してくれるツールと理解しています。
私は個人で[Linked Open Addresses Japan](http://uedayou.net/loa/)(以下、住所LODと呼びます)という住所データを[Linked Open Data](https://ja.wikipedia.org/wiki/Linked
ラズベリーパイ4にNode.jsをインストールするまで
自宅簡易サーバを作ろうと思い、ラズベリーパイ4を購入しました。とりあえず、Node.jsをインストールするところまでの備忘録です。
# OSのインストール
OSを何にするか迷いましたが、結局ラズベリーパイ標準OSのRaspbianを入れることにしました。OSイメージは[こちら](https://www.raspberrypi.org/downloads/)からダウンロード。
RaspbianはDebianベースのOSなのでUbuntuとかに慣れ親しんだ人であればほとんど苦労することは無いと思います。パッケージ管理はaptです。
基本的には手元のMacからSSH接続にて使おうと思ったので、CUI(Raspberry Pi Lite)を選択しました。
まずは、SDカードにOSを入れるところから始めます。SDカードにOSを書き込む方法も色々あるようですが、私は[Rufus](https://rufus.ie/)というフリーソフトを使いました。詳しい使い方は[こちら](https://hashitaka.jp/raspberrypi4/centos7-install/)を参考にしました。
Ru
webpack はじめ方
## この内容について
この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
[【webpack】 導入手順 | コレワカ](https://korenarawakaru.com/webpack/webpack-start)今回紹介する内容には、Sassのバンドルも含めていますので、Sassを使いたい人にもおすすめです。
## webpackとは
オープンソースのJavaScriptモジュールバンドルのこと。
CSSやJavaScriptなどの複数のファイルを1つのファイルにまとめることが可能。## webpackのメリット
多くのCSSやJavaScriptなどのファイルを1ページで読み込むとリクエスト数が増加してしまうため、
ページの表示速度が遅くなるなどのデメリットがあります。
それをwebpackを使って、1つのファイルにすることでリクエスト数が減り、ページ表示速度が速くなるなど
のメリットを得られます。
同時に最終的に1つにすれば良いので、開発時はファイルを分割して管理することも可能なので、開発効率の
アップにもつなが
Node.jsでパスワードを暗号化 | mongoose , Express, MongoDB
`mongoose-bcrypt` をいれる
“`Js
npm install mongoose-bcrypt –save
“``mongoose.Promise` を読み込んだ
“`js
mongoose.Promise = global.Promise;
mongoose.connect(config.database);
“``.plugin(require(‘mongoose-bcrypt’),{ fields: [‘password’] })` するだけでいい。
“`js
// get mongoose.Schema
var mongoose = require(‘mongoose’);
var Schema = mongoose.Schema;// make user model and export
module.exports = mongoose.model(‘User’,
new Schema({
firstName: String,
lastName: String,
password: String
GitHub Actions上でPuppeteerを動かす
GitHub ActionsでPuppeteerを動かしたいなと思い試してみたメモです。
**結果、特にそこまで気にせずに起動してくれました。**
## 準備
割と普通ですね。
“`
yarn add puppeteer
“`## プログラム
[GitHubのPuppeteer Headful](https://github.com/marketplace/actions/puppeteer-headful)のページを見ると`process.env.PUPPETEER_EXEC_PATH`でバイナリを指定しろみたいな記載があるけど、特に指定せずに普通インストールして使えました。
“`app.js
const puppeteer = require(‘puppeteer’);(async () => {
const URL = `https://twitter.com/n0bisuke`;const browser = await puppeteer.launch({});
const page = await browser.ne
Vercel上でPuppeteerを動かす
試してみたら動かせました。調べてもそれっぽいの無さそうだったのでメモです。
## 参考にしてるコードとお断り
ググったらこちらのプルリクが当たったので、こちらをもとに書いてますが、現状の公式なやり方かはわかりません。
> https://github.com/vercel/now-examples/pull/207/files
その他参考: [VercelでLINE BOTを動かす 2020年5月版](https://qiita.com/n0bisuke/items/a5f49193fa68f28a7f25)
## 実装
### chrome-aws-lambda + puppeteer-coreを利用
vercelはAWS Lambda上で動いてる模様なので、動作するChromium Binaryも[chrome-aws-lambda](https://github.com/alixaxel/chrome-aws-lambda)を使うと良いっぽいです。
また、バイナリはchrome-aws-lambdaを利用するということで、バイナリが梱包されてない[puppete
ESLint簡単導入 × VSCode
## node.js をインストールする
### ざっくりコマンド
“`bash
$ brew install nodebrew # HomebrewでNodeBrewをインストール$ nodebrew setup # Nodebrewのセットアップ
$ nodebrew install-binary latest # 最新版のnode.jsをインストール
$ nodebrew ls # インストールしたnode.jsのバージョンを確認
$ nodebrew use v12.4.0 # ls で確認したバージョンを指定
$ echo ‘export PATH=/usr/local/var/nodebrew/current/bin:$PATH’ >> ~/.bash_profile # パスを通す(bashの例)
“`参考:[MacにNode.jsをインストール](https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09)
参考:[【2018年版】macのhomebrewでnodebrew入れてからnode.
Expressを使ってみた ~ Expressに「ようこそ」と言われるまで ~
# そもそも Express とは
Node.jsのWebアプリケーションフレームワーク# express-generator
アプリケーションジェネレータツール。これを使うと、アプリケーションの骨組みを素早く作成できる## インストールしてみる
“`vim
$ npm install -g express-generator
“`## 実際にアプリを作るためには
– まずはヘルプ機能を確認“`vim
$ express -h
“`
– さっそくExpressアプリを作成
– アプリ名:myapp
– viewエンジン:pug“`vim
$ express –view=pug myapp
“`– 依存関係をインストール
“`vim
$ cd myapp
$ npm install
“`
– アプリの実行“`vim
$ DEBUG=myapp:* npm PORT=XXXX start
“`– ブラウザで http://localhost:XXXX/ をロードしてアプリにアクセス
…すると!
Expressがすでにいい感じ
Node.js インストールからREPL、ファイル実行まで(mac)
#インストール
[nodejs](https://nodejs.org/ja/)
nodejsのサイトでDLしちゃいましょう。
ターミナルでやる方法もありますが、別でググって下さい。“`
% node -v
v13.8.0
“`インストールできたらターミナルで確認。npmも一緒にインストールされます。
npmはpythonでいうpipです。“`
npm -v
6.14.5
“`—
#Nodejs REPL“`
$ node
>
> 3 + 2
6
>
“`nodeシェルをうまく使うと開発にも役立ちます。
##便利なREPLコマンド
“`
.break セッション内でブロックから抜け出す
.clear セッション内でブロックから抜け出す
.editor 複数行のコードを書ける
.exit セッション終了
.help ヒントの表示
.load ローカルなファイルにアクセスする
.save セッションのコードをファイルに保存する
“`—
#Node.jsでファイルを実行するnodeの後にファイル名を指定することでJavascrip
【初心者】Puppeteerでよく使うコードベスト3
# はじめに
毎月末になると、ルーティンで作業工数の入力をしています。
JavaScriptで半自動で入力していて、5分ほどで入力出来ています。
が、憂鬱すぎるので全自動化することにしました。
ググって最初に目に付いたPuppeteerを利用します。
実際に利用してみてベースとなるコード、更によく使うコードがわかったのでQiitaに残します。# コード
### 基本のコード
“`javascript:kihon.js
const puppeteer = require(‘puppeteer’);
// ID・アカウント認証する時はここでID・アカウント情報を読み込む↓
// 後述
// ID・アカウント認証する時はここでID・アカウント情報を読み込む↑(async () => {
const browser = await puppeteer.launch({
headless: false, // ブラウザの動きを表示
slowMo: 50 // puppeteerの操作を遅らせる
})
const page =
Node.jsとMongoDBのAPIをHerokuにデプロイするまで
## はじめに。
私は今、Reactと、Nodeでwebアプリを作っています。EC2に環境立ち上げるのはクソだるい… ってことで今までRailsでしか使ってなかったHerokuを使うことに。
Reactは超簡単にデプロイできて奇跡だと思った。Nodeも考える時間含めて2時間くらいでデプロイできた。奇跡!!!
セールスフォースの株買って大切に大切に保持しておきたい。
## Node.jsとMongoDBのAPIをHerokuにデプロイ成功した絵
単純にルートで文字返してるだけ。
## 一番最初はProcfileを作る
僕はローカルで、
“`
% node app/app.js
“`でアプロを起動させていたので、
“
VSCodeのSSH接続機能で、RaspberryPi内のNode.jsコードをデバッグ
#はじめに
本記事は、[Pythonでのデバッグ実行](https://qiita.com/c60evaporator/items/26ab9cfb9cd36facc8fd)と同内容を、Node.jsで実行した記事です。**Node.jsでもブレークポイント付きの快適デバッグが実現できました!**
#必要なもの
・RaspberryPi (本例ではRaspberryPi3 ModelB)
※あらかじめNode.jsをインストールしてください(最新のRaspbian10ではプリインストール)
・上記と同じネットワークにつながったPC (本例ではWindows10)
・Visual Studio Code 1.39.2以降(上記PCにインストール、本例では1.44.2使用)#手順
下記記事を参考にさせて頂きました
https://qiita.com/GRGSIBERIA/items/b8cd4a2b3635d1bb0391※手順④まではPythonのときと同内容です
##①SSH接続の設定と、configファイルの保存
[本記事「公開鍵認証の場合」](https://qiit
JupyterLabでnode.jsのカーネルが立たない
同じ状況に立つ人が果たして居るのか分からないので、雑にメモ
環境:
win10
anaconda 4.8.3#起こった問題
node.jsのカーネルが立たない
“`
>jupyter lab
[I 19:33:43.066 LabApp] JupyterLab extension loaded from C:\ProgramData\Anaconda3\lib\site-packages\jupyterlab
[I 19:33:43.066 LabApp] JupyterLab application directory is C:\ProgramData\Anaconda3\share\jupyter\lab
[I 19:33:43.486 LabApp] Serving notebooks from local directory: C:\Users\fuga
[I 19:33:43.487 LabApp] The Jupyter Notebook is running at:
[I 19:33:43.487 LabApp] http://localhost:8888/
SlackBOT Node.js axios await asyncを使ったPOSTリクエスト
# はじめに
最近のJavaScriptでGET,POSTリクエストするには“axios“を使うのがイケてるらしいが、非同期の処理になるためコールバック地獄が起こる。それを解決するために`async` `await`を使ったPOSTリクエストのサンプルコード(個人的なメモ)SlackBOTに指定のチャンネルにテキストを投稿させるためのコードです。
“カスタムインテグレーションではなく、「App」の方です“
基本的なPOSTリクエストなので応用は効くと思います#コード
“`javascript:node.js
const axios = require(‘axios’);//npm install axios してね//Slackにメッセージを送る
//引数1(文字列) : チャンネル名 (例: #勤怠履歴)
//引数2(文字列) : 送りたいメッセージ
const postSlack = async (ch,msg) =>{
console.log(‘postSlack…’)
const req_url = ‘https://slack.com/api/c