ソフトバンク・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の中身の説明
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
// 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」ボタンをクリックしましょう。
ちゃんと動いてるよね!w
でも・・・実際にどうなってる?
Firefoxのビューポートを見てください ・・・ 特に水平スクロールバー!w
各サイトが表示されてる瞬間にJSが右スクロールを行う。
スクロール出来たらサイズが合ってないから、PCレイアウトだと分かる。
スクロールが出来ない場合はスマホレイアウトです。
単純でちょっとスマートなやり方!(笑)
アウトプットのCSVはこうなる:
結論
ね、素晴らしくない?
以上!