編集 感想・トーク 履歴

「Widget:人気ページ」の版間の差分

← 古い編集新しい編集 →
編集の要約なし
編集の要約なし
1行目: 1行目:
<!DOCTYPE html>
<html>
<html lang="ja">
  <head>
    <style>
      #chart_div {
        margin: 0;
        height: 100%;
        min-height: 38em;
        overflow: hidden;
      }
      #chart_div .tab {
        margin: 0;
        padding: 0;
        display: block;
        overflow: hidden;
      }
      #chart_div .tab li {
        display: block;
        float: left;
        width: 50%;
        text-align: center;
        background-color: #aca6e4;
      }
      #chart_div .tab a {
        color: white;
      }
      #chart_div .tab a.selected {
        font-weight: bold;
        cursor: text;
      }
      #chart_div .tab a.selected:hover {
        text-decoration: none;
      }


<head>
      #chart_div table {
  <!-- Required meta tags -->
        width: 100%;
  <meta charset="UTF-8">
        border-collapse: collapse;
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
        border-spacing: 0;
  <!-- Bootstrap CSS -->
        margin: 1rem 0;
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
      }
     integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
      #chart_div .time {
  <title>chart</title>
        width: 3rem;
  <style>
      }
    #chart_div {
      #chart_div .pageview {
      margin: 0;
        width: 2.5rem;
       height: 100%;
      }
       min-height: 38em;
      #chart_div td.time {
      overflow: hidden;
        text-align: right;
    }
        font-size: 0.8rem;
      }
      #chart_div td.pageview {
        text-align: right;
        font-size: 0.8rem;
      }
      #chart_div td.page {
        text-overflow: ellipsis;
        max-width: 0;
        overflow: hidden;
        white-space: nowrap;
      }
      #chart_div th,
      #chart_div td {
        border: 1px solid #ddd;
      }
      #chart_div th.selectable {
        cursor: pointer;
      }
      #chart_div th.selected {
        background-image: url("/resources/src/jquery.tablesorter.styles/images/sort_down.png");
        cursor: auto;
        background-repeat: no-repeat;
        background-position: center right 0.2rem;
      }
    </style>
    <!--Load the AJAX API-->
    <script
      type="text/javascript"
      src="https://www.gstatic.com/charts/loader.js"
     ></script>
    <script type="text/javascript">
      var period = "daily",
        orderBy = "time";
       prepareChart();
       function prepareChart() {
        var sheetName =
          period +
          " " +
          (orderBy == "time" ? "longest time spent" : "most viewed");
        var url =
          "https://docs.google.com/spreadsheets/d/1niIGejZ1Czrkj07hGDPleVvk9AEBaDtjr55n63GluLw/gviz/tq?sheet=" +
          sheetName +
          "&headers=15";


    #chart_div .tab {
        google.charts.load("current", { packages: ["corechart"] });
      margin: 0;
        google.charts.setOnLoadCallback(drawChart);
      padding: 0;
      display: block;
      overflow: hidden;
    }


    #chart_div .tab li {
        function drawChart() {
      display: block;
          var query = new google.visualization.Query(url);
      float: left;
          query.send(handleQueryResponse);
      width: 50%;
        }
      text-align: center;
      background-color: #aca6e4;
    }


    #chart_div .tab a {
        function handleQueryResponse(response) {
      color: white;
          var data = response.getDataTable();
    }
          var rows = data.getNumberOfRows();
          var html = [
            '<ul class="tab">' +
              '<li><a id="hourly" class="' +
              (period == "hourly" ? "selected" : "") +
              '" href="javascript: void(0);">リアルタイム</a></li>' +
              '<li><a id="daily" class="' +
              (period == "daily" ? "selected" : "") +
              '" href="javascript: void(0);">一日</a></li>' +
              "</ul>" +
              "<table><thead><tr>" +
              '<th id="header-time" class="time selectable ' +
              (orderBy == "time" ? "selected" : "") +
              '">時間</th>' +
              '<th id="header-pageview" class="pageview selectable ' +
              (orderBy == "pageview" ? "selected" : "") +
              '">PV</th>' +
              "<th>ページ</th>" +
              "</tr></thead><tbody>"
          ];
          for (var i = 0; i < rows; i++) {
            try {
              var title = data.getValue(i, 0).replace(" - 宇宙wiki", "");
              var time = Math.round(data.getValue(i, 1) / 60) + "分";
              var pageview = data.getValue(i, 2);
              var url = "/w/" + encodeTitle(title);
              var anchor =
                '<a href="' +
                url +
                '" target="_parent" title="' +
                title +
                '">' +
                title +
                "</a>";
              html.push(
                "<tr>" +
                  '<td class="time">' +
                  time +
                  "</td>" +
                  '<td class="pageview">' +
                  pageview +
                  "</td>" +
                  '<td class="page">' +
                  anchor +
                  "</td>" +
                  "</tr>"
              );
            } catch (e) {
              console.log([i, e]);
            }
          }
          html.push("</tbody></table>");
          document.querySelector("#chart_div").innerHTML = html.join("\n");


    #chart_div .tab a.selected {
          document
      font-weight: bold;
            .getElementById("hourly")
      cursor: text;
            .addEventListener("click", function() {
    }
              if (period == "hourly") return;
 
              period = "hourly";
    #chart_div .tab a.selected:hover {
              prepareChart();
      text-decoration: none;
            });
    }
          document
 
            .getElementById("daily")
    #chart_div table {
            .addEventListener("click", function() {
      width: 100%;
              if (period == "daily") return;
      border-collapse: collapse;
              period = "daily";
      border-spacing: 0;
              prepareChart();
      margin: 1rem 0;
            });
    }
          document
 
            .getElementById("header-time")
    #chart_div .time {
            .addEventListener("click", function() {
      width: 3rem;
              if (orderBy == "time") return;
    }
              orderBy = "time";
 
              prepareChart();
    #chart_div .pageview {
            });
      width: 2.5rem;
          document
    }
            .getElementById("header-pageview")
 
            .addEventListener("click", function() {
    #chart_div td.time {
              if (orderBy == "pageview") return;
      text-align: right;
              orderBy = "pageview";
      font-size: 0.8rem;
              prepareChart();
    }
            });
 
         }
    #chart_div td.pageview {
      text-align: right;
      font-size: 0.8rem;
    }
 
    #chart_div td.page {
      text-overflow: ellipsis;
      max-width: 0;
      overflow: hidden;
      white-space: nowrap;
    }
 
    #chart_div th,
    #chart_div td {
      border: 1px solid #ddd;
    }
 
    #chart_div th.selectable {
      cursor: pointer;
    }
 
    #chart_div th.selected {
      background-image: url("/resources/src/jquery.tablesorter.styles/images/sort_down.png");
      cursor: auto;
      background-repeat: no-repeat;
      background-position: center right 0.2rem;
    }
  </style>
  <!--Load the AJAX API-->
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    var period = "daily",
      orderBy = "time";
    prepareChart();
    function prepareChart() {
      var sheetName =
        period +
        " " +
        (orderBy == "time" ? "longest time spent" : "most viewed");
      var url =
        "https://docs.google.com/spreadsheets/d/1niIGejZ1Czrkj07hGDPleVvk9AEBaDtjr55n63GluLw/gviz/tq?sheet=" +
        sheetName +
        "&headers=15";
 
      google.charts.load("current", { packages: ["corechart"] });
      google.charts.setOnLoadCallback(drawChart);
 
      function drawChart() {
        var query = new google.visualization.Query(url);
         query.send(handleQueryResponse);
       }
       }


       function handleQueryResponse(response) {
       function encodeTitle(title) {
        var data = response.getDataTable();
         return title
        var rows = data.getNumberOfRows();
           .split("/")
        var html = [
           .map(function(path) {
          '<ul class="tab">' +
             return encodeURIComponent(path);
          '<li><a id="hourly" class="' +
           })
          (period == "hourly" ? "selected" : "") +
           .join("/");
          '" href="javascript: void(0);">リアルタイム</a></li>' +
          '<li><a id="daily" class="' +
          (period == "daily" ? "selected" : "") +
          '" href="javascript: void(0);">一日</a></li>' +
          "</ul>" +
          "<table><thead><tr>" +
          '<th id="header-time" class="time selectable ' +
          (orderBy == "time" ? "selected" : "") +
          '">時間</th>' +
          '<th id="header-pageview" class="pageview selectable ' +
          (orderBy == "pageview" ? "selected" : "") +
          '">PV</th>' +
          "<th>ページ</th>" +
          "</tr></thead><tbody>"
        ];
        for (var i = 0; i < rows; i++) {
          try {
            var title = data.getValue(i, 0).replace(" - 宇宙wiki", "");
            var time = Math.round(data.getValue(i, 1) / 60) + "分";
            var pageview = data.getValue(i, 2);
            var url = "/w/" + encodeTitle(title);
            var anchor =
              '<a href="' +
              url +
              '" target="_parent" title="' +
              title +
              '">' +
              title +
              "</a>";
            html.push(
              "<tr>" +
              '<td class="time">' +
              time +
              "</td>" +
              '<td class="pageview">' +
              pageview +
              "</td>" +
              '<td class="page">' +
              anchor +
              "</td>" +
              "</tr>"
            );
          } catch (e) {
            console.log([i, e]);
          }
         }
        html.push("</tbody></table>");
        document.querySelector("#chart_div").innerHTML = html.join("\n");
 
        document
          .getElementById("hourly")
          .addEventListener("click", function () {
            if (period == "hourly") return;
            period = "hourly";
            prepareChart();
          });
        document
           .getElementById("daily")
           .addEventListener("click", function () {
             if (period == "daily") return;
            period = "daily";
            prepareChart();
           });
        document
           .getElementById("header-time")
          .addEventListener("click", function () {
            if (orderBy == "time") return;
            orderBy = "time";
            prepareChart();
          });
        document
          .getElementById("header-pageview")
          .addEventListener("click", function () {
            if (orderBy == "pageview") return;
            orderBy = "pageview";
            prepareChart();
          });
       }
       }
     }
     </script>
 
  </head>
    function encodeTitle(title) {
  <body>
      return title
     <div id="chart_div"></div>
        .split("/")
   </body>
        .map(function (path) {
          return encodeURIComponent(path);
        })
        .join("/");
    }
  </script>
