WebHID APIを使ってJoy-ConとChromeを簡単コネクト - Qiita
Joy-ConとChromeがツナガル こんな感じでJoy-Conをクネクネ動かしたりスティックをグリグリしたりすると、Chromeに表示されたJoy-Conが連動して動きます。Joy-Conって、普段はNintendo Switchでゲームする時に使うコントローラーなので、こうしてブラウザのChromeと連動して動くだけでワクワクします。 このアプリはGoogleのエンジニアの方が作られたもので、以下のGitHubで公開されています。 https://tomayac.github.io/joy-con-webhid/demo/ https://github.com/tomayac/joy-con-webhid どうやっているの？ WebHID APIという技術が使われています。 このAPIを使うことで、Webアプリケーションからニンテンドースイッチのジョイコンやプレイステーションのデュア
Chrome(Canary) の Native File System API で ローカルファイルの読み書きをする - mizchi's blog
ブラウザ上でローカルファイルの読み書きができる Native File System API が ChromeCanary で実装された。 前々から欲しかった機能なので、自分が作ってる markdown preview ツールに実装してみた。 Intent to ship https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/noan0cgEBGQ/t8DuK8_hDwAJ 仕様 http://wicg.github.io/native-file-system/ 動かすとこんな感じ https://mdbuf.netlify.com/ で Meta+O/Meta+S のキーバインドを振ってる。 有効化 https://www.google.com/intl/ja/chrome/canary/ をダウンロード chrom
ヘッドレスブラウザ Chrome + Chromy で操作した内容を録画する
Chromeのブラウザ内（もしくはデスクトップ）操作をJavaScriptで録画するに続いて、今度はヘッドレスブラウザ (Chrome) で操作した内容をビデオ録画する方法を紹介します。今回は Chromy というライブラリを利用します。 機能的には Chrome DevTool に用意されている startScreencast を利用します。Chrome ヘッドレスブラウザのライブラリといえば puppeteer という感じがあるのですが、 Chromy は startScreencast のラッパーを用意してくれているので、サクッと使えるのが良いところです。 サンプルコード 指定のページを開いて startScreencast をした後、なんらかの操作をします。その後、 stopScreencast で処理を終了すると startScreencast コールバックで受け取ったキャプチャ
GitHub - puppeteer/puppeteer: Node.js API for Chrome
import puppeteer from 'puppeteer'; (async () => { // Launch the browser and open a new blank page const browser = await puppeteer.launch(); const page = await browser.newPage(); // Navigate the page to a URL await page.goto('https://developer.chrome.com/'); // Set screen size await page.setViewport({width: 1080, height: 1024}); // Type into search box await page.type('.devsite-search-field', 'auto
Headless Chromeでデザイン変更履歴を追える魚拓を作ってみた - pixiv inside
はじめに こんにちは、普段はPawooの開発を担当している新卒エンジニアのabcangです。 最近話題のHeadless Chromeを使って魚拓を作ってみましたので、その話をします。 結論から言うと、こういうものができました。 以下、詳しくお話していきます。 日々行われるデザイン変更をどう把握するか pixivには毎日新機能やUIの変更がデプロイされており、どんどんページが変わっていきます。 ある日、ディレクターから「デザインの変更履歴を追うための魚拓ツールがほしい」と相談されました。魚拓ツールがあると、なにか数値の変動があったときにデザインの崩れを確認したり、過去のデザインを振り返ったりするときに便利とのことです。 ちょうどそのタイミングでHeadless Chromeが利用できるGoogle Chrome 59がリリースされていたので、試すいい機会だと思い引き受けました。 Headl
$Hell on Sony Snatch the Kernel privilage from Browser
Talk at KernelVM Kanto#13
ヘッドレスブラウザ(Chrome)を使ってSPAをスクレイピングする - Qiita
一般的なスクレイピング手法とその問題点 スクレイピングというと、HTTPクライアントライブラリを用いてHTML取得し、HTML/XMLパーサーで解析するというのが一般的だと思います。 この手法の場合、以下の場合にうまく処理できません。 ターゲットのページがJavaScriptにより動的にDOMを操作する場合 HTML/XMLパーサーが取得したHTMLを正しく解釈できない場合(正しくないHTMLでもブラウザはなんとか処理するが、パーサーライブラリは正確なHTMLでないと処理できないことがある) 特に問題になるのは前者でしょう。最近のWebサイトではJavaScriptでDOMを操作することは珍しくなくなってきています。SPAであればなおさら難しく、もはやこういった手法によるスクレイピングは不可能でしょう。 ヘッドレスブラウザによるスクレイピング 動的なDOMやパーサーがうまく解釈できないとい
Web Budget API と Web に導入されつつある Budget と Cost の概念 | blog.jxck.io
Intro PWA の普及により、バックグラウンド処理をいかに制限するかといった課題が生まれた。 その対策として、バックグラウンド処理における Budget と Cost の概念が提案され、それを扱う Budget API の策定が進んでいる。 基本概念と現時点での API 外観について解説する。 Update 提案されて以降長いことアップデートがなかったが、 Mozilla Standard Position をリクエストしたところ、仕様が消えていたことがわかった。 https://github.com/mozilla/standards-positions/issues/73#issuecomment-373681407 元のリポジトリに Issue で現状を問い合わせたところ、結局開発者からの支持が得られず、 Obsolete されたとのこと。 blink-dev では Intent
AWS Lambda上でPhantomJSを使う - Qiita
PhantomJS Lambda Templateの開発者が phantomjs-lambda-pack を新しくリリースしていたので、これを使ってLambda上でPhantomJSを動作させてみます。 環境構築と初期設定 $ mkdir lambda-phantomjs && cd lambda-phantomjs $ npm init $ npm install phantomjs-lambda-pack --save % cat index.js 'use strict'; const phantomjsLambdaPack = require('phantomjs-lambda-pack'); const exec = phantomjsLambdaPack.exec; exports.handler = (event, context, callback) => { exec('
JSerのための ブラウザコードリーディング （テスト編）
Meguro.es x Gotanda.js #1 in Drecom https://meguroes.connpass.com/event/49543/
第一回Grimoire.jsハンズオン at Mozilla Japan｜IT勉強会・イベントならTECH PLAY［テックプレイ］
イベント内容 イベント概要 Web上で様々な表現を可能にするWebGLをWebエンジニアが今までの延長で扱えるライブラリ、Grimoire.jsを使ってみよう! 基本的なHTML,CSS,Javascriptの知識だけでOK。新しい表現力を手に入れる方法を実践して学ぼう。 3Dモデル表示も! https://cx20.github.io/gltf-test/examples/grimoiregl/index.html?model=VC&scale=0.2 CSSだけでは難しい、シェーダーアートも! https://grimoiregl.github.io/grimoire.gl-example/#clover 動画やWebカメラへのエフェクト適用だって! https://grimoiregl.github.io/grimoire.gl-example/#webcam (リンクはWebカメラ
DockerとSeleniumGridとNightwatchでE2Eテストを始めよう - 文系プログラマによるTIPSブログ
Dockerで簡単に始められますよ〜 Nightwatchならライトにサクッと書けますよ〜 皆さんはE2E(end to end)テスト、してますか？ 今回はDocker、Selenium grid、Nightwatchを使ったE2Eテスト（ブラウザテスト）の環境構築からテスト実行、VNCでテスト実行の様子を確認するところまでやってみようと思います。 技術要素 なぜNightwatchなのか 環境構築 docker node.js for mac for windows テストの準備 dockerコンテナ git clone node_moduleの依存 nightwatchの設定 docker-hub Nightwatchでテストを実行する ローカルでテストする場合 Selenium Gridで並列テストする場合 dockerコンテナの起動 Selenium Gridの動作確認 Nigh
JavaScriptの1msは4ms - Qiita
はじめに JavaScriptのタイマー処理(setTimeout(), setInterval())は1000分の1秒の精度(ms)で遅延時間を指定することができます。 setTimeout(function() { // 1ms後に実行してほしい alert('hello!'); }, 1); 見ての通り、上記のコードは第一引数に渡した関数が1ms後に実行されることを期待して書かれていますが、実際にこれを実行すると4ms以上の遅延が発生する可能性があります。 これは、JavaScriptエンジンの実装によって、4ms以下の設定値は4msに矯正するという処理が行われているためです。 ※追記）厳密には上記処理のみを実行した場合は4msへの矯正は行われないようです。4msへの矯正が行われる条件として当記事最下部に追記を行っておりますので併せてご参照下さい。 なぜ4msなのか 実はこの4msと
Testing on Headless CI Systems (Travis CI, Jenkins) | Electron
Being based on Chromium, Electron requires a display driver to function. If Chromium can't find a display driver, Electron will fail to launch - and therefore not executing any of your tests, regardless of how you are running them. Testing Electron-based apps on Travis, CircleCI, Jenkins or similar Systems requires therefore a little bit of configuration. In essence, we need to use a virtual displ
Nightmareがv2(Electronベース)になり、使いやすく感動したのでLIGブログのPV/UUデータ取得を自動化してみた。 - Qiita
Nightmareがv2(Electronベース)になり、使いやすく感動したのでLIGブログのPV/UUデータ取得を自動化してみた。Node.jsNightmareElectron LIGアドベントカレンダー1日目です！ こんにちは@n0bisukeです。 Nightmareを久々に使ってみたら起動したタイミングでElectronが起動してびびってたらそういうことになったみたいです。 Google Analyticsにログインしてカスタムレポートの値を取得する作業を自動化してみました。 あとでもうちょい細かく書いてLIGブログでまとめてみます(予定)。 Nightmareとは NightmareまたはNightmare.js http://www.nightmarejs.org/ ヘッドレスブラウザでJSの自動テストなどを行うPhantom.jsのラッパーツール・ライブラリです。 ログイン
Go + WebDriver でブラウザ操作を自動化する - Qiita
Go + WebDriver でブラウザ操作を自動化してみたメモ。 ライブラリは sclevine/agouti を使ってみました。 sclevine/agouti は、Selenium 公式が提供している Go のクライアントライブラリではない（まだそういったものは存在してなさそう）けど、Selenium Server 等さえインストールしておけば、うまいことよしなにしてくれる代物。 他の似たようなライブラリと比べてシンプルで分かりやすいように思いました。 下記、各ブラウザ毎のサンプルコード。 qiita.com にアクセスしてスクリーンショットを撮り保存する処理。 Firefox $ brew install selenium-server-standalone $ go get github.com/sclevine/agouti $ go run main.go // main.g
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome の marquee 要素が 優秀だった話
GitHub - schickling/chromeless: 🖥 Chrome automation made simple. Runs locally or headless on AWS Lambda.
GitHub - westy92/html-pdf-chrome: HTML to PDF or image (jpeg, png, webp) converter via Chrome/Chromium
WebKit Internals API - latest log
