Help us understand the problem. What is going on with this article?

ニコニ広告をコメント欄に表示させるChrome拡張機能作ってみた。

猫月あゆむです。よろしくおねがいします。

対象

  • 解説動画をみて深堀りしたいと思った人
  • Chrome拡張機能/JavaScriptについて何かしら知りたい方
  • ニコ厨

何を作ったのか

タイトル通り。
image.png
image.png

こちらで配布中。

仕組み

動画の内容を少し詳しくしたものが下図
タイトルなし.png

全コードはこちら
https://github.com/AyumuNekozuki/nicoad-ex/blob/master/script.js

script.js
//ID取得
//各PC環境エラー回避(新市場リロード・動画プレイヤー読み込み速度など)のための3.5秒待ち
setTimeout("getID()", 3500);

function getID() {
    //URLからID取得(watch/??xxxxの形統一なので楽)
    var nicoID = location.pathname.slice(7, 18);
    //分岐
    if //省略 
    //ifで上で取得したtypeを sm/nm→動画用スクリプト、lv→生放送用スクリプト に振り分ける
}

//ニコ動
function videoscript() {
    //視聴者・投稿者でclass指定のズレが生じるのでtry catchで動かしてます(もっといいやり方ある気がする)

    try { 
        //視聴者用
        //2 従来 ニコニ広告ボタン にid付与
        //3 従来 ニコニ広告ボタン 削除
        //4 マイリストボタン にid付与
        //5 広告ex.ボタン・生成
    } catch{ 
        //投稿者用
        //2 従来nicoadにid付与
        //3 従来nicoadボタン削除       
        //4 mylistにid付与
        //5 広告ex.ボタン・画像追加      
    }

    //6 ボタンクリック時
    document.getElementById("nicoadex").onclick = function () {
        //div 書き換え
           //class取得→innerhtmlでまるごと書き換え(iframeはsrc="hoge"で入れておく)

        //close処理
        document.getElementById("exclose").onclick = function () {
        //☓ボタンクリック→書き換えた内容をinnerhtmlで空っぽにする
        };

        //iframe url replace
        var iframe = document.getElementById('nicoadex-iframe');
        iframe.contentWindow.location.replace('https://nicoad.nicovideo.jp/video/publish/' + nicoID + '?frontend_id=6&frontend_version=0&video_watch');
    };

}

//ニコ生
function livescript() {

    var s = 0; //←後の分岐を楽にする用

    //初回動作
    loop();

    //error 広告ボタン取得失敗
    function ErrorNotAd() {
        //エラーログ用
        //画面左下(いつもは「追っかけ再生を開始しました」とか出てくるところ)に表示させる
    };

    //error 複数
    function Errormore() {
        //エラーログ用2
    }

    //エラーcloseボタン 
    function errordelbut() {
        //エラーメッセージ☓ボタン処理 
    }


    //基本処理
    function loop() {
        try {
            //新市場divチェック
        } catch{
            エラー = 広告・ギフト未対応(公式番組しか存在しないのでそこまで出ないエラー)
            ErrorNotAd();
        }


        if (label0 == "ギフト") {
            //4 ギフトボタンにid付与
            lvgift();
        } else {
            //4 代用 新市場メニューボタンにid付与
        }

        function lvgift() {
            //上記ギフト版処理
            try {
                //従来 ニコニ広告 ボタンにid付与・削除
            } catch{
                エラー = 広告未対応番組(放送枠取り時点で広告禁止設定で放送をしている)
                ErrorNotAd();
            }
        }

        function lvichiba() {
            //上記新市場版処理
            try {
                //従来 ニコニ広告 ボタンにid付与・削除
            } catch{
                エラー = 広告未対応番組(チャンネル放送枠取り時点で広告禁止設定で放送をしている)
                ErrorNotAd();

            }
        }

        try {
            //5 広告ex.ボタン・画像追加
            //-- aria-lavel変更(hoverで文字が出てくる)

            try {
                //6 ボタンクリック時
                document.getElementById("nicoadex").onclick = function () {
                    if (s == 1) {
                        //ギフトにクリックアクション
                    }
                    if (s == 2) {
                        //新市場ボタン押せるかチェック
                        if (label2 == "この番組ではネタを追加できません") {
                            //新市場ボタン 押せない(新市場禁止枠)
                            //display:none;の切り替えで対応
                        }
                        else if (tmp10[0].hasAttribute("disabled")) {
                            //新市場ボタン 押せない(タイムシフト)
                            //display:none;の切り替えで対応
                        }
                        else {
                            //新市場ボタン 押せる
                            //偽のクリックアクション
                        }
                    }
                    //iframe url replace
                    var iframe = document.getElementById('RICH-IFRAME');
                    iframe.contentWindow.location.replace('https://nicoad.nicovideo.jp/live/publish/' + nicoID + '?frontendId=12');
                }

                //追っかけ対応処理 idチェックなければ基本処理実行 1秒に1回チェック
                var checkadex = function checkad() {
                    if (document.getElementById("nicoadex")) {
                        console.log("ニコニ広告ex.: 動作中です");
                    } else {
                        loop();
                    }
                }
                setInterval(checkadex, 1000);

            } catch{
                //エラー = 予期せぬエラー 他のエラーが複数出てる可能性?
                Errormore();
            }
        }
        catch {
            //エラー = 予期せぬエラー 他のエラーが複数出てる可能性?
        }
    }
    console.info("ニコニ広告ex.: メイン処理完了");
}


