- 1. 同期・非同期処理
- 1.1. Vite×Vue3×Typescriptで最新の環境構築する
- 1.2. GeoJSON(ライン)からsource, targetをペアにした配列を作る
- 1.3. 検索キー（Lookup Key）を利用して、Stripeに登録した最新の価格情報を検索・取得しやすくする
- 1.4. 【JS】undefinedについてまとめみた！
- 1.5. 画像ギャラリーに使う画像を拡大させる方法
- 1.6. 数多くいる推しVtuberの配信を自動収集する
- 1.7. New Relic でも ctrl-h で backspace したい
- 1.8. webview_flutterでページが表示されないときに確認すること
- 1.9. 【React Final Form】formatOnBlurを使っているフォームを初期化するとフィールドの状態がおかしくなる(初期化されない etc..)
- 1.10. 15分でできる！opnizハンズオン！
- 1.11. はじめてのJest
NFTをUnityで表示する
#NFTをUnity上で表示してみたい
最近（2022年1月現在）、NFTとかメタバース とかめちゃ盛り上がってますね。
メタバースの開発プラットフォームとしてよく採用されるUnityを用いて、WebGL上でethereumネットワークに接続してNFTの画像を取得&表示するプログラムをコーディングしたので忘備録としてまとめます。
なお、Unityの基本的な部分（ボタンの配置とかのレベル）は省略します。例外処理等も実装していません。Javascript未経験から１〜２週間ほどで作ったのでコードが拙いところもありますが多めにみてください…笑
最終的な完成形は以下。
左のテキストボックスにNFTのコントラクトアドレスとトークンIDを入力すると、右にNFTが表示されます。[75億円で落札されたアート](https://onlineonly.christies.com/s/beeple-first-5000-days/beeple-b-1981-1/112924)
contractaddress : 0x2a46f2ffd99e19a89476e2f62270e0a35bbf0
UTF-8文字列を1文字単位に分割
## tl;dr
split(”) ではUTF-8の4バイト文字を分割できません。
すべての文字を分割するには `spred operetor` 等を使用します。## split(”)を使用した場合
“`Javascript
console.log(‘3バイト文字は分割できる’.split(”));// output: [ ‘3’, ‘バ’, ‘イ’, ‘ト’, ‘文’, ‘字’, ‘は’, ‘分’, ‘割’, ‘で’, ‘き’, ‘る’ ]
console.log(‘4バイト文字（?）の場合’.split(”));
// output: [ ‘4’, ‘バ’, ‘イ’, ‘ト’, ‘文’, ‘字’, ‘（’, ‘�’, ‘�’, ‘）’, ‘の’, ‘場’, ‘合’ ]
“`
4バイト文字である `?` が正しく分割されていません。## 正しい方法
### spread operator を使う
“`Javascript
console.log([…’4バイト文字（?）の場合’]);// output: [ ‘4’, ‘バ’,
iframeにPOSTでデータを送る
URL指定してiframe開くとき／開いたあととかに、POST形式でデータを送る方法について試したので、忘れないように書いておく
（GETならsrcのURLにクエリパラメータつけるだけで済むが、POSTはそうもいかない）# TL;DR
・iframe作る （ `document.createElement` ）
→このiframeには必ず`name`つけておく
（・iframeにsrcでURLを指定する）
・form要素作る （ `document.createElement` ）
・form要素に`action`で送信対象URLを、`method`でPOSTを、`target`でiframeのnameを、それぞれ指定する
・input要素作る （ `document.createElement` ）
・input要素にて、POSTで送信するデータをkey-value形式でname, valueを指定する
・input要素をform要素の下に配置する（ `appendChild` ）
→複数データを送りたい場合は、このinput要素作成をデータの個数分だけ繰り返す
（・ifram
【小ネタ】政令指定都市で市と区と分けたいときの書き方
## Introduction
住所のデータを引っ張ってきた時に都道府県、市区町村、町字ってわけるのが多いと思うのですが
政令指定都市だと市区町村のところが、〇〇市〇〇区になっていたりする。
※町字に入ることもあるけど。。。地味にここを分けて表示したいというニーズが意外となかったので、備忘録！！
## Code
“`javascript
const cityName = “川崎市中原区”
cityName.replace(/^(.{1}市|.{2}市|.{3}市)(.+)/, ‘$1 $2’).split(‘ ‘);// [‘川崎市’, ‘中原区’]
// 政令指定都市の中で最長は’名古屋’の3文字、最短が’堺’の1文字のため、1〜3文字で判定するようにしてます
“`## Conclusion
町字で区とそれ以下を分けるときも同じことできそうｗ
## References
– 都道府県と市町村区を分割し、配列に格納する。
https://qiita.com/kajitack/items/d457fb4a811ddc53952a
React 基礎知識から Props, useState, useEffect について
#学習の経緯
一番の理由はフロント側に興味津々で早く触りたいと思ってたためです。
また、周りで触っているエンジニアさんも多かったこともあり、**`React`**を習得することを決意。##前提
– CodeSandboxを使用
https://codesandbox.io/
##JSX記法のルール
* **`JSX`とは**
* JavaScript を拡張し、UI 要素を記述するのに HTML のようなタグ構文が使えるようにした**Javascriptの拡張構文**のこと
* コード説明(下記参照)
* `import React from “react”;`
* React でコードを書くためのオマジナイ
* `import ReactDom from “react-dom”;`
* HTML にコンポーネントを反映するための記述
* `const App`
* Hello! と Tom が出力される関数の定義
* 複数要素の場合は、`return`を`()`で囲う必
Unity WebGLでおえかきした画像の保存
# はじめに
おえかきアプリを作っていて保存機能を実装することになったが、WebGLなので`File.WriteAllBytes()`も`Application.persistentDataPath`使えない…となったので、javascriptプラグインを作ったお話。
※おえかきアプリの実装はメインではないので割愛します。# 開発環境
– Unity 2020.3.25f1
– Visual Studio Code# プラグインの作成(.jslib)
Unityには、ブラウザのスクリプトと通信を行う方法が大きく2つあります。
1. `Application.ExternalCall()` か `SendMessage()`を使う。
2. プラグイン(.jslib)を作り、コードを記述。
今回は後者の方法で実装を進めます。“`jslib:plugin.jslib
mergeInto(LibraryManager.library, {
ExportTextureJS:function(base64){
// 手順1
const image = Poin
Vue3対応！ Nuxt3のドキュメントを適当に読んで基本的な使い方を学ぶ
# はじめに
Nuxt3に関する日本語の情報が少ないため、[公式ドキュメント](https://v3.nuxtjs.org)を読みつつ基本的な使い方を書いていく。
良かったらLGTM押してください！# 目次
1. [Getting started](#Chapter1)
1. [ルーティングとか](#Chapter2)
1. [importとか](#Chapter3)
1. [その他新機能](#Chapter4)
1. [感想](#Chapter5)
1. [参考文献](#reference)まずNode.js,VSCodeを入れて、VSCode拡張のVolar(Veturは不要)を入れる。
次に以下のコマンドでプロジェクト構築から開発サーバー起動まで
“`
npx nuxi init nuxt3-app
code nuxt3-app
yarn
yarn dev -o
“`http://localhost:
意外とハマってしまった比較演算子のタイポ=>｜デバッグの記録
単純なタイポですがjavascriptで遭遇し恥ずかしながら少しハマったので
改めて原因や対策などをまとめてみます。# >=が正解
aはb以上はa >= b。
aはb以下はa <= b。 大なりイコールと読み方で覚えるのや アロー関数と逆という覚え方も良いかも。 これでも実際コード見ている時は映像として馴染んでしまってわかりづらいので やっぱり後述するIDEのLintをしっかり設定するのが最優先だと思います。 特にPHPのアロー演算子=>やjavascriptのアロー関数=>をいじってたりすると
目がなれてしまって見逃しがちなんですよね。。。と言い訳してみる。# 状況
window.innerWidthで判定している部分でそれをresizeイベントで呼び出していました。“`changeWidth.js
const changeWidth = () => {
const nowWidth = window.innerWidth;if (nowViewPortWidth => 768) {
alert(“判定true”)
}
}
Webの勉強はじめてみた その22 〜Slack上で動くbot作成2〜
N予備校「プログラミング入門Webアプリ」を受講しています。
今回は第三章10,11節です。同期・非同期処理
Node.jsは非同期で処理が実行される。
“`javascript
for (let count = 0; count < 500; count++) { fs.appendFile(fileName, 'あ', 'utf8', () => {
fs.appendFile(fileName, ‘い’, ‘utf8’, () => {
fs.appendFile(fileName, ‘う’, ‘utf8’, () => {
fs.appendFile(fileName, ‘え’, ‘utf8’, () => {
fs.appendFile(fileName, ‘お’, ‘utf8’, () => {
fs.appendFile(fileName, ‘\n’, ‘utf8’, () => {});
});
});
});
Vite×Vue3×Typescriptで最新の環境構築する
### Vite（ヴィート）とは
従来のビルドツールであるVue CLI等に比べて高速で動作するビルドツールのこと。
フランス語で速くという意味らしい。
公式サイト↓https://vitejs.dev/
###環境構築 Vite×Vue3×Typescript
######1.npmのVersionを確認する(６系とそれ以降でその後のコマンドが変わる）
“`
$ npm -v8.12
“`
######2.プロジェクトの作成
“`
# npm 6.x
$ npm init vite@latest <ここにプロジェクト名> –template vue-ts# npm 7+ は追加で 2 つのダッシュが必要:
npm init vite@latest <ここにプロジェクト名> — –template vue-ts“`
上記は公式サイトに記述されていた
からsource, targetをペアにした配列を作る
ラインデータを地図ライブラリにデータを渡す際にsource, targetをペアにしたデータに変換して渡したいときがあるので、その変換方法のメモ。
もととなるGeoJSON(ライン)
“`json
const geojson = {
“type”: “FeatureCollection”,
“features”: [
{
“type”: “Feature”,
“properties”: {},
“geometry”: {
“type”: “LineString”,
“coordinates”: [
[
-1.0272216796875,
47.97889140226657
],
[
-1.9720458984374998,
47.743017409121826
],
[
-2.5
検索キー（Lookup Key）を利用して、Stripeに登録した最新の価格情報を検索・取得しやすくする
商品一覧やサービスのプラン表など、Stripeに登録した価格データを一覧表示させたいケースは少なくありません。
そしてStripeでは、表示させたい価格データを絞り込み・検索する方法がいくつか用意されています。今回はその方法のうち、「検索キー（Lookup Key）」を利用する方法について紹介します。
# 検索キーとは？
検索キーは、StripeのPrice APIの機能の１つです。
Stripeに登録した価格データをより検索しやすく、また価格の変更を反映しやすくするために作られました。以下のコードサンプルのように、Price APIのListで特定の検索キーを持つ価格データだけを取得することができます。
“`js
const result = await stripe.prices.list({
lookup_keys: [‘membership_free’, ‘membership_bronze’, ‘membership_silver’]
})
“`# 検索キーを価格に登録する
検索キーは、APIから登録することができます。
登録済みの価格に設定する場
【JS】undefinedについてまとめみた！
## `undefined`とは
`undefiend`は、「未定義」である事を示す値です。## `undefined`になるケース
以下が`undefined`になるケースです。
– 初期化されていない変数の値
– オブジェクトに指定されていないキーの呼び出し
– 関数の`return`を書かなかった場合の戻り値
– 引数のある関数を呼び出すときに引数を与えなかった場合の値以下がコードになります。
Javascriptを実行出来る環境で試してみてください！！“` js
// 初期化されていない変数の値
let testUndefined;
console.log(testUndefined); // undefined// オブジェクトに指定されていないキーの呼び出し
const test = {};
console.log(test.name); // undefined// 関数の`return`を書かなかった場合の戻り値
function testFunc() {}
console.log(testFunc()); // undefined// 引数
画像ギャラリーに使う画像を拡大させる方法
lightboxを使うと簡単にポップアップ表示できます。
まず、lightboxのサイトでファイルをダウンロードします。
参考にした記事
https://github.com/lokesh/lightbox2/releases
ファイルを解凍してファイルのdistファイル内のcssとjsの中身を
index.html用のcssファイルとjsファイルに移します。“`html:index.html
内に読み込む “`
“`html:index.html
前に読み込む
“`
最後にポップアップ画像のコードを書きます。“`html:index.html
画像文字を書き込む
数多くいる推しVtuberの配信を自動収集する
# 前置き
唐突ですが、みなさん推しのVTuberはいますか？
そして推しのVを追いかけようにも、たくさんいて配信を見逃してしまうなんてことはありませんか？そういった難民を減らすため、大手の事務所には配信情報の専用ページがあります。
有名どころでは[ここ](https://schedule.hololive.tv)などでしょう。では個人Vを追いかけたいときはどうするか？チャンネル登録と通知の組み合わせが自然だろうけど、その数が増えると通知に埋もれてしまって追いかけられない……。あるいは他のVも追いかけたくなるけど、情報が手に入らない……。
そう個人的にも関わりが深い将棋系Vもそういった悩みを配信者側も視聴者側も抱えていました。
それなら配信情報のまとめサイトを作ろう！
この記事はそこから始まる物語。
なおこの記事を応用することで、個人レベルでも専用の情報収集プログラムなどができます。
# まずは宣伝
この記事のタイトルを見て将棋系Vに少しでも関心を持たれた方、あるいは完成版を見たい方は次のリンクをポチッとしてください。
[将棋V総合情報サイト](https://
New Relic でも ctrl-h で backspace したい
# 何が起きたか
[New Relic One](https://docs.newrelic.com/docs/new-relic-one/use-new-relic-one/get-started/introduction-new-relic-one) には謎のキーバインドが張られており、ctrl-h を押すと前のページに戻ってしまう。ctrl-h で backspace したい派としては、クエリの入力欄でミスタイプしてctrl-hで消そうとするたびに前のページに戻ってしまい不便だった。
# 解決策
New Relic がバインドしてくる [`keydown` イベントを `stopPropagation`](https://developer.mozilla.org/ja/docs/Web/API/Event/stopPropagation) しちゃえばいい。
“`javascript
document.addEventListener(‘keydown’, (event) => {
if (event.key === ‘h’ && event.ctrlKey)
webview_flutterでページが表示されないときに確認すること
まず前提としてエラーは出ていないけどなぜかページは表示されないという状態を想定しています。
# 解決方法解決方法はシンプルです。
WebViewにjavascriptModeをしっかり指定することです。“` Dart
class MyWebView extends StatelessWidget {@override
Widget build(BuildContext context) {
return Expanded(child:
WebView(
initialUrl:’https://example.com’,
javascriptMode: JavascriptMode.unrestricted,
)
);
}
}
“`
【React Final Form】formatOnBlurを使っているフォームを初期化するとフィールドの状態がおかしくなる(初期化されない etc..)
# tl;dr
– React Final Form には、format機能があります。
– フィールドの表示内容に対して、*全角英数→半角英数* のような変換処理が行えます。
– :warning: しかし、format機能を使うと、変換処理が走るたびにIMEが閉じてしまうので、IMEが使い物になりません。
– そこで、`formatOnBlur` prop を指定しましょう。
– blur (つまりフォーカスが外れた)の瞬間にしか format が走らないようになり、
– 変換処理のたびにIMEが閉じてしまうのを抑制できます。
– :warning: しかし、そうすると、フォームをリセットした時にフィールドの状態がおかしくなります。
– → **結論：`value={input.value ||
15分でできる！opnizハンズオン！
# はじめに
本記事はM5Stack系デバイスへのopnizセットアップから、Node.js SDKでLチカするハンズオン記事となります。
だいたい15分ほどで完了します。M5Stack、M5Stick-C、M5ATOM Matrix、M5ATOM Liteが本記事の対象となります。
# 対象読者
* JavaScript / TypeScriptでIoTしてみたい方（C / C++は書きたくない）
* できるだけ安くIoTしてみたい方
* 正直M5Stack積んでる方# 用意するもの
* M5Stack、M5Stick-C、M5ATOM Matrix、M5ATOM Liteのいずれか
* M5ATOM Lite推奨
* M5Stackの場合は別途LEDと抵抗が必要です
* USB Type-Cケーブル
* デバイスをPCに接続する用
* PC
* Windows / Mac / LinuxどれでもOK
* Node.js v12以上をインストールしておいてください# [opniz](https://github.com/miso-develo
はじめてのJest
# そもそもJestとは？
### 一番人気なJSのテストフレームワーク
[https://2020.stateofjs.com/en-US/technologies/testing/](https://2020.stateofjs.com/en-US/technologies/testing/)### なぜ人気なのか
> 筆者がJestを選ぶ一番の理由は、依存が少なく高機能であることです。
↓こちら参照
[https://www.codegrid.net/articles/2017-jest-1/](https://www.codegrid.net/articles/2017-jest-1/)
テストランナー、アサーション、モックが全て含まれている。
カバレッジも見ることができるらしい。# インストール方法は？
公式からパクリ
“`php
npm i jest @types/jest ts-jest -D
“`– `jest`
– jestフレームワーク（これが普通jestと呼ばれるもの）
– `@types/jest`
– [https:
