Webブラウザの操作をJavaScriptで自動化。Headless Chromeのフレームワーク「Puppeteer」がバージョン1.0に到達。ChromeのDevToolsチームが開発
UIを持たずスクリプトから操作可能なWebブラウザのHeadless Chromeを利用するためのフレームワーク「Puppeteer」がバージョン1.0に到達した。Webアプリケーションの自動テストなどに利用可能だ。 GoogleのWebブラウザ「Chrome」は、ユーザーインターフェイスを持たずコマンドラインやリモートデバッグ機能を通じてWebブラウザを操作できる「Headless Chrome」機能を備えています。この機能は2017年6月にリリースされた「Chrome 59」から実現されたものです。 Headless Chromeを利用すると人間がWebブラウザをマウスやキーボードで操作することなく、プログラムでHeadless Chromeを起動し、特定のWebページを読み込み、画面キャプチャの取得や、指定された場所をクリックし、値を入力し結果を取得する、といった操作を自動的に行わせ
Google Chrome 49で正しい乱数が返ってくるようになった模様 | SIBYL System
Math.random()関数は0~1の間の少数を含む値をランダムに返します。V8含むJavascriptエンジンでは擬似乱数数ジェネレータ(PRNG)を使ってMath.random()を実装しています。 擬似乱数とは、乱数のように見えて、実際には計算によって求めている、規則性や再現性がある乱数のことです。擬似乱数が本物の乱数と(統計的に見て)見分けが付かない状態だと質の良い擬似乱数であると言えます。 最近までV8エンジンは擬似乱数ジェネレータとしてMWC1616(multiply with carry, combining two 16-bit parts)と言われるアルゴリズムを使用していました。githubにあるコードは以下のようです。 function MathRandom() { var r0 = (MathImul(18030, rngstate_0) + rngstate_1
「AngularJS」と「はてブAPI」で作るChromeアプリの作り方を完全公開！ -
どうも、まさとらん（@0310lan）です。 今回は、Googleが提供する「Chromeブラウザ」で動作するアプリケーションを作ってみたいと思います。 「なんだか難しそう…」と思うかもしれませんが、ざっくり言ってしまうと普通に「Webページ」を作るのと変わりません。 そこで、簡単なサンプルアプリを作りながら、自分だけのChromeアプリ開発に挑戦してみましょう！ ■Chromeアプリとは？ 開発を始める前に、まずは予備知識としてChromeアプリの「種類」についてご紹介しておきます。 実は、「Chromeアプリ」と言っても、いくつか異なる種類があります。 例えば、「Appspector」というChromeアプリは、ブラウザの機能を拡張することで、表示されているWebページがどんな技術を利用して作られているのかを表示できるようになります。（https://chrome.google.com
Webアプリに高機能な音声認識を追加するWeb Speech API - Kesinの知見置き場
Microphone' by Juan_Alvaro, http://www.flickr.com/photos/31590610@N03/5408706936/ CC by 2.0 最近、にわかに音声認識というものが盛り上がっています。 スマートフォンに搭載されている、AppleのSiri、NTTドコモのしゃべってコンシェル、Googleの音声検索あたりが有名ですが、お掃除ロボやエアコン、カーナビといった家電にも音声認識機能が搭載されるようになってきました。 認識の精度や意識の問題（人前で機械に話しかけるのはちょっと恥ずかしい）などの課題はありますが、音声認識はアプリや家電のUIの一部としてこれから普及していくと思われます。 ですが、一般の開発者にとって音声認識機能を自分のアプリやウェブサイトに組み込むのはまだまだ難しいです。 Juliusのようなオープンソースの音声認識システムもありま
Chrome DevToolsを使いこなすための参考サイトまとめ | 1 pixel｜サイバーエージェント公式クリエイターズブログ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 フロントエンドエンジニアの谷です。 本記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。 すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基本的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう！ 基本的な使い方 Chrome DevTools Overview 基本はやはり公式ドキュメ
Chromeのリモートデバッグ機能がすごい！ - Hacking My Way 〜 itogのhack日記
ここの動画で紹介されているリモートデバッグがかなり強力なツールなので紹介します。 事前準備 開発マシン側にadbというツール＆Android端末のUSBデバッグを有効にする必要があります。 開発してる人なら説明いらないので省略。 リモートデバッグを有効にする Android端末と開発マシンをUSBで接続して、端末が認識されていることを確認して下さい。 開発マシンのターミナルで以下コマンドを打ちます。 $ adb forward tcp:9222 localabstract:chrome_devtools_remote Android端末のChrome for Androidでメニューから 設定→デベロッパーツール→USBウェブでバッグを有効化にチェック 開発マシンのブラウザで下記URLにアクセスします。 localhost:9222 すると、Chrome for Androidのタブで開い
HTML5 Boilerplateの開発者でGoogleのエンジニア、ポール・アイリッシュに聞くCSS高速化テクニック - builder by ZDNet Japan
Adobe Systemsがロサンゼルスで5月に初旬に開催した「Adobe MAX 2013」において、HTML5 Boilerplateの開発者として知られるPaul Irish氏の講演「Mobile CSS Performance」を聴講した。その内容をベースにしながら、CSSを高速化するためのさまざまなテクニックを紹介する。 Paul Irish氏は、HTML5 BoilerplateやModernizrなどの開発者として世界的に著名なGoogleのエンジニア。その彼が直接CSSのパフォーマンスを語るとあって、セッションは大変な人気であった。 一般的にウェブページの高速化、特にモバイルにおいてはCSSを高速化することよりもネットワークのパフォーマンスを最適化する方が効果が高い。そのため、まずはPageSpeedやYSlowなどを効果的に使用し、HTTPリクエスト数を減らす、ダウンロー
『JavaScript開発時に便利なツールたち』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。アメーバ事業本部でディベロッパーをしています、平木(id:Layzie)です。 先日2/9に行なわれたFrontrend Vol.4で"JavaScript Development Tools – JavaScript開発の効率アップ"というテーマで登壇させていただいたのですが、セッションでは時間の都合でお話できなかった補足や、その他のツールのご紹介をしていきたいと思います。公式サイトで各講演のスライドと動画を見ることができますので、残念ながらイベントにいらっしゃらなかった方は、ぜひご覽になってください。 Chrome Canaryビル
CreateJSを使ってインタラクティブなHTML5デモを作ってみた - ICS MEDIA
CreateJS勉強会の参加応募数からも関心の高さがうかがえるCreateJSですが、弊社でも研究をしており今回は制作したデモをいくつか紹介します。 有名な絵画っぽいもの CreateJSとCSSを用いたデモです。カーソルをキャンバス上で動かすと絵が描け、ドラッグするとちょっと3Dっぽい動きをします。絵の描画はCreateJS、3Dっぽい動きはCSSで作っています。絵の描画は重ね塗りし続けると負荷が増大するので、毎フレームキャッシュし描画するコストを減らし最適化しています。 デモはこちらから Box2D Drop CreateJSと物理演算ライブラリ「Box2D」を組み合わせたデモです。マウスでアイコンをドラッグ＆ドロップすることで投げることができます。Box2DライブラリはActionScript版とほとんど同じAPIで用意されているので、ActionScriptのノウハウを活用できます
【小ネタ】Chromeのローカルセキュリティポリシーの回避 | DevelopersIO
こんにちは。ともだです。 Chromeではセキュリティの関係でローカルファイルからローカルファイルの読み込みができなくなっています。(Chrome5からの仕様ですね) ひとまずサーバ立てずにhtmlをローカルで動作確認しようとした事がある人なら結構おなじみの現象かと思います。 これを回避するには、Chromeの起動オプションに「–allow-file-access-from-files」を付ければ良いわけですが、winの場合にはアプリのショートカットアイコンのコンテキストメニューからプロパティを開いてショートカットタブのリンク先にchrome.exeに続いて「–allow-file-access-from-files」を入力します。このショートカットを使えばローカルファイルからローカルファイルの読み込みができます。 で、macの場合にどうするか迷う人が結構いるみたいなのでメモ書きしておきま
Google Chrome Frame: サイト管理者向けガイド
2013-06-30更新: 2013 年 6 月、Googe Chrome Frame の開発終了 が発表されたのを受け、新しい記事 を書きました。 IE で Google Chrome と同等のレンダリングを実現するプラグイン、Google Chrome Frame が 正式版になりました。ユーザはよりリッチで快適な Web 体験ができるし、サイト管理者としても事実上古い IE のシェアが減ることになって嬉しい、しかもインストールに管理者権限が不要という、ちょっといいプラグインなんですよね Chrome Frame。 とは言えユーザがインストールして使ってくれないことにははじまらないので、この Chrome Frame の利用を促進するためにサイト管理者にできることを紹介します。 ページを Chrome Frame でレンダリングさせる まず、すでに Chrome Frame がインスト
Chrome Experiments
Chrome Experiments is a showcase of work by coders who are pushing the boundaries of web technology, creating beautiful, unique web experiences. You'll find helpful links throughout the site for creating your own experiments, and you can also explore resources like WebGL Globe and our workshop of tools.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryで設定されたクリックイベントなどを定義している場所を調べる方法 - Qiita
JavascriptのChromeでのデバッグ方法個人的まとめ2016 - Qiita
Chromeでローカルファイルにアクセスする時の注意
Web Lab
「Google Chrome Deveoper Tools」はこう使う！ 基本機能チュートリアル & GDD 2011 セッション概要
作業効率が10倍アップする Chrome Developer Tools の使い方 - はてブロ@ama_ch