- 1. 【Mac】Node.js と【Windows】SQL serverを接続し、SQLserverのデータ(画像)を抽出する方法
- 2. Electronで作ったアプリを配布しよう
- 3. Macへのnpm、npxのインストール
- 4. アレクサを好きなようにしゃべらせる(Webインターフェイス編)
- 5. JavaScriptでjsonの中身を確認したら[object Object]と表示された場合の対処法
- 6. Dockerでyarnの依存関係を解決。
- 7. Dockerfileベストプラクティス – Node.jsアプリケーション編
- 8. SESAMEのAPIから施錠解錠する
- 9. 複数のTouchDesignerプロジェクトで確実にデータ共有する
- 10. CSSスプライトを使って画像読込を効率化したい
- 11. WebpackとViteをプロジェクト導入して比較した話
- 12. オライリーの特約書店をBlazorでマップ化したウェブサイトを作成した話
- 13. JavaScriptで、for文の初期化部分においてletで宣言された変数は本当にループごとに異なるインスタンスになるのか
- 14. タスクマネージャーをアップデートした！
- 15. 【Node.js】Expressからaxiosを使ってバックエンドサーバーの画像を取得する際はresponseTypeにarrayBufferを指定する
- 16. 【Backlog 2021】 Googleさんの zx で Backlog API を扱う（JavaScript で課題を追加する）
- 17. yarn upgrade-interactive –latestで依存を一気に解決。
- 18. Node-REDのfunctionノードで外部npmモジュールを呼び出す方法
- 19. Node-RED 2.1の新機能: ツアー機能
- 20. 数式が書けるチャットアプリを作りました【TS/NextJS】
【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++) {
タスクマネージャーをアップデートした！
#前回の記事
https://qiita.com/kenjirohayashi/items/76403ac70e0733ed6438###作成したタスクマネージャーbot
#追加した機能
・WebViewでタスクの登録
・通知機能
・リッチメニュー#使用した技術
【Node.js】Expressからaxiosを使ってバックエンドサーバーの画像を取得する際はresponseTypeにarrayBufferを指定する
# はじめに
ルー大柴ぽいのが否めませんが表題の通りです。訳あってBFF（Backend For Frontend）を採用する必要があり、クライアントサーバーとバックエンドサーバーでのやりとりで詰まったのでメモを残します。
※個人の見解です。明確なエビデンスを探し切ることができませんでした。根拠が乏しいので、真に受けないことをおすすめします。
# 背景
バックエンドサーバーから画像を取得しようとしたら次のようなレスポンスがクライアントサーバーに返ってきた。
# 結論
`サーバー側でaxiosを使って画像をgetする時はresponseTypeをarrayBufferにする必要があるらしい。`### 引用①（axiosのドキュメントを引用している）
how does axios handle blob vs arraybuffer
【Backlog 2021】 Googleさんの zx で Backlog API を扱う（JavaScript で課題を追加する）
この記事は、[2021年の Backlog のアドベントカレンダー＠Adventar](https://adventar.org/calendars/6325) の 24日目の記事です。
## この記事の内容
今回扱う Backlog の API は、既にいろいろな方が記事を書いていたりもする以下のページに書いてあるものです。●Backlog API とは | Backlog Developer API | Nulab
https://developer.nulab.com/ja/docs/backlog/
その API を扱う方法として、以前見かけて気になっていた Googleさんの zx を組み合わせてみます。
●google/zx: A tool for writing better scripts
https:
yarn upgrade-interactive –latestで依存を一気に解決。
“`
rails s“`
を実行したら
npm rebuild node-sass
npm ERR! code 1
npm ERR! path /Users/soichirohara/coffee_passport/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node scripts/build.js
npm ERR! Building: /usr/local/bin/node /Users/soichirohara/coffee_passport/node_modules/node-gyp/bin/node-gyp.js rebuild –verbose –libsass_ext= –libsass_cflags= –libsass_ldflags= –libsass_library=
npm ERR! gyp info it worked if it ends with oknpm ERR! gyp: No Xcode or CLT version dete
Node-REDのfunctionノードで外部npmモジュールを呼び出す方法
日立製作所OSSソリューションセンタの横井一仁です。今回は、夏に開催した[Node-RED v2.0新機能紹介イベント](https://node-red.connpass.com/event/220079/)(下の動画)の中で紹介したNode-REDのfunctionノードの機能を少し深堀してみます。
https://youtube.com/watch?v=JklLkNr3Ec8%3Fstart%3D1967最新のNode-RED v2.1.4のfunctionノー
Node-RED 2.1の新機能: ツアー機能
日立製作所OSSソリューションセンタの横井一仁です。2021年も[Node-RED Con](https://nodered.jp/noderedcon2021/#speaker)、[OpenJS World](https://openjsf.org/openjs-world-2021/speakers/)などのカンファレンスで講演する機会を頂け、充実した1年でした。講演内容をNode-RED公式Twitterで紹介して頂けるという、嬉しい出来事もありました！(下の2つ目のツイートです)
https://twitter.com/NodeRED/status/1451791296339787776
## ツアー機能
さてNode-REDは、2021年12月現在でNode-RED v2.1.4が最新バージョンです。筆者が注目
数式が書けるチャットアプリを作りました【TS/NextJS】
これは [**N予備校プログラミングコース Advent Calender 2021**](https://qiita.com/advent-calendar/2021/nyobi) の 23 日目の記事です。
みなさん、こんにちは！
私は大学で物理学を専攻する学生です。
[株式会社ドワンゴ](https://dwango.co.jp)のアルバイトとして **[N 予備校プログラミングコース](https://www.nnn.ed.nico/pages/programming/)**の各種教材開発に携わっています。
この記事では、私が趣味として開発している **数式が書けるチャットアプリ** について、開発の経緯を交えながら紹介します。# 目次
**=== 紹介編 ===**
[00 … **数式**が書けるリアルタイムチャット「**ChatZEMI**」](#00–数式が書けるリアルタイムチャットchatzemi)
[01 … **基本的な機能**の紹介](#01–基本的な機能の紹介)**=== 経緯編 ===**
[02 … **知識ゼロ**から](#02
