- 1. 【Node.js】Expressとmulterを使って画像アップロードを実装する（multer, formData, axios）
- 2. 【Socket.IO】PC50台を無線でつなげてアートを作ってみた
- 3. 子どもの夜ふかし対策に照明が点いてたら消し続けるIoT装置を作った
- 4. discord.pyが開発終了したのでdiscord.jsに乗り換える
- 5. 【Docker＋Nuxt】Cannot find module ‘nuxt_plugin_plugin_*’エラーが発生して画面が立ち上がらない
- 6. SwitchBotをLineボットで操作しよう
- 7. Node.jsからMySQLに接続する時に起きるエラーの対処法
- 8. 【Mac】Node.js と【Windows】SQL serverを接続し、SQLserverのデータ(画像)を抽出する方法
- 9. Electronで作ったアプリを配布しよう
- 10. Macへのnpm、npxのインストール
- 11. アレクサを好きなようにしゃべらせる(Webインターフェイス編)
- 12. JavaScriptでjsonの中身を確認したら[object Object]と表示された場合の対処法
- 13. Docker上のyarnの依存関係を解決。
- 14. Dockerfileベストプラクティス – Node.jsアプリケーション編
- 15. SESAMEのAPIから施錠解錠する
- 16. 複数のTouchDesignerプロジェクトで確実にデータ共有する
- 17. CSSスプライトを使って画像読込を効率化したい
- 18. WebpackとViteをプロジェクト導入して比較した話
- 19. オライリーの特約書店をBlazorでマップ化したウェブサイトを作成した話
- 20. JavaScriptで、for文の初期化部分においてletで宣言された変数は本当にループごとに異なるインスタンスになるのか
【Node.js】Expressとmulterを使って画像アップロードを実装する（multer, formData, axios）
#はじめに
メインはフロントですが、趣味でExpressを触っている者です。フロント側で画像アップロードを行う際はFileAPIを使ってDataUrlを作ってからサーバーに送る。という流れになると思うのですが、Expressで実装するとなるといろいろ前提が違ってハマったのでメモします。#実装したコード
“`javascript
// 画像アップロードapp.post(
‘/photo/upload’,
// 解説①↓ ==========
upload.any(),
// 解説①↑ ==========
async (req: any, res: express.Response) => {
// 解説②↓ ==========
const customeId = 1
const formData = new FormData()
const file = req.files[0]
formData.append(‘files[]’, file.buffer, file.originalname)
for
【Socket.IO】PC50台を無線でつなげてアートを作ってみた
この記事は [福島高専 Advent Calendar 2021](https://qiita.com/advent-calendar/2021/nitfc) 25日目（最終日）の記事です。
# 1. はじめに
こんにちは、高専4年のAkkunlabです。主にプログラミングや電子工作などをしています。[去年のAdvent Calendar](https://qiita.com/advent-calendar/2020/nitfc)では「[ちょっとすごいと思わせるデジタルアートを作ってみた](https://qiita.com/Akkunlab/items/581f17a90f35b1879adb)」というタイトルで、**インタラクティブなLEDアート**について記事を書きました。
今回はその進化版として**50台のPCを使用したデジタルアート**を制作したので、記事にしていきたいと思います。
読みにくいところがあるかもしれませんが、最後まで読んでいただけたら幸いです。# 目次
[1. はじめに](#1-はじめに)
[2. 制作したアート](#2-制作したアート)
[3. シ
子どもの夜ふかし対策に照明が点いてたら消し続けるIoT装置を作った
# はじめに
私は保育園児のふたりの子どもがいるのですが、子どもたちの夜ふかしに日々悩まされていました。
21時～22時ぐらいに寝かしつけに入りはするのですが親が先に寝落ちしてしまい、子どもが寝室の照明をつけて夜中まで延々と遊び続けるという状況です。せめて真っ暗闇なら親が寝落ちしたあともそこまで夜ふかししないだろうと思い寝室のブレーカーを落とすということも考えましたが、なぜかサーバールーム（クローゼット上部のルータが設置されている小さいスペース）とブレーカーが共用されており、このブレーカーを落とすと家中のネットワークが停止して夜間ジョブ（NASへのバックアップ等）に支障をきたしてしまうため断念しました。
そこで次の手段として考えたのが照明を消し続けるIoT装置の自作です。
# 仕様
以下のように仕様を考えました。
* 部屋の明るさを計測して照明が点いているかを判定
* 照明が点いていたら照明オフの赤外線信号を送信し続ける
* 上記の動作をデバイスのボタンを押してから1時間実行し続ける図にすると以下のようなイメージです。
開発終了したソフトウェアを使い続けることは、リスクの面から見ても良くありません。
当初の予定では同じPython製のAPIラッパーである[Pycord](https://github.com/Pycord-Development/pycord)を利用してdiscord.pyからのリファクタリングを行う予定でした。
ですが、embedを使いたかった[^1]上に、スラッシュコマンドの実装が容易であり、人口が多く、ちょうど.jsを始めたところだったので勉強がてらdiscord.jsへのリファクタリング作業を行いました。[^1]: discord.pyやpycordでも利用可能だが、discord.jsのほうがより柔軟だったので移行しました。
# Bot詳細
AWS CLIというA
【Docker＋Nuxt】Cannot find module ‘nuxt_plugin_plugin_*’エラーが発生して画面が立ち上がらない
###発生したエラー
.nuxt/index.jsでインポートしているモジュールが見つからないっていうエラーのようですね。
###解決
####.nuxtフォルダとnode_modulesフォルダを削除してyarn installを実行そもそもnode_modulesからdockerビルドの際に.nuxtフォルダにコピーしているっぽいが、どうもそこでモジュールの名前が変わるらしい。
####node_modulesは消していいの？
はい。
package.jsonを消さなければ、yarn installで再度作られます。####.nuxtは消していいの？
はい。`docker compose up –build`
をすると`nuxt`コマンドも実行され、そのときに.nuxtがnode_modulesからビルドされるようです。
SwitchBotをLineボットで操作しよう
SwitchBotは、お手軽に入手できるスマートホームデバイスです。
購入してすぐに、AlexaスマートホームやGoogleアシスタントで使えるのは非常にうれしいです。
今回は、LINEアプリからも操作できるようにします。LINEボットを作成して、LINEアプリから友達登録することで、お友達にチャットする感覚で、操作することができるようにします。
一方で、SwitchBotは、WebAPIを公開していただいていますので、それを利用します。
詳細は以下に記載されています。OpenWonderLabs/SwitchBotAPI
https://github.com/OpenWonderLabs/SwitchBotAPI
LINEボットを立ち上げるため、サーバを立ち上げる必要がありますが、Node.jsサーバを利用します。
ソースコードもろもろは、GitHubに上げてあります。
poruruba/SwitchBot_SmartHomehttps://github.com/poruruba/SwitchBot_SmartHome
#SwitchBotをセットアップする
以降
Node.jsからMySQLに接続する時に起きるエラーの対処法
# 参考
https://github.com/linnovate/mean/issues/1066
https://stackoverflow.com/questions/50093144/mysql-8-0-client-does-not-support-authentication-protocol-requested-by-server
# エラー
MySQL 8.0 に接続するとエラーが起きる
“`
[nodemon] app crashed – waiting for file changes before starting…
“`“`
Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client
“`# 解決
“`
ALTER USER ‘root’@’localhost’ IDENTIFIED WITH mysql_native
【Mac】Node.js と【Windows】SQL serverを接続し、SQLserverのデータ(画像)を抽出する方法
# 目的
windows8.1内のSQLserver2005から画像データ(バイナリ)を抽出し、画像に変換し、変換した画像はMac側に保存する。# やったこと
windows内で諸々の作業ができればよかったのですが、windows環境ではネットも繋がっておらず、色々と作業しにくいこともあり、プライベートネットワークを介して、mac内のnode環境から抽出することにした。# 大まかな手順
1. windowsマシンを(LANケーブル等で)プライベートネットワークに接続コマンドプロンプトで`IPCONFIG`コマンドを叩いて、IPアドレスを確認。
2. macとwindowsマシンを接続確認
取得したIPアドレスに対し、ターミナルで`$ ping IPアドレス`コマンドを叩いて、接続を確認。
3. mac上でNodeアプリを作る
SQLserverのドライバ「**Tedious**」をインストール。DB設定情報をセット。4. nodeアプリから、SQLを叩いて、データ抽出。バイナリを画像に変換して保存。
#
Electronで作ったアプリを配布しよう
Working
Macへのnpm、npxのインストール
AWS AmplifyでWebアプリケーションを構築するチュートリアルを進めようとしたところ、npxが必要になったのでインストール方法をメモしておきます。
https://aws.amazon.com/jp/getting-started/hands-on/build-react-app-amplify-graphql/?e=gs2020&p=frontend
#手順
##パッケージマネージャの更新
Macのパッケージマネージャを更新します。“`
$ brew update
“`##nodebrewをインストール
nodeのバージョンを管理するnodebrewをインストールします。
“`
$ brew install nodebrew
“`##node.jsのインストール
node.jsインストール用のフォルダを用意した後、インストールを行ってから使用するバージョンを指定します。“`
$ mkdir -p ~/.nodebrew/src
$ nodebrew install-binary latest
$ nodebrew list
$ nodebrew
アレクサを好きなようにしゃべらせる(Webインターフェイス編)
ひとりアドベントカレンダー24日目
途中で詰まってしまったので抜けたところは飛ばします。
と言いつつ24日目にも間に合っていませんが。# はじめに
コマンドラインでアレクサをしゃべらせられるようになったので、Webインターフェイスを作ります。
ローカルで動けばいいのでRaspberryPi上でExpressでWeb APIとスマホ等から操作するためのページを一つ作ります。# 環境
– RaspberryPi
– Raspbian GNU/Linux 10 (stretch)“` bash
$ node –version
v12.22.3
$ npm –version
6.14.13
“`ところで、Raspberry Pi の初代はArmv6搭載のため新しいnodejsがパッケージで提供されていないため、以下のページの手順に従いUnofficialビルドをインストールしてあります。
https://qiita.com/homelan/items/4b61715bec5e805bf15d
使用したUnofficialイメージは[ここ](https://u
JavaScriptでjsonの中身を確認したら[object Object]と表示された場合の対処法
## はじめに
最近、API開発をしていて外部API時のエラーオブジェクトの構造を知りたい時がありました。
しかし、対象オブジェクトをログ出力しても[object Object]と表示されてしまいます。
そこで、オブジェクトの中身を表示する方法を調べたので紹介します。## 方法1 : JSON.stringifyを使う
以下のようにJSON.stringifyを使う方法です。“`
console.log(JSON.stringify(object))
“`他の記事でもよく見かけます。
確かにこれでオブジェクトの中身が表示されるのですが、正直みづらいです。
そこで、次の方法が個人的におすすめです。## 方法2 : console.dirを使う
以下のようにオブジェクトをconsole.dirで出力すると、良い感じに見やすく表示されます。“`
console.dir(object)
“`
Docker上のyarnの依存関係を解決。
docker-compose upで
“`
RUN yarn upgrade“`
の部分でエラーがでた。
“`
Step 13/19 : RUN yarn upgrade
—> Running in 3c8f3922483b
yarn upgrade v1.22.17
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages…
info There appears to be trouble with your netwo
Dockerfileベストプラクティス – Node.jsアプリケーション編
この記事は [ZOZO Advent Calendar 2021 24日目](https://qiita.com/advent-calendar/2021/zozo) の記事です。
# 概要
最近業務でNode.jsを扱うことがありました。そこでNode.jsアプリケーションをDocker化する上でのチェックポイントとDockerfileベストプラクティスのおさらいをまとめました。
実は [Next.jsのドキュメント](https://nextjs.org/docs/deployment#docker-image) に答えらしきものがあることに後で気づきました。## 環境
“`shell
$ node -v
v16.13.1
$ npm -v
8.1.2
$ docker -v
Docker version 20.10.8, build 3967b7d
“`# サンプルアプリケーションの作成
サンプルアプリケーションは [Next.js](https://nextjs.org/) を使用しました。
Dockerfileとはあまり関係ないですが、ついでなのでNext
SESAMEのAPIから施錠解錠する
## セサミを買いました
最近、セサミというスマートロックを買いました。このスマートロックはよくできていて、私の今年買ってよかったものランキングぶっちぎり１位です。価格も安いので是非試してみてください。セサミは Web API が無料で公開されており、この記事ではNodeJS から使うときのサンプルコードと手順をご紹介します。
## 今回使うもの
以下の手順は**SESAME4**を動かすためのものです。今回はインターネット越しにSESAMEにアクセスするためWi-Fiモジュールが必要となります。https://jp.candyhouse.co/products/sesame4
https://jp.candyhouse.co/products/new-wifi
## Web API キーの取得
こちらのページからログインするとWeb APIキーを取得できます。
https://partners.candyhouse.co/login## アプリから招待用QRコードを発行
セサミのスマホアプリを開き、APIから操作したいデバイスを選択して招待用のQRを発行
複数のTouchDesignerプロジェクトで確実にデータ共有する
この記事は[TouchDesigner Advent Calendar 2021](https://qiita.com/advent-calendar/2021/touchdesigner)の24日目の記事です。
自分はスポーツ中継などのCG開発をTouchDesignerでやっています。
野球中継などで画面の下に選手名や得点が表示されているアレです。
グラフィックの技術は割と地味なので、それ以外の箇所を深堀りしてみます。クライミング中継にテロップ出すためにCGを始めて6年くらい。昨日ついにプロ野球デビュー出来ました。スポーツ中継やるならプロ野球と思ってたのでやっとという気持ち。 #touchdesigner pic.twitter.com/dJdzsF6Dhx
— Akira Kamikura (@camikura) March 6, 2021
# 構成
UIはReact.js、バックエンドはNode.js、グラフィックをTouchDesignerでという構成が多いです。
ブラウザでデータを入力するとテキストファイルが更新されて、Table DAT経由でグラフィックが更新される形です。# 要件
いわゆるスポーツ中継などの案件は、
1. 機材の設営は前日か当日に行う
1. 試合前に選手情報などを流し込み、試合中は公式ウェブサイトや現地映像を見ながらデータ入力する
1. 映像に合わせ
CSSスプライトを使って画像読込を効率化したい
この記事は [ミライトデザイン Advent Calendar 2021](https://qiita.com/advent-calendar/2021/miraito-inc) 16日目の記事です。
## やりたいこと
Webページ上でアイコンのような小さな画像ファイルをたくさんロードするのは通信が非効率になりがち。
これらのファイルを1つのファイルにまとめて出力したい！
ということでCSSスプライト＆結合済画像ファイルを自動で生成しよう。今回はnpmモジュールの [spritesmith-cli](https://github.com/bevacqua/spritesmith-cli) を使って変換している。
## 準備
### 変換用JSコード
spritesmith-cli を使って変換するためのコード。
ファイルは必ず `.spritesmith.js` という名前で保存しよう。“`js:.spritesmith.js
‘use strict’;const util = require(‘util’);
module.exports = {
cs
WebpackとViteをプロジェクト導入して比較した話
みなさんこんにちは。suginokoです。
寒くなってきたので布団を着て仕事をしています。（[弊社](https://brewus.co.jp/)はフルリモートで仕事ができます。暖かくして仕事しましょう。）## 前置き
今日は弊社Web開発における開発環境についての記事書いてみようかなと思います。
弊社の開発環境構築に普段はWebpackを使って環境構築しているのですが、* Webpackで別に開発する必要なくない？もっと簡単に導入できそうなのあるのではないかな
* 開発環境の立ち上がりが遅すぎてムカつく。もっとはやく動かないもんかねというのが根底にあり、調べてみることにしました。
[Vite](https://vitejs.dev/)というのは、私自身が前から[esbuild](https://github.com/evanw/esbuild)に注目していて、これWebpackの代わりになるのではないかなと思っていたところで、Viteが出てきた（詳しい話は後述します。中でesbuild使っている）ので比較してみようかなと思った次第です。
（ようやくテストではなくて実際の
オライリーの特約書店をBlazorでマップ化したウェブサイトを作成した話
# 概要
みんな大好き「オライリー」の特約書店をマップとして可視化するウェブサイトをBlazor WebAssemblyで作ったので紹介します。
元は.NET 5時代に作ったものなのですが、.NET 6にマイグレーションをした上で少しだけ手を加えたりしたので改めてネタとして紹介しようかと思います。https://nobu17.github.io/oreilly_map/
## どういったウェブサイト？
オライリーの書籍を販売している書店を、マップや一覧で確認可能なものです。
都道府県別や、現在地点から近い店舗を表示する機能なども備えてます。旅先でオライリーの書籍が欲しくなるような、オライリー中毒のあなたもこれで大丈夫！
(もちろん、レスポンシブデザインなのでスマホでもOK)
全国のオライリー特約店が日本地図にマッピングされてい
JavaScriptで、for文の初期化部分においてletで宣言された変数は本当にループごとに異なるインスタンスになるのか
# 前回
[JavaScriptで、なぜfor文の初期化部分においてletで宣言された変数はループごとに異なるインスタンスを持ちうるのか](https://qiita.com/khond/items/2d22c6b297d58ec914f5)の続き。
# 疑問
前回の調査で、規格上では「ループ各回で環境が作成される」ことがわかった。そうすると「結構コスト高な気が…」という気がしてくる。実際、前回の例のようにクロージャがループ内で作成される場合は、ループ各回で作成されるクロージャ内でそれぞれの環境を参照しているため、ループ各回で環境の生成が必要となる。
“`javascript
const functions = [];
for (let i = 0; i < 3; i++) { functions.push(() => console.log(i));
}
functions[0]();
functions[1]();
functions[2]();
“`だが、以下のようなfor
“`javascript
for (let i = 0; i < 3; i++) {
