- 1. 世界中から のあちゃん・えくくん（猫）と遊ぶ
- 2. Gatsbyで「error Looks like develop for this site is already running, can you visit http://localhost:8000 ? If it is not, try again in five seconds!」での対処
- 3. node.jsでneo4jのOGMを使う①とりあえず動かしてみる
- 4. MacでYarnが実行できるようにする
- 5. node.js+ExpressでAPIに呼び出し制限を実装する
- 6. TypeScript で実装した Robots をリファクタリングしてみた (まだCUI ver.)
- 7. Typescript ts-node できない を解決
- 8. vue cliとは
- 9. grpc-nodeでエラー時にerrdetailsを返却する
- 10. npm scripts内の`echo`でダブルクォートを出力させたい
- 11. typeorm チュートリアル 一部抜粋 (+勝手に補足)
- 12. [Vueサーバサイドレンダリング] webpackでoutput.libraryTarget should be commonjs2 と怒られた話[Vue SSR]
- 13. OvernightJSでNode+Express+TypeScriptなAPIサーバーを構築する
- 14. 描いて理解するイベントループ
- 15. VS Codeでサイト制作環境構築
- 16. アレクサでライトやエアコンをコントロールしましょう（まだできない）
- 17. [OCI] Computeインスタンス上にNode.jsのWebアプリケーション環境を構成して、MySQL Database ServiceのDBシステムにアクセスしてみた
- 18. Node.js + socket.io の簡易チャットアプリをコンテナ化したメモ
- 19. Dockerfile、docker-compose.ymlを作ってwindows10、Linux、ラズパイでnodejsを動かす
- 20. 【node+Vue】ストア+APIを経由してサーバで作ったバイナリファイル受け取りダウンロードさせる
世界中から のあちゃん・えくくん（猫）と遊ぶ
### まえがき
「世界中の人に、のあちゃん・えくくん（猫）と遊んでもらいたい」
そんな思いから、世界中のパソコンやスマホを通して、ペットののあちゃん・えくくんとコミュニケーションがとれるものを作ってみました。
本当は猫じゃらしを振り回してもらいたかったのですが、まずはLEDを点灯させるだけの「光をともす」をやってみたいと思います。
↑ のあちゃんとえくくん ↓のあちゃんに光が灯される図
世界中からアクセスできる点については、ESP32を公開Webサーバ
Gatsbyで「error Looks like develop for this site is already running, can you visit http://localhost:8000 ? If it is not, try again in five seconds!」での対処
# 事例
“`gatsby develop“`を実行すると以下が表示された
“`
error Looks like develop for this site is already running, can you visit http://localhost:8000 ? If it is not, try again in five seconds!
“`
http://localhost:8000
を調べても何も表示されないし５秒まっても再び実行しても同じエラー何回か“`gatsby develop“`を実行した際に
“`
Something is already running at port 8000
✔ Would you like to run the app at another port instead? … yes
“`
とか出てたので他のポートで実行されているのかと思い
http://localhost:8001
http://localhost:8002
を確認して見たが何も表示されない# 解決方法
localhostを使用してい
node.jsでneo4jのOGMを使う①とりあえず動かしてみる
node.jsでOGM（オブジェクトグラフマッピング）を使うと簡単にデータにアクセスできます。
#環境変数の設定
①dotenvをインストールします。
“`
npm i –save dotenv
“`
②.envファイルをプロジェクトのディレクトリに作成“`/.env
// .env
NEO4J_PROTOCOL=neo4j
NEO4J_HOST=localhost
NEO4J_USERNAME=neo4j
NEO4J_PASSWORD=neo4j
NEO4J_PORT=7687
NEO4J_DATABASE=neo4j
NEO4J_ENCRYPTION=ENCRYPTION_OFF
“`#neodeのインストール
“`
npm install –save neode
“`modesディレクトリを作成してモデルを定義
“`/model/user.js
module.exports = {
id: {
type: ‘uuid’,
primary: true
},
name: ‘string’
}
“`“
MacでYarnが実行できるようにする
2020.10.31時点
# やりたいこと
Macでフロントエンド開発ができるようにYarnを実行できるようにしたい。# 結論
必要最小限のコマンドはこんな感じ。“`
/bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)”
brew install nodenv
echo ‘eval “$(nodenv init -)”‘ >> ~/.bash_profile
source ~/.bash_profile
nodenv install 14.15.0
nodenv rehash
nodenv global 14.15.0
brew install yarn –ignore-dependencies
“`# やったこと
下記のアプリをインストールしました。
1. homebrew
2. nodenv
3. Node.js
4. Yarn# 説明
導入したものの用途とよく使うコマンドはこんな感じです。## homebrew
node.js+ExpressでAPIに呼び出し制限を実装する
node.js＋ExpressでAPI作成するときに回数制限をかけたかったので実装メモ
#redisのインストール
Redisとは永続可能なインメモリデータベースです。
Redis上にアクセス情報を保持してアクセス制限を実施します。yumでインストール
“`
# yum install -y redis
“`バージョン確認
“`
# redis-server –version
Redis server v=3.2.12 sha=00000000:0 malloc=jemalloc-3.6.0 bits=64 build=7897e7d0e13773f
“`redisサーバー起動
“`
# sudo service redis start
“`#express-limiterの利用
回数制限をするミドルウェアのインストール
“`
npm install express-limiter –save
“`“`
var express = require(‘express’)
var app = express()
var client
TypeScript で実装した Robots をリファクタリングしてみた (まだCUI ver.)
ちょっとは TypeScript やってる感が出たと思うよ…
# はじめに
[前回の記事で実装した Robots ](https://qiita.com/takanassyi/items/db1e16aaf076bfaafe79)の TypeScript コードがあまりにも…ということでリファクタリングしてみました。
# クラス図
– ちょっと真面目に Robots をクラス設計を考えてみました。
– [MVCパターン](https://ja.wikipedia.org/wiki/Model_View_Controller)を意識して設計しました。
– Model 相当が Robot クラスでロボットの動きなどのルールを管理するロジックの担当。
– View 相当が Field クラスでターミナル上に表示する画面に関する処理の担当。
– Controller 相当が Game クラスでユーザーからの操作を受け付け、Robot, Field クラスとの連携を担当。#これで解決
公式？ドキュメントだと以下のように書いておりましたmm
https://www.npmjs.com/package/ts-node“`
# Local
vue cliとは
## vue-cliとは
>cliはCommnad Line Interfaceの略で、コマンドラインを使ってvue.jsで開発を行うための前準備を支援してくれるツールです。開発はプロジェクトという単位で行います。vue-cliを使ってプロジェクトの作成を行う際、プロジェクトで利用する機能のインストールも一緒に行うことができます。webpackも一緒にインストールされるでプロジェクトを作成すればすぐに開発を開始することができます。
https://reffect.co.jp/vuevueで開発するための道具ってことか。
## インストール方法(node.jsがインストールされている必要がある。)
“`
$ npm install -g @vue/cli
“`## プロジェクトの作成
“`
$ vue create vue-application
“`
このコマンドを実行した後に、こういう選択画面が表示される。“`
Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check
grpc-nodeでエラー時にerrdetailsを返却する
# grpc-nodeでエラー時にerrdetailsを返却する
gprcのバックエンドとしてnodeを選択するとフレームワークとして公式のgrpc-nodeが選択に上がると思います
https://github.com/grpc/grpc-node正常系はそつなく実装できるのですが、エラー時にGoなどで言うところのerrdetailsを利用したくなったときに苦労したのでその覚書
(正確にはerrdetailsと呼ぶのかは分かりませんがGoのパッケージ名がerrdetailsなのでそう呼んでます)## errdetailsって何？
gRPCのフレームワークが用意しているエラーの詳細を記述できるメッセージオブジェクトです
例えば、REST-APIを設計するときなどにjsonのエラーオブジェクトも設計する必要があると思うのですが、
統一的なフォーマットがなく(一応RFC7807という規格はあるが従っていることが少ない)、設計時に揉めるであろうことが予測されますそこで、gRPCが用意しているメッセージオブジェクトと仕組みを利用することで、設計時に疲弊しなくて済みます
下の実装例
npm scripts内の`echo`でダブルクォートを出力させたい
# TL;DR
こんなことを
“`sh
echo \”
“`npm scriptsで再現したければ、こう書きます。
“`json:package.json
“scripts”: {
“double-quote”: “echo \\\””
}
“`# 目的
こんなシェルコマンドを叩いて、
“`sh
echo { \”home\”: \”$HOME\” } > home.json
“`変数を展開したJSONファイルを作りたかったんですね。
“`json:home.json
{ “home”: “/home/myname” }
“`しかもnpm scriptsに書きたかったんです。
# npm scriptsでは挙動が違う
シェルで実行するときのままこう書くと、
“`json:package.json
“scripts”: {
“create-json”: “echo { \”home\”: \”$HOME\” } > home.json”
}
“``npm run`は正常終了するものの、出来上がるフ
typeorm チュートリアル 一部抜粋 (+勝手に補足)
# 概要
– typeorm[^1]のチュートリアルが和訳されていない一部抜粋して和訳してみました．
– 基本的にDeepL翻訳で和訳して一部意訳しました，
– typescriptで上から実行してもエラーが発生するので，一部書き換えていきます
– “Creating a many-to-many relation”多対多リレーションの作成を解決できないのでそこまで# 実行環境
– 使用言語: typescript
– node: v14.14.0
– データベース: MySQL# 前準備
MySQLでデータベースを予め作成します．
設定は，
ユーザー名:root， パスワード:password， データベース名:typeorm_tutorial
ポート: 3306(デフォルト)，
にしました．
GUIアプリケーションはtableplusを使用しました．# クイックスタート
typeormのプロジェクトを作成します．
## typeorm をインストール
npmを使ってインストールします．-gで一度インストールすればOK“`shell
npm install type
[Vueサーバサイドレンダリング] webpackでoutput.libraryTarget should be commonjs2 と怒られた話[Vue SSR]
# Vue SSR 公式ガイドに沿って実装したら怒られた
公式ドキュメントを参考にして、Vue SSR を実装しようとしたところ、
webpackを経由してサーバーバンドルを作ろうとしたら、タイトルの通り怒られた。
`vue-ssr-server-bundle.json` が出来上がらない。。。[公式ドキュメント]
https://ssr.vuejs.org/ja/guide/[バグ]
“`
[vue-server-renderer-webpack-plugin] webpack config `output.libraryTarget` should be “commonjs2”.[webpack-cli] Uncaught exception: Error: Entry “app” not found. Did you specify the correct entry option?
[webpack-cli] Error: Entry “app” not found. Did you specify the correct entry option?
a
OvernightJSでNode+Express+TypeScriptなAPIサーバーを構築する
日本語情報が全く見当たらないExpressのTypeScript decoratorである[OvernightJS](https://github.com/seanpmaxwell/overnight)を使ってみたので、導入方法をざっくりまとめます。
Node/ExpressでTypeScriptを使う方法については、簡単に書きはしますが本筋ではないので詳細は他を当たってください。[このあたりとか](https://qiita.com/notakaos/items/3bbd2293e2ff286d9f49)参考になります。
# 前提環境
– Node 12.18.4
– Express 4.17.1
– TypeScript 4.0.3開発環境でのTypeScriptの実行には[ts-node](https://github.com/TypeStrong/ts-node)と[ts-node-dev](https://github.com/whitecolor/ts-node-dev)を使います。ts-node-devはコード修正するとホットリロードしてくれるのでとても楽。
描いて理解するイベントループ
# はじめに
早速ですが Node.js で次のコードを実行したときの出力がどうなるのかわかるでしょうか？
“`js:setTimeoutに0秒を指定
console.log(“start”);setTimeout(function() {
console.log(“Hello!!!”);
}, 0); // 第２引数は 0 ミリ秒 = 0 秒待つ？console.log(“end”);
“`実は、出力は以下の順になります。
“`:実行結果
start
end
Hello!!!
“`「なんで？」と思った人向けに、順を追って解説します。
「あたりまえじゃないか」と思った人はブラウザバックしてしまいましょう。[^help][^help]: ずっと Java をやっていて JavaScript はほぼ初心者です。初心者なりの理解を書いた記事なので、誤りがあったらコメント欄でやさしく教えていただけると嬉しいです。
# 1. イベントループ
この記事では JavaScript の実行環境を「ワンオペで黙々と作業をこなす従業員」に例えて説明します。
まず
VS Codeでサイト制作環境構築
#はじめに
底辺コーダーが自分のために記録している、node.jsを使った際のサイト制作環境構築メモです。
そのため、もっと効率がいい方法や記述方法があると思いますが、あくまで一例として見てください。#対象者
* Windows所有者（?は知らん）
* HTMLとかCSSは大体理解してる
* Scssを触ってみたけど、変換が一々めんどくさい
* node.jsって何をどうしたらいいのか意味不明#目指す形（基本楽がしたい）
* Scssを更新した際に自動でCSSに変換
* 変換したCSSを自動で任意の場所に置きたい
* CSSを最終的に圧縮してmin形式にも対応#フォルダ構成
root/
├ assets/
│ ├ css/
│ ├ img/
│ ├ js/
│ └ scss/
├ gulpfile.js
├ index.html
└ package.json#1.node.js 導入
噂の「node.js」を下記からDLしてきて導入します。
https://nodejs.org/ja/
###「node.js」って何ですか？？？
そんなあなたに…[これ]
アレクサでライトやエアコンをコントロールしましょう（まだできない）
# モチベーション
最近、プロトアウトでIoTに関する授業を受けました。メインはObnizで、いくつかセンサーやアクチュエータを試しました。授業の内容を復習のため、何か面白いことを作ろうと思いました。
みんなさんは眠いのに、ライトのリモコンを見つけられなかったことがありますか。その時、拍手でライトをオンにできると、いいじゃないですか。それで、今回、obnizでリモコンの信号を模倣してライトやエアコンをコントロールする制作を作りたいと思います。# 概要
そんな制作を作るために、2つ部分が必要です。1番目はデバイス（エアコンやライト）のコントロールする部分です。
2番目は人間のコマンドを認識する部分です。## リモコンのしくみ
リモコンは[赤外線](https://ja.wikipedia.org/wiki/%E8%B5%A4%E5%A4%96%E7%B7%9A)もしくはラジオで動いています。うちのリモコンは赤外線（以下はIRとする）のほうです。
IRリモコン（送信機）は、特定のバイナリコードを表す赤外線のパルスを送信します。 これらのバイナリコードは、電源オン/オフや音量アップ
[OCI] Computeインスタンス上にNode.jsのWebアプリケーション環境を構成して、MySQL Database ServiceのDBシステムにアクセスしてみた
#はじめに
Computeインスタンス上に構成したNode.jsのWebアプリケーションから、MySQL Database ServiceのDBシステムにアクセスしてみた時の手順です。
（2020年10月現在）#構築イメージ
#作業の流れ
1.VCNの構成
2.ネットワーク・セキュリティ・グループの作成
3.MySQL DBシステムの作成
4.Computeインスタンス（APサーバ）の作成
5.パブリックIPの作成
6.ComputeインスタンスへのパブリックIPの割り当て
7.MySQLクライアントのインストールと設定
8.Node.jsのインストールと設定
9.firewalldの設定
10.SELinuxの設定
11.MySQL DBシステムの接続情報の確認
12.アプリケーションで使用
Node.js + socket.io の簡易チャットアプリをコンテナ化したメモ
# 背景
Node.js + socket.io の簡易チャットアプリをコンテナ化した時のメモ# リンク集
#### [Node.js Web アプリケーションを Docker 化する](https://nodejs.org/ja/docs/guides/nodejs-docker-webapp/)
Hello Worldを返す簡易Node.jsサーバーを作ってコンテナ化するドキュメント。ほぼ忘れかけているNode.jsの記憶を取り戻すことができた。#### [Socket.io#Get Started](https://socket.io/get-started/chat/)
socket.ioを使って簡易的なアプリを作ることができる# サンプルコード
“`json:package.json
{
“name”: “docker_web_app”,
“version”: “1.0.0”,
“description”: “Node.js on Docker”,
“author”: “shogo suzuki”,
“main”: “socket_ser
Dockerfile、docker-compose.ymlを作ってwindows10、Linux、ラズパイでnodejsを動かす
以前書いた下記、記事の続きでDockerfileとdocker-compose.ymlを作って、動かす手順まで今回記載します。
https://qiita.com/MCYamamoto/items/4d424af9573fa90edf61## 最終的なフォルダ構成
まず、最終的なフォルダ構成です。
下記のようになります。“`
baseフォルダ
+docker-compose.yml
+cont
+env
+Dockerfile
+deploy //デプロイ対象のソースコード(今回はnodejs)
+package.json
+package-lock.json
+build
+jsファイルたち
+share //ホストとコンテナの共有フォルダ
“`## Dockerfileをつくる
[参考URL]
https://qiita.com/pottava/items/452bf80e334bc1fee69a全体的な流れとしては、上記を参考にした。
インストール必要なものをインストールしながらコマンドをメモして、最終的なD
【node+Vue】ストア+APIを経由してサーバで作ったバイナリファイル受け取りダウンロードさせる
リアクティブでSPAでなければ、サーバサイドにPOSTしてファイルをダウンロードさせれば簡単だけど
v-router とか使うと簡単には行かず、困ったのだけれど、
以下の方法で受け渡しできたので備忘録として記載しておく。【仕様】
・ダウンロードボタンを押すと、サーバ側で作成されたファイルをダウンロードする。【前提】
・vue から直接サーバ側へはPOSTできない。(ルーターが邪魔する。)
・ストア＋API経由でサーバ側とのデータのやり取りはできる。【サーバ側実装】
今回は、API経由でデータが渡されると、サーバ側でファイルを作成し、base64エンコードした内容を
json形式で { DATA: xxxx } として返すようにした。【クライアント側実装】
こんな感じ
今回の肝は以下の2箇所。
・base64 をデコードする部分
・blobファイルをダウンロードさせる部分。“`
methods: {
/**
* ダウンロード
*/
async download() {
let info = { // api に渡す引数があれば、こんな感じ
