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
Phaser3

複数のSceneを並べて表示(Phaser3)

やりたいことPhaser3で複数のシーンを並べて表示します。以下の用にmainSceneとSecondSceneを並べて表示するようします。800ｘ600のmainSceneの表示領域を左側600ｘ600に限定し、右側に200x600のSecondSceneを表示します。実装準備mainSceneの作成MainSceneは以下の用に実装しました。サイズは800x600です。全体を半透明の赤の長方形で埋めています。(わかりやすくするために背景は灰色にしています) class mainScene extends Phaser.Scene { create () { this.add.rectang...
2024.08.29
Phaser3
electron

Electronのメニューを消す

やりたいこと下の記事にてElectronを使ってWebページをWindowsの実行ファイルにビルドしてみました。しかし、下の用にメニューが表示されます(File, Edit…の部分)。基本的に不要(リリースするときはない方がいいDeveloperToolの表示もあります)ですので消したいと思います。実装先述のページのmain.js(Electronのエントリーポイント)は以下の通りです。const { app, BrowserWindow } = require('electron/main')const createWindow = () => { const win = new Brows...
2024.08.25
electron
nodejs

npmでのパッケージ管理の基本

やりたいことNode.jsやJavaScript/TypeScriptの調べ物をしているときなどによく出てくるnpmに関して簡単に説明します。ここではパッケージ管理に関しての基本をまとめます。NPMとはNPMはNode.jsで使用されるパッケージ管理システムです。(実際にはパッケージ管理だけでなくパッケージの実行などいろいろな機能があります)公式ページインストールNPMによるパッケージのインストールは以下のコマンドにより行います。npm install パッケージ名installはadd, i, in, ins, inst, insta, instal, isnt, isnta, isntal...
2024.08.24
nodejs
electron

Electronを使ってWebページからWindowsの実行ファイルを作る

やりたいこと下のElectronを使ってWindows向けのアプリケーションを作成します。electronとはelectronはJavaScript/HTML/CSSで作成したWebページから実行ファイルを作成します。Windows/MAC/Linux向けの実行ファイルが作成できますが、ここではWindows向けの実行ファイルを作成します。詳細は以下の公式ページ。プロジェクトの作成事前準備Node.jsが必要です。以下のリンクから環境にあったNode.jsをインストールします。プロジェクトの作成任意の作業フォルダを作成して以下のコマンドを実行します。npm init -yElectronでの実...
2024.08.24
electron
次のページ