pre{font-family:Menlo,Consolas,"メイリオ",sans-serif}ホームプログラミングPythonJavaScript裏技お問い合わせYouTubeコメントを自動&スクロールなしで読めるスクリプトを作ってみるJavaScript2020.01.24YouTubeでコメントを読む際、スマホならアプリを使えば動画を見ながらコメントをみることができますが、PCでブラウザからYouTubeをみているときはそれができません。コメントをみるためにスクロールしたら動画も一緒にスクロールされるので見れなくなります。コメントをスクロールなしで確認する方法はないのだろうか?コメントをスクロールなしでみることができれば、動画をみながらコメントも確認できます。なんかいい方法はないかと思って考えてたらひらめいたのでスクリプトを作ってみることにしました。どんなものを作ったかはテキストだと説明が難しいので動画をご覧ください。Loaderどうでしょうか?ちゃんと動画を画面内に含めたままコメントを読むことができています。見た感じコメントを表示するだけのスクリプトにみえるかもしれませんが、そうではありません。YouTubeは不要なサーバー負荷を抑えるため、一度に読み込まれるコメント数が制限されています。自動でコメントを随時読み込んでいく機能も必要です。いう話も込みで、今回スクリプトを作った手順を紹介していきたいと思います。スポンサーリンクコメントを取得するコメントをスクロールなしで表示するためには上の動画でもやっていたようにトースターを使ってコメント文を表示すればよいのですが、コメント文を取得しなければなりません。Google開発者ツールでタグを確認してみると動画へのコメントは以下のような規則性がみられました。コメント内容</yt-formatted-string>なので、ここから中身の文を取り出せばそれがコメント文になります。中身を取り出すのは至って簡単。今回はidを使って取り出します。document.querySelectorAll("[id^=content-text]")[0].innerTextgetElementByIdだと複数取り出せないのでquerySelectorAllを使っています。[0]の部分を変数にして+1ずつしていけば上から順番にコメントを取り出せます。[0]は1番目のコメント。[1]は2番目のコメント・・・といったかんじ。idを指定してコメントを取得できましたが、実はyoutubeは他の部分にも同じidを使っています。そのため、コメント以外が取得されてしまうのを回避するためif文を書きます。return;YouTubeのコミュニティのメッセージもcontent-textというidが使われているので除外しないと表示されてしまいます。コメントを自動で読み込むここが最も苦労した部分。コメントを自動で読み込む機能をつけないとコメントの表示が20で終わってしまいます。YouTubeがサーバーへの負荷を軽減するために一度に読み込まれるコメント数が20に制限されているからです。新たにコメントが読み込まれるタイミングはユーザーが一番下のコメントがある場所までページをスクロールしたときです。コメントを自動で読み込むには、一番下までスクロールしたときに発火するイベントを強制的に起こすかコメントを読み込む関数を呼び出すしかないイベントを強制的に起こすのは無理そうだと判断したので、コメントを読み込む関数を呼び出すことにしました。簡単に言いましたが、これをするということは容易なことではないと気づく方もいらっしゃるかもしれません。(簡単じゃね?と思う人もいるかもしれないけど)とりあえずコメントを読み込む関数を呼び出すことがどういうことか説明。コメントを読み込む関数はYouTube側のスクリプトに含まれている↓つまりYouTube側のスクリプトを解析して関数を探し、書き換えないといけない↓しかもページ読み込み時にオリジナルをブロックして書き換えたスクリプトを読み込まないといけない多分この時点で「あぁ・・・無理だわ」と思う人もいるかもしれませんね。私も無理なんじゃないかと思って1日くらい作るのためらいました。自動で実行されるようにYouTube側のスクリプトを書き換えることさえできれば完成なので頑張ってみることにしました。YouTube側のスクリプトを解析どうやったのかは省きますが、結果はdesktop_polymer_v2.jsに書いてあるonRetrieveLocation_という関数を呼ぶとコメントが読み込まれることがわかりました。これを書き換えて35秒ごとに自動で呼び出されるようにしました。0);a.stopPropagation()}ページ読み込み時に改変したスクリプトを読み込むdesktop_polymer_v2.jsを読み込まれないようにして、改変済みのdesktop_polymer_v2.jsを読み込む必要があります。true});ちなみに書いてませんでしたが、Tampermonkeyでスクリプトを実行することが前提です。MutationObserverを使えばページ読み込み時に読み込まれるスクリプトをブロックしたりスクリプトのURLを書き換えたりできます。スポンサーリンク2つの機能をあわせれば完成コメントの内容を取得してトーストで表示する機能コメントを自動で定期的に読み込む機能この2つをあわせたらスクロールせずにコメントを読むスクリプトの完成です。この2つがあって初めて成り立つものです。個人的にはYouTube側のスクリプトを書き換える時点でちょっと難易度高めだと思っています。フルコードが欲しい方がいたらコメントくれたら渡せるかも・・・。WASMはデコンパイルして解読できてしまうので注意Emscriptenなどを使ってC/C++のコードをJavaScriptに変換するとWebAssembly(wasm)ファイルが生成されますよね。WASMはバイナリ形式なので、エディタなどで開いても人間が解読することは困難です。...JavaScript【コード有】console.logを簡単に装飾できるスクリプト!Node.jsでも使用可能console.logはコンソールに文字列などを出力できる関数ですが、文字に色をつけたり背景色を変えたりすることができます。毎回カラーコードを指定するのはとてもめんどくさいので「超簡単にコンソールの表示を装飾できるスクリプト」を作成しました。コードをフルで載せていますのでぜひ使ってみてください。最近はWebSocketを使うウェブサービスやゲームなどが増えました。するとゲームの拡張機能(MOD)を作ったり、ウェブサービスを解析したいといった用途でWebSocketの通信内容を覗き見たいという人がいるかもしれません。...JavaScriptJavaScriptでコードをより短縮して書く方法!JavaScriptでより短くコーディングするテクニックを紹介します。Googleでも使用されている書き方についても触れます。JavaScripte-typing(イータイピング)で好きな例文を入力できるように改造してみたe-typingは有名なタイピング練習ゲームですが、自分で作った例文を読み込んでプレイしてみたいと思ったので色々いじってみました。暗号化されたデータの解読方法や改造した流れを説明しています。実際にオリジナル例文をプレイするところもみることができます。JavaScriptJavaScript難読化にも使えるEmscriptenEmscriptenはC/C++をJavaScriptに変換できるコンパイラです。本来の用途ではありませんが、難読化ツールとしても使えるのではないかと思いました。気軽に使えるものではありませんがEmscriptenで出力されたコードは間違いなく超読みづらいコードです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。"https://tialight.com/wp-content/plugins/highlighting-code-block/assets/js/prism.js-end");タイトルとURLをコピーしました。