JavaScript

JavaScript

【有料】Canvasタグに表示されている画像をPHPでサーバに保存する。

やりたいことHTMLのCanvasタグに表示されている画像をPHPでサーバに送信してサーバに保存します。懐かしのお絵描き掲示板の実装などにどうぞ。実装クライアント（Javascript）側Javascript側では以下のように実装します。HTMLにはIDが”test_canvas”のcanvasタグがある前提です。送信先はupload.phpです。const canvas = document.getElementById("test_canvas")let msg_body = { acceptImage: canvas.toDataURL("image/png")}fetch('uploa...
2025.04.29
JavaScript
JavaScript

JavaScriptでユニークな文字列（UUID）を作成する。

やりたいことJavaScriptでユニークな文字列（UUID）を作成します。具体例Classのにユニークな文字列を持たせてポインタの代わりにインスタンスの確認に用います。実装ユニークな文字列（UUID）は以下の１行で作成できます。（呼び出し毎に異なる文字列を返します）const uuid = self.crypto.randomUUID();返り値は'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'のフォーマットです。（例：'d6436922-c138-4ef3-bab6-5de2546f847e'）資料を読んだのですが、どのようにユニークを保っているのかわかりません...
2025.04.23
JavaScript
JavaScript

【有料】SVGをJavaScriptでインラインにする

やりたいことSVGファイルをJavaScriptで操作するにはSVGファイルをHTMLに埋め込む（インラインにする）必要があります。しかしSVGファイルを更新した際に毎回、HTMLを更新するのは手間であり、ミスを誘発します。ここではJavaScriptでSVGファイルを読み込み、HTMLに埋め込む方法を紹介します。具体例以下のHTMLファイルにSVGをインラインで埋め込みます。<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-wid...
2025.04.15
JavaScript
JavaScript

【有料】ViteでGeminiの画像生成

やりたいことGoogleの生成AIであるGeminiをNodeJSで使用して、画像生成を行います。実装はフロントエンドのみでバックエンドはGoogleにあるGeminiを使用します。GoogleのAPIキーを発行する必要があります。注意：この記事を書いて時点でGeminiの画像生成はプレビュー機能です。今後仕様等変更になる可能性があります。この記事ではNodeJSを用いてクライアントサイドでの実装を行っています。しかしこの方法はAPI KEYが使用者に漏れる可能性がありますのでGoogleから推奨されていません。個人的な使用や、実験にとどめてください。環境Vite：6.2.0@google/g...
2025.04.15
JavaScript
JavaScript

イベントトリガで一回だけ実行する(JavaScript)

やりたいことJavaScriptでイベントをトリガにして処理を行う場合、addEventListenerを使用しますが、１度だけしか実行したくないときがあります。（準備が終わったイベントで初期化とか） removeEventListenerを使用すればいいのですが、全く同じlistenerを設定しなければならず厄介です。（メンテでしくったり）この記事ではremoveEventListenerを使用せずに１回のみ処理を行う方法を紹介します。実装通常addEventListenerは以下のように記述すると思います。element.addEventListener(event, callback);...
2025.03.11
JavaScript
JavaScript

JavaScriptでOBSを操作

やりたいことJavaScriptでOBS操作します。注意点この記事で紹介する方法は大きく二つの問題があります。作業する前にご確認ください。注意点1：普通のブラウザから使えるわけでないOBSの外部のブラウザ（ChromeやFireFox）で使用できるわけではありません。使用するにはOBSないのブラウザソースに作成したページを表示する必要があります。注意点2：できることが限られているできることはかなり限られています。シーンの移動、トランザクションの移動、録画、配信の開始終了ができますが、音量の変更やソースの表示非表示などはできません。詳しくは以下のページを参照してください。使用できるイベント、機能...
2025.03.11
JavaScript
JavaScript

javascriptでemをpxに変換

やりたいことCSSなどで使用するemをpxの単位に変換します。コード以下の関数にemのサイズを渡すとpxのサイズが返ってきます。第2引数は変換するオブジェクトを表示するエレメントを渡します。function em2px(em_size, ele) { const parentElement = ele.parentElement || document.body; const px_size = parseFloat(getComputedStyle(parentElement).fontSize); return px_size * em_size;}コードの説明以下の行で基準になるDOMか...
2025.02.13
JavaScript
JavaScript

webページからAivisSpeechを使用した読み上げを行う

やりたいこと以下のページではJavaScriptの基本機能であるSpeechSynthesisを使用して読み上げを行いましたが、発音がいまいちでした。そこでより発音のきれいなAivisSpeechを使用して読み上げを行います。前提今回はローカルのWebアプリ（からのアクセスを想定しています。File://も使用できません。）を例に行います。これはCORS Policyの問題のせいです。設定の変更により他のＰＣからもアクセスできるようですが試していません。環境AivisSpeech Engine version 1.0.0AivisSpeech-Engine（サーバ）の起動AivisSpeech...
2025.01.27
JavaScript
JavaScript

【対策コードあり】ローカルファイルをCanvasに表示する

やりたいことローカルの画像ファイルをHTMLのCanvasに表示します。検索するといくつか引っかかるのですが、試してみたところ動作しませんでした。（エラーなどは出力されずCanvasになにも表示されませんでした。）環境Chrome：131.0.6778.86試したコードHTML<input type="file" id="file" accept="image/png, image/jpeg"></div><canvas id="canvas"></canvas>JavaScriptdocument.getElementById("file").onchange = (event) => { ...
2024.11.27
JavaScript
JavaScript

Xにポストするボタンをウェブサイトに載せる

やりたいことウェブサイトにX（旧ツイッター）にハッシュタグ付きのポスト（ツイート）するためのボタンを配置します。コードの取得以下のサイトにアクセスします。”A Hashtag, like #whatsHappeing”を選択します。選択を行うと、ページ下にスクロールしますがいったんページ上部にスクロールして戻ります。上で”A Hashtag, like #whatsHappeing”を選択したエディットボックスが以下のようになっているので、ポストしたいハッシュタグに変更します。入力後に忘れずにリターンをしてください。コードが更新されません。ページ下にスクロールします。必要に応じて”set cu...
2024.11.26
JavaScript
次のページ