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

iMacrosを使って1700サイトのレスポンシブ機能を1時間半で自動確認。
■ 店頭より得で、予約しやすいオンラインショップ。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE

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

結論

ね、素晴らしくない?

以上!

■最新のiPhoneの購入・機種変更なら店頭より得で、予約しやすいオンラインショップ。
機種の頭金や使わないオプションパックをつけて年間何万円も損していませんか?
オンラインショップなら故障のサポートもしっかりしていて最低限の費用。待たされることもありません。
 → ドコモオンラインショップ
 → auオンラインショップ
 → ソフトバンクオンラインショップ

最新のiPhoneを得して乗り換えるなら、最大6万円のキャッシュバックがある
→ SMARTPHONE STORE
がお得です。