0

私は Web クローラーを書いていますが、レスポンシブ Web デザイン (RWD) のページしか気にしません。サイトがレスポンシブであることを示す兆候はありますか? Python で mechanize モジュールを使用しています。私が考えることができる唯一のことは、次のようなもののためにhtmlをgrepすることです

href="css/bootstrap.min.css"

また

class="row-fluid"

または、ピクセルではなくパーセンテージを示すもの。

どんな助けでも大歓迎です。

4

2 に答える 2

0

HTMLマークアップやプログラミングコードに触れずにWebサイトをレスポンシブにする必要があるプロジェクトがありました。変更できるのはスタイルシートとJavaScriptファイルだけでした。それは私にとって新しいプロジェクトだったので、ウェブサイトのすべてのページがどれであるかさえ知りませんでした.

そのため、Google クローラーがサイトにペナルティを課さないように、レスポンシブにすることが目標でした。

したがって、テストしたいページに対してhttps://www.google.com/webmasters/tools/mobile-friendly/を手動で使用できることがわかりました。しかし、どうすればサイト全体をテストできるでしょうか?

私が行ったのは、ウェブマスター ツールにサイトの最も重要なリンク (何百ものリンク) のエクスポートを依頼したことです。

次に、Google Responsive Test とまったく同じことを行う小さな「ツール」を作成しましたが、このツールは URL のリストを受け入れ、320 ピクセルの画面 (iframe) に収まるかどうかをループしてそれぞれをテストします。

これは HTML ツールを開いて、テキスト ボックスに URL を入力し、[開始] をクリックします。(responsiveChecker.html)

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
  <head>
    <title>Responsive Checker</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://www.google.com/jsapi"></script>
    <script>

      var urls;
      var delay=3000;

      google.load("jquery", "1");

      google.setOnLoadCallback(function() {    
        // Place init code here instead of $(document).ready()   
        console.log('jquery loaded');


        $('#responsiveFrame').load(function(){
            if (urls.length > 0) {
              setTimeout(function(){ checkUrl(); }, delay);
            }
        });

      });



      function startChecking() {
        var textUrls=$('#urls').val();
        urls= textUrls.match(/[^\r\n]+/g);
        checkUrl();
      }

      function checkUrl() {
        var url;
        if (urls.length > 0) {
          url=urls[0];
          console.log("checking: "+url);
          $('#responsiveFrame').attr('src',url+'#rc=1');
          urls.splice(0, 1);

        } else {
          console.log("no more urls");
        }

      }

    </script>
  </head>
  <body>

    <iframe id="responsiveFrame" width="320" height="480" src="about:blank" style="border: 1px solid red;" scrolling="no"></iframe>

    <p>
      <label for="urls">Enter URLs to check, one per line:</label><br />
      <textarea id="urls" rows="30" cols="100"></textarea>
    </p>

    <p>
      <input type="button" value="Start checking!" onclick="startChecking();">
    </p>

  </body>
</html>

これは、チェックしたい Web サイトにロードして実行する必要があるスクリプトです。

var responsiveChecker = new function () {
  this.width = 320;
  this.hashParams={};
  this.check = function () {
    this.hashParams=this.parseHashBangArgs();
//    this.log('responsiveChecker');
//    this.log(this.hashParams);
    if (!this.mustCheck()) {
      return;
    } else {

      this.updateParams();

      this.log('must check!');

      var that = this;
      var counter=0;
      var visibleCounter=0;

      jQuery("*").each(function() {
          if (jQuery(this).width() > that.width) {

              if ('SCRIPT' === this.tagName) {
                // ignore script tags
              } else {
                that.log(this.tagName + "#" + this.id);
                counter++;
                if (jQuery(this).is(":visible")) {
                  visibleCounter++;
                  that.log(this.tagName + "#" + this.id);
                }
              }


          }
      });

      var page=window.location.href;

      if (visibleCounter > 0) {
        this.log('[ERROR] page not responsive, there are elements bigger than screen size: '+page);
      } else {
        if (counter > 0) {
          this.log('[WARNING] hey check the above list, there are some hidden elements with size bigger than the screen: '+page);
        } else {
          this.log('[SUCCESS] ¡todo bien! looks like all elements fit on the screen: '+page);
        }
      }

    }
  };
  this.updateParams = function () {
    if (typeof(this.hashParams.width) !== 'undefined') {
      this.width=parseInt(this.hashParams.width);
    }
  };
  this.mustCheck = function () {
    if (typeof(this.hashParams.rc) !== 'undefined') {
      return true;
    }
    return false;
  };
  // https://gist.github.com/miohtama/1570295
  this.parseHashBangArgs = function() {

    var aURL = window.location.href;

    var vars = {};
    var hashes = aURL.slice(aURL.indexOf('#') + 1).split('&');

    for(var i = 0; i < hashes.length; i++) {
       var hash = hashes[i].split('=');

       if(hash.length > 1) {
           vars[hash[0]] = hash[1];
       } else {
          vars[hash[0]] = null;
       }      
    }

    return vars;
  };
  this.log = function (msg) {
    console.log(msg);
  };
};

これを jquery ready の最後に配置します。

responsiveChecker.check();

最後に、それはどのように機能しますか:

  1. チェックしたいWebサイトにresponsiveChecker JavaScriptを追加します
  2. RespondChecker.html ファイルを開き、サイトの URL をテキストエリアに追加して、[開始] をクリックします。
  3. iframe に URL を 1 つずつロードし始め、ブラウザの [コンソール] タブに「成功」​​、「警告」、または「エラー」が記録されます。反応しない。

どう考えているか教えてください！

ところで、私たちがそれをきれいにして、人々がウェブサイトの応答性をテストするために使用できる実際のライブツール/サービスを構築した場合、これが役立つと思う人はいますか?

ところで、実際のチェックは jQuery で行われ、幅が 320px 以下のページのすべての要素をテストします。実際、これは 100% の保証ではありませんが、Google のボットがこのようなことを行っている可能性があると思いますが、より洗練されていると確信しています。

于 2015-10-04T17:34:45.973 に答える