最近はJavaScriptをデフォルト無効化してブラウジングしてる
こういう事(これが本当にマルバタイジングだったのかサイト改ざんだったのかどうか等はITmediaから経緯説明があったわけでもないので知らない)があって こういうスタンスなのだけれど、モバイル環境に関しては最近はJavaScriptを無効化してブラウジングしてる。使っているスマホのバッテリーがへたりはじめているので少しでも消費電力を下げたいというのもある。 基本的にはChromeをデフォルトJavaScript無効、よく利用するサイトを例外ドメインとして設定して利用 例外ドメインに追加したくはないけどアドホックにJavaScript有効で見たいページは共有メニュー(インテント)からFirefox Focusで開いている。この運用で今のところ不便さは感じてない。ただデスクトップ環境に関しては今の所は何もしてない。 昔々IEコンポブラウザと呼ばれるものが流行っていた頃のkiller featur
jQuery：複数選択出来るドロップダウン「jQuery UI MultiSelect Widget」の使用方法 - 覚え書き.com
HTML標準のリストボックスで複数選択可能とする場合にはmultiple属性を指定して実装しますが、HTML標準のままでは複数選択する場合にctrlキーを押下したまま選択する必要があるので慣れていない方には操作しにくい面があります。こういう場合はjQueryプラグインの「jQuery UI MultiSelect Widget」を使用すると操作性が劇的に向上します。 「jQuery UI MultiSelect Widget」の特徴 複数選択式のリストボックス（ドロップダウン）をチェックボックス＋リストボックス（ドロップダウン）形式に変換して操作性を劇的に向上してくれます。 jQuery UIと組み合わせて利用するプラグインです。 「jQuery UI MultiSelect Widget」の導入手順 jQuery UIのダウンロードページにアクセスします。 ⇒http://jqueryu
Ajaxから始まった一つの時代の終わり
最近の流れを見ていての感想文なので、ideaとして投稿します。筆者のバックグラウンドとしては、Remixの商業記事を書いたり、App Routerの商業記事を書いたりしている人です。 さて、筆者は2022年の秋から、社内システムではありますがRemixをプロダクション運用しています。また、Next.jsのApp Routerについても、パラダイムとしてはRemixにインスパイアされた部分が多い[1]おかげで、順調にキャッチアップできています。 RemixとApp Routerは、ルーティングとデータフェッチを高度に統合しており、Progressively Enhanced SPA（PESPA）と呼ばれることもあるそうです。PESPAについては、次の記事が話題になりましたね。 このPESPAであるRemixを実運用する中で、フレームワークの手触りが近年触ってきたものと大きく違っている点があっ
Reactを使うとなぜjQueryが要らなくなるのか - Qiita
はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事
JavaScriptとイベントループ | NHN Cloud Meetup
JavaScriptの大きな特徴の1つは、「シングルスレッド」基盤の言語だという点です。スレッドが1つということは、同時に1つの作業だけを処理できるということです。しかし、実際にJavaScriptが使われる環境を考えてみると、多くの作業が同時に処理されていることが分かります。例えば、Webブラウザは、アニメーション効果を見せながら、マウスの入力を受けて処理をし、Node.js基盤のWebサーバーでは、同時に複数のHTTPリクエストを処理したりします。スレッドが1つなのに、どうしてこのようなことができるのでしょうか？質問を変えると、「JavaScriptはどのように同時実行（Concurrency）をサポートしているのでしょうか？」 このとき登場する概念が「イベントループ」です。Node.jsを導入した際、イベントループ基盤の非同期方式でNon-Blocking IOに対応して…」のような
HTMLに味付けするためのバニラJS tips集
ReactやVueを使わずに、素のJavaScriptでDOM操作する時のやつです。 何度も同じようなことをググって時間を溶かしていたので、よく使うやつをまとめてみました。 要素の取得 // 最初に見つかった要素1つを取得 document.querySelector("#hoge-id"); //[object HTMLElement] document.getElementById("hoge-id"); //[object HTMLElement] //条件に合う要素を全て取得 document.querySelectorAll(".hoge-class"); // [object NodeList] document.getElementsByClassName("hoge-class"); // [object HTMLCollection] Array.from(documen
puppeteerでよく使うであろう処理の書き方 - Qiita
puppeteer https://github.com/GoogleChrome/puppeteer/releases puppeteerを触ってみて自分がよく使う書き方を載せたら これから始めてみようかなって人に需要あるんじゃないかと書いてみます Basic認証突破 const USERNAME = 'user'; const PASSWORD = 'passwd'; await page1.setExtraHTTPHeaders({ Authorization: `Basic ${new Buffer(`${USERNAME}:${PASSWORD}`).toString('base64')}` });
Node.jsでseleniumを使ってChromeを自動操作する手順まとめ
Seleniumとは、Webアプリケーションの自動化を実現するブラウザ駆動型のテストツール群です。 GoogoleChromeやFirefox、Safari、Edge、Internet Explorerなど、 主要なブラウザを操作して様々な自動操作を行うことができます。 バックグラウンドでのスクレイピングでは取得できない動的なサイトのWebスクレイピングや、 Webブラウジング、タスクの自動化などにオススメです。 今回はNode.jsを使ってSeleniumからGoogleChromeを自動操作する方法を解説します。 Seleniumのインストール ターミナルを開いて以下のコマンドを実行しましょう。 $ npm i selenium-webdriver たったこれだけでseleniumをインストールすることができます。 Chrome Driverをダウンロードする 今回はChromeを自動
Node.jsとSeleniumでWebアプリのUIテストを自動化（2023年版） - ICS MEDIA
Webアプリケーションを開発する際、みなさんはどのようにテストを行っていますか？ Webアプリケーションは、ユーザーごとに異なるブラウザを使用しており、ユーザー操作も必要となるため、手作業でテストをされている方も多いと思います。また、機能改修やバグフィクス後に、リグレッションテスト（改修により既存機能への影響がないかを確認する回帰テスト）が必要となりますが、時間が取れずしっかりとテストができていない方も多いのではないでしょうか。 本記事では、これらのテストを自動化することのできる「Selenium Webdriver」（セレニウム ウェブドライバー）について紹介します。 入力フォームのバリデーション機能をチェックするデモ 簡単な入力フォームのバリデーション機能をチェックするデモを動画で紹介しましょう。入力値に対して期待するエラー文言が表示されているかのテストを実施しています。Seleniu
ツイートボタン用URL twitter.com/intent/tweet の使い方・パラメータ一覧 | どうも、郁永です。
本記事は、Twitterのシェア用URL「Web Intent」の使い方についてまとめています。 「Web Intent」を使えば、オリジナルの画像をツイートボタンにしたり、JavaScriptが使えない環境（wiki系サービスなど）でもツイートボタンを設置することができます。 また最近では、Billboardチャートの指標の一つ「ツイート数」を稼ぐため、ファンがワンタッチでツイートできるようにする目的で「Web Intent」の機能を活用する、という使い方もあるみたいです。 ※BillboardのTwitter指標は2022年12月7日以降廃止されました。 パラメータ名=値の形式でツイート内容などを指定します。 上のURLをリンクとして設定すると、あらかじめ「Hello World!!」とツイート欄に入ったツイートページに移動させることができます。 動作サンプル：こんな感じ！ 値の部分は
いろんなセレクタ指定方法＋α
ずいぶん以前にセレクタについて書いたのですが、今回はセレクタの種類を抜粋して、記述例と説明書きにまとめてました。「セレクタとは？」という方は、まず下記記事を読んでみて下さい。 jQueryを使ってみよう。(基本編 セレクタ１) ＋αというのはトラバース(走査)系のメソッドです。「この要素を抜き出したい！」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。 「こういう書き方をすると、こういう要素が選択される」という例で説明を添えていますが、数が多いので説明書きは、ほんとうに添えた程度です。説明だけではわかりにくいと思うので動作サンプルを用意しました。動作サンプルを眺めながら、ちらっと説明書きをチェックしてもらえれば「なるほど！」となるはず。。。ご利用ください。 jQuery セレ
javascript でテキストをファイルにダウンロードするには
サーバーから受け取ったデータを、テキストやCSVにしてローカルにダウンロードしたいときのコードになります。 サンプル <html> <head> <meta charset="utf-8" /> <script> function downloadText(fileName, text) { const blob = new Blob([text], { type: 'text/plain' }); const aTag = document.createElement('a'); aTag.href = URL.createObjectURL(blob); aTag.target = '_blank'; aTag.download = fileName; aTag.click(); URL.revokeObjectURL(aTag.href); } </script> </head> <
JavaScript で forEach を使うのは最終手段 - Qiita
この記事は JavaScript2 Advent Calendar 2018 の1日目の記事です。 こんばんは。@diescake です。 今年は、JavaScript 経験の浅い新人さんや外注さんをリードする立場として、 とにかく幅広いメンバーのコードレビューをする機会に恵まれたのですが、 事ある毎に Array.prototype.forEach を利用する人が多かったため、初心者向けに要点を整理してみました。 以下 ES2015 以降のバージョンをサポートするブラウザ、あるいは polyfill を利用していることを前提としています。 結論 配列に対して何らかの操作を行う際は、 filter, find, map, reduce などのメソッドを利用できないか検討し、 いずれのメソッドでも実現ができない場合の最終手段として forEach を選択しましょう。 下記に、いくつかのサンプ
Mothereffing animated gif
Drag and Drop images here Your browser doesn't support FileReader, Drag and Drop, or some other modern required features. :(
UserScriptをお気に入りのエディター/IDEで編集する方法 @Tampermonkey - klim.log()
前回も書いたが、最近はUserScriptを書いている。 実行環境はだいたいTampermonkeyなのだが、この拡張内のJavaScriptエディターがやや貧弱な点が気になった。設定からいくらか利便性を向上させることはできるが、やはり使い慣れたツールには敵わない。 klim0824.hatenablog.com そこでUserScriptを使い慣れたエディターやIDEで書きたいと感じたのだが、その方法が分かったのでブログにまとめておくことにする。 TL;DR Tampermonkeyの ファイルの URL へのアクセスを許可する のチェックを入れる。 TampermonkeyにラッパーとなるUserScriptをインストールし、ローカルにあるUserScriptを@requireする。 ローカルにあるUserScriptを、好きなエディター/IDEで編集する。 動作確認 macOS Si
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://twitter.com/izutorishima/status/1723756632256209346
Why does @require always give me the error "couldn't load @require from forbidden URL" for local scripts on Greasemonkey/Tampermonkey on MacOS
覚えておくべきHTMLメールのセキュリティについて解説します。
Selenium IDEのタイマー機能
2022年に起きたフロントエンドの変化
