編集 感想・トーク 履歴

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

← 古い編集新しい編集 →
編集の要約なし
編集の要約なし
1行目: 1行目:
<html lang="ja">
<html>
<head>
  <head>
 
     <style>
     <style>
        #chart_div {
      #chart_div {
            margin: 0;
        margin: 0;
            height: 100%;
        height: 100%;
            min-height: 38em;
        min-height: 38em;
            overflow: hidden;
        overflow: hidden;
        }
      }
        #chart_div .tab {
      #chart_div .tab {
            margin: 0;
        margin: 0;
            padding: 0;
        padding: 0;
            display: block;
        display: block;
            overflow: hidden;
        overflow: hidden;
        }
      }
        #chart_div .tab li {
      #chart_div .tab li {
            display: block;
        display: block;
            float: left;
        float: left;
            width: 50%;
        width: 50%;
            text-align: center;
        text-align: center;
            background-color: #aca6e4;
        background-color: #aca6e4;
        }
      }
        #chart_div .tab a {
      #chart_div .tab a {
            color: white;
        color: white;
        }
      }
        #chart_div .tab a.selected {
      #chart_div .tab a.selected {
            font-weight: bold;
        font-weight: bold;
            cursor: text;
        cursor: text;
        }
      }
        #chart_div .tab a.selected:hover {
      #chart_div .tab a.selected:hover {
            text-decoration: none;
        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;
        }
 
        @media only screen and (max-width: 993px) {
            #chart_div > table > thead > tr {
                width: 80%;
            }
        }


      #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>
     </style>
     <!--Load the AJAX API-->
     <!--Load the AJAX API-->
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <script
      type="text/javascript"
      src="https://www.gstatic.com/charts/loader.js"
    ></script>
     <script type="text/javascript">
     <script type="text/javascript">
        var period = "daily",
      var period = "daily",
            orderBy = "time";
        orderBy = "time";
        prepareChart();
      prepareChart();
        function prepareChart() {
      function prepareChart() {
            var sheetName =
        var sheetName =
                period +
          period +
                " " +
          " " +
                (orderBy === "time" ? "longest time spent" : "most viewed");
          (orderBy == "time" ? "longest time spent" : "most viewed");
            var url =
        var url =
                "https://docs.google.com/spreadsheets/d/1niIGejZ1Czrkj07hGDPleVvk9AEBaDtjr55n63GluLw/gviz/tq?sheet=" +
          "https://docs.google.com/spreadsheets/d/1niIGejZ1Czrkj07hGDPleVvk9AEBaDtjr55n63GluLw/gviz/tq?sheet=" +
                sheetName +
          sheetName +
                "&headers=15";
          "&headers=15";


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


            function drawChart() {
        function drawChart() {
                var query = new google.visualization.Query(url);
          var query = new google.visualization.Query(url);
                query.send(handleQueryResponse);
          query.send(handleQueryResponse);
        }
 
        function handleQueryResponse(response) {
          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");


            function handleQueryResponse(response) {
          document
                var data = response.getDataTable();
             .getElementById("hourly")
                var rows = data.getNumberOfRows();
            .addEventListener("click", function() {
                var html = [`
              if (period == "hourly") return;
<ul class="tab">
              period = "hourly";
    <li><a id="hourly" class="${period === "hourly" ? "selected" : ""}" href="javascript: void(0);">リアルタイム</a></li>
              prepareChart();
    <li><a id="daily" class="${period === "daily" ? "selected" : ""}" href="javascript: void(0);">一日</a></li>
            });
</ul>`,
          document
`<table>
            .getElementById("daily")
    <thead>
            .addEventListener("click", function() {
        <tr>
              if (period == "daily") return;
            <th id="header-time" class="time selectable ${orderBy === "time" ? "selected" : ""}">時間</th>
              period = "daily";
            <th id="header-pageview" class="pageview selectable ${orderBy === "pageview" ? "selected" : ""}">PV</th>
              prepareChart();
             <th>ページ</th>
            });
        </tr>
          document
    </thead>
            .getElementById("header-time")
<tbody>
            .addEventListener("click", function() {
                `];
              if (orderBy == "time") return;
                for (var i = 0; i < rows; i++) {
              orderBy = "time";
                    try {
              prepareChart();
                        var title = data.getValue(i, 0).replace(" - 宇宙wiki", "");
            });
                        var time = Math.round(data.getValue(i, 1) / 60) + "分";
          document
                        var pageview = data.getValue(i, 2);
            .getElementById("header-pageview")
                        var url = "/w/" + encodeTitle(title);
            .addEventListener("click", function() {
                        var anchor = `<a href="${url}" target="_parent" title="${title}">${title}</a>`;
              if (orderBy == "pageview") return;
 
              orderBy = "pageview";
                        html.push(`
              prepareChart();
<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('');
 
                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) {
      function encodeTitle(title) {
            return title
        return title
                .split("/")
          .split("/")
                .map(function(path) {
          .map(function(path) {
                    return encodeURIComponent(path);
            return encodeURIComponent(path);
                })
          })
                .join("/");
          .join("/");
        }
      }
     </script>
     </script>
</head>
  </head>
<body>
  <body>
<div id="chart_div"></div>
    <div id="chart_div"></div>
</body>
  </body>
</html>
</html>

2020年9月7日 (月) 06:54時点における版

<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>