YouTube広告を早送りする Ad Speedup 拡張機能は何をしているのか？
プログラミング 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
Webブラウザ、レンダリングエンジン、JavaScriptエンジンの整理&図視化 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最近、次世代のMicrosoft EdgeがChromiumをベースにするという記事を読んだことがきっかけでブラウザの中身が気になって調べたので、その備忘録として記事にしたいと思います。 ※2020/3/17追記: Microsoft Edgeは既にChromiumベースになりました。 それに伴い記事を更新し、以下のように表記を変更しました。 現世代Microsoft Edge → 旧世代Microsoft Edge 次世代Microsoft Edge → 現世代Microsoft Edge もし変更のし忘れがあった場合はご指摘お願いし
"レガシー"と言われないための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
Temporal で JavaScript の次世代の日時処理に触れてみる - Qiita
この記事は Recruit Advent Calendar 2021 の 7 日目の記事です。 イントロダクション Web アプリケーションの新規開発をしていて、先日、日時処理のライブラリ選定をする機会がありました。直近のプロジェクトで date-fns を使っていたので、今回もそれでいいかと考えていたのですが、Temporal が TC39 プロポーザルではあるが stage 3 になっているから試してみてもいいんじゃないかという話になりました。stage 3 であれば API 変更のハードルは非常に高いそうです。stage 3 になるまでの提案はこちらの記事が参考になります。少し見ただけでも大きく変わっていることがわかります。 プロジェクトはまだ開発段階ですが、実際に Temporal をプロジェクトに導入しながら、検証兼開発を進めていいます。しかし、Temporal を実際に使って
【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」の違いと使い分け方法
var、let、constとは JavaScriptでは、変数や定数（以下、まとめて「変数」と表記します）を使う際、変数名を宣言することが推奨されています。 var、let、constとはすべてJavaScriptで変数を宣言する際に使うキーワードです。 たとえば、以下のように記述することで変数を宣言できます。 var techacademy = 'テックアカデミー'; let techacademy = 'テックアカデミー'; const techacademy = 'テックアカデミー'; let、constは新しい記法 3つの宣言キーワード内のletとconstは、ECMAScript2015から採用された宣言方法のキーワードです。 ECMAScript2015（エクマスクリプト）とは、JavaScriptの標準仕様です。 現在では、国際団体で標準化されたうえでGoogle Chrom
JavaScript Promises: an introduction | Articles | web.dev
Developers, prepare yourself for a pivotal moment in the history of web development. [Drumroll begins] Promises have arrived in JavaScript! [Fireworks explode, glittery paper rains from above, the crowd goes wild] At this point you fall into one of these categories: People are cheering around you, but you're not sure what all the fuss is about. Maybe you're not even sure what a "promise" is. You'd
ウェブアプリをソースごとパクる業者に対する対策 - 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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アドレスバーのURLを書き換える - Qiita
Deep Cloning Objects in JavaScript, the Modern Way
console.log(); しか使えなかった自分へ。。。 - Qiita
Chart.js
JavaScriptのPromise - Qiita
Closure Libraryを使ったJSファイル間の依存関係の記述 - Qiita
