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

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

私の名刺に書いてあるのは「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の中身の説明

セットアップのポイント

マクロを実行する前に、スマホのユーザーエージェントをブラウザにセットしましょう。
このアドオンを使ってる:
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

結論

ね、素晴らしくない?

以上!

Franck VESCHI

Franck VESCHI

シニア UI/UX デザイナー・デベロッパー at 株式会社ショーケース・ティービー
毎日、デザイン・UX・コーディング等に関係ある新しい技術・情報をわくわくしながら探しています。昔から好奇心の強い性格なのです!新規プロジェクトをいつも「冒険」のように受け取っています。このスタンスのお陰で、毎日の仕事が非常に面白いです。

今まで書いた記事:
http://bitwave.showcase-tv.com/author/franck/
Franck VESCHI

コメント