JavaScript – スニペット:一番単純なAjaxのGETリクエスト

はじめに

JavaScriptからWebAPIを呼び出す機会が増えました。
いつも同じようなことを調べるので、個人的な備忘録として記録しておきます。

JvaScript-Ajaxスニペット

const url = "https://xxx/yyy";
let response = await fetch(url);
if (response.ok) {
  let json = await response.json();
  console.log(json);
} else {
  console.log("NG");
}

※WebAPIサーバはCORS対応されていることが前提です。

サンプルソース

<html>

<script>
  async function ajaxTest() {
    const url = "https://api.github.com/users/<githubユーザID>";
    let response = await fetch(url);
    console.log(response);
    if (response.ok) {
      const json = await response.json();
      document.getElementById("jsonStr").innerText = JSON.stringify(json);
    } else {
      console.log("NG");
    }
  }
  ajaxTest();
</script>

<body>
  <div id="jsonStr"></div>
</body>

</html>

参考

https://ja.javascript.info/fetch

p5.jsをWebページの背景にする

p5.jsをwebの背景にする方法

サンプル

クリックすると円を描きます

やり方

JavaScript

function setup() {
  let canvas = createCanvas(300, 300);
  // canvasの位置を指定
  canvas.position(0, 0);
  // canvasを背面に移動
  canvas.style('z-index','-1');
・・・
}

ソース

sketch.js

'use strict';

let obj = [];

function setup() {
  let canvas = createCanvas(300, 300);
  // canvasの位置を指定
  canvas.position(0, 0);
  // canvasを背面に移動
  canvas.style('z-index','-1');
  background(0);
  noFill();
  strokeWeight(5);
  colorMode(HSB);
}

function draw() {
  background(0);
  for(let i = 0; i < obj.length; i++) {
    obj[i].draw();
    if(obj[i].size > width * 2.5) {
      obj.splice(i, 1);
    }
  }
}

function mouseClicked() {
  obj.push(new Shape(mouseX, mouseY));
}

class Shape {
  x;
  y;
  size;
  color;
  speed;

  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = 10;
    this.color = color(random(0,360), 100, 100);
    this.speed = parseInt(random(1, 10));
  }

  draw() {
    stroke(this.color);
    ellipse(this.x, this.y, this.size, this.size);
    this.size += this.speed;
  }
}

main.html

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>p5.jsを背景にする</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script src="../../../../lib/p5.js"></script>
  <script src="./sketch.js"></script>
</head>
<body>
  <button onclick="alert('ボタンクリック');">ボタンサンプル</button>
  <input type='test' value='あいうえお'/>
</body>
</html>

参考

https://freyjasrm.com/2020/01/06/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E8%83%8C%E6%99%AF%E7%94%BB%E5%83%8F%E3%81%ABp5-js%E3%82%92%E4%BD%BF%E3%81%86%E6%96%B9%E6%B3%95/

p5.js – マトリックスレイン公開

マトリックスのあれ、いったん完成ということにして、自作ツールの方に公開しました。
https://www.fukakuutsukushikiasia.com/%e8%87%aa%e4%bd%9c%e3%83%84%e3%83%bc%e3%83%ab

前回からの変更点は以下の通りです。
・先頭の文字を白に
・文字を半角カナ、数字、小文字のアルファベットをランダムで表示

ソースはこちら

'use strict';

let cols = [];
const MIN_FRAME = 1;
const MAX_FRAME = 10;
let frameIdx = MIN_FRAME;
let chars;

function setup() {
  createCanvas(windowWidth * 0.9, windowHeight * 0.9);
  background(0);
  noStroke();
  textAlign(LEFT);
  frameRate(13);
  init();

  const kana = "ヲァィゥェォャュョッアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワン";
  const alphabet = "abcdefghijklmnopqrstuvwxyz"; //"ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  const number = "012345679";
  chars = (kana + alphabet + number).split("");
}

function init() {
  noLoop();
  cols = [];
  let x = 0;
  while( x < width ) {
    const size = parseInt(random(5, 25));
    cols.push(new Colmun(x, size));
    x += size;
  }
  background(0);
  loop();
}

function mouseClicked() {
  init();
}

