Mouse wheel scroll visualization v1.00(英語化)

　 It doesn't seem to work properly from the top page. Please run it from individual pages.

Continue to rotate the wheel in either direction and check for abnormal movement.
If the sign of the wheelDeltaY value is reversed when you turn it in one direction, the mouse is broken or needs cleaning.
Also, turn it slowly to check if it is stuck against the notch or not.
120 or -120 if the browser is the new Edge or Chrome. If you turn it quickly, values such as 240 or -360 may be output.
Not available in FireFox.
There is a problem where the entire screen scrolls at the same time →If you press the middle button (press the wheel) and use the wheel while the mouse cursor is changing, the screen will not scroll.

Click here to check mouse chatter

Mouse chatter visualization v1.00(英語化)

　It doesn't seem to work properly from the top page. Please run it from individual pages.
If chattering occurs, it will appear on the graph.
You can also set the mouse properties to left-handed and check the right button.

Click here to check wheel scrolling

Click

マウスのスクロールの可視化v1.00(テスト用)

　 トップページから正しく動かないようです。個別のページから動作させてください。

ホイールをどちらか一方向に回し続けて異常な動作がしないか確認する。
ホイールが「たまに逆方向に動く」「1回で動きすぎる」などを可視化します。
一方に回してwheelDeltaYの値の正負が逆転した場合は、マウスが故障してるor掃除が必要。
また、ゆっくり回してノッチ（ひっかり）対して抜けがなさそうか発生しないかを確認する。
ブラウザが新Edge、Chromeの場合120もしくは-120。早く回した場合は240や-360等の値が出力されることがある。
FireFoxでは使用できない。
一緒に画面全体がスクロールしてしまう問題あり→中ボタン（ホイール押す）してマウスカーソル変化中のホイール操作では画面はスクロールしない。
マウスチャタリングの確認はこちら

マウスのチャタリング可視化ｖ1.00

トップページから正しく動かないようです。個別のページから動作させてください。
これの説明はこちら
ホイールスクロールの確認はこちら

クリック

YouTubeの生放送のチャットを使ってアンケートを行う

追記
youtubeライブに2021年ごろ？に便利なアンケート機能が追加されました。
追記終わり

さてタンバリンさんのツールが動いているのを見ました。
あれは過去のコメントも保存しているようですね。それどうだろうなぁ？
アンケート機能があるようですね。便利そうですね。
じゃあYouTubeの生放送のチャットを使ってアンケートを作ってみましょ


ニコニコのようなアンケート機能が視聴者には匿名ですしやりやすい思うのですが、
YouTubeにはそのような機能はないのでお試しに作ってみました。

検索すると、YouTubeでアンケートカードというものもあるらしいですが、
生放送には対応していないのかな？誰か作ってそうですけどねぇ




仕様は、
・投票項目を入力できる
・投票開始ボタンが押されてからのチャットのみを投票の対象とする
・アンケート中に投票数が確認できる
・IDで同じ人からの投票を弾く(途中で投票先の変更はダメ)
・投票終了時の結果を円グラフで表示する。
※スーパーチャットには今回未対応

苦労した所は、
ほんとはしちゃいけないだろうけど、PHPのコード部分に無限ループする部分があります。
ブラウザがChrome
かつ
sessionを使用した場合
スクリプトが終了していないのと次のページ遷移できない
という問題があるようで解決に時間がすごくかかりました。
(IE,FireFoxは停止しなくても遷移しました。)
解決策として正しいかわからないですが、
window.stop();
によってブラウザの中止ボタンの機能によりスクリプトを停止して解決してます。
そしたら今度は、IEがwindow.stop()関数に対応していないので使用ブラウザの判断をして
回避しています。
これでIE,Chrome,FireFoxで動いているのを確認しました。

3ページ分のコードをいつものフォルダ(C:\xampp\htdocs)に配置して
ブラウザ上で
http://localhost/vote1.php
とすれば使用できます。
いままでのやってきたことを組み合わせたようなもんです。


外見はこんな感じです。
見れば動きはなんとかくわかるでしょう。
1ページ目
例は雑に1文字ずつになっていましが、ちゃんと指定できます。
これは投票先を「あ」「い」「う」にしています。
本来は好きなお菓子の名前などちゃんとしたものを入れましょう。

