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ページを読み込み、画面キャプチャの取得や、指定された場所をクリックし、値を入力し結果を取得する、といった操作を自動的に行わせ
JavaScriptでのDOM操作は重いのかという話とForced Synchronous Layoutについて - id:anatooのブログ
2015年にもなるのにJavaScriptでのDOM操作のパフォーマンスについて書く。ウェブページにインタラクションを持たせたい時に、JavaScriptでDOM操作を行うことがよくある。このDOM操作のパフォーマンスについて、よく聞く意見を大別すると次の2つがある。 JavaScriptによるDOM操作は重たい レンダリングが重いだけで、DOM操作そのものはそれほど重たくない JavaScriptでオブジェクトのプロパティを操作したりする単体の処理は通常1ミリ秒もかからないが、DOM操作をするとレンダリングが完了するまでに数十ミリ秒程度かかったりする場合がある。1番目のDOM操作が重たいと言っている人は経験則的にそう言っていることが多い。 レンダリングの仕組みを知っている人は2番目の意見を言うが、重箱の隅をつつくような話をするとこれも必ずしも正しいわけではない。DOM操作するコードによっ
JavaScript (Electron) を使ってアプリの見栄えを整える - Qiita
Electronを使って見栄えを整えてみる ElectronはJavaScriptでデスクトップアプリケーションが作れるツールです。 前回「30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで」では簡単なアプリを作って配布するところまでやりました。 あとはいつも通りの JS + HTML + CSS でガリガリ書いていけばいいのですが、まずは見た目から入ろうということで、もう少しアプリっぽい見栄えにしてみましょう。 ちなみに、Macではいろいろ動作を確認しましたが、Windowsは知りません。 大体同じように動くはずですが、もしダメだったらWindows版の記述を教えて頂けると助かります。 基本設定は browser-window APIで browser-windowはアプリのウィンドウを表示するためのAPIです。 例えば、以下は単なるin
Stream API がブラウザにやってくる - Block Rockin’ Codes
Intro 今日は、フロントのプログラミングスタイルに、にまた一つ大きな変化をもたらすであろう Stream という API についてです。 この仕様は現時点でまだ策定中であるため、 API は変更される恐れがある点にご注意ください。 Stream API 以前 「Node.js の Stream API で「データの流れ」を扱う方法」 という記事を書きましたが、簡単に言うとあれがブラウザにもやってくるという話です。 非同期処理おさらい もう何度も書いた話なので駆け足で。 JS はシングルスレッドでイベント駆動な世界なので、何をするにも非同期であり、コールバックを登録することで完了した結果を受け取る API が基本です。 これは、ブラウザの DOM の API でも、 Node.js でも共通しています。 概念を疑似コードで書くと以下のような感じです。 console.log('1');
[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET
[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう こんにちは、@yoheiMuneです。 ブラウザのレンダリングの仕組みはHTML5 RocksやHow browsers workで詳しく解説されてきました。しかしそれらはとても詳細で、読破して理解するのは大変です。 今回のブログでは手軽にレンダリングの概要を理解できるように心がけました。またより詳しく学べるようなリンクも記載しました。 そしてブラウザのレンダリングの仕組みを理解した上で、どのようなJavaScriptを書くべきかについても記載しました。 目次 ブラウザのレンダリングの仕組み この章では、HTMLとCSSが読み込まれてから画面に表示されるまでの間に、ブラウザがどのような処理を行っているかを説明します。 ファイル読み込みから表示までの一連の流れは以下図の通りです。 [1]
![[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/705cdef7654f2f96a242f9a2834ce643b78de75c/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F336.jpg)
Chrome DevToolsを使いこなすための参考サイトまとめ | 1 pixel｜サイバーエージェント公式クリエイターズブログ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 フロントエンドエンジニアの谷です。 本記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。 すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基本的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう！ 基本的な使い方 Chrome DevTools Overview 基本はやはり公式ドキュメ
OTOYとMozilla、プラグイン不要のJavaScriptライブラリ「ORBX.js」発表
OTOYとMozilla、プラグイン不要のJavaScriptライブラリ「ORBX.js」発表：HTML5対応の全ブラウザに対応 米OTOYとMozillaは5月3日、ネイティブアプリや動画などのコンテンツを、HTML5対応のブラウザでシームレスに実行できるようにしたJavaScriptライブラリ「ORBX.js」を発表した。 米ソフトウェア会社のOTOYとMozillaが手を組んで、デスクトップPC向けのネイティブアプリや動画などのコンテンツを、HTML5対応のあらゆるブラウザでシームレスに実行できるようにしたJavaScriptライブラリ「ORBX.js」を5月3日に発表した。 ORBX.jsではWindowsやLinux、Mac OS X向けのPCアプリをクラウドで仮想化し、モバイルブラウザを含むHTML5対応のあらゆるブラウザにストリーミングできるという。 ORBX.jsに含まれる
Same-Origin Policy とは何なのか。 - 葉っぱ日記
ちょっと凝ったWebアプリケーションを作成していたり、あるいはWebのセキュリティに関わっている人ならば「Same-Origin Policy」(SOP)という言葉を一度は聞いたことがあると思います。日本語では「同一生成元ポリシー」あるいは「同一生成源ポリシー」などと訳されることもありますが、個人的には「オリジン」は固有の概念を表す語なので下手に訳さず「同一オリジンポリシー」と書いておくのが好きです。 さて、この「オリジン」とは何なのかという話ですが、これは「RFC 6454 - The Web Origin Concept」で定められており、端的に言うと「スキーム、ホスト、ポート」の組み合わせをオリジンと定め、それらが同じものは同一のオリジンとして同じ保護範囲のリソースとして取り扱うということです。 例えば、http://example.jp/fooとhttp://example.jp:
JavaScriptの実行速度を劇的に改善するasm.jsの特徴は、CやC++のような言語をJavaScriptのサブセットで記述すること
JavaScriptの実行速度を劇的に改善するasm.jsの特徴は、CやC++のような言語をJavaScriptのサブセットで記述すること 6月のリリース予定で現在開発が進んでいるFirefox 22では、JavaScriptのサブセット言語仕様であるasm.jsと、asm.jsに最適化したJavaScriptエンジンのOdionMonkeyが搭載予定とのことです。この両者の組み合わせは、JavaScriptを型つき言語として事前コンパイルすることで、いま以上に高速に実行できると期待されています。 asm.jsとは、jQueryのようなJavaScriptライブラリのようなものでも、Node.jsのようなフレームワーク実装のことでもなく、JavaScriptを基にしたサブセットの言語仕様です。 新しい言語を作るのではなく、既存のJavaScript文法をそのまま利用しつつ高速化を実現するa
asm.js:コンパイラのための低レベルかつ高度に最適化可能なJavaScriptのサブセット
JavaScriptのサブセットとして静的型付け言語を定義し、事前コンパイルを可能にすることでJavaScriptの実行速度を劇的に改善しようというasm.jsの概要を、1つ前の記事で調べました。 まだasm.jsの情報は少ないのですが、その中でも分かりやすくまとまった記事がDevon Govett氏のブログBADASS JAVASCRIPTのエントリ「asm.js: A Low Level, Highly Optimizable Subset of JavaScript for Compilers」です。 Govett氏に翻訳の許可を得たので、翻訳記事として掲載します。 asm.js: A Low Level, Highly Optimizable Subset of JavaScript for Compilers MozillaのDavid Herman、Luke Wagnerそして
jQuery 1.9 に更新する際に注意すべき変更点の自分なりのまとめ | 私的なjQuery他
jQuery Core 1.9 Upgrade Guide | jQuery の「Changes of Note in jQuery 1.9」を読んで、 自分なりにまとめました。 誤訳して間違ったことをまとめてたり、 最新の情報でないかもしれないので 読まれる際はご注意下さい。 （※ページをそのまま訳したわけではないと、思います） jQuery 1.9 では API の削除や 挙動の変更を行っています。 この記事は、前のバージョンから更新した時、 既存のコードに影響がでそうな変更を 並べたものになります。 変更点を全部網羅しているわけではありません。 箇条書きにすると以下のような感じ： 削除された機能 .toggle(function, function) の用法 jQuery.browser() .live()と.die() jQuery.sub() document 以外の要素での A
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JavaScript][IE] みんなが幸せになれるコード - Qiita![[JavaScript][IE] みんなが幸せになれるコード - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/8a49ef786ce0e12c746f789f1485689ab76b80cb/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNzc1NiUyRnByb2ZpbGUtaW1hZ2VzJTJGMTQ3MzY4MDcwOD9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmYmc9RkZGRkZGJmZtPXBuZzMyJnM9MDFkOGFhOTE2MTQ3OGI4M2QxYzRlNjU4YjM2MTZiZDc%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Da9a8fa870a5ede15ce6ffc25b7485b6e%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCU1QklFJTVEJTIwJUUzJTgxJUJGJUUzJTgyJTkzJUUzJTgxJUFBJUUzJTgxJThDJUU1JUI5JUI4JUUzJTgxJTlCJUUzJTgxJUFCJUUzJTgxJUFBJUUzJTgyJThDJUUzJTgyJThCJUUzJTgyJUIzJUUzJTgzJUJDJUUzJTgzJTg5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MGRhMzZlYzhiYjRiOTdmNzFkYTgzOTBkOWZiOWFhZTI%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBwaGkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1mNzA5ZDQyYTc3OGRkNzYxZDRkNmY1YjBiZDVhNWZmNw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Df68d9e3265281840f7142c0928c3789d)
スマホ用のブラウザ判別を行うための「 jquery.browser.sp.js 」
canviz - Google Code