function draw() {
  if( ++frameIdx > MAX_FRAME ) {
    frameIdx = MIN_FRAME;
  }

  cols.forEach(col => {
    col.draw();
  });
}

class Colmun {
  posX;
  posY;
  posYPre;
  char;
  charSize;
  speed = parseInt(random(1, 5));

  constructor(x, size) {
    this.posX = x;
    this.charSize = size;
    this.posY = 0;
    this.posYPre = -1 * size;
  }

  draw() {
    if(frameIdx % this.speed !== 0) {
      return;
    }
    if(this.posY >= height + this.charSize) {
      this.posY = 0;
    }
    // 半透明の黒い四角で文字を徐々に消す
    fill(0, 0, 0, 20);
    const adjustment = 0; //this.charSize / 2; 文字をCENTERにしたときは左にずらす
    rect(this.posX - adjustment, 0, this.charSize, height);

    /* 文字を描画 */
    textSize(this.charSize);

    // 前回の文字色をlimeで上書き
    fill('lime');
    text(this.char, this.posX, this.posYPre);
    // 先頭の文字は白
    this.char = chars[parseInt(random(0, chars.length - 1))];
    fill('white');
    text(this.char, this.posX, this.posY);

    this.posYPre = this.posY;
    this.posY += this.charSize;
  }
}

p5.js – マトリックスレイン習作02

マトリックスレイン習作01に修正を加えました。
・文字を半角に
・横幅いっぱいに文字を表示
・各列の文字のサイズと落ちるスピードをランダムに変更
・クリックで再描画

ソースはこちら

'use strict';

let cols = [];
const MIN_FRAME = 1;
const MAX_FRAME = 10;
let frameIdx = MIN_FRAME;

function setup() {
  createCanvas(300, 300);
  background(0);
  noStroke();
  textAlign(LEFT);
  frameRate(15);
  init();
}

function init() {
  noLoop();
  cols = [];
  let x = 0;
  while( x < width ) {
    const size = parseInt(random(5, 25));
    cols.push(new Colmun(x, size));
    x += size;
  }
  background(0);
  loop();
}

function mouseClicked() {
  init();
}

function draw() {
  if( ++frameIdx > MAX_FRAME ) {
    frameIdx = MIN_FRAME;
  }

  cols.forEach(col => {
    col.draw();
  });
}

class Colmun {
  posX;
  posY = 0;
  charSize = 15;
  chars = ['ナ', 'マ', 'ス', 'テ'];
  charIdx = 0;
  speed = parseInt(random(1, 5));

  constructor(x, size) {
    this.posX = x;
    this.charSize = size;
  }

  draw() {
    if(frameIdx % this.speed !== 0) {
      return;
    }
    if(this.posY >= height + this.charSize) {
      this.posY = 0;
    }
    // 半透明の黒い四角で文字のフェードアウトを実現
    fill(0, 0, 0, 50);
    rect(this.posX, 0, this.charSize, height);
    // 文字を描画
    fill('lime');
    textSize(this.charSize);
    text(this.chars[this.charIdx], this.posX, this.posY);
    this.posY += this.charSize;
    if(++this.charIdx >= this.chars.length) {
      this.charIdx = 0;
    }
  }
}

p5.js – マトリックスレイン習作01

マトリックスのオープニングみたいなもの(マトリックレインというらしい)を作ってみようと思います。まずは落ちていく文字から。
徐々にバージョンアップしていく予定です。

ソースはこちら

'use strict';

let posY = 0; // 文字の位置
let posX;
let fontSize = 15; // フォントサイズ/移動距離
let strings = ['ナ', 'マ', 'ス', 'テ'];
let stringIdx = 0;

function setup() {
  createCanvas(300, 300);
  background(0);
  noStroke();
  textSize(fontSize);
  textAlign(CENTER);
  frameRate(10);
  posX = width / 2;
}

function draw() {
  fill(0, 50);
  rect(0, 0, width, height);

  if(posY >= height + fontSize) {
    posY = 0;
  }
  fill('lime');
  text(strings[stringIdx], posX, posY);
  posY += fontSize;
  if(++stringIdx >= strings.length) {
    stringIdx = 0;
  }
}

