Web開発者ツールのコマンドラインAPIが便利。色々と捗るぞ

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

ある日、あるページで、Chromeデベロッパーツールのコンソールを開き、「jQuery使ってるページかな?」なんて思って、『$』と入力してエンターキーを押すと、以下のような表示に。

コマンドラインAPI?? って何だ? 標準でjQueryみたいなことができるのか? と思いながら検索してでてきたのが以下のサイト。
Command Line API Reference – Chrome DevTools — Google Developers

元々Firebugについていた機能なようなのですが、Chromeのデベロッパーツールにもついているそうです。
というわけで、高校の英語の授業では成績順にA,B,Cクラスと分かれていてずっとCクラスだった自分、そして大学の英語の必須授業はさっぱり分からずに危うく単位を落としかけたほどの自分(ほとんど出席加点だと思われます)が、上記英語のページを読み取っていろいろ調べてみました。

とりあえず、今回のために下記ページを用意。
コマンドラインAPI用テスト用ページ
ついでに、IE11のF12開発者ツールやFirebugでも動くかどうかも検証しておきました。

$(selector)

IE11:☓ Firebug:◯
document.querySelectorと同義なよう。jQueryを使ってるサイトで使うと、jQueryオブジェクトが生成されるので注意。IE11では、document.getElementByIDと同義なよう。
テスト用ページで、$(‘li’)とすると、下記のような結果となる。
consoleapi-$

$$(selector)

IE11:◯ Firebug:◯
document.querySelectorAll()と同義なよう。$$(selector)[0]は$(selector)と同じなはず。
テスト用ページで、$$(‘li’)とすると、下記のような結果となる。
consoleapi-$$

$_

IE11:☓ Firebug:◯
直前に実行した式をあらわすよう。
例えば、今回用意したテスト用ページで、$$(‘li’)とした後、$_.lengthとすると、下記のような結果となる。
consoleapi-$_
ただ、正直こんなことをするぐらいなら、上矢印キーを押すと『$$(‘li’)』と表示されるので、その後に『.length』としたほうがいいような気もしなくはない。

$0 – $4

IE11:◯ Firebug:◯
最近Elementsタブで選択した要素をあらわすよう(ついでに$9まで実装すればよかったと思うのだけれども、なんで$4までにしたのだろ?)。
例えば、テスト用ページにおいてElementsタブで虫眼鏡のようなボタンを選択した後、ブラウザの『Google』という箇所をクリックして、コンソール画面で$0と入力してエンターキーを押すと下記のような結果となる。
consoleapi-$0
これは本当に便利です。$0ぐらいしか使わないと思いますが、本当に便利。
ちなみに、jQueryを使っている環境で、『$($0)』とすると、直前に選択した要素をjQueryオブジェクトとして取得できます。
consoleapi-$0-jQuery
上記の!function()以降5行は、jQueryを使っていないページでも、jQueryを使えるようにjQueryを読み込む方法です。
参考:Chrome の userscript (とConsole)で jQuery を使う方法 – 弘法にも筆の誤り

$x(path)