2ページ目
投票項目が見えるようにしています。
この画像の動作では「あ」「い」「う」のワードを含むチャットを「投票した」
としていますが、
一致でもいいし、
投票項目のワードが長いと入力が大変だと思い「#1」~「#3」でもコードをいじればできます。(数字だけでもいいでしょう)
何も表示されないと寂しいのでチャットと現在の投票数を表示しています。
アンケートを打ち切る場合は投票終了ボタンを押します。

3ページ目
HighChartsを使いアンケート結果が円グラフで表示されます。
それぞれの結果を％と票数も全部載せです。
再びアンケートをやる場合は1ページに目から開始してください。

コードです。
1ページ目


form部分だけなので注釈はありません。
php部分が1行もないのにファイル名がphpですね。。。


2ページ目
①にはAPIキー、②には今回は生放送中の動画のidを入れます。
https://www.youtube.com/watch?v=xxxxxxxxxxx
のxxxxxxxxxxxの文字列のことです。






注釈として
7行目から22行目あたりがスクリプトを停止して3ページ目へ遷移させる部分です。
48行目から59行目あたりが1ページ目の入力を分解して投票項目を作成しています。
空の行を無視します。
94行から下は基本的にはチャット表示のコードの改造です。
130行目あたりは、APIが初回の入力はボタンを押したものの過去のチャットとなりますのでスキップする処理です。
142行から145行あたりは、一致するか、含むにするか、#nの一致にするかです。
好きなコードを選んでください。
148行目から156行目はまだ投票していないIDでの投票一致の場合、票として数えているところです。

3ページ目



注釈として
Highchartsの円グラフの例 を改造し、2ページ目の結果を入力としています。
33行目でPHPから_SESSIONのデータを受け取り、
それを68行目から78行目で使用しています。



ちゃんと勉強せず、行き当たりばったりで作っているから苦労する。
いままでのコードもformやhead、bodyの対応がよくなかったようだ。
WEB系の基本勉強してないものなぁ。

マウスのチャタリングを確認する

　マウスが壊れてシングルクリックがダブルクリックになったり、ドラッグ中に離した判定になったりすることがあるじゃないですか。でも指が疲れているせいか本当に壊れいてるかはっきりなしないことがありますよね。


そこで Highcharts(グラフ)を使って可視化してみました。JavaScriptを使いマウスイベントをグラフに反映します。いつも通りやりかたは雑いです。
画像の赤い部分でマウス操作するとグラフに反映されます。
コードを少し変更すればクリックとダブルクリックが確認できます。

押してしばらくして離すを繰り返した結果が以下です。
[追記：ためしにブログ上においてみました]

 マウスダウン(押す)すると青の点が１になり、マウスアップ(離す)と黒の点が2になります。
上記の図だと離したときにチャタリングおこって意図していない結果になっています。

左ボタンを確認したら、

マウスのプロパティを左きき用にして右ボタンを確認してもいいでしょう。
(変更せずとも反応しますが、右クリックだとメニューが出るのでイベントを拾えているか不安…)
下記がコードです。htmlファイルとして保存してブラウザで表示すれば使えます。
外部のリソース(Highcharts)を使っているけどいいんかな？




注釈として、
マウスのイベントとタイマーのイベントが重なっても大丈夫なようにリングバッファでイベントの時間を格納しています。
イベントのタイミングでグラフに直接反映できればいいのですが、JavaScriptよくわからないのであきらめました。
23行目から33行目をコメントアウトして35行目から46行目を反映させればクリックとダブルクリックのイベントに変更できます。
70行目から88行目、ダウンもアップも同じ数が発生するようにしています。そうしないとX軸は全部のポイントを表示するようにしているためその対策です。
※アップとダウンはペアなので問題ないが、クリックとダブルクリックは困る。
またX軸の時間は可変なので時間がながい細かい部分がみづらくなります。対策はあきらめました。
101行目　値ありから0にすぐ戻しているため、デフォルト設定だとマークが近すぎでません。その対策で0を設定しています。
ちなみに今回は線ありでやっていますが、線の幅を0にするとマークだけになります。


ブログで直接実行もできるけどやめとこ。
マウスの調子が悪いので思いつきで作ってみました。明らかに壊れてるわ

目次：YouTube Data APIで遊ぶ

このブログ内のYouTube Data API関係の記事についての目次です。

１：PHPの開発環境
APIを使うために開発環境についての説明

