JSON sucks.But we're making it better.Stop staring at thousand line JSON files in your editor and start staring at thousand line JSON files in the world's best JSON viewer. With a few nice features to help make it not the worst.
はじめに 『レンダリングの仕組みなんて知らなくても、ブラウザが勝手にやってくれるじゃん!』 当時駆け出しのエンジニアだった私はそう思っていました。 実際、当時の私はレンダリングの『レ』の字も知りませんでしたが、特に業務上で問題はありませんでした。 しかし、その時は突然訪れました。 クライアントの要望でアニメーションを多彩に取り入れた案件を実装した際に、テスト段階で一部ブラウザ(S○f○ri、E○ge)でアニメーションがひどい状況になっていることが発覚しました。 (開発中はChromeで確認を行っており、Chromeでは特に問題はなかったので発覚が遅れました。) それからは、狂ったようにパフォーマンスの改善方法をググり、修正する日々が続きました。(最終的には、なんとかマルチブラウザでの動作も担保し、納品まで完了しました。) その案件が落ち着いた後、改めて自分の調べたことを振り返ると、局所的な
Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium. The Chrome DevTools team maintains the library, but we'd love your help and expertise on the project. See Contributing. What can I do? Most actions you can take manually in the browser can be done wit
Puppeteerのnode apiを使ったサンプルプログラムを作り、ヘッドレスChromeを操作してみましたので報告します。 先日、Google Chromeにヘッドレス機能が追加されました。GUI無しにコマンドラインからChromeを操作できるようになったわけです。 https://developers.google.com/web/updates/2017/04/headless-chrome?hl=ja ちょっと前まではnodeからこのヘッドレスChromeへアクセスするにはchrome-remote-interfaceなどが必要でしたが、最近Puppeteerというものが現れてもっと簡単にヘッドレスChromeを操作できるようになりました。 https://github.com/GoogleChrome/puppeteer 公式サイトにあるPuppeteerの使い方 スクリーンシ
web上の情報を抽出するスクレイピング技術ですが、いままでphantomJSで行っていましたが、chromeがヘッドレスブラウザに対応したとのことで、そのnodeライブラリであるpuppeteerで実践してみました。 環境構築 とりあえずお試しということで、dockerで構築しました。 構成はnode.jsのdockerイメージにpuppeteerを追加するかたちです。 下記2サイトの手順を大幅に参考にさせていただきました。 Docker コンテナ上で Puppeteer を動かす Puppeteer をDockerコンテナで利用する ディレクトリ構成はこんな感じ。 / ├ app/ │ └ script/ │ └ app.js │ └ data/ ├ docker-compose.yml ├ Dockerfile └ Package.json FROM node:9.2.0 RUN a
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
このノートは、Paul Irishによる記事 “WebKit for Developers” の日本語訳です。 僕ら開発者の多くにとって、WebKit はブラックボックスだ。HTML, CSS, JS, その他のアセットを投げると、WebKit は魔法でもかけたかのように、綺麗な Web ページを返してくれる。しかし、僕の同僚 Ilya Grigorik は本当の WebKit はこうだと言っている。 WebKit はブラックボックスではない。ホワイトボックスなんだ。さらにそれだけではなく、オープンなホワイトボックスなんだ。 じゃあ、これから次のことについて理解していこう。 WebKit ってなに? なにが WebKit じゃないの? WebKit ベースのブラウザで WebKit はどう使われているの? なんですべての WebKit が同じじゃないの? さて、世の中に数多くの WebKi
How browsers work Stay organized with collections Save and categorize content based on your preferences. Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrot
2007年01月25日 スタンドアローンでIE3~IE7をまとめていれれるツール『Multiple_IE』 最近仕事でIE7が普及しているせいか、IE6を入れているマシンが 少なくなった。一度IE7をいれるとなかなかIE6に戻すことができず IE6で確認したのか?と問われると困ってしまう そこでスタンドアローン(単独アプリ)で気軽にIEを いれれるという優れものアプリがあるので紹介する。 ■スタンドアローンのIE3~IE7を公開するサイト ■Install multiple versions of IE on your PC | TredoSoft ■スタンドアローンのIE3~IE6 はっきりいってIEの3なんかは全く仕様用途はないのだが、 まれに仕事でブラウザチェックするときIE6などはチェック する場合があるので、こいつをいれると便利。 ■IE6, IE5.5, IE5,
Pardon our dust! This iteration of browsers.evolt.org is under test, containing content which has not yet been finalized. evolt.org Browser Archive Who archived all these? One of the founding members of evolt.org, Adrian Roselli (or aardvark for those of you who visit the site or are on the mailing list), has provided the archive as well as its support through his company, Algonquin Studios. You c
Abe Fettig’s Weblog 実Detecting IE7 in Javascript IE6とIE7を判別するJavascriptコード。 判別は次のようなコードで出来るようです。 if (typeof document.body.style.maxHeight != "undefined") { // IE 7, mozilla, safari, opera 9 } else { // IE6, older browsers } IE7もそろそろ正式版がリリースされるようですのでメモしておくとよいかも。 関連エントリ 古いバージョンのIEを1台のPCで使う方法 IE7 Is Coming This Month...Are you Ready?
Install multiple versions of IE on your PCで、IE3からIE6までの異なるバージョンのIEを選んでインストールできるインストーラというのが配られている。 IE4やIE5を単体で動く形で配布しているサイトは前からあった。まあこれでもいいんだけど、インストーラのほうは複数バージョンが組み込まれていて、どれを入れるか選択できて、ショートカットも生成できるということでさらに楽になってる。 もちろん、改造されたバイナリの非公式な配布なので、このインストーラや入れたIEに何か変な仕掛けがあるということもあるかもしれないが。 IE7との共存のほうはこっちの記事に書かれている。 # どちらにしても、単体で動かす別バージョンのIEでは、いろいろ不具合や動かない機能があるようなので、単純な画面描画のチェックぐらいにしか使えないだろうとは思う。 [参考] IE7ベータを
1年ぐらい前からある無料サービスで、自分の作ったサイトやブログなどがほかのブラウザから見ると正常に見えているかどうかを画像として見せてくれるサービスです。特に自分が普段使っているOS以外の環境下での見え方がわかるので重宝します。 対応しているブラウザは、WindowsはFirefox1.0/1.5/2.0、K-Melon 1.0、MSIE 6.0/7.0、Mozilla 1.7、Navigator 4.8、Netscape 6.2/7.2/8.1、SeaMonkey 1.0。MacはSafari 2.0。LinuxはDillo 0.8、Epiphany 2.14、Firebird 0.7、Firefox 1.0/1.5/2.0/3.0、Flock 0.7、Galeon 2.0、Konqueror 3.3/3.4/3.5、Mozilla 1.7、Navigator 4.8、Opera 8.5
前回の記事でFirefoxはIEよりも遅く、Operaが総合的に見ると最速であるという結果に終わりましたが、各CPUごとに最適化したものを導入することでFirefoxが今よりも高速になります。 ダウンロードは下記の各サイトから。 Macintoshの各種CPU、要するにIntel Mac、G4、G5に最適化されたFirefoxはこちら。 Optimized Firefox 1.5.0.4 for G4, G5, and Intel: BeatnikPad Journal Pentium 4やAthlonなどに最適化されたのは日本語版が以下から入手可能。 Firefox 私的ビルド AMDのみにとことん最適化されたのは以下から。 Swiftfox 各種最適化ビルドの選び方は以下の記事を参考に。 最適化ビルドのスゝメ ― ソフトウェア関連記事 また、各種非公式ビルドは以下から入手できます。 T
■ 簡易Webブラウザに winnytp:// プロトコルハンドラを組み込んでみた javax.swing.JEditorPaneを使って簡易ブラウザを作った。戻るボタンとリロードボタンは付けたが、まだフォームの処理や text/html 以外のContent-Typeの処理がない。 これに、先週の日記「Java用「winnytp://」プロトコルハンドラを作ってみたら簡単にできた」で作ったハンドラファクトリをセットしてみたところ、そのまま動いた。 ファイルのリンクをクリックするとそのサイトからそれをダウンロードする仕掛けになっている。しかし、プロトコルハンドラがダウンロード機能に対応していない。 import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.event.*; imp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く