IE11:☓ Firebug:◯
XPathという構文を用いて要素を取得するよう。
例えば、テストページにおいて、『$x(“//li[a]”)』とすると下記のようになる。
consoleapi-$x
上記は、aタグを子要素にもつliタグをあらわす。
ただ、自分がXPathというものをよく分かってないので、詳しくは分かりません。以下のリンク先を参考にしてください。
XML Path Language – Wikipedia
XPath
特定の子要素を持っている要素を選択できるのはよさそうだけど、大概のことは$$()で事足りそうな気はする。

clear()

IE11:☓ Firebug:◯
コンソールのクリア。特に説明もいらないと思うし、特別役に立つというわけでもないので、詳細は省きます。

copy(object)

IE11:☓ Firebug:◯
引数に指定した式の実行結果をクリップボードに入れてるよう。
例えば、テストページにおいて『グーグル』という文字を選択した後に、『copy($0)』として実行した後、CtrlキーとVキーを押してペーストすると下記のような結果となる。
consoleapi-copy
Firebugだと、クリップボード内に”[object XrayWrapper [object HTMLLIElement]]”という文字列が入るよう。微妙に動作が異なるようです。

dir(object)

IE11:◯ Firebug:◯
引数にいれたオブジェクトのプロパティをすべて列挙してくれるよう。
例えば、『dir($$)』とすると以下のような感じに。
consoleapi-dir
これは面白い。『dir(window)』なんてしたら新しい発見があるかも?

dirxml(object)

IE11:☓ Firebug:◯
DOM要素など、XMLで表示できるオブジェクトをいれると、そのXMLを表示するAPIだと思われます。
例えば、テストページにおいて、『dirxml($$(‘body’)[0])』とすると以下の様な結果に。
consoleapi-dirxml
DOM要素だといまいちいい使い道が思いつかないけど、多分なにかいい使い方がるんじゃないかと思われます。

inspect(object)

IE11:☓ Firebug:◯
引数にいれたDOMオブジェクトを指定したエレメント画面に飛ぶようです。
例えば、コンソール画面で『inspect($$(‘body’)[0])』として実行すると、bodyタグを指定した状態のエレメントタブに飛びます。

getEventListeners(object)

IE11:☓ Firebug:◯
オブジェクトに登録したイベントが分かるよう。
正直、コマンドラインAPIを調べて一番ビックリしたのがこの機能。今回はこの関数用に別のテスト用ページを用意しました。
コマンドラインAPI用テスト用ページ2
上記ページは以下のようなコードとなっています。

HTML

JavaScript

ボタンが3つあり、上からonclickでアラートを表示するように指定、addEventListenerでクリックしたらアラートを表示するように指定、jQueryを用いてクリックしたらアラートを表示するように指定。というようになっています。

onclickでイベントを指定した要素を見てみると、以下のようになりました。
consoleapi-getEventListeners-onclick
Objectというオブジェクトがあると思うのでクリックしていくとlistenerというプロパティ名があり、そこに登録したイベント関数が書かれています。普通に表示すると最初の1行しか表示されませんが、マウスをあてるとツールチップとして関数の中身が表示されます(画像ではマウスが表示されてないので分かりにくいですが、右下の『function onclick(event){ alert(‘onclick’) }』と書かれた枠です)。

addEventListenerの場合か以下のような感じ。
consoleapi-getEventListeners-addEventListener
これで、どういう仕組みで動いているのか分からないイベントもすぐに分かるようになるかもしれません。

と思って、jQueryで登録したものを見ていると以下の様な感じに。
consoleapi-getEventListeners-jQuery
イベント内容は、『function (a){return typeof f!=”undefined”&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b}』としか表示されず、実際に登録した『alert(“jQuery Event”);』という文字はどこにも書かれていません。
jQueryで登録したイベントはうまく見ることができなさそう。何かいい方法はないものだろうか。

keys(object) values(object)

IE11:☓ Firebug:◯
引数にいれたオブジェクトのキーと値が一覧として表示されるよう。
実行結果は以下の様な感じに。
consoleapi-keys-values
for in文を使わずにすむという感じかな。

monitorEvents(object[, events]) unmonitorEvents(object[, events])

IE11:☓ Firebug:◯
引数にいれたオブジェクトにイベントが発生すると、そのイベントを監視してコンソール画面にそのイベントの結果が表示されるよう。unmonitorEventsでその監視を止めるらしい。
実行結果は以下の様な感じ。
consoleapi-monitorEvents
monitorEventsでwindowのマウスイベントを監視するようにし、unmonitorEventsでmousemoveのみ監視対象から外した結果です。確かに、unmonitorEventsを実行した後は、mousemoveのイベント結果は表示されてませんね。

profile([name]) profileEnd([name])

IE11:☓ Firebug:◯
関数などの解析を行うためのメソッドらしい。
profileを解析したい処理の前に実行し、profileEndで解析を終了するよう。
実行結果は以下の様な感じ。
consoleapi-profile
‘hoge’というリンクをクリックすると、profiles画面に。
consoleapi-profile2
・・・。
すみません。例が悪かったかもしれませんが、よく分かりません。とりあえず、profileメソッドを使った間のCPUの状況をみているようなのですが・・・。勉強不足です。

なお、今回IE11のF12開発者ツールにはないと書いたメソッドでも、コンソールAPIとしては提供されているものもあるようです(console.dirなど)。

IE11で@cc_onステートメントを試してみる

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

昨日IE11がリリースされたので、インストールしてみました。
IE11

知ってはいましたが、F12開発者ツールがかなり変わってます。いろいろ進化しているようですが、縦幅が狭いと少し使いづらい気も・・・。
後、DOMツリー画面で要素を右クリックすると『要素をスタイル付きでコピー』なんて項目が。使い所があるか分かりませんが、面白そうではあります。
でも、カラーピッカーやルーラー機能はなくなった? あれ便利だったのに。

とまあ、もうちょっとF12開発者ツールはおいといて、今回はIE11で@cc_onステートメントは使えるかどうかという話。
@cc_onについて詳しくは下記のリンク先に書いてあります。
参考:@cc_on ってなに? – Clouder::Blogger
参考:@cc_onを使ってブラウザ判別 | Smart
参考:@cc_on ステートメント (JavaScript)
すなわち、簡単にいってしまえばIEのみで動作するスクリプトのようなものです。

知ってる人もいると思いますが、IE11ではユーザーエージェントに”MSIE”という文字がなくなりました。
試しに、F12開発者ツールのコンソールで”navigator.userAgent”とやってみると、以下の様な文字列が。

見ての通り、ユーザーエージェントの文字列に”MSIE”という文字がありません。なので、MSIEがあるかないかだけでIEを判別することができないわけです。

でも、IEを判別する方法はもうひとつあって、それが上でかいた@cc_onステートメントと呼ばれるもの。これがIE11でも動いてくれるのかどうか試してみました。
まずは、下記のコードで書いたHTMLを作成。

もし@cc_onステートメントが動くならばブラウザ上に”IEだね!”と表示され、動かないのであれば”IEじゃないよ!”と表示されます。
さて、この結果はというと・・・。

IE判別

動きませんでした。書き方間違えたか? と思ってF12開発者ツールの一番下のエミュレーション機能からドキュメントモードを10(IE10とほぼ同じ)にすると、ちゃんと”IEだね!”と表示されました。

もう、ここまでするならIEではなくて、全く新しいブラウザということにしたほうがいいんじゃないのかと思います(ユーザーエージェントにブラウザ名が入ってないって・・・)。

ただ、ユーザーエージェントにTridentというIEのレンダリングエンジンの名前は入っているので、IE11も含めたブラウザ判定をするのは、Tridentという文字があるかどうかを見るのが一番よさそうですね。
参考:javaScriptで対応ブラウザ判定 – Qiita [キータ]

Rを使ってニコニコ動画のデータを分析してみる

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

職場で統計に関する仕事をすることになり、最近Rの勉強をしています。
R のインストール – RjpWiki

とりあえず、ニコニコ動画のそれぞれのカテゴリの合計再生数ランキングにおける1位から300位までの動画のデータを作成したのでこれで試してみます(ランキングの上位を取得したデータなので、当たり前ですが偏りがあります。本来ならもっとランダムに取得できたらよかったんですが)。
http://am-yu.net/wp-content/uploads/2013/11/nico.txt
左から、カテゴリー、カテゴリーの中の再生数の順位、動画ID、再生数、コメント数、マイリスト数、です。

上記のテキストボックスを全て選択してコピーしたら、Rで下記のように入力

とりあえず、マイリストと再生数のプロットを表示してみる。options関数のscipen=100というのは、指数表現をしないための処理です。これをしないと、大きい数だと数値にEがついた指数表記になるので分かりにくい。

mylist-view-plot

なんだか相関ありそうです。なので、相関係数がわかるcor関数を使ってみます。

結果は、0.8042205となりました。

続いて、マイリストと再生数から回帰分析(この場合、単回帰分析)をやってみます。

こんな感じになりました。ここから分かるのは、マイリストがひとつ増えると再生数は29増えているということです。この29を係数というよう。ただし、マイリストが0だと再生数は227181という結果に。さすがに再生数が227181もあれば、マイリスト数は四桁ぐらいありそうな気もするのですが・・・。
決定係数(Multiple R-squared)が0.6468というのは、まあまあな結果ですが、もうちょっと高くなってほしいところです。

なお、コメント数と再生数はあまり相関がないようでした。相関係数も0.2044571とあまり相関がないと思えるような数値です。
mylist-view-plot

つづいて、コメント数とマイリスト数のカテゴリーから再生数を回帰分析してみます(この場合は重回帰分析)。

R-18がないのは別に配慮したわけではなく、たまたまR-18がデフォルトとなりました。つまり、ただたんにマイリスト数と27.987145を掛け、コメント数と0.156682をかけて切片(Intercept)の458110.790621を足しただけの数値は、R-18の動画の再生数の基準ということになります。VOCALOIDの場合はここから630814.309857を引いたものとなります・・・。あれ? これだと一見、VOCALOID動画のほうが再生数低いような気がしますね。そんなわけないんですが。
VOCALOIDの係数が低いのは、動画の再生数にたいするマイリストの割合が、VOCALOID動画は高い傾向があるのが原因かと思われます。
実際、カテゴリーだけを考慮した回帰分析だと、VOCALOIDの係数はプラスとなっているようです。

うーん。なんとも中途半端なエントリーになってしまった。もうちょっとRの使い方や、ニコ動のデータの分析について詳しくかけたらよかったのだけれども・・・。
もともと、コメント数がもうちょっと相関あると思ってやってみたことなので・・・。
ちなみに、コメント数5000000未満を省くと相関あるんじゃないかと思ってやってみた結果が以下。

mylist-view-plot

少し相関が高くなってきましたが、もうちょっと高いのが理想です。

画像がなければ自動的にダミー画像を表示する方法(jQuery使用)

[`evernote` not found]
[`livedoor` not found]
[`yahoo` not found]

タイトルのとおり、imgタグのsrcにいれた画像リンクがなければ自動的にダミー画像に置き換える方法を紹介。
ただ実際に作ってみると思ったようにいかなくて、回りくどくなってしまいました。

以下は、画像がなければPlacehold.jpの画像を表示する例です。なお、Placehold.jpの画像を使う場合は、widthとheightの指定が必要なのでそれだけ注意(今回は試しにjsdo.itを使ってみました)。

『play』ボタンを押すと、左3つの画像が一瞬何もない状態になった後、Placehold.jpのダミー画像が表示されると思います(もしかしたら、最初からPlacehold.jpのダミー画像が表示されるかもしれませんが)。
左から、『widthとheight属性て幅を指定した画』『CSS側でwidthとheightを指定した画像』『widthとheightの指定をしていない画像』『存在する画像』です。

8~12行目の処理は必要なの? と思われる人もいると思いますが、このスクリプト内の処理が行われる前に、画像の存在可否が判定されてしまうと、2~7行目で指定した画像がない場合に実行する処理を実行してくれないので、必要です。
“dammyImage”というクラスを追加しているのは、ダミー画像もない場合にループが発生してしまう可能性があるので、その対策用です。

CSSの”-moz-force-broken-image-icon: 1;”というのは、Firefox用の対策。これを指定していないと、Firefoxではheightの指定があるなしに関わらず、heightは17pxとなってしまうよう(Placehold.jpを使うわけでなければ必要ない)。
参考:Firefoxで画像がない時の表示を分かりやすくする at softelメモ