YouTube広告を早送りする Ad Speedup 拡張機能は何をしているのか？
↑ これは、Chrome ブラウザの拡張機能です。YouTubeの動画上に広告が表示されたら、その再生スピードを上げ、高速で広告を終了させます。 この拡張機能がやっている処理を紹介します。 2. Ad Speedup がやっていることまず前提知識ですが、YouTube のページにおいて、動画の部分は以下のHTMLで構成されています。 <div id="movie_player" class=" 広告が始まると、ここに ad-showing か ad-interrupting が追加される "> ... <video src="blob:https://www.youtube.com/xxxx-xxxx"></video> ... </div>id属性に “movie_player” が指定された <div>要素の中に、動画自体を表す <video> 要素が入っています。広告の動画も、この
Webブラウザ、レンダリングエンジン、JavaScriptエンジンを整理して図視化してみた - Qiita
最近、次世代のMicrosoft EdgeがChromiumをベースにするという記事を読んだことがきっかけでブラウザの中身が気になって調べたので、その備忘録として記事にしたいと思います。 ※2020/3/17追記: Microsoft Edgeは既にChromiumベースになりました。 それに伴い記事を更新し、以下のように表記を変更しました。 現世代Microsoft Edge → 旧世代Microsoft Edge 次世代Microsoft Edge → 現世代Microsoft Edge もし変更のし忘れがあった場合はご指摘お願いします。 Webブラウザとは まずWebブラウザとは ウェブブラウザ（インターネットブラウザ、web browser）とは、 World Wide Web (WWW) の利用に供するブラウザであり、ユーザエージェント (UA) である。具体的には、ウェブページ
"レガシー"と言われないためのJavaScript再入門
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
Remove TypeScript - laiso
経緯 world.hey.com DHHが「オタクくん見てる〜？ 今からうちのレポジトリからTypeScriptを剥しま〜す」と宣言したことにより、Web開発者界隈でTypeScriptの是非自体の話になり騒ぎになった*1*2。 github.com その後、野次馬がたくさん集ってきてrevertプルリクエストを立てる人やTypeScript公式リポジトリから全ソースコードを消すプルリクエストを出す*3ようなキッズムーブをする人も出てきた world.hey.com 実際の変更 8617行のTypeScriptがJavaScript化された。(Sloc 便利) ❯ scc src/ ─────────────────────────────────────────────────────────────────────────────── Language Files Lines Blan
アドレスバーのURLを書き換える - Qiita
googleのエイプリルフールネタの「Google 日本語入力 ピロピロバージョン」を見ていたら、 https://www.google.co.jp/ime/___o/ 画面をスクロールすると、アドレスバーのURLも下記のように画面更新しないでピロピロと変わっていた。 https://www.google.co.jp/ime/___o/ ↓ https://www.google.co.jp/ime/________o/ ↓ https://www.google.co.jp/ime/__________/ // 履歴エントリの置き換え // http://exapmple.com/xxx/123 → http://example.com/xxx/aiueo history.replaceState('','','aiueo'); // http://exapmple.com/xxx/123
Temporal で JavaScript の次世代の日時処理に触れてみる - Qiita
この記事は Recruit Advent Calendar 2021 の 7 日目の記事です。 イントロダクション Web アプリケーションの新規開発をしていて、先日、日時処理のライブラリ選定をする機会がありました。直近のプロジェクトで date-fns を使っていたので、今回もそれでいいかと考えていたのですが、Temporal が TC39 プロポーザルではあるが stage 3 になっているから試してみてもいいんじゃないかという話になりました。stage 3 であれば API 変更のハードルは非常に高いそうです。stage 3 になるまでの提案はこちらの記事が参考になります。少し見ただけでも大きく変わっていることがわかります。 プロジェクトはまだ開発段階ですが、実際に Temporal をプロジェクトに導入しながら、検証兼開発を進めていいます。しかし、Temporal を実際に使って
console.log(); しか使えなかった自分へ。。。 - Qiita
この記事について Webエンジニアになって早１年半。railsのデバッグをする時にはエディターのデバッガーでスマートにできていたが、javascriptになるといつもconsole.log();ばかりを使って原始的なデバッグをしていた。。。 そんな脳筋な過去の自分に教えてやるための記事です。 console.log({変数名}); 「いきなりconsole.log();の紹介かい！！！」って思われるかもしれませんが、この技を知ったときは「なんで知らんかったんや。。。」って思うくらい便利だったので最初に紹介します。 以下のようなHTMLがある場合 <form> <input type="text" value="名無しの権兵衛" id="name"> <input type="text" value="80歳" id="age"> <input type="text" value="バスケ"
【JavaScript + JQuery】DOMの変更を監視するリスナー - 新米エンジニアの失敗再発防止メモ
特定のページで面倒な操作を自動でやりたいときなど、拡張機能を作成すると思います。 リンクやボタンをクリックした時に、ページ遷移じゃなくてDOM全体がふわっと変わるような洒落乙なサイトも時々あって、そういうときって DOMが変更された時に反応して処理を走らせたかったりします。 やり方 $('HTML').on('DOMSubtreeModified propertychange', function() { // DOMが変更された時に動く処理 });この場合、htmlタグの中の何かが変更されたら処理が走ります。 セレクタ「$('HTML')」の部分を変えれば範囲を絞れます。 ただ気を付けて欲しいのが、 セレクタが配列だとだめ $('div').on('DOMSubtreeModified propertychange', function() { // DOMが変更された時に動く処理 })
クリエイティブコーディングの教科書
ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
【JavaScript】アロー関数式を学ぶついでにthisも復習する話 - Qiita
対象読者 ES6を詳しくは知らない なんとなくJavaScriptを書けるけど、JSのthisの特性についてまだよく知らない アロー関数式を知らない、または知っているけど実装経験がない 概要 JavaScriptのES6で導入されたアロー関数式を、関数のただのシンタックスシュガーに過ぎないと思っていたのですが、調べてみると実際そうではないようだったので、thisの話と一緒にまとめてみました。 アロー関数式とは ES2015（ES6）から利用可能になった新しいJavaScriptの構文の一つです。 ES6とは、2015年に標準として策定されたJavaScriptの新しい文法です。 ES6では他にも、letによる変数宣言が可能になったり、promiseという非同期処理の実装ができるようになったりと、アロー関数式以外にも様々な構文追加がありました。 さて、この記事の主題はそのなかでもアロー関数な
モダン JavaScript チートシート
Skip to the content. モダン JavaScript チートシート 画像クレジット: Ahmad Awais ⚡️ イントロダクション 動機 このドキュメントはモダンなプロジェクトでよく見られる JavaScript のチートシートと最新のサンプルコードです。 このガイドは読者に JavaScript をゼロから教えるものではありません。 基礎知識は持っていて、モダンなコードベースに慣れる（例えば React を学ぶ）のに苦労している開発者を助けるためのものです。 説明の中で JavaScript の諸概念が使われています。 また、議論の余地のあるポイントについてときどき個人的な tips を載せますが、その際はあくまでも個人的なおすすめであることを述べるように気をつけます。 メモ: ここで紹介されている概念のほとんどは JavaScript 言語のアップデート（ ES2
Recorder.jsを利用してブラウザ上で音声を録音する - Qiita
ブラウザ上で音声を録音、音声ファイルのダウンロードする GitHub Pagesで公開しているページで実施できます。 ライブラリとしてRecorder.jsを利用しています。 Recorder.jsとは Recorder.jsとはWeb Audio APIというJavaScript APIをラップし、簡単に録音とその音声ファイルの出力を可能にするJavaScriptライブラリです。 このライブラリをHTML内で読み込むことによって、ブラウザ上からPCのマイクを使って録音して音声ファイルをダウンロードできるようになります。 GitHub上に公開されていた元のリポジトリを修正しています。 修正したリポジトリはこちらです。また、利用例としてGitHub Pagesを使って、ブラウザ上で録音、音声ファイルダウンロードできるようにしています。 本当はライブラリの修正がしたかったのではなく、ブラウザで
JavaScriptで書く「var,let,const」の違いと使い分け方法
JavaScriptで書く「var,let,const」の違いと使い分け方法 プログラミング初心者向けに、JavaScriptにおける【let、var、const】の違い・使い分けを解説した記事です。本記事では、let、var、constをどんな時に使うのか、書き方の例などを紹介します。実際のサンプルを書きながら解説しているので、参考にしてみてください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 JavaScriptにおけるvar、l
JavaScriptのPromise - Qiita
JavaScriptのPromiseについて。 同期処理 / 非同期処理 同期処理 JSはシングルスレッドで、ひとつ処理が終了したら次の処理を実行、という形で、通常は同期処理がおこなわれる。 var i = 0; function doSomething1() { console.log(i); } function doSomething2() { i += 1; console.log(i); } doSomething1(); // 0 doSomething2(); // 1 同期処理では、1つの処理が詰まると次の処理が行われない。 (例: APIのレスポンス待機, 複雑な計算 etc.) そのため、非同期処理ももちろん用意されている。 非同期処理 1つの処理の終了を持たないまま別の処理に進める方法。 例えば、setTimeout, addEventListener, jQuery
JavaScript Promises: an introduction | Articles | web.dev
JavaScript Promises: an introduction Stay organized with collections Save and categorize content based on your preferences. Promises simplify deferred and asynchronous computations. A promise represents an operation that hasn't completed yet. Developers, prepare yourself for a pivotal moment in the history of web development. [Drumroll begins] Promises have arrived in JavaScript! [Fireworks explod
ウェブアプリをソースごとパクる業者に対する対策 - Qiita
こんにちは。みなさんもウェブアプリをリリースしたあとに同業者にソースごとパクられたことってありますよね。難読化しても難読化されたまま同業者のサーバで動くので困ったものです。そこで、私がとった解析しずらい対策をまとめてみたいと思います。 前提 多機能な画面をJavaScriptでゴリゴリ作ったのにもかかわらず、HTMLやCSS、JavaScriptファイル一式を自社サーバにまるごとコピーして、ライセンス表記だけ書き換えて使うような業者を罠にはめるということを想定しています。 当然通信をリバースエンジニアリングする人もいるので、自社サーバでは防げないという前提です。 HTMLにはauthorメタタグ よくあるMETAタグで権利者を明記します。これは権利の主張もそうですが、JavaScript自体に権利者が認定した権利者でなければ無限ループを起こすという処理のためにも使用します。逆に、権利者が我
Slack BotをGASでいい感じで書くためのライブラリを作った - Qiita
全国のGoogle Apps Scriptファンの皆様こんにちは Apps Scriptガチ勢の大橋です。 今年でGoogle Apps Scriptアドベントカレンダーも3年目になりました。 年々人は減っている気がしますが、BigQueryとの連携など他のアドベントカレンダーに名前が出ることが増えてきて、嬉しい限りです。 さて、ちょいSlack BotをGASで作る機会があったのでSlack API周りをGASで扱うためのLibraryを作りました。 今回はこのLibraryとそれを使って作った会議予約Botのサンプルコードについて書いていきたいと思います。 なお知らない方も多いので書いておくと、GASのLibrary機能は丁寧に作ると補完が非常に効くようになり、開発効率が10倍以上変わります。 Libraryについて詳しくは以下の記事を見て下さい。 2012年Google Apps S
Closure Libraryを使ったJSファイル間の依存関係の記述 - Qiita
Google Closure Libraryの依存関係解決ツールは非常に便利。 Closure Libraryのインストール http://code.google.com/p/closure-library/downloads/list ファイルをダウンロードしたら解凍しアプリケーションのpublicディレクトリに設置する。ここでいうpublicディレクトリに設置するというのは application `-- public `-- javascripts |-- closure-library | |-- closure | | |-- bin | | | `-- build | | | |-- closurebuilder.py | | | `-- depswriter.py | | `-- goog | | `-- base.js | `-- third_party `-- myapp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Deep Cloning Objects in JavaScript, the Modern Way
Chart.js