Node.js – コマンドライン引数(パラメータ)について

引数の数

const argc = process.argv.length;

引数へのアクセス

1つ目の引数はインデックス2に格納される

console.log(process.argv[2]);

argv0

コマンドで実行されたときのnode.exeの値がそのまま入るようです。
何を言っているのか分かりにくいので、以下の例を見てください。

index.js

console.log("process.argv0   = " + process.argv0);
console.log("process.argv[0] = " + process.argv[0]);

実行と結果

>node index.js
process.argv0   = node
process.argv[0] = C:\Program Files\nodejs\node.exe

>node.exe index.js
process.argv0   = node.exe
process.argv[0] = C:\Program Files\nodejs\node.exe

>"C:\Program Files\nodejs\node.exe" index.js
process.argv0   = C:\Program Files\nodejs\node.exe
process.argv[0] = C:\Program Files\nodejs\node.exe

参考資料

Electron – アプリ環境構築のひな型

はじめに

Electronのアプリ環境構築のひな型です。
環境はWindows10です。

前提

Node.jsがインストール済みであること。

アプリ構築手順

プロジェクトを作成しElectronインストール

mkdir <プロジェクトフォルダ>
cd <プロジェクトフォルダ>
npm init -y
npm install --save-dev electron

アプリ作成

プロジェクトフォルダ直下に index.js という名前のファイルを作成

"use strict";

// Electronのモジュール
const electron = require("electron");

// アプリケーションをコントロールするモジュール
const app = electron.app;

// ウィンドウを作成するモジュール
const BrowserWindow = electron.BrowserWindow;

// メインウィンドウはGCされないようにグローバル宣言
let mainWindow;

// 全てのウィンドウが閉じたら終了
app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// Electronの初期化完了後に実行
app.on('ready', function() {
  // メイン画面の表示
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // ウィンドウが閉じられたらアプリも終了
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

プロジェクトフォルダ直下に index.html というファイルを作成

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Sample</title>
</head>
<body>
  <p>Hello World</p>
</body>
</html>

動作確認

cd <プロジェクトフォルダ>
npx electron .

コンパイル

electron-packagerインストール

npm install --save-dev electron-packager

EXEファイル作成

--electronVersionpackage.json から判定するので不要

cd <プロジェクトフォルダ>
node_modules\.bin\electron-packager . <アプリ名> --platform=win32 --arch=x64

EXE実行

cd <アプリ名>-win32-x64
<アプリ名>.exe

JavaScript – セレクトボックスのvalue値を指定してoptionを選択する方法

はじめに


JavaScriptでセレクトボックスを選択状態にする方法を調べると selectedIndex を指定する方法を紹介している記事が多いです。

しかし、私の経験上(それほど経験無いですが) selectedIndex で選択状態を制御することはほとんど無く、特定の value 値を持つ option を選択状態にしたい場合がほとんどです。

検索してもなかなか求めているやり方がヒットしないのと、すぐにやり方を忘れるので記事にしました。

value 値で select ボックスの option を選択状態にする方法


document.getElementById('セレクトボックスのID').value = "選択状態にしたいoptionのvalue値";

p5.js – ネオン管

ネオン管のようなものが描けないかと思い、作ってみました。

マウスの上下で線の太さ、左右で鮮やかさ、クリックで色相が変わります。

それっぽくするには、もう少し工夫が必要ですかね。

ソースです。

'use strict';

let hue = 0;

function setup() {
  createCanvas(300, 300);
  noFill();
  background(0);
  colorMode(HSB);
}

function draw() {
  background(0);

  const maxWeight = Math.abs(height / 2 - mouseY) * 2;
  for( let i = maxWeight; i >= 1; i-- ) {
    let brightness = map(i, 1, maxWeight, 100, 50);
    let saturation = map(mouseX, 0, width, 0, 100);
    let alpha = map(i, 1, maxWeight, 1.0, 0.5);
    let weight = map(i, 1, maxWeight, 1, maxWeight);
    stroke(hue, saturation, brightness, alpha);
    strokeWeight(weight);
    line(0, height/2, width, height/2);
  }

}

function mouseClicked() {
  hue = random(0, 360);
}