Category
Web
Web に関する技術記事の一覧です。Copy & Paste Engineerで公開している実装メモ、検証、トラブルシュートをまとめています。
JavaScriptで音声録音時に無音を検知して自動停止する方法
Web Audio APIを使用して、マイク入力から無音を検知し、5秒間続いたら録音を自動終了する実装方法を解説します。
【Python】DjangoのCSRFエラー「403 Forbidden」解決方法
DjangoでフォームやAPIリクエストを送信したとき、`403 Forbidden - CSRF verification failed. Request aborted.` というエラーに遭遇したことはありませんか？
Stable Hordeで無料画像生成！APIキーなしでもOKな非同期スクリプト
Stable HordeをGoogle Colabで手軽に使って画像生成！簡略スクリプトと、非同期処理の仕組みを解説。
【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キーを取得する手順と、その後の利用方法についてメモします。
【AI】Google Gemini の無料APIキーを取得する方法
Gemini APIを利用するためには、APIキーが必要です。Google AI StudioでGemini APIキーを取得する手順と、その後の利用方法についてメモします。
【Google Colab】ランタイムを再起動する
Google Colab や Jupyter Notebook でカーネルをプログラム的に終了・再起動する方法として利用されるこのメソッドをご紹介します。
【Python】簡単にファイルの差分を比較する方法：HTMLで色付き・行番号付きの表示を実現
ファイルの内容を比較し、その差分を視覚的に分かりやすく表示したい場面はよくあります。コードの変更点を確認したり、設定ファイルの違いをチェックしたりする際に便利です。
CSSでテキストを「...」で省略表示するシンプルな方法
長いテキストを省略表示したいときに、CSSだけで簡単に「...」を付ける方法をご紹介します。
Bootstrap 5で作るレスポンシブ対応ヘッダーメニューバー
Bootstrap 5で簡単にレスポンシブ対応のヘッダーメニューバーを作成するメモ
Google ColabでElixirプログラミングを始める方法
Google Colabは、ブラウザ上でPythonコードを簡単に実行できる環境です。しかしPython以外のプログラミング言語、たとえばElixirを動かすことも可能です。
【ChatGPT】ChatGPTのブラウザ情報
ChatGPTのブラウザ情報を調べてみました。
【CSS】文字数を超えた際に「･･･」を表示する方法
CSSを使ってテキストが一定の文字数や行数を超えた場合に「･･･」（省略記号）を表示する方法はいくつかあります。
【CSS】5段階評価の星評価で細かな表示を行う方法
星の評価システムで3.5など中途半端な値に簡単に対応する方法
【CSS】よくある星による評価システム
今回はよくある星による評価システムを作成する方法です。
【CSS】ボタンみたいなチェックボックスを作る
今回はCSSを使用してボタンのようなチェックボックスを作ります。
【Elixir】Phoenixでのエラー解決: Stateful ComponentsのHTML Root Tag
ライブコンポーネント作成時に出たエラーの解決方法について調べてみました。
【Javascript】Stream API を使って PHP から現在時刻を表示するサンプル
JavaScriptのStreams APIとPHPを使って、1秒ごとに時刻を更新する方法を説明します。
【Elixir】HTTPoison を使って API などの通信を行ってみる
Elixir で HTTP通信ができる HTTPoison を使って API などの通信を行ってみる
【PHP】ブラウザで実行できるPHP環境のご紹介
PHPをブラウザで実行できるPHP環境のご紹介
【PHP】DOMDocument を利用して HTMLを解析する
PHP で DOMDocument を利用して HTMLを解析する
【Flutter】url_launcher でブラウザを開く
Flutter url_launcher でブラウザを開く
【Elixir】Livebook でサクッと遊ぼう！
Elixer には Livebook というブラウザ上で動作するリッチな実行環境があります。今回はそれを使ってみます。
【Docker】Swagger環境を構築する
Docker で Swagger環境を構築するメモ。
【Laravel】l5-swagger でAPI仕様書を簡単に作ろう
Laravel で l5-swagger を使用して簡単にSwaggerのAPI仕様書を作る
【Laravel】APIのエラーメッセージ「The given data was invalid.」を多言語か対応する
Laravel のAPIのエラーメッセージ「The given data was invalid.」を多言語か対応する。
【Ubuntu】apt-get update をしたら Google Chorme のGPGエラーが発生した。
apt-get update をしたら Google Chorme のGPGエラーが発生したので対処方法をメモ
【Docker】ブラウザ上で Docker を実行できる 「Play with Docker」を使ってみる
ブラウザ上で Docker を実行できる 「Play with Docker」を使ってみる
【React + TypeScript】axiosを使ってAPIに接続する
【React + TypeScript】axiosを使ってAPIに接続するメモ
LINE で URL を外部ブラウザで開かせる方法
LINE で URL を外部ブラウザで開かせる方法
【PHP】PHPで簡単スクレイピング
PHPで簡単にスクレイピングを始める
【Git】error: RPC failed; curl 92 HTTP/2 stream 0 was not closed cleanly: CANCEL (err 8)
Git で error: RPC failed; curl 92 HTTP/2 stream 0 was not closed cleanly: CANCEL (err 8) が発生した時の対処
【PHP】TCPDF で HTML 上で改ページを行う
PHP の PDF 出力用ライブラリ TCPDF で HTML 上で改ページを行う方法
【Ubuntu】root ユーザでは Google Chrome が起動しない
Ubunt で root ユーザでは Google Chrome が起動しない現象
【PHP】PHPでAPIドキュメント（API Blueprint & aglio）をスクレイピングする。
API Blueprint & aglio で出力されたAPIドキュメントをPHPを利用してスクレイピングしてみます。
GitHub の HTML を Web上でプレビューする方法
GitHub 上にある HTML は GitHub で見るとコードとして表示されますが、それをWeb上でプレビューする方法。
【PHP】PHPを使って簡単にスクレイピングしてみる
PHP を使用して簡単にスクレイピングをしてみる
【Firefox】アドオンまとめ
今現在Firefoxで自分が使用しているアドオンまとめ
【PHP】PHPUnit の出力ログを見やすくHTMLに変換
PHPUnit の出力ログをXML形式から見やすいHTMLに変換する方法メモ
Laravel Dusk テスト間でセッションデータを破棄する方法
Laravel Duskだと1クラス内でのテストケースだと同一ブラウザがテストされてしまいます。それを防ぐための対策です。
【Firefox】タスクマネージャーを開いて各タブの使用メモリなどを確認する方法
Firefoxが重いと感じた時にタスクマネージャーを開いてどのタブがメモリを使っているかなどを確認をする方法