- 1. ナウキャストの画像取得(20210224版)
- 2. if文なしでじゃんけん – JS版
- 3. 【Scratch3.0】Realtime Database拡張ブロックを作ったので参照実装したら既視感あるアレができちゃった件
- 4. [Node.js] MySQLのIN句をプレースホルダーで表す
- 5. 【テスト自動化】Playwrightでファイルのアップロードのテスト
- 6. 【JavaScript】JavaScriptの非同期処理について
- 7. 【imi-enrichment-date】年号を含む日付表示の正規化
- 8. RustでWebAssemblyを使ってみた時の記録
- 9. Node.js+MongoDB構成でGraphQLのお勉強
- 10. DockerでNode.jsアプリを起動する
- 11. 【Node.js】日時処理を扱う方法
- 12. Node.js セキュリティアップデート + Node.js v15 について
- 13. Puppeteerでドラッグ&ドロップ
- 14. npmのグローバルインストールをするためにパスを通す方法
- 15. 【Windows】node-gyp ERRで困ったときの対処法
- 16. Visual Studio Code の Remote Containers でNodeの仮装環境を作成する
- 17. SpotifyのDaily Mixでは物足りないあなたへ送るサービス
- 18. 【Meteor】Hello Worldを出力する
- 19. CBORってなんだろう？
- 20. M1 Mac での環境構築の最適解
ナウキャストの画像取得(20210224版)
# これは何ですか？
気象庁の降水レーダー画像を取得するスクリプトです。2021年02月24日の更新に伴って書き直しました。画像取得ソースは:point_down:
https://www.jma.go.jp/bosai/nowc/
コードはgistに収めています。
[ナウキャストの画像取得(20210224版) by puppeteer/node.js]
(https://gist.github.com/59t9/666901916c2d06332f7f3a659da5e255)相変わらず習作ですが、画像取得リトライ工作をなんぼかいたしました。Slackによるエラー通知もさせてみました。ユーザ依存な部分を伏せ書きにしていますのでご注意ください。
お役に立てれば幸いです。
if文なしでじゃんけん – JS版
[if文なしでじゃんけん – Qiita](https://qiita.com/tadsan/items/65d91ba6b50535fc8815) を読んでJSで組んでみました。
# 解答
“`js
const gu = “gu”;
const choki = “choki”;
const pa = “pa”;const createResult = (winHand, loseHand, drawHand) => ({[winHand]: “勝ち”, [loseHand]: “負け”, [drawHand]: “あいこ”})
const hands = Object.freeze({
[gu] : {view: “✊”, judgeTable: createResult(choki, pa, gu)},
[choki] :{view: “✌ “, judgeTable: createResult(pa, gu, choki)},
[pa] : {view: “✋”, judgeTable: createResult(gu, choki, pa)},
【Scratch3.0】Realtime Database拡張ブロックを作ったので参照実装したら既視感あるアレができちゃった件
# 事始め
今年、弊社内ではゲーム制作コンテストが開催されており、私は運営チームとしてScratchのサポートを担当しています。Scritchの自主練をしていたところ、楽しそうな記事を見つけました。
* [Scratch 3.0でオリジナルブロックをつくろう – @Hiroyuki_OSAKI](https://qiita.com/Hiroyuki_OSAKI/items/a46e1c881d3aed4661f7)
そんなことができるのですね！
そしたら、[Realtime Database](https://firebase.google.com/docs/database?hl=ja) のブロックとかつくって、ネットワークゲームも制作できるようになる……!!!
これはやるしかないでしょ、ということで。
やってみたいぃぃい✨
Scratch 3.0 で Web API 呼び出しの拡張ブロックを作る、の手始め – [Node.js] MySQLのIN句をプレースホルダーで表す
#概要
Node.jsでMySQLを扱うにあたり、
IN句のリスト部分をプレースホルダーで表すには、どのようにすれば良いかを以下に記していきます。#本題の前に…
(本題しか興味ない人は、すっ飛ばしてください)
##Node.jsでMySQLを扱うためにインストール`npm i -S mysql promise-mysql`
##Node.jsでMySQLプレースホルダーを扱うときの基本
例えば、プレースホルダーなしで書こうとすると以下のようになります。(良くない例です)
“`javascript:【NG例】プレースホルダーなし
const userid = 1 ;
const sql = `SELECT * FROM users WHERE userid = ${userid} ;`
“`このままだと、SQLインジェクションの格好の餌食となってしまうため、
プレースホルダーを使って書き直します。“`javascript:【OK例】プレースホルダーあり
const userid = 1;
const sql = `SELECT * FROM user【テスト自動化】Playwrightでファイルのアップロードのテスト
# Playwrightでファイルのアップロードのテスト【テスト自動化】
・[Playwright](https://playwright.dev/)でテスト自動化をかんたんに
・インストール等は他ドキュメントが詳しいので省略します
・ファイルのアップロードが必要な場合# 環境
・Windows10 64bit
・node.js v14.15.5
・cygwin# Playwright とは
– https://github.com/microsoft/playwright
– https://playwright.dev/> Playwrightは、Chromium、Firefox、WebKitを単一のAPIで自動化するNode.jsライブラリです。
> 常に環境に配慮し、機能があり、信頼性が高く、高速なクロスブラウザーWeb自動化を可能にするように構築されています。個人的な感想ですが、「Windows で *webkit (safari)* も実行できる」ブラウザテスト自動化用のツール。
Selenium（最近はあまり触っていないですが・・・）より使った感じは良好。
【JavaScript】JavaScriptの非同期処理について
#プログラミング勉強日記
2021年2月26日#同期処理とは
同期処理は、コードを順番に処理していって、1つの処理が終わるまで次の処理は行われない。同期処理では、実行している処理は1つだけとなるので直感的な動作になる。
しかし、1つの処理が終わるまで次の処理ができないことによっての問題点も存在する。具体的には、同期的にブロックする処理があると大きな問題が生じる。JavaScriptでは基本的にブラウザのメインスレッドで実行されるので、メインスレッドが他の処理でいっぱいになってしまうと表示が更新されなくなってしまいフリーズしたような状況になる。これは、メインスレッドが表示の更新といった処理を行っているためである。#非同期処理とは
非同期処理でもコードを順番に処理していくが、1つの非同期処理が終わるを待たずに次の処理を行うことができる。なので、非同期処理では同時に実行している処理が複数ある。
JavaScriptにおける非同期処理には、コールバック、Promise、async/awaitの3種類ある。JavaScriptにおいての多くの非同期処理はメインスレッ
【imi-enrichment-date】年号を含む日付表示の正規化
# imi-enrichment-dateとは
経産省のジービスインフォというサイトで公開されているオープンソースライブラリの１つで、
`令和３年２月２６日`のような日付表示を`2021-02-26`といった形式に正規化することができます。
MITライセンスで公開されているので商用利用も可能です。## インストールの仕方
このツールはnpmのようなパッケージ頒布サイトでは公開されていないようで、
経産省のサイトあるいはプロジェクトのGitHubページからダウンロードして用います。“`bash
# on your own project
npm install https://info.gbiz.go.jp/tools/imi_tools/resource/imi-enrichment-date/imi-enrichment-date-1.0.0.tgz
“`## 使い方
ここでは自分のプロジェクトに組み込んで使う方法を紹介します。
ライブラリから適当な名前で読み込んだ関数は、引数に`2021年2月26日`や`令和三年二月二六日`のような日付を表す文字列か、`{“@
RustでWebAssemblyを使ってみた時の記録
# この記事について
プログラミング独学3年目の文系大学生の開発メモ。# なぜWebAssemblyなのか
特に理由はありません(笑)
最近話題になっていると聞いて触ってみました。# なぜRustなのか
これも特に理由なしです。
システムプログラミング言語なのに低レベルだけではなく、色々なアプリケーションを開発するためのライブラリが揃っていると聞いて興味を持ちました。# 開発環境 (2021/02/26現在)
Windows10 Education バージョン 20H2 (Windows10 Home バージョン 20H2上のVMware Workstation Player 16仮想マシン)
Visual Studio Code
gcc 8.1.0
node 11.13.0
npm 6.9.0
rustc 1.50.0
cargo 1.50.0# 開発開始
[MDNに掲載されているRust用のWebAssembly入門](https://developer.mozilla.org/ja/docs/WebAssembly/rust_to_wasm “Rust から We
Node.js+MongoDB構成でGraphQLのお勉強
#はじめに
現場でGraphQLを使用しているのですが、保守改修段階でプロジェクトに入ったのでスキーマ作成などの基本的なところをやったことがありませんでした。また、NoSQLデータベースも使ったことがなかったので、まとめて学んでみようということでNode.js+MongoDBの構成でGraphQLサーバをたててみることにしました。今回作成したプロジェクトはGitHubにあります。
#GraphQLのよさ
RESTとの比較記事がいたるところにあるので(例えばこちら)詳しく書きませんが、単一のエンドポイントであるというのがGraphQLの一番の特徴です。GraphQLをつかうことで、RESTで必要なすべてのデータを取得しようとするときに発生する以下のような問題を解決することができます。
– 複数のエンドポイントへリクエス
DockerでNode.jsアプリを起動する
## 概要
先日作ったSlackBotを定期実行したいため、Dockerでnodejsの環境を構築します。## 前提条件
[Dockerインストール済み](https://docs.docker.com/get-docker/)“`
$ docker –version
Docker version 20.10.2, build 2291f61
“`ジョブフローを毎日18:00に実行する設定済み
“`js:job.js
const schedule = require(‘node-schedule’);
schedule.scheduleJob(`00 00 18 * * 1,2,3,4,5`, run);
“`## Dockerイメージを作成する
1、プロジェクトフォルダー直下に“Dockerfile“を作成して、以下のコードを貼り付ける“`Dockerfile
FROM node:12.20.1
WORKDIR /app
COPY . .
RUN npm install
ENV TZ Asia/Tokyo
EXPOSE 8888
CMD [“no
【Node.js】日時処理を扱う方法
#プログラミング勉強日記
2021年2月25日#日付処理を使うための準備
Node.jsで日付処理を扱うために、今回はdate-utilsを使用する。
date-utilsはnpmパッケージの1つで、簡単にインストールすることができる。“`:date-utilsをインストールする
$ npm install date-utils
“`#現在時刻を表示する
“`js
// date-utilsを呼び出す
require(‘date-utils’);
let now = new Date();
console.log(now.toFormat(‘YYYY年MM月DD日 HH24時MI分SS秒’));
console.log(now.toFormat(‘YY年M月D日 H時MI分SS秒’));
console.log(now.toFormat(‘DDD MMM DD YYYY HH24:MI:SS’));
console.log(now.toFormat(‘M/D/YY’));
“`“`:実行結果
2021年02月25日 01時52分13秒
21年2月25日
Node.js セキュリティアップデート + Node.js v15 について
# Node.js セキュリティアップデートが出てた
[https://nodejs.org/en/](https://nodejs.org/en/)
2.23 に、Node.js の新しいバージョンがでたのでチェックしよう。
[https://nodejs.org/en/blog/vulnerability/february-2021-security-releases/](https://nodejs.org/en/blog/vulnerability/february-2021-security-releases/)### 10.x, 12.x, 14.x 15.x 用のセキュリティアップデート
重大(1), 高い深刻度(1), 低い深刻度(1)
1. HTTP/2 の unknownProtocol があまりにも多くなった時、DoS 攻撃を受ける可能性がある問題
– ファイルシステムが漏洩する可能性
– メモリリークを引き起こす可能性
2. localhost6 がホワイトリストに含まれている場合、DoS 攻撃を受ける可能性がある問題
– /
Puppeteerでドラッグ&ドロップ
#はじめに
最近、フロントテストに[Puppeteer](https://pptr.dev/)というライブラリを用いているのですが、ドラッグ・ドロップの動作においてかなり苦戦をしたので、これ以上犠牲者を増やさないために（）、ここに解決策を共有したいと思います。
#Puppeteerでドラッグ&ドロップができない！
「Puppeteer drag drop」というように検索をかけると、大体下記のようなコードが出てきます。“`Javascript
await page.mouse.move(x1, y1);
await page.mouse.down();
await page.mouse.move(x2, y2);
await page.mouse.up();
“`
座標(x1, y1)にカーソルを合わせ、掴む→(x2, y2)に移動し離すという意味のコードです。しかしこれ…
**動作しません!!!!!**
正確に言うと、一瞬だけ対象物が動くんですけど、(x2, y2)まで移動してくれないんですよね…
調べてみると、このことに関して
npmのグローバルインストールをするためにパスを通す方法
## はじめに
npmのグローバルインストールをするために、パスを通す方法を紹介します。
## npm i -g @vue/cli でエラー発生
Vue CLIの環境構築のために
`npm i -g @vue/cli`
を実行すると下記のエラーが発生しました。
`i` はインストール、 `-g` はグローバル、という意味です。
グローバルにインストールされたものは、どのディレクトリでも実行できるようになります。“`
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/joi@15.1.1: Switch to ‘npm install joi’
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported
【Windows】node-gyp ERRで困ったときの対処法
electronでディープリンク（Custom URL Schema）実装時に[electron-deeplink](https://github.com/glawson/electron-deeplink) を使おうと思ったのですが、そこでnode-gypのエラーが出て躓いたので、その時の対処法をメモします。
ディープリンクについては[electron-deeplink](https://github.com/glawson/electron-deeplink)を使って実装したら（少なくとも開発環境では）簡単にできましたので割愛します。# 結論
Python や Visual C++ といった必要なものをインストールする# エラー内容
`yarn add electron-deeplink`したところ、“`
gyp ERR! find Python
gyp ERR! find Python Python is not set from command line or npm configuration
“`
とか、Pythonをインストールした後も“`
gyp
Visual Studio Code の Remote Containers でNodeの仮装環境を作成する
# 概要
Visual Studio Code (以下、VSCode）の Remote ContainersでNodeコンテナを作成し、仮装環境で開発する。
## 環境
本記事を記載時点でのバージョン等を記載する
* macOS Big Sur 11.2.1
* VSCode 1.53
* Remote – Containers v0.158.0## 手順
1. Nodeを使用するフォルダを作成
2. VSCodeの“`New Window“`で新しいWindowを開く
3. “`Open folder“`で作成したフォルダを開く
4. コンテナ設定ファイルを作成する
4. 左下のRemote Containerのボタン(><が重なったようなマーク)をクリック 5. コマンドパレットが開くので、```Remote-Containers: Add Development Container Configuration Files...```を選択 6. ```Node.js```を選択 7. バージョンを選択（この記事では```14`
SpotifyのDaily Mixでは物足りないあなたへ送るサービス
# 背景
以下のQiitaの記事を読み、私もSpotify APIを使ってみたくなりました?
– [Spotify Web APIで明るい楽曲のみのプレイリストを作成する](https://qiita.com/oekaki0v0/items/c8a7084b28f7943b70b2)
# Spotify-Extension-A
完成したサービスがこちらです。
`たった3step`で、あなただけのプレイリストが作成可能です?– https://spotify-extension.shijimi.work/
demo pic.twitter.com/05rj7TRLwq
— playtag551 (@playtag551) 【Meteor】Hello Worldを出力する
#プログラミング勉強日記
2021年2月23日
[前の記事](https://qiita.com/mzmz__02/items/03c4bb839a5e5abe02a8)でNode.jsの3大フレームワークについて取り上げた。今日は、MeteorでHello Worldを表示する方法をまとめる。#Meteorを導入する方法
Node.jsの開発環境が構築されていることを条件とする。Node.jsの環境構築がまだの人は[こちらの記事(Windows版)](https://qiita.com/mzmz__02/items/6cc53f06205fd11367bc)を参考に環境構築してみてください。
Windowsの場合、Chocolateyを[公式サイト](https://chocolatey.org/)からインストールする。“`:管理者のPowerShell
$ Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocolCBORってなんだろう？
# CBORとは
Webサービスでよく使われるデータ交換フォーマットとして有名なものはJSONだと思います。
ただ、サイズが冗長なこともあり、バイナリとして表現しようと様々なものが生まれてきました。(例えば、MongoDBで使われるBSONなど)=> そんな中、今後注目されそうなものが**RFC8949**でRFC化された**CBOR**です。
## 特徴
* JSONデータモデル「数値、文字列、配列、マップ（JSONオブジェクト）、およびfalse、true、nullなどの値」に基づいている。
* エンコードされたデータは自己記述的である。
* デコードのためのスキーマ記述は不要である。
* JSONを使用したい一部のアプリケーションでは、**暗号化キー**、**グラフィックデータ**、**センサー値**などのバイナリデータを転送する必要があります。
JSONでは、これらのデータをエンコードする必要があり（通常はbase64形式）、複雑さとかさばりが増します。
=> CBORでは、このバイナリデータをそのまま受け入れることができます。一番の特徴は、CBOR自体がバイ
M1 Mac での環境構築の最適解
#本記事の執筆に当たって
M1チップ搭載のMacが発売されましたが、アーキテクチャの違いで環境構築に戸惑いを感じた方も多くいるのではないでしょうか。私もその一人でした。本記事では**2020年2月20日**現在の状況下で最も優れていると思われる環境構築方法を紹介したいと思います。
#環境構築の上での方針
– できるだけ**ネイティブ環境**(**arm64**)で構築する。
– ネイティブ環境で動作が不安定になる場合はRosetta2を使用して**Intel環境**(**x86_64**)で構築する。
– アーキテクチャ間の切り替えはスムーズにできるようにする。#本記事で環境構築する開発ツール・プログラミング言語
– Homebrew(**arm64/x86_64**)
– gcc(**arm64**)
– Nodebrew(**x86_64**)
– Node.js(**x86_64**)
– npm(**x86_64**)**Homebrewに関してはパッケージ管理システムとしてネイティブ環境とIntel環境のどちらにも採用することとする。**
#前提
