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

→　ドコモ公式ショップ
→　au公式ショップ
→　ソフトバンク公式ショップ
→　ケータイ乗り換え.com
→　SMARTPHONE STORE

私の名刺に書いてあるのは「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:&#92;_temp_&#92;2016-01&#92;imacro&#92;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&lt;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:&#92;_temp_&#92;2016-01&#92;imacro&#92; FILE=+{{!NOW:ddmmyyyy}}\n";
}
iimPlay(macro);

// 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);

セットアップのポイント

マクロを実行する前に、スマホのユーザーエージェントをブラウザにセットしましょう。
このアドオンを使ってる：
https://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher-firefox/

モバイル端末のOSを選択。

マクロをスタート！

ここまでちょっと時間がかかった・・・・んですが！・・・ここからスクリプトが自分で1700サイトをチェックしてくれる！

test.jsをクリックして、「PLAY」ボタンをクリックしましょう。

ちゃんと動いてるよね！ｗ
でも・・・実際にどうなってる？
Firefoxのビューポートを見てください　・・・　特に水平スクロールバー！ｗ

各サイトが表示されてる瞬間にJSが右スクロールを行う。
スクロール出来たらサイズが合ってないから、PCレイアウトだと分かる。
スクロールが出来ない場合はスマホレイアウトです。
単純でちょっとスマートなやり方！（笑）

アウトプットのCSVはこうなる：

結論

ね、素晴らしくない？

以上！

関連おすすめサイト

注目記事

アクセスランキング

iMacrosを使って1700サイトのレスポンシブ機能を1時間半で自動確認。

iMacros

Firefoxでやるシナリオ

test.jsの中身の説明

セットアップのポイント

マクロをスタート！

結論

あなたにおすすめ