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:&#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の中身の説明

セットアップのポイント

マクロをスタート！

結論

あなたにおすすめ