２：YouTube Data APIの使い方 
APIキーについてとAPIの簡単な動作確認
API使用量制限について説明

3:YouTube生放送の検出 
コマンドプロンプトで生放送の開始を監視してビープ音を鳴らすというプログラムについての説明

4：YouTube コメントの全取得
動画のコメント欄を一括で取得するプログラムについての説明

5：OAuth2.0での認証と登録チャンネルリストの出力 
認証の方法
アクセストークンについての説明
自分自身の登録チャンネルをリスト出力

6：YouTube チャットの取得
生放送でのチャットメッセージ情報を取得

7：YouTube　生放送中の評価芸
API使って評価数や視聴者数を取得

8: YouTube生放送で評価数をリアルタイムでグラフ表示する 
PHPで難しそうなのでJavaScriptを使ってリアルタイムで変化するグラフ表示

9: YouTube 生放送自動録画方法を考える 
とりあえず考えてみる。対象の動画の表示だけはできたが・・・

10:YouTubeチャットで視聴者参加のためのツールを考える 
上位のバーチャルユーチューバーのチャット欄は早くて読みにくいので、
たぶんこんな感じで対象者を募って決めて。対象者だけ表示すると予想。

11:YouTubeの生放送のチャットを使ってアンケートを行う 
チャットのコメントでアンケートを実装してみる。

12:YouTubeの生放送のチャットをPHPから書き込む
チャットのコメントにPHPから周期的に書き込むサンプル。

以上。

YouTube生放送で評価数をリアルタイムでグラフ表示する

いままでPHPでがんばってたんですが。。。
おかしいよな、PHPでやり方を発信するはずがJavaScriptを使用なんて。


グラフ表示には 調べた結果Highchartsというのがよさそう
↓
でもJavaScriptで書く必要がある
↓
PHPのデータで保存したファイルをJavaScriptで逐次読もうと考えたけど難しそう
↓
PHPあきらめて JavaScriptでやり始める
↓
Firefoxにできたhtmlファイルを突っ込んで確かめていたけど、途中でChromeを右クリックの「検証」でブレークとかエラー表示が見えることに気付く
↓
グラフの見栄え・気になる所をいろいろいじったらすごい時間をかかるのである程度妥協する
↓
そして、出来上がったのがこれ

 HighchartsとJavaScriptを無勉から、勘で作り上げました。
Highchartsのこちらをベースにしています。

仕様は
　・20点のデータ
　・2秒間隔で取得
　・高評価と低評価。チャンネル登録者数を表示
　・最新値が見えるようにする

右が最新のデータで、左が過去データで流れていきます。

これがコードです。このhtmlをChromeやFirefoxに放り込んでみてください。古いIEでは動きません。

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>Live data</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
  </head>
  <body>
  
<script>
var input_y0=0,input_y1=0,input_y2=0;
var key = "①";
var videoId = "②";//今回はvideoIdを入力
var channelId="";//こっちは空欄でOK

    function requestvideo() {
      return $.ajax({
                type: 'GET',
                url: 'https://www.googleapis.com/youtube/v3/videos?part=statistics,snippet,liveStreamingDetails&id=' + videoId + '&key=' + key,
                dataType: 'json',
                async: false,//同期処理にする
                error: function() {
                    //error func
                    $('#yt-list').append('<li>Youtubeのデータが取得できませんでした。<\/li>');
                }
      }).done(function (jsondataYt) {
   channelId = jsondataYt.items[0].snippet.channelId;
         input_y0 = parseFloat(jsondataYt.items[0].statistics.likeCount);
         input_y1 = parseFloat(jsondataYt.items[0].statistics.dislikeCount);
      });
    }


    function requestchannel() {
      return $.ajax({
                type: 'GET',
                url: 'https://www.googleapis.com/youtube/v3/channels?part=statistics&id=' + channelId + '&key=' + key,
                dataType: 'json',
                async: false,//同期処理にする
                error: function() {
                    //error func
                    $('#yt-list').append('<li>Youtubeのデータが取得できませんでした。<\/li>');
                }
      }).done(function (jsondataYt) {
         input_y2 = parseInt(jsondataYt.items[0].statistics.subscriberCount);
      });
    }

  



Highcharts.setOptions({
  global: {
    useUTC: false
  },
    lang: {
        numericSymbols: null//軸のkキロ表示をやめる
    }
});

