Mac で Chrome のヘッドレスモードを試してみた

Thu, 04 May 2017 08:45:29 +0900

Chrome がヘッドレスモードに対応したということなので試してみました。コマンドラインからchromeが扱え、URLのテキスト出力、pdf出力とpng出力が出来ます。

EXTENDED BODY:

環境

macOS Sierra version 10.12.4
Chrome Canary

手順

次のページの手順をなぞってみました。環境に書いた通り macOS で試しています。Windows はまだ非サポートのようです。

Getting Started with Headless Chrome | Web | Google Developers

Chrome Canary を取得する

まず一番最初で躓きました。コマンドラインで動かすとエラーが出ました。

pink-poodle:~ nnasaki$ chrome --headless --dump-dom https://www.chromestatus.com/
[0503/211508.668380:ERROR:resource_bundle.cc(767)] Failed to load /Applications/Google Chrome.app/Contents/Versions/58.0.3029.96/Google Chrome Framework.framework/Versions/A/resources.pak
Some features may not be available.
Segmentation fault: 11

先のドキュメントを見返すとちゃんと書いてありました。version 59 以上対応です。普段使っている stable はまだ 58 でした。

f:id:nnasaki:20170503220232p:plain

Chrome Canary は 2017/5/3 現在、version 60 なので次のURLからダウンロードします。

www.google.co.jp

こんな感じでインストール出来ました。

f:id:nnasaki:20170504000506p:plain

Alias を設定する

一々、 "/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome" と長ったらしいのを入力するのは面倒なので、alias を設定します

jQuery.flickSimple.js で a タグじゃない要素のクリックイベントを拾いたい

Thu, 13 Sep 2012 02:07:52 +0900

ページ全体じゃなくて div で区切ったテーブルとかリストだけスクロールさせたいときに jQuery.flickSimple.js というのを使っている。これはタッチで任意の要素をフリックでスクロールできるからすごく便利なんだけど、とある要素をクリックしたというイベントが a タグが入っていないと発生しなくて困った。例えば、$(’#verticaly’).on(‘click’, ’li’, function(){ alert(“test”); }); っていうのを無理やり追加してリストにクリックイベントを追加したとしても、フリック時もクリックと判定されてしまうのでうまくいかない。デモは以下。

ちょっと見にくいですが、縦にフリックでスクロールが出来ます。

jQuery.flickSimple.js は onClick イベントが用意されていて以下のように書くことでクリックイベントを拾えるようになる。

ところが上記の onClick イベントは a タグがある場合のみ有効となっているようで、上記HTML から a を取り除いてしまうと以下のようにクリックイベントが起きない。

GitHub のソースを見ると下記のようになっていて、意図的にはじいている。

touchend: function(e) {
			var o = this;
			if ( o.disabled || o.startX === null || o.startY === null ) { return; }
			o.startX = null;
			o.startY = null;
			if ( o.anc && ! o.touchhold ) {
				if ( o.onClick ) {
					o.onClick( o.anc );
				}
```ちょっと見づらいですが、以下のように改造してみました。//+としているのが追加したところです。

touchend: function(e) {
    var o = this;
    if ( o.disabled || o.startX === null || o.startY === null ) { return; }

// chg アンカー以外のクリックイベントに対応させる var te = o.touchable ? e.originalEvent.touches[0] : e; //+ var nowX = te.clientX; //+ var nowY = te.clientY; //+

Javascript on nnasaki のブログ

Mac で Chrome のヘッドレスモードを試してみた

環境

手順

Chrome Canary を取得する

Alias を設定する

jQuery.flickSimple.js で a タグじゃない要素のクリックイベントを拾いたい