ブラウザ

Chromeの拡張機能にオプションページを追加する。

やりたいことChromeの拡張機能にはアイコンをクリックすると以下のように”オプション”がメニューに表示され、オプションページを表示することができるものがあります。この記事では上のように拡張機能にオプションを追加します。Chromeの拡張機能作成の基本は以下のページをご参照ください。実装manifestの修正manifestファイルに以下の設定を追加します。 "permissions": ["storage"], "options_page": "options.html",permissionsのStorageは、設定を保存/読み込みするための権限です。オプションページの作成メニューオプショ...
2024.10.03
ブラウザ
Phaser3

Vite + Phaser 3 のテンプレートで複数のHTMLを作成する

やりたいこと以下の記事で作成したVite + Phaser 3 のテンプレートで複数のHTMLをビルドの対象にします。具体的にはProjectディレクトリにあるindex.html以外のHTMLをビルド対象にして、npm run buildでビルドした際にhtmlをビルド、distフォルダにコピーされるようにします。ここではProjectディレクトリにあるindexA.htmlを追加することを例にします。設定の変更以下のファイルを開きます。vite¥config.prod.mjs以下の内容になっていると思います。import { defineConfig } from 'vite';const...
2024.10.01
Phaser3
ツール

文字列からハッシュ値(SHA)を作成するツール

やりたいこと文字列から"SHA-1"、"SHA-256"、"SHA-384"、"SHA-512"のハッシュ値をツールを作成しました。何に使うか？簡易的に固定のパスワードを作成する場合などは、入力されたパスワードと保存したハッシュ値と比較を行います。保存するハッシュ値を作成するためにこのページのツールを使うと簡単です。(このツールは１６進数の文字列にして出力を行っています。詳細の変換/実装方法は以下の記事を参照してください。) ツールSHA-256SHA-1SHA-384SHA-512document.getElementById("hash_btn").onclick = ()=>{ dige...
2024.09.29
ツール
JavaScript

javascriptでハッシュ(“SHA-256”)の値を取得

やりたいことjavaScriptでハッシュ("SHA-256")の値を取得します。実装以下の関数でハッシュを取得できます。async function digestMessage(message) { const msgUint8 = new TextEncoder().encode(message); // (utf-8 の) Uint8Array にエンコード const hashBuffer = await crypto.subtle.digest("SHA-256", msgUint8); // メッセージのハッシュ値を取得 const hashArray = Array.from(n...
2024.09.29
JavaScript
JavaScript

JavaScriptで合成音声で読み上げを行う

やりたいことjavaScriptで合成音声で読み上げがきるようなので試してみます。実装以下のmozillaのページに例のコードがあるのですが、HTML部分がなかったのと気になる箇所があったので動作するように修正しました。修正したコードは以下の通りです。コメントも追加しています。<html><body> <form> <input type="text" name="text" class="txt" value="読み上げます" required><br><br> <select name="example"></select><br><br> <input type="range" id="...
2024.09.25
JavaScript
JavaScript

import functionで読み込んだClassを使う(JavaScript)

やりたいことDynamicでmoduleを読み込みたい場合import文ではなく import functionでモジュールを読み込みます。しかし単純に書いても思った通り動作しませんでした。動作するように修正します。前提修正前以下のimport文をimport functionに書き換えます。import { myClass } from './myClass.js';myClass.jsからmyClass クラスを読み込みます。ダメな例以下のコードを試してみましたが動作しませんでした。const myClass= import ('./myClass.js')動作するコード結論から書くと以下...
2024.09.24
JavaScript
nodejs

npm npxのコマンドで失敗する（errno -4058）

やりたいことnpm/npxのコマンドを実行した際にerrno -4058のエラーが表示され失敗しました。具体的にはnpx create-next-app@latestを実行したときに以下のエラーが表示されました。npm error code ENOENTnpm error syscall lstatnpm error path C:\Users\XXXXXXXXX\AppData\Roaming\npmnpm error errno -4058npm error enoent ENOENT: no such file or directory, lstat 'C:\Users\XXXXXXXX...
2024.09.22
nodejs
Phaser3

GameObjectに対するマウスイベント一覧(Phaser3)

やりたいことPhaser3でGameObjectに対するマウスイベントをまとめます。イベントの受け方まずゲームオブジェクトにマウス操作を許可しますGameObject.setInteractive();ドラッグを行う場合は以下のオプションが必要です。GameObject.setInteractive({ draggable: true });イベント時に処理は以下の用に紐づけます。GameObject.on(イベント名, function)); 例： const rect = this.add.rectangle(400, 300, 100, 100, 0xff0000); rect.setI...
2024.08.31
Phaser3
Phaser3

ドラッグでオブジェクトを移動する(Phaser3)

やりたいことPhaser3でオブジェクトをドラッグで移動します。実装準備シーンにドラッグで動かすオブジェクトを追加します。ここではRectangle(長方形)を追加しました。 create () { const rect = this.add.rectangle(400, 300, 100, 100, 0xff0000); }以下のように表示されます。(シーン全体は800ｘ600なのでシーンの中心に表示されています。)ドラッグの実装まずはrect.setInteractive({ draggable: true })を呼び、作成したRectにドラッグ操作を許可します。 create () { ...
2024.08.30
Phaser3
Phaser3

別のSceneの値を取得/更新する(Phaser3)

やりたいことPhaser3で異なるSceneの値の読み書きを行いたい。ここでは下のページで作成した二つのシーンを並べて表示するコードを例に行います。コードは以下の通りclass secondScene extends Phaser.Scene { create (data) { this.cameras.main.setSize(200,600); this.cameras.main.setPosition(data.x,data.y) this.add.rectangle(0, 0, 200, 600, 0x00ff00, 0.5).setOrigin(0); }}class mainSce...
2024.08.30
Phaser3
次のページ