- 1. 阿部寛のホームページを(力技で)遅くするChrome拡張機能を作ろう!
- 2. JavaScriptベースの動画編集サービスを作ってます
- 3. M1 Mac で nコマンドが invalid version になる
- 4. obnizを楽器化してみたかった。。
- 5. Expressのerror handlingはmiddlewareで実装するのが良さげ
- 6. 心が疲れたので、可愛いものをBGM付きで右往左往させた
- 7. Node.jsでJavaScriptによるレンダリングブロックを検証する
- 8. LIFE WILL Emodiversity APIのemotion_mapを使ってみたメモ
- 9. LIFE WILL Emodiversity APIのemotion_analyzeを使ってみたメモ
- 10. express-generatorで作成したプロジェクトでTypeScriptを使用する
- 11. Line Botへ現在の天気を表示 ~天気APIを使用しLINE BOTへ自動返信~
- 12. 「あけちゃダメ」って書かれてて、開けたら反応する箱を作りたい。(未完)
- 13. サザン聴きながらobnizで製作を進めていたら、バグが発生したので助けていただきたいです。
- 14. ママのテンション爆上げ!? obnizで娘からママへX’masプレゼント
- 15. おうちでディズニーパレードがはじまる前のワクワクを感じる方法
- 16. Express + sequelize でCRUDアプリを作る
- 17. ドアモニターがないだと?代わりを作ればいいじゃない。
- 18. Gtk3アプリ NodeRedとC#を連携する 入門編
- 19. Homebrew + anyenv + nodenv でNode.jsをインストール
- 20. aws lambda + nodejs + mysqlのスピンアップ
阿部寛のホームページを(力技で)遅くするChrome拡張機能を作ろう!
この世で最も早いホームページと言われたら、あなたは何を思い浮かべますか?
そう、 阿部寛のホームページ ですね。
その速さと言えばあの世界最速の男、ボルトも驚くスピード。
ボルトと阿部寛のホームページが新国立競技場で速さを競ったなら、 阿部寛のホームページの完全勝利 と言えるでしょう。電波の悪い状態でまず見るべきサイトが阿部寛のホームページと言われるほど、通信速度を知るために重要なバロメーターの役割も果たしており、 もはやこの世の中になくてはならないサイトの代名詞 となっています。
そんな人類の生み出した最速のサイト、阿部寛のホームページ。
ひねくれた私は阿部寛のホームページのあまりの速さに嫉妬したので、阿部寛を遅くする方法はないかと試行錯誤することにしました。そこで思いついたのです。
阿部寛のホームページのあまりの速さを抑えることはできなくても、 遅くなっているように見せればいいのでは?では阿部寛のホームページを遅くするにはどうすればいいのでしょうか?
ページスピードの遅いサイトというのは画像の表示に時間がかかります。つまり、画像が遅く表示されている状態を作り出せば
JavaScriptベースの動画編集サービスを作ってます
# はじめに
JavaScriptとWebAssemblyを駆使して動画編集サービス・[Double TONE – https://doubletone.jp](https://doubletone.jp)を作っています。2021年10月時点では限定公開ですが、近々ベータ版として一般公開する予定です。![doubletone_screenshot_20211019174545.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2187642/737c4cd0-6253-07ac-6623-ff0728cee480.png “Double TONE”)
イメージはこんな感じです。Qiitaでは、このサービスの開発ブログ的なことを書いていこうと思います。# 自己紹介
趣味でコーディングをしているKumagaiです。
本職ではプログラミングすることはあまりなく、Excel職人・PowerPointer職人になってます。
保護猫5匹と楽しく生活してます。
![cats.png](https://qiita-
M1 Mac で nコマンドが invalid version になる
# はじめに
完全な備忘録です。
## 事象
M1 Mac で Node のバージョン切り替えコマンド `n` を使って、新しいバージョンをインストールしようとすると以下のようなエラーが出る。
“`sh
n 16.13.0install : node-v16.13.0
Error: invalid version 16.13.0
“``n list` で確認すると、16.13.0は存在している。
## 解決策
[ここ](https://github.com/tj/n/issues/641)にIssueが上がっていた。
M1 Mac では、`–arch x64` が必要なようだ。
“`sh
n –arch x64 16.13.0install : node-v16.13.0
mkdir : /usr/local/n/versions/node/16.13.0
fetch : https://nodejs.org/dist/v16.13.0/node-v16.13.0-darwin-x64.tar.
obnizを楽器化してみたかった。。
皆さんこんにちは、khara_xedgeです。
今回、「obniz board 1Y」というデバイスを入手しました!
「obniz board 1Y」とは、wifiで簡単にインターネットへ接続することができるマイクロコンピュータです。各種センサ接続用の端子を持ち、センサから様々な情報を取得しながら動作するシステムの作成など、IoT工作が手軽に始められます。そんな「obniz board 1Y」を使って、楽器もどきを作ってみたいと思います。
#環境
今回実装した時の環境は以下の通りです。
◆実行環境
・Node.js 16.10.0◆パッケージ
・npm 7.24.0◆コーディング
・Visual Studio Code 1.61.0◆ハード部品
・obniz board 1Y
・IC温度センサ
・圧電スピーカー
・LED照明(赤)#演奏スタート!!
いきなりですが、実行結果から!obnizでスピーカー鳴らしてみた! pic.twitter.com/FB3PWjWrC9
— khara (@khara_xedge) October 27, 2021
#ソースコード
動画で実行したコードは以下の通りです。
Expressのerror handlingはmiddlewareで実装するのが良さげ
## 以下の記事を参照して頂ければと思います
https://note.com/shift_tech/n/n42b96d36f0cf
**※Qiitaの記事は全て個人的な記載であり、所属する組織団体とは無関係です**
心が疲れたので、可愛いものをBGM付きで右往左往させた
https://twitter.com/nnmshita/status/1453598678757769219
# とにもかくにも癒されたい
お仕事に、お勉強に、みなさん本当にお疲れ様です。2021年も残すところあと2ヶ月。
とにかく**可愛いものを見て癒されたい。**
そう思って手を動かした結果、とても可愛いものが出来たので報告させていただく。
我々が右往左往しても全く可愛くないが、**可愛いものが右往左往する姿はとても可愛い。**# 材料
Visual Studio Code 1.61.0
Node.js 7.24.0* obniz Board 1Y
* 超音波測距センサ
* サーボモータ
* スピーカー
* 右往左往させたいもの(今回の主役)各パーツ
![image_50434049.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2122226/a7b883ce-472d-6661-b7d4-cd6419c0e545.jpeg)右往左往させたいもの。(可愛い)
シルバニアの赤
Node.jsでJavaScriptによるレンダリングブロックを検証する
# はじめに
本記事では、ブラウザレンダリングについての説明は割愛します。
ブラウザレンダリングについての説明が必要な方は、
こちらの記事でわかりやすく説明されていたのでご覧ください。https://zenn.dev/ak/articles/c28fa3a9ba7edb
また、この記事ではレンダリングブロックの中でも、JavaScriptによるものをご紹介します。
# レンダリングブロックとは
ブラウザレンダリングにおいて、レンダリングを遅延させてしまうことを指します。
レンダリングブロックの要因としては、以下が挙げられます。1. JavaScriptによるもの
1. CSSによるものいずれも、外部リソースの読み込みによる遅延が大きな原因になります。
“`html:外部リソース読み込みの例
“`
# Node.jsでレンダリン
LIFE WILL Emodiversity APIのemotion_mapを使ってみたメモ
# これはなに
LIFULLさんから出ている年月から地域の感情を分析結果を取得するAPIのメモです。※[emotion_analyzeについてのメモはこちら](https://qiita.com/wakasamasao/items/4cafcd75cfa2b8a821d0)
どんなものかのデモはこちらで体験できます。
https://lab.lifull.com/lifewill/emodiversity/map/tokenの申請は以下のページを見てください。
https://lab.lifull.com/lifewill/emodiversity/api-docs/index.html今回利用するemotion_mapのドキュメントはこちら
https://lab.lifull.com/lifewill/emodiversity/api-docs/reference/emotion_map.html# APIの呼び方
## Node.js
“`
const request = require(“request”);
request.post({
url:
LIFE WILL Emodiversity APIのemotion_analyzeを使ってみたメモ
# これはなに
LIFULLさんから出ているテキストから感情を分析するAPIを利用するにあたってのメモです。※[emotion_mapについてのメモはこちら](https://qiita.com/wakasamasao/items/8a7466c7840d48a67ace)
どんなものかのデモはこちらで体験できます。
https://lab.lifull.com/lifewill/emodiversity/tokenの申請は以下のページを見てください。
https://lab.lifull.com/lifewill/emodiversity/api-docs/index.html今回利用するemotion_analyzeのドキュメントはこちら
https://lab.lifull.com/lifewill/emodiversity/api-docs/reference/emotion_analyze.html# APIの呼び方
## Node.js
“`js
const request = require(“request”);request.post({
express-generatorで作成したプロジェクトでTypeScriptを使用する
今回は、express-generatorでプロジェクトを作成し、一部でTypeScriptを使用できるように環境構築を行います。
express-generatorを使用してプロジェクトを作成するまでは、下記を参照ください。
https://qiita.com/shintaro_secual/items/b6e561c1255e4146eeaa
あらかじめ、npm、node、express-generatorをインストールしている前提で記載させていただきます。
## 環境
■ Nodeのバージョン
v14.14.0
■ 使用OS
MacOS Big Sur:バージョン11.6
■ 総合開発環境
Visual Studio Code## プロジェクト作成
“`
% express –view=ejs typescreate : types/
create : types/public/
create : types/public/javascripts/
create : types/public/images/
create :
Line Botへ現在の天気を表示 ~天気APIを使用しLINE BOTへ自動返信~
LINE Botの勉強を始め、おうむ返し は作れました。更に応用することを考えたときにAPIとの連携ができることを知り、作ってみました。
下準備
① まずはこちらの記事を参考にLine Botを作る。
おうむ返しまで完了させる。
https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d
② obnizを扱うので、Visual Studio Codeのターミナルに、npm install obniz
(今後マトリックスLEDを扱うならば npm install canvas も)を入力し
実行しておく。
③ obnizスターターキットの用意
obnizの端子にパーツを接続
LED信号:gnd:0, green:1, yellow:2, red:3
④ OpenWeatherMapのAPIキーを取得(以下のHPを参照)
https://yuukiyg.hatenablog.jp/entry/2019/11/17/182410実行
Visual Studio Co
「あけちゃダメ」って書かれてて、開けたら反応する箱を作りたい。(未完)
#子どもが大好きな「ぜったいにおしちゃダメ?」
子どもが大好きな絵本の一つが、こちらの「ぜったいにおしちゃダメ?」です。https://www.ehonnavi.net/ehon/116213/%E3%81%9C%E3%81%A3%E3%81%9F%E3%81%84%E3%81%AB%E3%81%8A%E3%81%97%E3%81%A1%E3%82%83%E3%83%80%E3%83%A1%EF%BC%9F/
子どもに限らず、「押しちゃだめ」と言われれば押したくなるし、「開けちゃダメ」と言われれば開けたくなるって気持ちがわかる方は多いと思います。
そこで今回、obnizとLINE Bot、それに100均で買った箱を用いて、開けちゃいけない箱を開けたら光って音が鳴り、さらにLINEにお知らせがくる仕組みを作ろうと思いました。
が、エラーがクリアできずLINE Botとの連携はできませんでした。#環境
**ソフトウェア**
Visual Studio Code v1.60.2
Node.js v16.10.0**ハードウェア**
[obniz Board 1Y](https
サザン聴きながらobnizで製作を進めていたら、バグが発生したので助けていただきたいです。
![サザン.001.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/786407a5-4dff-55b4-b02f-0324293e3a2d.jpeg)
タイトルの通り、サザンを聴きながらobnizで製作を行なっていたところ、奇妙な挙動を示すようになってしまいました。ちょっと行き詰まってしまったのでご意見いただけると助かります。
#今回のプロダクト
![IMG_F7C8B1E8B04C-1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/3b8a15fc-70a0-694e-a798-3ae123234e26.jpeg)IoTセンサーを活用してLINE Botの機能を拡張しようとしています。
#環境・デバイス
>[obniz Board 1Y](https://obniz.com/ja/products/obnizboard)
[圧電スピーカー](https://obniz.c
ママのテンション爆上げ!? obnizで娘からママへX’masプレゼント
## ママもX’masプレゼント欲しい!
と、いうことで「子供からどんなプレゼント欲しい?」とママにヒアリング。
その結果・・・
**「ここまで育ててくれてありがとう」と子ども言われたい!**
「育ててくれた」と「感謝」をobnizで表現してみることにしました。
## わたし大きくなったよ × ママありがとう
目指したことは
:::note
①LINE×obniz距離センサーで「娘が自分で」身長を調べる
②マトリックスLEDでメッセージを流し 子供からママに言ってもらう
:::**① obniz × 超音波距離センサー × マトリックスLED を 100均カチューシャ にくっつける**
![かちゅーしゃ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1793443/410bd52b-f2c5-b223-601e-024743e2cfa4.png)**②娘自身がLINEからobnizの距離センサーを起動。LINE上に
おうちでディズニーパレードがはじまる前のワクワクを感じる方法
:::note warn
今回も投稿主の重度のディズニーヲタク(=Dヲタ)ぶりにより、例によってDヲタ用語が飛び出しております。
注釈をつけておりますのでご活用ください。
:::2021年11月1日からTDL[^1]にEパレ[^2]が帰ってきますね。
(参考:[東京ディズニーランドⓇ/東京ディズニーシーⓇの運営について](https://media2.tokyodisneyresort.jp/home/tdr/news/release/release2110.pdf))
パレード自体が楽しいのはもちろんですが、**パレードを待っているときのワクワク感**ってよくないですか??緩和してきたとはいえ、なかなかディズニーに行けない!だけど何かでワクワクはしたい!
そんな方向けに、**おうちでもパレードがはじまる前のワクワク感**を感じられる装置を作りました。そして、忘れていませんか?あの地蔵[^3]の感覚。
厳しい寒さ、暑さに耐えうるためにも、今のうちに地蔵開始時の気温や明るさを自宅にいる時から把握しておきましょう。色々と書き
Express + sequelize でCRUDアプリを作る
# 前回の記事の続きです
こちらの記事を元にCRUDアプリを作っていきます。https://qiita.com/joruju2248/items/225000ad903598204f7f
# ejsをインストール
これでejsファイルが使えるようになりました。“`
$ npm install ejs –save
“`# ディレクトリ直下のapp.jsを修正
以下のようにしてください。コピペで大丈夫です。
“`app.js
var createError = require(‘http-errors’);
var express = require(‘express’);
var path = require(‘path’);
var cookieParser = require(‘cookie-parser’);
var logger = require(‘morgan’);
let db = require(“./models/”);
var app = express();// view engine setup
app.set(‘views’, ‘.
ドアモニターがないだと?代わりを作ればいいじゃない。
#我が家はポンコツ設計
我が家はショボ賃貸なので、ドアモニターがなくドアスコープでしが外の確認ができないのですが、設計がポンコツでドア前に人が立てず、ドアスコープから人の存在を確認するのがとても難しい…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2122228/3110bb6b-3c6f-cecf-03ce-33a0a5bea2a6.png)
ついでに、インターホンが鳴ってドアを開けたのに人がいないという、ピンポンダッシュ(4階)が発生したり、胡散臭い勧誘が来たりするため、ドアを開けずに人がいるのか確認し、あわよくばドアを開けずにお帰りいただけけるツールが欲しい!
防犯のためにもむやみにドアを開けたくないし!!#それなら作ってしまえ
宅配便の予定がない時に鳴るインターホンはロクな事がないので、ドアを開けずに人の存在確認とお帰りいただく案内音楽が流れるツールを作りました。#protoout #obniz pic.twitter.com/vesZ32BxPK
— momoiku (@momoiku3) October 27, 2021
![Screenshot_20211027-150706.png](https://qiita-image-store.s3.ap-n
Gtk3アプリ NodeRedとC#を連携する 入門編
###Gtk3アプリ NodeRedとC#を連携する
####前提
Node.jsをインストールする
Node-Redをインストールするhttps://nodered.jp/docs/getting-started/local
###NodeRedを入門動画で学ぶ
###Nodeを配置する
以下のノードをFlowに配置します。
| 使用するノード |
|:———–:|
| Inject node |
| exec node |
| Debug node |
Homebrew + anyenv + nodenv でNode.jsをインストール転職とともにアウトプットする機会がガクンと減ってしまい、このままじゃまずいぞということで自分用に少しずつ記事を投稿していくことにしました。
今回はNode.jsのバージョン管理をnodenvで、nodenvの管理をanyenvでする方法をメモしていきたいと思います。## 環境
macOS Big Sur 11.3.1## 手順
1. Homebrewのインストール
2. anyenvのインストール
3. nodenvのインストール
4. Node.jsのインストール## Homebrewのインストール
https://brew.sh/index_jaまずはHomebrewをインストールしてきます。
HomebrewとはmacOS上で動作するパッケージ管理システムです。(windowsでは動作しません)
パッケージ管理システムとは、各種ソフトウェアのインストールやアンインストール、また、ソフトウェア同士やライブラリとの依存関係を管理してくれるシステムのことです。
どこが便利なのかというと、ブラウザなどから直接ダウンロード → インストールをしてくると、最新バージョン
aws lambda + nodejs + mysqlのスピンアップ
AwsLambda + nodejs + mysql + ORMごとのInit Duration比較
# 環境
– nodejs 14.x
– メモリ 1024GB
– DB接続 => 1行取得 => 切断
– 試行回数 それぞれ3回くらい
– serverless framework 使用
– typescript 4# 結果
| ライブラリ | InitDuration |
| —- | —- |
| mysql2 | 270ms |
| sequelize | 470ms |
| typeorm | 780ms |
| prisma | デプロイ出来んかった |typeorm入れただけでけっこー重くなるの、ツラミがある。
typeormは、mysqlだけ使いたくてもpostgresql/oracle/sap/mongodbとか色々なコードが入ってしまうため、重くなってる模様。Webpack Bundle Analyzerを見た感じだとprismaが非常にコンパクトだったので、期待したい。