</head>
 
<body>
  <div class="container-fluid">
     <div class="row">
      <div class="col-12">
        <div id="chart_div"></div>
      </div>
    </div>
  </div>
 
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
    integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
    integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>
</body>
 
</html>
</html>

2020年9月6日 (日) 17:12時点における版

<html> 

 <head>
   <style>
     #chart_div {
       margin: 0;
       height: 100%;
       min-height: 38em;
       overflow: hidden;
     }
     #chart_div .tab {
       margin: 0;
       padding: 0;
       display: block;
       overflow: hidden;
     }
     #chart_div .tab li {
       display: block;
       float: left;
       width: 50%;
       text-align: center;
       background-color: #aca6e4;
     }
     #chart_div .tab a {
       color: white;
     }
     #chart_div .tab a.selected {
       font-weight: bold;
       cursor: text;
     }
     #chart_div .tab a.selected:hover {
       text-decoration: none;
     }

     #chart_div table {
       width: 100%;
       border-collapse: collapse;
       border-spacing: 0;
       margin: 1rem 0;
     }
     #chart_div .time {
       width: 3rem;
     }
     #chart_div .pageview {
       width: 2.5rem;
     }
     #chart_div td.time {
       text-align: right;
       font-size: 0.8rem;
     }
     #chart_div td.pageview {
       text-align: right;
       font-size: 0.8rem;
     }
     #chart_div td.page {
       text-overflow: ellipsis;
       max-width: 0;
       overflow: hidden;
       white-space: nowrap;
     }
     #chart_div th,
     #chart_div td {
       border: 1px solid #ddd;
     }
     #chart_div th.selectable {
       cursor: pointer;
     }
     #chart_div th.selected {
       background-image: url("/resources/src/jquery.tablesorter.styles/images/sort_down.png");
       cursor: auto;
       background-repeat: no-repeat;
       background-position: center right 0.2rem;
     }
   </style>
   <script
     type="text/javascript"
     src="https://www.gstatic.com/charts/loader.js"
   ></script>
   <script type="text/javascript">
     var period = "daily",
       orderBy = "time";
     prepareChart();
     function prepareChart() {
       var sheetName =
         period +
         " " +
         (orderBy == "time" ? "longest time spent" : "most viewed");
       var url =
         "https://docs.google.com/spreadsheets/d/1niIGejZ1Czrkj07hGDPleVvk9AEBaDtjr55n63GluLw/gviz/tq?sheet=" +
         sheetName +
         "&headers=15";

       google.charts.load("current", { packages: ["corechart"] });
       google.charts.setOnLoadCallback(drawChart);

       function drawChart() {
         var query = new google.visualization.Query(url);
         query.send(handleQueryResponse);
       }

       function handleQueryResponse(response) {
         var data = response.getDataTable();
         var rows = data.getNumberOfRows();
         var html = [

'

    ' + '
  • <a id="hourly" class="' + (period == "hourly" ? "selected" : "") + '" href="javascript: void(0);">リアルタイム</a>
    • ' + '
  • <a id="daily" class="' + (period == "daily" ? "selected" : "") + '" href="javascript: void(0);">一日</a>
    • ' + "

" + "

<thead>" + '' + '' + "" + "</thead><tbody>" ]; for (var i = 0; i < rows; i++) { try { var title = data.getValue(i, 0).replace(" - 宇宙wiki", ""); var time = Math.round(data.getValue(i, 1) / 60) + "分"; var pageview = data.getValue(i, 2); var url = "/w/" + encodeTitle(title); var anchor = '<a href="' + url + '" target="_parent" title="' + title + '">' + title + "</a>"; html.push( "" + '" + '" + '" + "" ); } catch (e) { console.log([i, e]); } } html.push("</tbody>
時間PVページ
' + 
                 time +
"		' + 
                 pageview +
"		' + 
                 anchor +
"

"); 

         document.querySelector("#chart_div").innerHTML = html.join("\n");

         document
           .getElementById("hourly")
           .addEventListener("click", function() {
             if (period == "hourly") return;
             period = "hourly";
             prepareChart();
           });
         document
           .getElementById("daily")
           .addEventListener("click", function() {
             if (period == "daily") return;
             period = "daily";
             prepareChart();
           });
         document
           .getElementById("header-time")
           .addEventListener("click", function() {
             if (orderBy == "time") return;
             orderBy = "time";
             prepareChart();
           });
         document
           .getElementById("header-pageview")
           .addEventListener("click", function() {
             if (orderBy == "pageview") return;
             orderBy = "pageview";
             prepareChart();
           });
       }
     }

     function encodeTitle(title) {
       return title
         .split("/")
         .map(function(path) {
           return encodeURIComponent(path);
         })
         .join("/");
     }
   </script>
 </head>
 <body>

 </body>

</html>