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

セットアップのポイント

マクロを実行する前に、スマホのユーザーエージェントをブラウザにセットしましょう。
このアドオンを使ってる:
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・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

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

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

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

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

あなたにおすすめ

FlickrのAPIとPHP/HTML/CSSを使って写真ギャラリーサイトを作りましょう。PHPのコ... Flickrシリーズの続きです! Part. 1 : プロジェクトの背景とゴール Part. 2 : FlickrのAPIの秘密とコール方法 Part. 3 : PHPのコーディング Part. 4 : HTMLのコーディング ...
FlickrのAPIとPHP/HTML/CSSで写真ギャラリーサイトを作る(Part.2 APIの秘... Flickrシリーズの続きです! Part. 1 : プロジェクトの背景とゴール Part. 2 : FlickrのAPIの秘密とコール方法 Part. 3 : PHPのコーディング Part. 4 : HTMLのコーディング ...
FlickrのAPIとPHP/HTML/CSSで写真ギャラリーサイトを作る(Part.1 ゴールと背... 最近サイドプロジェクトをネットに上げました: http://premflux.com/cc0/free-photo-japan-tsukuba-32576937024.html そのプロジェクトの開発をAからZまで細かく説明したいと...
ドキュメントは手書きでもよくない?... 開発をする上でドキュメントはとても大切です。 それはウォーターフォール型開発かアジャイル型開発かに関わらずとても大切です。 しかしドキュメントを作成に膨大な時間を費やすことで、ドキュメント作成自体が目的になってしまい、生産性を伴いません。...