そろそろ決定版が欲しいな。 前置き 今までは Qiitaのコードにコピーボタンを追加するユーザースクリプト - Qiita Togetterからツイートをコピーするボタンを追加するユーザースクリプト - Qiita と既存のものを選択してコピーするか、無いものをコピーしたいときは PHPマニュアルから関数をコピーするボタンを追加するユーザースクリプト - Qiita とコピーしたいDOMを作ってそれを選択するというまどろっこしい方法を取っていた。 Qiitaにも色々記事はある。 でもこれらの方法は主にRangeの処理がとてもとても面倒なので、最近は使っていない。 目新しい内容ではないが、使用頻度が高いのでまとめる。 要件 任意のJS側で用意した文字列をクリップボードに保存させる。 動作のトリガーは主にボタンクリックのイベント駆動 通常のコピー動作を阻害しない 複数のコピー処理を追加したとき

キーボード入力をスクリプトに代行させる ブラウザ上で実行されるアプリ（アメブロの編集画面や管理画面等）に対して、「キー入力した」と同等の事を代行させることが JavaScriptでは可能です。 スクリプトのプログラムは、ユーザーのブラウザ上の殆どの操作を、代行する事が可能と思われます。 悪用すれば危険な仕様と誰も想像出来ますが、実際にその様です。 しかし、ネットに多くの情報がありますが、半分以上の情報は「使えない」という壁に当たりました。 そこには、旧いIEの仕様の問題や、Firefox Chrome等と仕様が異なる問題、ハードウエアに関連する問題など、JavaScriptのコードが統一出来ず現在に至った背景がある様です。 この問題と、私のコードの扱いの不慣れが重なり、なかなか実際にキー入力が実現せずに苦労しました。 ここでは、「Chrome」と「Tampermonkey」の環境で、入力を

前回、サイトの表示スピードアップのために4つほど作業をしたが、これらのほかに「ファイルサイズを縮小」することも有効。 javaScriptやCSSファイルの「改行」や「ホワイトスペース」「コメント」は、ヒトが読みやすくしているだけ。ブラウザにとって不要なこれらを削除すればファイルサイズを縮小できる。 小さくする事をMinify（ミニファイ）、Minifyされたものを整形して読みやすくする事をBeautify（ビューティファイ）という。また、2つのファイル内容をCompare（コンペア=比較）するサービスもある。 それぞれWeb上で利用できるサービスがあるので、今回はそれらをメモ。 Minify、BeautifyのWebサービス Minifyのみ Beautifyのみ どんなファイルでもいける、マルチな「Pretty Diff」 多数のサービスをまとめたページ「cleancss.com」 ち

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

ESLintはJavaScriptを静的に検証するツールです。 わかりやすく言えば、チームメンバー間で統一された美しいコードを生成するためのツールです。 設定ファイルを書いておけば自動で変換することも可能です。 ESLintを始めよう！ JavaScriptのLintツールにはjslint, jshint, JSCSなどがあります。 2016/11 時点で npm trendsで比較した結果が以下の画像です。 http://www.npmtrends.com/jslint-vs-jshint-vs-jscs-vs-eslint 半年前はjshintと並んでいましたが、わずか半年の間にダブルスコアをつけています。 jshintは開発が鈍化しています。 またJSCSの開発チームはESlintに移行することを決めました。 以下に記載した有名ライブラリは開発時にESLintを使っています。 jQu

We're excited to announce that ESLint v6.0.0 has been released: https://t.co/EO4ZrZIMYM — ESLint (@geteslint) 2019年6月22日 ESLint は JavaScript のための静的検証ツールです。コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ちます。同様のツールとしては JSLint, JSHint 等があります。 ESLint の特色は、 すべての検証ルールを自由に on/off できる 自分のプロジェクトに合わせたカスタムルールを簡単に作れる 豊富なビルトイン ルール (5.0.0 時点で 260 個) に加えて、たくさんのプラグインが公開されている ECMAScript 2015 (ES6), 2016, 201

