Javascript

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 を設定します ...

ページ全体じゃなくて 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; //+ ...