Highcharts.chart('container', {
  chart: {
   type: 'spline',

    animation: Highcharts.svg, // don't animate in old IE
    marginRight: 100,//右の軸が隠れるので適切な値にする
    events: {
      load: function () {

        // set up the updating of the chart each second
        var series0 = this.series[0];
        var series1 = this.series[1];
        var series2 = this.series[2];

        setInterval(function () {
          var x = (new Date()).getTime(); // current time
          requestvideo();//YouTubeAPI ビデオ側
          requestchannel();///YouTubeAPI チャンネル側

          series0.addPoint([x, input_y0], true, true);
          series1.addPoint([x, input_y1], true, true);
          series2.addPoint([x, input_y2], true, true);
          series0.update({name: '高評価:'+input_y0});
          series1.update({name: '低評価:'+input_y1});
          series2.update({name: '登録者数:'+input_y2});
       }, 2000);//2秒のインターバルタイマ
      }
    }
  },
  title: {
    text: 'Live data'
  },
  xAxis: {
    type: 'datetime',
    tickPixelInterval: 150
  },
  yAxis: [
      { // 1つ目のy軸設定
          title: {
              text: '評価'
          },
          plotLines: [{
              value: 0,
              width: 1,
              color: '#FF8080'
       }],
       allowDecimals: false //軸を整数表示
      },
      { // 2つ目のy軸設定
          title: {
              text: '登録者数'
          },
       allowDecimals: false, //軸を整数表示
          opposite: true // trueの場合グラフの右側にy軸を配置する
      }
  ],
  tooltip: {
    formatter: function () {
      return '<b>' + this.series.name + '</b><br/>' +
        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + this.y;
    }
  },
  legend: {
    enabled: true //凡例表示
  },
  exporting: {
    enabled: false
  },
  series: [{
    name: '高評価',
    yAxis: 0,
    data: (function () {
      var data = [],
        time = (new Date()).getTime(),
        i;

      for (i = -19; i <= 0; i += 1) {
        data.push({
          x: time + i * 1000,
          y: null
        });
      }
      return data;
    }())
  },
  {
    name: '低評価',
    yAxis: 0,
    data: (function () {
      var data = [],
        time = (new Date()).getTime(),
        i;

      for (i = -19; i <= 0; i += 1) {
        data.push({
          x: time + i * 1000,
          y: null
        });
      }
      return data;
    }())
   },
  {
    name: '登録者数',
    yAxis: 1,
    data: (function () {
      var data = [],
        time = (new Date()).getTime(),
        i;

      for (i = -19; i <= 0; i += 1) {
        data.push({
          x: time + i * 1000,
          y: null
        });
      }
      return data;
    }())
   }
   
   ]
});</script>


  </body>
</html>

注釈として
なんか上のコードの色が変ですがあきらめました。
Highchartsは、ダウンロードしても使えるみたいですがしなくてもできるらしいです。今回はダウンロードなしで使用しています。
16と17行目はPHPと使い方は同様です。APIキーと動画IDいれてください。
APIの使いかたはPHPと同じようなものです。URL作って投げて、レスポンスを使用する形は変わりません。
25行目と43行目については、PHPと違いJavascriptだとレスポンスが返るまでまたず処理が進んでしまう、雑な対策としてこの行追加でレスポンスが返るまで待ち状態となります。これでPHPと同じ感じに動作します。
62行目　Y軸が1000を1kとかの表示するのを禁止します。
71行目　第２のY軸を右に置こうとしたら表示されないので苦労しました。原因は画面の外に表示されていました。この値を増加したら解決。これで1時間は無駄にしました。
80行目は2秒周期インターバル動作させています。
85行目あたりaddPointのtrueとかすることによってシフト動作してくれます
88行目　汎用に最新値表示しています。最新の値をプロット上に出したかったのですがdataの要素の最後だけlabel表示をenableにしてもシフト動作すると前の要素に移動していってしまうのでaddPointを使わずfor文なりで更新するのがよさそう？メンドクサイのであきらめました。
112行目と118行目でY軸が整数表示
119行目で二つ目のY軸を右側に置きます
136行目でどちらのY軸に表示するか決まります
142行目等のi=-19でデータの点数を20点してます。-199にすれば200点になります。


なんとかやりきった。疲れた。