よく来たな。 お前がこの記事を見ているとゆうことは、やめておけとゆわれたことをあえてやろうとする真の男たらんとするものだろう。 軟弱な男たちがスマッホの予測変換に骨抜きにされている間にお前は反骨もあらわにここに来た。 おまえのそうゆう負けん気は実際大事だ。強くなければお前はメキシコで野垂れ死ぬだろう。 だが真の男と無謀は違う。 ときにお前は知の高速道路をもうダッシュするひつようがある。 つまり今がそのときとゆうことだ。 ESLintを入れろ お前のJavaScriptがぐちゃぐちゃなことをおれはしっている。 なぜならおまえはESLintを使っていないからだ。 お前はコードの荒野を踏破できるタフな男を気取っているが、それにも限界が来るだろう。 今のままではお前が倒れ目を伏せるのはベイブの隣ではなく混沌としたコードの掃き溜めだ。 まずはESLintを入れろ。 簡単だ。 お前のその目の前の板の黒

ES2015/ES6で追加されたアロー関数()=>{...}はthisを拘束できるのがメインだと思っているのですが、色々と省略した書き方ができるようで、まだ不慣れなのでライブラリとか参考のコード見てる時に何だっけ？となりがちだったので省略した書き方のメモ。 アロー関数の基本形 (param1, param2) => { // ... 処理 } 関数名を付けて定義 const func = (param) => { // ... 処理 } 引数が1つのとき()を省略できる (param) => { ... } ↓ 省略形 param => { ... } 値を返すだけの関数のときreturn・{}を省略できる (param) => { return val } ↓ returnを省略 (param) => { val } ↓ {}も省略 (param) => val ※ {}だけ省略はエラー

こんにちは。とんと申します。 本稿では近代的なJavaScriptを全く知らなかった私が、ここ半年間のフロントエンド開発で体験したカルチャーショックをご紹介しようと思います。 知っている方からすれば「当たり前だろ！」と突っ込まざるを得ない内容でしょうが、何分弱輩者ゆえご容赦ください。 私と同じように近代JS全然知らないマンの方は一緒に衝撃を分かち合いましょう。 その１ constとlet 中世から現代にやってきた私がまず驚いたのがこれでした。 こ、コンスト・・・レット・・・？ varは？varはどこにいったんだ！？ 中世JSでは鉄板だったvarによる変数宣言も、モダンJSではどこ吹く風。 現場のソースコードは全てconstとletに置き換えられました。 // 再代入 const hoge = "ほげ"; hoge = "ほげほげ"; // 実行時にエラーが出る Uncaught TypeE

… すると、指定された URL で新しいウィンドウが開きます。ほとんどのモダンブラウザは、別ウィンドウではなく新しいタブとして開くよう設定されています。 ポップアップはとても古くから存在します。当初の考えは、メインのウィンドウを閉じることなく別のコンテンツを表示することでした。現時点では、それをするための他の方法があります: fetch を使うことでコンテンツを動的に読み込むことができ、それを動的に生成された <div> の中で表示することができます。ですから、ポップアップは私達が普段使用するものではありません。 さらにポップアップは、複数のウィンドウを同時には表示しないモバイルデバイスでは手際を要します。 それでも、ポップアップがいまだに使われるタスクが存在します。例えば OAuth 認証（Google や Facebook などへのログイン）。なぜなら: ポップアップは独立した Jav

Javascriptで動的に追加した要素にイベントを設定したい！または追加した要素が存在すればこういった処理をしたい。ってことが時々あります。 その場合、どうやって実装すれば良いか調べたのでメモ。 DOMの変更を監視する「MutationObserver」というAPIを使えばできそうです。 基本の構文 基本的な構文は次の通りとなります。 //オプション const options = { childList: true, //直接の子の変更を監視 characterData: true,　 //文字の変化を監視 characterDataOldValue: true,　//属性の変化前を記録 attributes: true,　 //属性の変化を監視 subtree: true, //全ての子要素を監視 } //コールバック関数 function callback(mutationsLis

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

TampermonkeyとGreasemonkeyの使い方とUserScriptの書き方を解説します。 これらのアドオンを使うことによりウェブページの見た目を自由に変更することができます。userscriptを自分で思い通りに作れるようになれば、ネットサーフィンの効率が飛躍的に上がります。 UserScriptを使ったプログラミング例を少しだけ紹介します。 例1.グーグルにツイート検索機能を付ける。 Tampermonkey、Greasemonkeyを導入しよう。 どちらを使っても構いません。スクリプトには互換性がありどちらにも移植可能です。 今回はTampermonkeyの操作法だけを解説します。 UserScriptの書き方はどちらでも全く同じです。まずはアドオンをインストールします。 Tampermonkey Chrome用、Firefox用、Edge用 Greasemonkey h

特定のページで JavaScriptを実行する拡張機能 自作のスクリプトコードを任意の特定ページで実行させるには、ブラウザが Chromeの場合は、前ページ の様な拡張機能を自作し、Chrome Web Store に登録する必要が有ります。 しかし、修正や拡張の可能性があるコードを置き、再び更新を加える場所としては、ウェブストアはなはだ不適当です。 そこで調べると、自作スクリプトを自分の為に利用するベース環境としての拡張機能が幾つかある事が判りました。 その中で、多くのユーザーが利用し、信頼のおけそうな拡張機能が「Tampermonkey」でした。 この拡張機能は、「Stylus」がユーザー自作のCSSを任意のページに適用できるのと同様、自作スクリプトを任意のページで実行させるスクリプト管理機能を持ちます。 また、コード編集機能も「Stylus」同様に内装していて、使用法などの説明ページ

ユーザースクリプトとはユーザースクリプトとは、ブラウザの対象ウェブページでユーザ作成のスクリプトを実行する為の仕組みです。元々は、Firefoxのアドオンとして作成されたGreasemonkey上で使用できるスクリプトでした。その後、後続の拡張機能も同様の仕様で実行可能なユーザースクリプトとして一般化しました。 拡張機能の種類ユーザースクリプト用の拡張機能として、主に次の3種類が開発されています。 Greasemonkey - GitHubTampermonkey - GitHubViolentmonkey - GitHub※AdGuardなどの例外も存在します。 インストールFirefoxGreasemonkey – 🦊 Firefox (ja) 向け拡張機能を入手Tampermonkey – 🦊 Firefox (ja) 向け拡張機能を入手Violentmonkey – 🦊 Fi

GreasemonkeyとTampermonkeyは、Webブラウザの機能を大幅に強化する無料の拡張機能です。これらの強力なアドオンを使用すると、Webページの動作や外観を変更する数千のユニークなユーザースクリプトから選択できます。サードパーティの開発者がJavaScriptプログラミング言語で書いたこれらのスクリプトの機能は、ワンクリックでFacebookやInstagramのアルバム全体をダウンロードし、Pandoraのルック・アンド・フィールを完全に改良することにまで及ぶ。ブラウザに応じてGreasemonkeyまたはTampermonkeyのいずれかをインストールして、ユーザースクリプトマネージャとして機能させます。スクリプトマネージャーの拡張機能をインストールしたら、拡張機能を検索したり、以下にリストされている拡張機能の一部を試用することができます。 Greasemonkeyのイ

イベントリスナの登録 document.addEventListener('keydown', function (e) { // 処理 }, false); 他にkeypressってのもあるけど、keydownをお勧め。 理由は確かGoogle chromeでkeypressにすると、Ctrl+a（全て選択）のようにデフォルトで別動作が定義されていた場合にそちらが先に動いてしまうため（だったはず）。 押されたキーの取得 var shortcutKey = 'a'; document.addEventListener('keydown', function (e) { var pressed = String.fromCharCode(e.which).toLowerCase(); pressed = (e.ctrlKey ? 'C-' : '') + (e.altKey ? 'A-' :

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。