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

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

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

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

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

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

こんな感じのCSV:

image14

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

iMacros

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

image05

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

image15

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

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

Firefoxでやるシナリオ

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

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

image04

このシナリオの場合、.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);

セットアップのポイント

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

image11

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

マクロをスタート!

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

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

image10

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

image13

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

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

image12

結論

ね、素晴らしくない?

以上!

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

この記事を書いた人
アバター
Franck VESCHI
毎日、デザイン・UX・コーディング等に関係ある新しい技術・情報をわくわくしながら探しています。昔から好奇心の強い性格なのです!新規プロジェクトをいつも「冒険」のように受け取っています。このスタンスのお陰で、毎日の仕事が非常に面白いです。 今まで書いた記事: http://bitwave.showcase-tv.com/author/franck/

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