f@ctor

JavaScript関連のことを調べてみた2022年03月20日

JavaScript関連のことを調べてみた2022年03月20日
目次

待望のSymbolのChrome拡張機能「SSS Extension」を使ってみた

# はじめに
（03/20 01:00ごろから調査・実装・執筆をしていたら朝になっていました、、一気に書いているので、色々ツッコミどころあるかもしれません、、お手柔らかにお願いします、、、）
## 自己紹介
こんばんは！
社会人二年目がもうすぐ終わりそうで焦っております、よもぎです。
仕事では基盤系（k8sやクラウド系）を扱っており、AWSで構成を作ったりコンテナ系のR&Dをしています。

大学生時代にNEMに魅せられて少し触ってみて、あんまり表には出ることなくひっそりコミュニティの動向や技術だけを追いながら仕事に忙殺されておりましたが、最近仕事にも慣れてきまして、再びSymbolでわくわくしてコミュニティに積極的に混ざりたくなっています（2018年に名古屋で開催されたNEM ミートアップに参加したことがあります！笑）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277262/2a9b7e9e-6652-7588-0a1e-a8cfa19baa22.png)

アウトプットがんばるの

元記事を表示

ノベルゲーム風の画像を作れるサービスを作った

# こんな画像を作れます
![sample (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1135021/de2e9a36-fe51-a204-fcee-55352a257b3e.png)

# ノベルゲーム画像メーカー
コンセプトは**フロントエンドだけで完結する画像Webサービス**

https://novelgamemaker.app/

## 作成に掛かった期間
２日

# ちょっと技術的な話
サービスは全部フロントエンド（HTML, CSS, JavaScript）で作りました。

作った目的は、ノベルゲームにハマっていたのと、技術的にフロントエンドでどこまで画像を使ったサービスを作れるか追求したかったからです。
（本音：バックエンドにかけるお金が無かったんだモーン）

構成としては、HTMLで入力した値をJSで処理してHTMLに返すだけ。
したがって、ホスティングサーバを借りてデプロイしたらすぐ動きます。

画像生成部分は（いま時点では）Canvasでミリミリ作っています。

#

元記事を表示

Denoによるスクレイピング

# スクレイピング第二版

前回、WEBスクレイピングのDenoバージョンです。
上記はNodejsはファイル地獄が有名ですが今回は克服？を目的にしています。
今回も毎回恒例(雑さがチラホラ)なので、我慢しながらご覧下さい。

##### ▼以下投稿時の実行環境▼
“`
MacOS : macOS CAtalina v 10.15.7 ( １０年目 MacBookAir )
Deno : deno 1.18.0
“`

# Deno install

Denoをまずインストールします。

“`terminal:terminal-bash
curl -fsSL https://deno.land/x/install/install.sh | sh
.
.
.
export DENO_INSTALL=”/$HOME/.deno”
export PATH=”$DENO_INSTALL/bin:$PATH”
“`
手動で追加します。
理想は~/.z

元記事を表示

Go言語でWebAssemblyを実装

## 簡単なWebAssemblyを実装

モジュールディレクトリの作成と**go.mod**を生成します。

“`sh
mkdir wasm
cd wasm
go mod init example.com/wasm
“`

**main.go**を作成します。

“`go
package main

import “fmt”

func main() {
fmt.Println(“Hello, WebAssembly!”)
}
“`

Go言語のビルドコマンドに環境変数**GOOS = js**、**GOARCH = wasm**を設定して、**main.go**をWebAssembly用にコンパイルして**main.wasm**を生成します。

“`sh
GOOS = js GOARCH = wasm go build -o main.wasm
“`

**main.wasm**だけでは動かないので、**wasm_exec.js**(JavaScriptサポートファイル)をコピーします。

“`sh
cp “$(go env GOROOT)/misc/wasm/wa

元記事を表示

PixiJS を p5.js の上で使いつつ p5.js の描画も組み合わせる（環境は p5.js Web Editor を利用）

以下の記事の続きのような内容になり、今回も開発・実行環境は p5.js Web Editor を利用します。

●PixiJS を p5.js のキャンバスの上で統合させる形で使う（環境は p5.js Web Editor を利用）【試行錯誤の途中】 – Qiita
　https://qiita.com/youtoy/items/bbf9a0790ed9ea353080

この記事でやりたいことは、p5.js で用意したキャンバスを利用しつつ、その上で PixiJS の描画を扱うというものです。上記の記事では、p5.js の `draw()` から PixiJS の描画に関わるパラメータの変更を行うところまでやっていました。
しかし、p5.js での描画を行って、それを PixiJS　と組み合わせた形にするのができていませんでした（描画が変な状態になっていました）。

今回は、この部分の改善対応を進めていきます。

## PixiJS と p5.js を組み合わせて使う下準備
今回の内容を試すための下準備として、ライブラリの読み込みなどが必要になります。
そのあたりの話は、[冒頭に掲載

元記事を表示

グラフの軸は意外と難しい

# はじめに・問題提起
下記のグラフをご覧ください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/62c8125d-1cdb-3201-46b8-56806fd9a88b.png)
問題にしたいのは、軸の単位です。縦軸は 5 刻み、横軸は 1 刻みです。特に違和感はないと思います。
では、「5」と「1」を導くにはどうしたらいいでしょうか？というのがこの記事の議題です。グラフを描くプログラムを作る際、ぶち当たった問題です。

## いろいろな例
色々いじって問題点を考えてみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/18ca4db1-a303-2a2f-facb-e39f4f39cb93.png)

# 問題点の整理
## 問題点１：わかりやすい値でないといけない、密でも疎でもいけない
２次元のグラフで見てましたが、１次元、つまり数直線を２つ組み合わ

元記事を表示

PixiJS を p5.js のキャンバスの上で統合させる形で使う（環境は p5.js Web Editor を利用）【試行錯誤の途中】

以前、以下の記事に書いていた「p5.js をメインで使いつつ、一部に PixiJS を混ぜ込んで使う」というのと同じようなことをやってみようとした話で、まだ試行錯誤中の部分が残っている状況の話です。

●p5.js Web Editor上で PixiJS の「ノイズ・色彩・ブラーのフィルタ」を組み合わせて使ってみる – Qiita
　https://qiita.com/youtoy/items/1180c80b91064d4e043d

今回の記事では、 `PIXI.Application()` を p5.js のキャンバスに融合させるような形で処理を書いてみることにしました。なお、それをやる際に、考慮する必要がありそうな部分は、以下となります。

– 普通の使い方をすると、PixiJS も p5.js もそれぞれがキャンバスを独自に作るので、それを 1つにまとめるやり方が必要
– PixiJS と p5.js の描画更新を行う管理部分が独立になるため、そこをうまく合わせこむやり方が必要（PixiJS だと `ticker` 、 p5.js だと `draw()` の処理が担当する部分

元記事を表示

firebase firestoreに日付データを登録する方法

“`
const nowDate = Date.now();
“`

これだとミリ秒で表示されてしまうため、フォーマットを変更します

ライブラリをインストールします

“`
npm install date-fns
“`

“`