- 1. Flutterの通報をSlackに通知し、Firestoreのデータを削除する
- 2. npm 7(8) でフロントエンド開発に関わる変更まとめ
- 3. DC-DCブーストコンバータモジュール
- 4. Gtk3アプリ NodeRedで仮想通貨を表示する その2
- 5. three.jsのプロジェクトを作ってGitHubにあげてHerokuに公開するまでのステップ 2/2
- 6. Gtk3アプリ NodeRedで仮想通貨を表示する その1
- 7. 阿部寛のホームページを(力技で)遅くするChrome拡張機能を作ろう!
- 8. JavaScriptベースの動画編集サービスを作ってます
- 9. M1 Mac で nコマンドが invalid version になる
- 10. obnizを楽器化してみたかった。。
- 11. Node.js Expressのerror handlingはmiddlewareで
- 12. 心が疲れたので、可愛いものをBGM付きで右往左往させた
- 13. Node.jsでJavaScriptによるレンダリングブロックを検証する
- 14. LIFE WILL Emodiversity APIのemotion_mapを使ってみたメモ
- 15. LIFE WILL Emodiversity APIのemotion_analyzeを使ってみたメモ
- 16. express-generatorで作成したプロジェクトでTypeScriptを使用する
- 17. Line Botへ現在の天気を表示 ~天気APIを使用しLINE BOTへ自動返信~
- 18. 「あけちゃダメ」って書かれてて、開けたら反応する箱を作りたい。(未完)
- 19. サザン聴きながらobnizで製作を進めていたら、バグが発生したので助けていただきたいです。
- 20. ママのテンション爆上げ!? obnizで娘からママへX’masプレゼント
Flutterの通報をSlackに通知し、Firestoreのデータを削除する
Flutter×Firebaseの構成のSNSモバイルアプリを開発中です。その中で通報機能を作成したのですが通報内容をボタン付きでSlackに送信して削除ボタンを押したら通報された投稿を削除しに行く一連の流れを構成し、通報対応を簡易かつプログラミングの知識なしで行うようにしました。
#### 1、FlutterでSlack APIにPOSTリクエストし、ボタン付きのメッセージを送信
#### 2、Slackでボタンアクションを実行し、そのイベント内容をPOSTリクエストでCloudFunctionsで生成したエンドポイントに対して送信
#### 3、CloudFunctionsでリクエストを受け取りFirestoreのデータを削除しに行く今回のアーキテクチャは以下の通りです
![slack.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1295942/e3908253-f635-6dc2-bcf8-0a0226d6c71a.png)
・Slack APIについて以前も取り上げたのでこちら参
npm 7(8) でフロントエンド開発に関わる変更まとめ
npm 7 が 6 から結構変わっていたのでそのまとめです。
普段、yarn はあまり使わず、pnpm も使ったことないユーザなので
情報の片手落ちなどがありましたらご指摘いただけると助かります:bow:## npm 7 について
Node.js v15 から npm 7 がインストールされるようになりました。
2021/10/26 から Node.js v16 が LTS になったので、
npm 7 以上を利用する機会が今後増えると思います。npm 6 から 7 での**フロントエンドに関する**大きな変更点と思われる箇所は下記。
– packege-lock.json のフォーマット変更
– yarn.lock のファイルサポート
– npm audit の出力変更
– workspace のサポートバックエンド含め、そのほかの変更箇所は下記の記事が詳しいです。
[npm v7の主な変更点まとめ](https://blog.watilde.com/2020/10/14/npm-v7%E3%81%AE%E4%B8%BB%E3%81%AA%E5%A4%89%E6%9B%B
DC-DCブーストコンバータモジュール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1873014/f162f3e7-a617-c899-c732-a27006b6ca30.png)
XL6009 DC-DCバックブーストコンバータモジュール
XL6009 DC-DC Buck Boost Converter Modul
Gtk3アプリ NodeRedで仮想通貨を表示する その2
###Gtk3アプリ NodeRedで仮想通貨を表示する その2
####仮想通貨の価格をチャートに表示する
node-red-dashboardをインストールします。
https://flows.nodered.org/node/node-red-dashboard
“`
node-red-dashboard
“`####学習動画
####パラメータ
three.jsのプロジェクトを作ってGitHubにあげてHerokuに公開するまでのステップ 2/2
Blenderで鉛筆のモデルとアニメーションを作ったので、three.jsを使用してwebブラウザに表示させたものをHerokuにアップしてみようと思います。
GitHubのリポジトリ作成から環境構築、Herokuのデプロイまでを備忘録として記載します。今回の記事では、実際にthree.jsでシーンを作成〜Herokuのデプロイまでを行います。
それ以前の手順は以下の記事に記載しています。
[three.jsのプロジェクトを作ってGitHubにあげてHerokuに公開するまでのステップ 1/2](https://qiita.com/kyk_nr/items/ec3a0cb3e2b2004cc5e9)# もくじ
[1. three.jsシーンの作成する](#1-シーンの作成)
[2. Herokuにデプロイする](#2-デプロイする)#1. シーンの作成
three.jsにBlenderで作成したモデルを取り込み、ブラウザに表示させます。:::note warn
この記事ではthree.jsやBlenderでのモデルの作成方法は記載していません。
:::## (1)
Gtk3アプリ NodeRedで仮想通貨を表示する その1
###Gtk3アプリ NodeRedで仮想通貨を表示する その1
####仮想通貨Binanceノードをインストール
https://flows.nodered.org/node/node-red-contrib-binancenode-red-contrib-binanceをインストールします。
“`
node-red-contrib-binance
“`バイナンスのノードがインストールされると、バイナンスのノードが表示されます。
阿部寛のホームページを(力技で)遅くするChrome拡張機能を作ろう!
この世で最も早いホームページと言われたら、あなたは何を思い浮かべますか?
そう、 阿部寛のホームページ ですね。
その速さと言えばあの世界最速の男、ボルトも驚くスピード。
ボルトと阿部寛のホームページが新国立競技場で速さを競ったなら、 阿部寛のホームページの完全勝利 と言えるでしょう。電波の悪い状態でまず見るべきサイトが阿部寛のホームページと言われるほど、通信速度を知るために重要なバロメーターの役割も果たしており、 もはやこの世の中になくてはならないサイトの代名詞 となっています。
そんな人類の生み出した最速のサイト、阿部寛のホームページ。
ひねくれた私は阿部寛のホームページのあまりの速さに嫉妬したので、阿部寛を遅くする方法はないかと試行錯誤することにしました。そこで思いついたのです。
阿部寛のホームページのあまりの速さを抑えることはできなくても、 遅くなっているように見せればいいのでは?では阿部寛のホームページを遅くするにはどうすればいいのでしょうか?
ページスピードの遅いサイトというのは画像の表示に時間がかかります。つまり、画像が遅く表示されている状態を作り出せば
JavaScriptベースの動画編集サービスを作ってます
# はじめに
JavaScriptベースの動画編集サービス・[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-image-store.s
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
#ソースコード
動画で実行したコードは以下の通りです。
Node.js 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上に