javascript

nodejs

Windows上のNode.jsで80ポートを使用する

やりたいこと下の記事ではNode.jsを使用してHTTPサーバを起動しました。作業するに当たりUnix系のOS上でNode.jsを使用すると８０ポートで起動できない。という記事を見かけました。しかしWindows上で80ポートが使えるかどうかは明記されていません。気になったので試してみました。環境Node.js　v20.16.0使用したコード使用したのは以下のコードです。上記の記事のポートのみを変更しています。import http from 'node:http';const server = http.createServer((req, res) => { res.writeHead(2...
2024.10.31
nodejs
nodejs

Gemini+NodeJSで遊ぶまとめ

やりたいことGoogleのAIであるGeminiをNodeJSで使用する記事のまとめです。オフィシャル記事まとめNodeJSで環境を作成してGeminiから回答を得るところまでHTMLで入力、Gemeniからの回答を出力するところまでフィルタ(SafetySetting)の設定方法
2024.10.26
nodejs
nodejs

NodeJS+GeminiにGUIを実装する

やりたいこと下の記事でNodeJSでGeminiを使用できるようにしました。しかしGUIがなく実用性は皆無なのでGUIを実装します。おさらい前回作成したHTMLは以下の通りです。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Gemini</title> </head> <body> <script type="module" src="main.js"></script> </body></html>同様にJSは以下の通りです。let api_key = "Your API key"import { GoogleGener...
2024.10.10
nodejs
nodejs

NodeJSでGeminiの実装

やりたいことGoogleの生成AIであるGeminiをNodeJSで使用します。実装API key の作成以下のページにアクセスしてAPI keyを取得しますプロジェクトの作成ここでは以下の記事を用いてNodeJS+Viteのプロジェクトを作成しました。続いて以下のコマンドを実行し、generative-aiをインストールします。npm install @google/generative-aiHTMLの作成Srcフォルダにindex.htmlを作成します。内容は以下のようにしました。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <ti...
2024.10.09
nodejs
Android

Android上のWebViewをデバッグする

やりたいことAndroid上で表示しているWebView(Html、JavaScript)をデバッグします。細かく言うと以下のことをします。作成したモバイル向けのWebページのデバッグアプリ内で作成若しくは変更したWebページをデバッグデバッグ準備Android側の準備開発者向けオプションを有効にします。（開発者向けオプションを有効にする方法は以下をご参照ください）開発者向けオプションのUSBデバッグをオンにします。Windows側の設定adb(AndroidStudio)をインストールします。（手元にadbがインストールされていないPCがないため必須か不明ですが、公式のドキュメントにadb経...
2024.10.09
Android
Android（JAVA）

【有料】NodeJsで作成したWebアプリをAndroidアプリにする。

やりたいことNodeJsで作成したWebアプリをAndroidアプリにします。（サーバサイド（バックエンド）は含みません）ここでは以下のページで作成したNodeJS + Vite + Phaser 3のテンプレートで試します。すべてのJavaScriptアプリケーションの動作保証するものではありません。実装Webアプリの準備AndroidアプリにするWebアプリを用意します。上にあるようにここではNodeJS + Vite + Phaser 3の環境を作成し、以下のコマンドを実行しWebアプリを作成しました。npm run build上記の手順でdistフォルダに以下のようなファイルが作成され...
2024.10.09
Android（JAVA）
Phaser3

不連続なSpliteでアニメーション(Phaser3)

やりたいことPhaser3でキャラクタにアニメをつける場合以下のように連続したSplite（下の例だとdudeの0～3）からアニメーションを作成します。 this.anims.create({////左移動時のアニメーション key: 'left', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }), frameRate: 10, repeat: -1 });しかし連続していないspliteを用いたい場合もあります。ここでは連続していないSpliteでアニメーションを作成します。上記のチュートリアルの詳細...
2024.10.03
Phaser3
ブラウザ

Chrome拡張機能のcontent_scriptsで実行されるScriptをデバッグする

やりたいこと以下のページで特定のページでJavascriptを実行する拡張機能を作成しました。"content_scripts"で実行するScriptのデバッグをします。デバッグ方法通常のページのデバッグと同様にF12もしくはCtrl+Shit+IでDevToolを開きます。画面上部のSourcesタブを選択後に”Contens Scripts”タブを選択します。”Contens Scripts”タブが表示されない場合は>>をクリックしてから”Contens Scripts”をクリックします。”Contens Scripts”タブに拡張機能で使用するJavaScriptがリストされます。リスト...
2024.10.03
ブラウザ
ブラウザ

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
次のページ