JavaScript

Teachable Machineを使って画像の判別Webアプリを作る

やりたいことgoogleのAI Modelを作成するサービスであるTeachable Machineを使ってWebアプリを作成します。この記事ではPCのカメラ撮影した画像でトレーニングを行い、PCのカメラの入力に応じて動作が変わるWebアプリを作成します。Teachable MachineでできることTeachable Machineは無料でAIのトレーニングを行いモデルを作成することができます。AIの入力になるのは画像（細かく言うと通常の画像とポーズに分かれています。）もしくは音声データで、出力は分類の確率です。（分類は２種類である必要はありません）単純な例を挙げると猫の画像100枚と犬の画...

2024.11.13

JavaScript

NodeJS環境のGeminiのフィルタの設定を変更する

やりたいことGeminiでは暴力的なことや性的なことを返さないようにフィルタがかけられています。フィルタを変更して暴力的なことや性的なことにも寛容になってもらいます。Geminiの使用方法は以下にまとめています。前座そもそもGeminiはいい子なのでフィルタにかかるようなことはなかなか返してきません。上の回答はフィルタがかかっているからいい子の回答をしているのではなく、フィルタの設定に関係なく上記のように返答します。（もちろん全く同じ回答ではありませんが）フィルタがかかるような回答をしてもらうには役割を演じてもらうといいようです。実際にフィルタがかかると上のように何も回答が返ってきません。コン...

2024.10.26

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で合成音声で読み上げがきるようなので試してみます。実装以下の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

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

Viteのプロジェクトを作成するBat

注意この記事は古く、Viteのプロジェクトの構成が現在と異なります。以下の記事を参照してViteのそのものの仕組みでプロジェクトを作成することをお勧めします。やりたいこと以下のページでViteのプロジェクトを作成してみましたが手動で行うことが多いので、自動化する。batによるプロジェクト作成フォルダの作成プロジェクトに使用するフォルダを作成します。今回は以下のフォルダを作成しました。F:\TS\Vite_autobatの作成作成したフォルダにCreateViteProject.batファイルを作成します。作成したCreateViteProject.batに以下の内容をペーストして保存します。c...

2024.08.09

JavaScript

WebPackが難しいのでViteでバンドル

やりたいことVite(ヴィート)でバンドルをします。バンドルとは複数のJavaScriptファイルを一つのJavaScriptファイルにまとめることです。webpackが有名ですが、設定が難しく、また開発が終了しているためViteを使用してみます。環境node.js: v20.16.0Vite: 5.3.4プロジェクトの作成任意のプロジェクトのフォルダを作成して以下のコマンドを実行します。npm init vite@latest以下のように聞かれたらｙを入力してエンターを入力します。Need to install the following packages:create-vite@5.4.0...

2024.08.07

JavaScript

Visual studio codeからローカルサーバーを起動する

やりたいことVisual studio codeからローカルサーバーを起動、HTMLの確認を行いたい。なぜ必要なのか？ローカルで作成したHTMLファイルをchromeなどのブラウザで表示することで、動作確認を行うことができます。しかし一部の機能はローカルファイルからは実行することはできません。そのためローカルにHTTPサーバーを起動し作成したHTMLファイルをサーバー上のファイルとしてブラウザから読広必要があります。例えばmoduleのjava scriptをローカルのHTMLから読み込もうとした場合、以下のようなエラーが表示され、動作しません。（Chromeの起動パラメータで動作するようにで...

2024.05.06

JavaScript

JavaScriptでサーバー上かローカルでの実行か知る

やりたいことJavascriptでサーバ上で実行されているかローカルで実行しているのか確認します。（ローカルではテストコードを動かし、サーバ上では本番のコードを動かすときなどに使用しています）プロトコルによる確認URLのプロトコルパートで確認できます。ローカルで動作するときはURLのプロトコルは”file:”、サーバ上で動作する場合は”http:”もしくは”https:"です。そのため以下のようなコードで確認することができます。 if (location.protocol == "file:") { //////ローカルで実行} else { //////サーバ上で実行}結果Javascrip...

2024.01.02

JavaScript

Javascriptでテキストファイルをドラッグアンドドロップで読み込む

やりたいことJavascriptでローカルに保存されているテキストファイルをドラッグアンドドロップ読み込みます。ファイルセレクタで読み込む場合は以下のページを参照。ファイルシステム APIによる読み込み以下のhtmlで表示される500x500の領域にファイルをドラッグアンドドロップすることで、読み込みをすることができます。<!doctype html><html lang="ja"><head> <meta charset="utf-8" /> <title>text読込</title></head><body> <div id="droparea" style="border:solid;w...

2024.01.02

JavaScript