だいぶ端折りましたが、これでも長い気がしなくもないです。
Qiitaで見るから長く感じるのかな?

さらーっと解説。

URLからIDを取得します。動画・生放送共通で、/watch/IDなので取得が楽です。
取得したIDから動作を分岐。

動画の場合。

従来のニコニ広告ボタンを削除、exボタンを生成。
exボタンをクリックで、マイリストボタンにアクションが行き、マイリストのdivを書き換える形で表示されます。

生放送の場合。

分岐が多くて厄介。

  • 分岐1:広告対応しているか。 否→エラーメッセージを出して終了
  • 分岐2:ギフトに対応しているか 否→新市場で代用(分岐2-2)
    • 分岐2-2:新市場が使えるか 否→ display:none; の切り替えで対応

従来のニコニ広告ボタンを削除、exボタンを生成。

  • 分岐2→対応:exボタンをクリックで、ギフトボタンにアクションが行き、ギフトのiframeの src 書き換えで表示されます。
  • 分岐2-2→対応:exボタンをクリックで、新市場ボタンにアクションが行き、新市場のiframeの src 書き換えで表示されます。
  • 分岐2-2→対応なし:exボタンをクリックで、display:none;` の切り替えで対応。divの書き換え、以後切り替えで実装。

生放送 追っかけ再生対応

1秒間隔で、該当するid(広告ex.ボタン)をチェック。なければ処理再実行。

反省点

  • 技術不足が目立つ
    • 技術を知りながら作っていったので、処理が統一できてない(特に生放送)
    • 処理が回りくどい場所がある(気がする)
    • コードがぐちゃぐちゃ(これでも公開前にある程度綺麗にし直したやつ)

現在のバグ

  • ニコニ広告のチケットの切り替えができない
    • 一度「チケットを利用しない」を選択後、再度選択で回避可能
    • ニコニ広告側のjsがうまく動いていない?どこかとかち合ってしまった?(今のところ原因不明)

余談

  • jQuery入れてるけど、一切使ってない(たぶん)
    • JavaScript初心者、jQueryなんてもっとわからん
  • 「ニコニ広告ex.」のex.は、つよつよな意味のexと、拡張機能の頭文字の ex.をかけたけど多分誰も気づかない
  • 拡張機能の審査に1週間ぐらいかかるのかと思ってたら、まさかの1日足らずで終わってしまってびっくりした

さいごに

  • プルリク、イシューお待ちしてます。
  • 次はVket4に向けてなにか作ろうって思ってます。
nnn-school
IT×グローバル社会を生き抜く“創造力”を身につけ、世界で活躍する人材を育成する。
https://nnn.ed.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした