Tag

JavaScript

JavaScript に関する技術記事の一覧です。Copy & Paste Engineerで公開している実装メモ、検証、トラブルシュートをまとめています。

JavaScriptで音声録音時に無音を検知して自動停止する方法

Web Audio APIを使用して、マイク入力から無音を検知し、5秒間続いたら録音を自動終了する実装方法を解説します。

【HTML】ポップアップを実現するpopoverの使い方

「popover属性」を使えば、JavaScriptを使わずに簡単なポップアップ(モーダルやツールチップ)を実装できます。

【Javascript】 Web Audio API で音を操ろう!波形・周波数・音量をリアルタイム調整

今回は Web Audio API を使って、ブラウザ上で音を鳴らし、リアルタイムで「波形」「周波数」「音量」をコントロールできるサンプルを紹介します。

【Javascript】 ブラウザだけで音声合成!Web Speech APIの使い方とサンプルコード

「Web Speech API」を使えば、追加ライブラリなしでテキストを音声に変換することが可能です。

SVGで実現するインタラクティブ処理

Gemini APIを利用するためには、APIキーが必要です。Google AI StudioでGemini APIキーを取得する手順と、その後の利用方法についてメモします。

【Node.js】dependency-cruiser 依存関係を可視化する方法

dependency-cruiserは、JavaScript/TypeScriptプロジェクトのモジュール依存関係を解析・可視化するツールです。

【Node】PDFに表紙ページを追加して画像を貼り付ける

技術同人としてPDFを作ったのですが表紙用の画像うまく貼り付けることができなかったので自作してみました。

【Elixir】Phoenix 独自に定義したJavaScriptを実行する方法

Elixir Phoenixで独自に定義したJavaScriptを実行する方法メモ。

【Elixir】Phoenix push_event を活用してJavaScriptを実行する

Elixir push_event を活用してJavaScriptを実行する

【Elixir】クラスタ内のノードの起動、停止を感知する方法

Elixir でクラスタ構成でクラスタ内のノードの起動、停止を感知する方法

【JavaScript】Handtrack.jsを使った手のリアルタイム検出

Handtrack.jsを使った手のリアルタイム検出して遊ぶ

【Javascript】Stream API を使って PHP から現在時刻を表示するサンプル

JavaScriptのStreams APIとPHPを使って、1秒ごとに時刻を更新する方法を説明します。

【Vue3 + Typescript】Pinia のデータを永続化する方法

Vue3 & Typescript 環境で Pinia のデータを永続化する方法メモ

【TypeScript】JSONを自動的にTypeScriptの型に変換してくれる json2ts

TypeScript で一々型を作るのは面倒と言う時にJSONを入れると自動的にTypeScriptの型に変換してくれる json2ts のご紹介

【TypeScript】axios の接続先のbaseurlなどの設定を行う

axios を使用する際に接続先のbaseurlなどの設定を行う方法

【Vue】Viteのホットリロードが動かない時の対応方法

Dokcerで Vite + Vue3 + TypeScript で構成したフロントエンドがホットリロードが動かない時の対処法メモ

【React + TypeScript】state が反映されないときは useEffect を使用する

state が反映されないときは useEffect を使用する

【GitHub】GitHub Pages で React 公開時の404対策

GitHub Pages で React 公開時の404対策メモ

【React】サブディレクトリでReactを公開する

Reactをサブディレクトリ上で公開したい場合はビルドしたものを配置するだけではできません。Reactをサブディレクトリで公開する方法。

【React + TypeScript】イベントから型を指定して渡す方法

Material UI を使用している際 onChange イベント時にせっかく TypeScript を使用しているのに unknown の型指定しか出来なかったため、対策時のメモ

【React + TypeScript】useState を利用してリアルタイムに入力値を反映させる

useState を利用してリアルタイムに入力値を反映させるメモ

【React + TypeScript】axiosを使ってAPIに接続する

【React + TypeScript】axiosを使ってAPIに接続するメモ

【React】React.FC、React.VFCを使わない方が良い?

React.FC、React.VFC 色々調べてみたらどちらも使わないほうが良いのではないかと考えになりました

【React + Webpack】You may need an appropriate loader to handle this file type 解決方法

React + Webpack の環境で You may need an appropriate loader to handle this file type の解決方法メモ

【TypeScript + Webpack】TypeScript emitted no output エラー解決

TypeScript & Webpack 環境で TypeScript emitted no output のエラーが出たので解決方法メモ

create-react-app で hotreload させる

docker環境で create-react-app で作った環境で hotreload が効かなかったのでその対処方法

【React + TypeScript】 react-router-dom を使ってルーティングを実装する

【React + TypeScript】 react-router-dom を使ってルーティングを実装するためのメモ

無料で使える WebSocket サーバー「Achex」

無料で使える WebSocket サーバー「Achex」を使用してみました。

【JavaScript】PCのスクリーンキャプチャを取得する

PCのスクリーンキャプチャを取得する

【JavaScript】カメラ・マイクを取得して画面に表示する

Web上でカメラ・マイクを取得、表示・停止するだけ。

【Electron】ウィンドウの大きさを設定、制限する

Electronでウィンドウの大きさを設定、制限する方法

【Electron】メニューバーを非表示にする方法

Electron でメニューバーを非表示にする方法

【Electron】Ubuntu で Windows インストーラー作成時に出る wine is required エラー対処方法

Electron で Ubuntu Windows インストーラー作成時に出る wine is required エラー対処方法

【Electron】Windows用実行ファイルを作成

Electron で作ったものをWindows用の実行ファイルにします。

【Electron】Hello,World! を表示するまで

Electron で Hello,World! を表示するまでを行っていきます。

【Electron】サンプルアプリ一覧

Electron で作られたアプリの一覧

【Electron】Running as root without --no-sandbox is not supported. エラーのの対処法

Electron で Running as root without --no-sandbox is not supported. エラーの対処法

【Ubuntu】Node.js をインストール

UbuntuにNode.js をインストールする備忘録