iMacrosを使って1700サイトのレスポンシブを自動確認

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

→ドコモ公式ショップを見る

→ソフトバンク公式ショップを見る

→au公式ショップを見る

私の名刺に書いてあるのは「UI・UXスペシャリスト」です。
でも、実は、デザイン以外のことも何でもやります。

例えば、仕事の仲間をサポートするためにも力を出したいです。
新しいチャレンジは楽しいし。

一番最近の新しいチャレンジ・仲間サポートはこれでした：
仲間が持ってたExcelファイルに1700サイトが一覧されてて、どれがレスポンシブになった、どれがまだなってないことを確認するタスクでした。

こんな感じのCSV：

手作業でやったら大変でしょう！プログラムで自動化すればどうでしょうか～！？

iMacros

iMacrosはFirefoxとChromeの自動化アドオンです。

https://addons.mozilla.org/en-US/firefox/addon/imacros-for-firefox/

https://chrome.google.com/webstore/detail/imacros-for-chrome/cplklnmnlbnpmjogncfgfijoopmnlemp

特にFirefox版では、Javascriptの命令も認識されます。
ということで、今回はFirefoxでやりましょう！

Firefoxでやるシナリオ

もうインストール出来た？
じゃぁ、使ってみましょう。

アドオンのアイコンをクリックすると、下記のUIが現れます。
まず、設定のボタンをクリックして、.jsファイルと.iimのファイルへのパスを選びましょう。

このシナリオの場合、.iimファイルを使う必要ないので、私が作ったtest.jsに集中しましょう。

test.jsの中身の説明


// CSVの行をカウントするファンクションです。

//https://amionrails.wordpress.com/2014/02/27/how-to-use-javascript-with-imacro-and-find-out-the-end-of-file-in-csv-file/　に見つけた。
function count_rows(path_and_filename) {

const CRLF = "\r\n";

const LF = "\n";

var lines = new Array();

var file_i = imns.FIO.openNode(path_and_filename);

var text = imns.FIO.readTextFile(file_i);

var eol = (text.indexOf(CRLF) == -1) ? LF : CRLF;

lines = text.split(eol);

eol = lines.length;

return eol;

}

// ここビューポートをスマホのサイズにする（iMacrosの幅を含めると800pxになる）

window.resizeTo(800,800);
// CSVファイルへのパス

var rows = count_rows('E:\_temp_\2016-01\imacro\urls-all.csv');
// マクロの命令が始まる！

var macro = "CODE:";

macro +="SET !ERRORIGNORE YES "+"\n";

macro += "SET !DATASOURCE urls-all.csv\n";

macro += "SET !DATASOURCE_COLUMNS 2\n";
// 各行のチェック

for (i=1;i<rows;i++) {

macro += "SET !DATASOURCE_LINE " + i + "\n";

macro += "URL GOTO={{!COL1}}\n";

macro += "WAIT SECONDS=1\n";
// ここはレスポンシブ機能の確認

macro += "URL GOTO=javascript:window.scrollTo(111,0)\n";

macro += "URL GOTO=javascript:if(window.pageXOffset>0){document.write='PCレイアウト'}else{document.write='スマホレイアウト'}\n";

macro += "WAIT SECONDS=1\n";
// アウトプットのCSVファイルに追加・保存

macro += "TAG POS=1 TYPE=HTML ATTR=* EXTRACT=TXT \n";

macro += "ADD !EXTRACT {{!COL1}} \n";

macro += "SAVEAS TYPE=EXTRACT FOLDER=E:\_temp_\2016-01\imacro\ FILE=+{{!NOW:ddmmyyyy}}\n";

}

iimPlay(macro);