シンプルで使いやすいブラウザ画面の録画ツール。 - Qiita
コードをメモ帳などのテキストエディタに貼り付け、ファイル名を「index.html」として保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。 機能の流れ ページが読み込まれると、録画開始ボタンが表示されます。 「録画開始」をクリックすると、画面録画が始まります。共有するページを選択。 共有停止で録画終了。 再度「録画終了」をクリックすると録画が終了し、録画した内容がMP4ファイルとしてダウンロードフォルダにダウンロードされます。 シンプルで使いやすいブラウザ画面の録画ツールが実現しました！ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
ブラウザでWebカメラの映像の録画。ダウンロードリンクが表示され、MP4形式で動画をダウンロードできます。 - Qiita
Webカメラの映像の録画。ダウンロードリンクが表示され、MP4形式で動画をダウンロードできます。 説明: Webカメラの映像取得: navigator.mediaDevices.getUserMediaを使って、ユーザーのWebカメラとマイクから映像と音声を取得しています。 録画の開始と停止: 録画はMediaRecorder APIを使用して実装されています。startButtonを押すと録画を開始し、stopButtonを押すと録画が停止します。 録画データの保存: 録画が終了すると、録画されたデータはBlob形式に変換され、それをダウンロードリンクとして提供します。 ダウンロードリンク: 録画が終了すると、ダウンロードリンクが表示され、MP4形式で動画をダウンロードできます。 コードをメモ帳などのテキストエディタに貼り付け、ファイル名を「index.html」として保存します。その後
CSS変数がもっと便利になる新しい記述方法、CSSの次世代変数@propertyがすべてのブラウザにサポートされました
CSSの@propertyがFirefoxにサポートされ、デスクトップ・スマホのすべてのブラウザでサポートされました。 @propertyは次世代変数と呼ばれるもので、これまでの変数（カスタムプロパティ）の使い勝手が大幅に向上します。@propertyによるカスタムプロパティの記述方法、@propertyを使ったCSSのテクニックを紹介します。 @property: Next-gen CSS variables now with universal browser support by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに @propertyのメリット @propertyによるカスタムプロパティの記述方法 @propertyの使い方: きらめくグ
【2024年夏】ブラウザ拡張機能開発を加速するフレームワーク・ツール3選をコードベース付きで紹介！
本記事では、ブラウザ拡張機能開発を加速させる、個人的に注目な3つの拡張機能開発フレームワーク・ツール（WXT、Plasmo、Extension.js）を紹介します。 サンプル拡張機能の実装を通して、それぞれの特徴、セットアップ方法、実際の開発フローを見ていきます。お好みの拡張機能開発ツールが見つかれば嬉しいです。 各フレームワーク・ツールの紹介 WXT WXTは、Viteベースのブラウザ拡張フレームワークです。次のような特徴を持っています（トップページから抜粋）。 クロスブラウザ対応 Chrome、Firefox、Edge、Safari、その他Chromiumベースのブラウザ Manifest V2、V3の両方に対応 開発モードでのHMRと、開発用ブラウザの自動起動 内部的にChrome Launcher等を使用 ファイルベースのエントリーポイントでマニフェストを自動生成 Nuxt風の自動
JavaScriptのthisって何this? - Qiita
はじめに こんにちは。kosukein38です。 JavaScriptでthisを書いて毎回これ何参照してるんだっけ?ってなるので、軽くまとめてみました。 対象者 thisって何this?な人 内容 JavaScriptにおけるthisは、現在の実行コンテキストに依存する特別なキーワードです。 その値は、関数がどのように呼び出されるかによって異なってきます。 単独関数内のthis 単独関数が呼び出された場合（つまり、オブジェクトのメソッドとしてではなく）、thisはグローバルオブジェクト（ブラウザではwindow）を参照します。 ただし、strictモードではthisはundefinedになります。
「スクリーン上でブラウザのウィンドウを動かしたら描画に影響」「2つのブラウザのウィンドウの一方を動かすと他方に影響」という方向の実装作品の技術メモ - Qiita
「スクリーン上でブラウザのウィンドウを動かしたら描画に影響」「2つのブラウザのウィンドウの一方を動かすと他方に影響」という方向の実装作品の技術メモJavaScriptブラウザmqttp5.js 自分が観測していた中では、以下のポストが発端になっていると思われる話です。 この作品にインスパイアされた作品を作られた方も見かけていて、その作品や技術面のメモを残したく、記事を書きました。 技術的な部分について 「素敵な作品だなー！」と思って、も「し実装するとしたら必要そうなものは何か」と考えたら、「スクリーン内のブラウザのウィンドウの位置を取得する仕組み」と、「異なるページ間で情報をやりとりする仕組みがあれば良さそう」と思いました。 ページ間の通信の仕組み 上記の 2つの技術のうち、「異なるページ間で情報をやりとりする仕組み」については、別端末間で IoT の仕組み（技術的には MQTT）を使って
【JavaScript】LocalStorageで値が保持されるカウンター作成 - Qiita
はじめに webサイト制作の学習で「ボタンを押したらカウントが増える」という仕組みを作成した際、 ページの再読み込みをするとカウントが初期値に戻ってしまうという問題が発生しました。 しかし、「Local Storage」を使うことでこの問題を簡単に解決することができたので、 Local Storageを利用した「値が保持されるカウンター」の作成方法をまとめました。 作成したもの 「クリック」のボタンを押すと数字が1ずつ増えるカウンターを作成しました。 ポイントはページ更新をしたり、ブラウザを開き直したりしてもカウントの値が保持されるということです。 ブラウザに値を保存する「Local Storage」 今回、値の保持を実現させるために「Local Storage」を利用しました。 Local SrotrageとはWebページで取り扱うデータをブラウザに保存する仕組みで、 以下のような特徴が
JSでブラウザの戻るボタンを止める方法。 - Qiita
ウェブ開発の世界では、JavaScriptは開発者がインタラクティブでダイナミックなウェブアプリケーションを作成できる強力なツールです。ウェブ開発における一般的な要件の1つに、ブラウザの戻るボタンの動作を制御することがあります。 このブログ記事では、ブラウザの戻るボタンを無効にするJavaScriptのコード・スニペットを深く掘り下げ、それがどのように機能するのかを順を追って説明します。 function DisableBackButton(){ window.history.forward() } DisableBackButton(); window.onload = DisableBackButton; window.onpageshow = function(evt) { if (evt.persisted) DisableBackButton() } window.onload
Arc browserでTweetDeckを擬似的に再現する方法
TweetDeckが有料化されて悲しいですね しかし、毎月1000円払うのはつらい…。そんな方々の為にArc browserの機能を使った擬似TweetDeck再現方法を書きました。 ※何か方法ないかなと検索したところRedditで実現している方がいたので大いに参考にしました。 Arc browserとは？ Arc browserとは2019年に設立されたThe Browser Companyによって開発されているChromiumベースのブラウザです。現在Mac版がリリースされており、2023年12月にWindows版がリリースされる予定です。 如何にして再現するのか？ Arc browserのインストールや基本的な操作方法に関しては良質な記事がいくつかウェブ上にアップされているのでそちらをご参照ください。使用するArc browserの機能はBoostと複数のタブを1つの画面にまとめるS
メソッドの名付けは決して甘くない——二つの JavaScript プロポーザルが歩んだ道のり - Qiita
はじめて技術記事を書いてみました。ぐらふぃーむと申します。 ECMAScript（いわゆる JavaScript）の先端を操る TC39 に関する情報が（少なくとも日本語コミュニティでは）思うより少なかったため初回は「SmooshGate 事件」と「Array Grouping プロポーザル」を取り上げようと思います。 拙い文章なのでおかしいところがあればご指摘願います。編集リクエスト機能もご活用ください。 SmooshGate 事件 2023 年になって Array.prototype.flat メソッドを知らない JavaScript デベロッパーはほとんどいないでしょう。しかしその裏にはあまり知られていない、メソッドの名前や運命に関わる出来事があります。それが「SmooshGate 事件」です。 メソッド自体を解説する文章ならいくらでもありますのでそれを省きさせていただきます。念のた
CSSの三角関数（sin(), cos(), tan()）の基礎知識と基本的な使い方を解説
CSSで数式を使用するときには、今まではcalc()関数をはじめ、min(), max(), clamp()などの関数でしたが、ついに三角関数もChrome, Edge, Safari, Firefoxのすべてにサポートされました。 CSSの三角関数、sin(), cos, tan(), asin(), acos(), atan(), atan2()の基礎知識と基本的な使い方を紹介します。 Trigonometric functions in CSS by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSの三角関数が主要ブラウザにサポートされました CSSの三角関数とは: sin(), cos(), tan() CSSの三角関数とは: asin(), acos(), atan(), atan2() CSSの三
【全ブラウザ対応】CSSコンテナクエリって何？ - Qiita
概要 2023/2/14から全ブラウザで対応になったコンテナクエリについて、 興味を持ってもらうための記事です。 コンテナクエリとは Container queries are an alternative to media queries, which apply styles to elements based on viewport size or other device characteristics. コンテナー クエリは、ビューポートサイズやその他のデバイス特性に基づいて要素にスタイルを適用するメディア クエリに代わるものです。 引用： CSS Container Queries - CSS: Cascading Style Sheets | MDNより メディアクエリでは、「画面幅」を基準にスタイルの分岐をしていましたが コンテナクエリでは、基準を「親要素のサイズ」に設定す
Tailwind CSS でつくるダークモード切り替えスイッチ
個人的なサイトで使うために作ったものですが、もしかしたら使う人もいるかなということで流用しやすいように整理して公開してみました。Tailwind CSS を使用することで CSS は一切書かずにダークモード対応します。 ソースコードは下記。 burnworks/tailwindcss-dark-mode-switch: Dark Mode/Light Mode switcher with Tailwind CSS 動作デモは下記。 Tailwind CSS Dark Mode Switch Sample Astro で使いやすいようにコンポーネントにしたものと、Pug の Mixin にしたものを参考に入れていますので、使いやすい方を使ってもらえれば。 ソースコード解説 たいして難しいことはやっていないので、ソースコード見ればわかると思いますが、一応使い方含めて簡単に解説。 まず、前提とし
【Web】知っておきたいWebエンジニアリング各分野の基礎知見80
この記事は？ それぞれが専門にしている領域に関わらず、Webエンジニアリングの基礎知識として知っておきたいと思う事を対話形式でまとめていく。知識はインプットだけではなく、技術面接や現場では、専門用語の正しい理解をもとにした使用が必要なので、専門がなんであれ理解できるようなシンプルな回答を目指したものになっています。解答の正しさはこれまでの実務と各分野の専門書をベースに確認してはいますが、著者は各技術の全領域の専門家ではなく100%の正しさを保証して提供しているものではないので、そこはご認識いただき、出てきたキーワードの理解が怪しい場合各自でも調べ直すくらいの温度感を期待しています。なお、本記事で書いている私の回答が間違っている箇所があったりした場合、気軽にコメント欄などで指摘いただけるとありがたいです。 Webエンジニアリングの基礎 この記事でカバーしている領域は、以下のような領域です。W
console.logをもっと使いこなす！ - Qiita
ブラウザ上でのデバッグにconsole.log()をよく使いますが、MDNのConsole APIのページを見ると色々ありましたので調べてみました。 よく使うコンソールメソッド console.log()： ログ情報の一般的な出力用。 console.info()： 有益な情報の出力用。 console.warn()： 警告メッセージの出力用。 console.error()： エラーメッセージの出力用。 console.log()のカスタムCSSスタイル console.logの引数にCSSを指定し、%cディレクティブを使用すると出力結果にスタイルを適用できます。 ディレクティブの前のテキストは影響を受けず、ディレクティブの後ろのテキストが装飾されます。 文字列の置換 文字列を受け取る console オブジェクトのメソッド (log() など) の 1 つに文字列を渡す場合、次の置換文
SQLの練習ができる学習サービス「SQLab」を作ってみた - Qiita
はじめに こんにちは、タケと申します。 SQLの練習ができる学習サービス「SQLab」を作りました。 ※ PC専用です。 ※ 推奨ブラウザはGoogle Chromeです。 なぜ作ったの？ SQLを学び始めた当初は 「SQLってなんか難しそう」 というイメージでしたが、 練習問題を解いていく中で次第に自力でクエリを組み立てることが 「クイズみたいで楽しい」 と思うようになりました。 そこでもっと多くの練習問題を解いてみたい、もう少し難易度の高い練習問題を解きたいと思ったのですが、 ・無料でバリエーション豊かな多くの練習問題に取り組める ・環境構築不要でブラウザ上ですぐに実践できる ・シンプルで使いやすいUI ・ER図やデータベース値を参考にしながら自力でクエリを組み立てる必要がある の条件を揃えた学習サービスがなかったので作ることにしました。 どんな練習問題があるの？ 現在は5つの問題集が
Next.jsはどうやってスクロール位置を復元するのか
Next.jsにはexperimental(実験的機能)でscrollRestorationというフラグが存在します。 // next.config.js const nextConfig = { // ... experimental: { scrollRestoration: true, }, } module.exports = nextConfig デフォルトでもブラウザ側でスクロール位置を復元してくれることもありますが、Safariでは復元されなかったり、ChromeでもgetServerSideProps利用時にはこのフラグを有効にしないとスクロール位置が復元されないなど不安定な状態です。最近この辺りについて識者の方々から色々ご教示いただき、自分では気付けないような部分の知見も多く得られたので、備忘録兼ねてscrollRestorationが何を解決しようとして、どう実装されて
ASP.NETブラウザの判定方法 - Qiita
public override void OnResultExecuted(ResultExecutedContext filterContext) { var request = filterContext.HttpContext.Request; Encoding sjisEnc = Encoding.GetEncoding("Shift_JIS"); StreamWriter writer = new StreamWriter(@"D:\WebSites\TEST1126\Log\Log.txt", true, sjisEnc); writer.WriteLine("テスト書き込みです。[{0}]", request.Browser.Browser); writer.Close(); }
User Agent文字列を使ったブラウザ判定の事例 2022年版 - yigarashiのブログ
やむを得ず、User Agent文字列を使って特定のブラウザ向けにJavaScriptの処理を分岐する必要が生まれてしまったので、調査・検討のログを記事にまとめます。 基本的にはバッドプラクティスである ユーザーエージェント文字列を用いたブラウザーの判定 - HTTP | MDN まずはMDNがドキュメントを公開しているので読みましょう。要点は以下です。 基本的にUser Agent文字列に基づいて処理を出し分けるのはバッドプラクティス 多くのケースではUser Agent文字列を使うよりも良い手段がある 例えば特定の機能の実装状況に基づく分岐を行いたければそれを直接検出する それでもやむを得ない場合、User Agent文字列からブラウザ名、レンダリングエンジン、バージョン、OS、端末といった情報を取得することができる ただし各ブラウザのUser Agent文字列は嘘をついていることもあ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSだけでif～else文と同じことができる！ しかもすべてのブラウザでサポートされています
