Giter Club home page Giter Club logo

nicoad-ex's Introduction

ニコニ広告ex.

ニコニコ動画・生放送ページのニコニ広告を、コメント欄に表示するブラウザ拡張機能です。ブラウザ拡張機能のボタンを押せば、どのページからでも、チケットの確認やふくびきなどを行うことが出来ます。

Chrome Web Store / Firefox Add-Ons にて公開中です。


必要条件

以下のいずれかを利用して開発に参加することができます。

  • Google Chrome 最新版
  • Mozilla Firefox 最新版

(どちらもOSは問わないが最新のものであることが条件)

使用言語

  • JavaScript
  • jQuery

開発への参加

環境構築

  1. 最新のリポジトリをDL
  2. ブラウザの設定からデベロッパーモード(Chromeのみ)を有効化
  3. DLしたファイルを読み込み編集

注意事項

  • 同じスクリプトでChrome/Firefoxどちらも動作する必要があります。
  • iframeのsrcの書き換えは、contentWindow.location.replaceを利用し、jQueryを利用しないこと。以下補足です。
    • jQueryのattrでは履歴(戻る/進む)ボタンに影響が出ます。
    • jQueryの$('#example_iframe_id')での指定では、contentWindow.location.replaceが利用できません。

ライセンス

MIT

作者

AyumuNekozuki / @nekozuki_dev

nicoad-ex's People

Contributors

ayumunekozuki avatar tearaikazuki avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

tearaikazuki

nicoad-ex's Issues

[v2.0.1] 全画面表示中にギフト画面を開いた状態で、全画面を終了させるとコメント一覧が表示されなくなる

再現手順

  1. 生放送のWatchページを開く
  2. 生放送プレイヤーを全画面にする
  3. ギフトボタンをクリックしギフトを開く
  4. ギフトを開いた状態で全画面表示を終了させる
  5. コメント欄が表示されない

備考

再度ギフトボタンをクリックするとコメント欄がちゃんと表示される

スクショ

スクリーンショット 2021-06-19 17 43 02

[v2.0.1] iframe内 commonHeader のお知らせが取得できずCORSエラーとなる

内容

バグの概要:
ヘッダーの「お知らせ」をクリック時、読み込み中のまま通知内容が表示されない
「お知らせ」が閉じない

再現手順:

  1. ポップアップ内でスマートフォン版ニコニコのヘッダーが設置されているページを表示する
  2. ヘッダーの「お知らせ」(ベルのアイコン)をクリックし、「お知らせ」を表示する
  3. 「お知らせ」の読み込みが完了せず通知内容が表示されない
  4. ヘッダーの「お知らせ」(ベルのアイコン)を再度クリックしても「お知らせ」が閉じない

期待する動作:
ヘッダーの「お知らせ」をクリック時、通知内容が読み込まれ表示される
「お知らせ」が開閉できる

バグが発生した環境:
OS: [Windows 10 20H2 64bit]

補足:
「お知らせ一覧へ」をクリックし表示される「お知らせ一覧」ページでは
通知内容が表示されるが、「お知らせ一覧」ページのヘッダーの「お知らせ」は
読み込みが完了せず通知内容が表示されない

問題が発生したURL

スマートフォン版ヘッダーが設置されているページ

環境

Chrome

From

from GForm

Regenelate Token Test

内容

GitHubのトークンを再発行・修正したのでテストpush

問題が発生したURL

--

環境

Chrome

From

@AyumuNekozukifrom GForm

[v2.1.0] 広告ドロワーの出し入れがブラウザのヒストリに残る

内容

静画、大百科、立体で追加された右側の広告ドロワーを出し入れすると、同じページの履歴(正確にはiframeの変更履歴)がブラウザのヒストリ(戻る進む)に溜まっていく。
iframeのsrcを直接書き換えるとブラウザのヒストリに残るらしい。

改善策

contentWindow.location.replace()を使うと残らない。
https://www.takurokamiyoshi.net/blog/57/

[v1.1.4] 広告機能のみの生放送番組でフルスク時に表示崩れが起きる

広告機能のみ(ギフト・ネタが利用できない)生放送番組で、フルスクリーン関係で表示崩れが起きる。

表示崩れ

状況1

フルスクリーン時に広告画面が表示されない
image

状況2

広告画面表示→フルスクリーンさせたときに、広告画面が消えない
image

状況3

状況2発生時、フルスクリーンを解除するとコメント欄と広告画面が同時に表示されてしまう
image

環境

  • Google Chrome 81.0
  • Vivaldi 3.0
  • ニコニ広告ex v1.1.4

原因

拡張機能での表示非表示のスクリプトに何かしら原因あり。詳細後日確認。

通常の生放送はギフト機能にクリック情報を与え、ギフトのiframeURLを広告のURLに置き換えて表示させるが、ギフトや新市場が使えない場合、独自実装で表示非表示させている。それが原因の可能性大。

対応

広告機能のみの生放送のスクリプトの見直しが必要。

test

内容

test

問題が発生したURL

test

環境

tes

From

testfrom GForm

[TODO] ニコニ・コモンズに登録する

やること

  • ニコニ・コモンズ へのコンテンツ登録

理由

  • ニコニコ関連の拡張機能はコモンズでまとめて見れたほうが良い気がした

備考

  • クリエイター奨励プログラムの登録(奨励スコアの受け取り)は行わない。
  • Contributor がいるので...

[v2.1.0] ニコニ立体で`onLoad`イベントが発火しない事による影響

内容

ニコニ立体ではサイト内の移動(href="/works/td***" のようなaタグクリック時)でonLoadイベントが呼び出されない。
そうすると初期化処理が実行されないので不整合が起きる。

  • デフォルト広告ボタンが上書きされない
  • ドロワーを出してた場合出っぱなしになる

改善策

ページの移動を検知したら、ボタン上書きやドロワーを閉じたい。
Web APIにはURLの変更を検知するイベントが存在しないので、他の機能を組み合わせる必要がある。
ググったら履歴の変更イベントを利用するケースが多かった。
試したらいい感じに動いたけど、重複書き込みとかの問題が無いかは未確認。

コード

overlay_scripts.jsに以下を追記したらサイト内の移動を検知できた。

// ブラウザ側のwindowじゃないと各種イベントが見えない
const elm = document.createElement("script");
elm.innerHTML = `
  // 履歴追加を検知
  const originalPushState = window.history.pushState;
  window.history.pushState = (state, title, url) => {
    console.log("push state", url);
    window.dispatchEvent(new window.Event("locationchange"));
    return originalPushState.call(window.history, state, title, url);
  }

  // 戻る進むを検知
  window.addEventListener('popstate', function (event) {
    console.log("pop state", event.target.location.href);
    window.dispatchEvent(new window.Event('locationchange'));
  });

  // カスタムイベントで受け取る
  window.addEventListener("locationchange", (e) => {
    console.log("location changed!")
    //console.log(e);
  })
`;
document.head.appendChild(elm);

[v1.1.4~] soでないチャンネル動画で貢献度ランキングが表示されない

URLがsoでないチャンネル動画(/watch/XXXX)で、貢献度ランキングが正常に表示されない

左:ポップアップでの正常表示
右:拡張機能でのコメント欄表示
image

環境

  • Google Chrome 81.0
  • ニコニ広告ex. v1.1.4

条件

URLの動画IDがso表示でないチャンネル動画
例:/watch/1588209123

原因

通常、動画IDがsoに置き換えられて広告画面が表示されるが、置き換えずに表示させているため貢献度ランキングが共通化されないのでは

対応

/watch/XXXXX を /watch/soXXXX へ置き換えて動画IDを取得する必要がある。
現在仕様検討中

[v2.1.3] ニコニ広告ex.アイコンをクリックしてニコニ広告ex.画面を閉じられるようにしてもらいたい

内容

【要望がどのような問題に関連しているのか】
[リクエストされた放送ネタ]の隣の[ギフトアイコン]をクリックするとギフトを贈る画面を開閉できるため、[ニコニ広告ex.アイコン]クリック時にも同様の挙動をすると思われる可能性がある

【望む解決策の説明】
[ニコニ広告ex.アイコン]クリック時の挙動を[ギフトアイコン]クリック時の挙動に合わせる
(ニコニ広告ex.画面を表示しているときに、再度[ニコニ広告ex.アイコン]をクリックするとニコニ広告ex.画面が閉じるようにする)

問題が発生したURL

https://live.nicovideo.jp/watch/lv*******/

環境

Chrome

From

from GForm

広告のiframeが出ない

内容
コメント欄上の広告ボタンを押すとiframeで出ずにポップアップされる
(生放送・動画共に)

放送ネタの方の広告ボタンは機能してる

環境

Chrome [89.0.4389.90]
niconico Darkmode [1.2.3]

[v1.2.0] Firefox76.x にて動画スクリプトが動作しない

お困りの方はFirefoxのバージョンアップをお願いします。


Firefoxにて動画スクリプトが動作しない。

環境

  • ニコニ広告ex. v1.2.0
  • Firefox v76.x

条件

ニコニコ動画全動画

  • watch/sm*
  • watch/nm*
  • watch/so*
  • watch/*

備考

※ Chromeでは正常に動作する

原因

不明

改善

  • Firefoxのバージョンを v77.0 にバージョンアップすると解決する

対応

なし

v2.1.3 生放送で広告ボタンが表示されない

内容

生放送を視聴中、放送ネタの左側にギフトと広告のマークが出るとおもうめう。
視聴開始した一瞬だけは表示されるんだけど、その後すぐに非表示になるめう。
試しに一旦ニコニ広告ex.を削除したところ表示がちゃんとされたのでバグかと・・・(再インストール後、また表示されなくなっためう)

問題が発生したURL

https://s.kuku.lu/image.php/5kjld319g

環境

Chrome

From

音々愛メウ(元めうの人)from GForm

[v1.2.0] 通信速度が遅い場合に、ボタンが作成されない不具合(動画)

通信速度が遅い場合に、ボタンが作成されない。

環境

  • ニコニ広告ex. v1.2.0
  • Chrome 83.0
  • Firefox 77.0

条件

  • 通信速度が遅い(体感)
  • ニコニコ動画全動画

原因

  • ページの読み込み終了よりも拡張機能スクリプトが先に実行されてしまい、ボタンが正常に作成されない
  • window.onload が機能していない?

対応

次回 v1.2.1 で修正

  • 生放送同様、一定時間ごとにボタンが有るかチェックスクリプトを動かす

文字が白くて見えない

[TODO] ゲームアツマールへの対応

概要

以下のサービスに対応したい。

  • ニコニコ静画(イラスト)
  • ゲームアツマール
  • ニコニ立体
  • ニコニコ大百科

実装方法

コメント欄があるサービス(静画・アツマール)は動画と同様の実装
ないサービスは要検討

tsts

内容

tst

問題が発生したURL

tsts

環境

Chrome

From

testfrom GForm

[V2.1.1] お絵カキコ・ピコカキコの編集ページにアイコンが表示されます

内容

御忙しい中、御読み頂きありがとう御座います。
ニコニコ大百科のお絵カキコとピコカキコの編集ページに、他のページと同様にニコニ広告ex.のアイコンが表示されるのですが、両ページには共通ヘッダーが存在しないため、そのアイコンが目立っています。
両ページも編集ページであり、ニコニ広告に関連する要素もありませんから、アイコンを表示しないようにして頂きたいです。何卒御検討の程御願い致します。

問題が発生したURL

https://dic.nicovideo.jp/p/tegaki/* https://dic.nicovideo.jp/p/mml/*

環境

Chrome

From

from GForm

[v2.0.2] パネルヘッダの▲要素の位置がズレている

内容

マイリストとニコニ広告ex.のパネルヘッダにおいて、div.AddVideoListPanelContainer::before要素のstyleのleftの数値が、おそらく間違っています。

該当する行
https://github.com/AyumuNekozuki/nicoad-ex/blob/master/js/script.js#L58
https://github.com/AyumuNekozuki/nicoad-ex/blob/master/js/script.js#L63

各要素の幅から計算すると広告のleftは188px、マイリストのleftは152px(ニコ動のデフォルトでは153pxだが多分これも間違い)が正しいと思われます。

問題が発生したURL

すべての動画再生ページ

環境

Chrome

From

おこうfrom GForm

[v2.0.0] ニコニ貢献への対応 + α

v2.0.0 アップデート予定箇所

  • ニコニ貢献への対応
    • Watchページ:広告URLのチェック/差し替え
    • ポップアップ:チケット一覧ページのURLチェック/差し替え
    • ポップアップ:キャンペーン一覧ページのURLチェック/差し替え
  • 各所デザイン/アイコン変更
    • 拡張機能アイコン/ロゴをオレンジ色ベースに変更
    • ポップアップメニューのデザイン等変更

詳しくは後ほどブログ書く

Ver.1.2.3 ニコニ広告EXが起動しない

内容

今週くらいからニコ生で広告しようと広告ボタンを押しても何も起こらない。
読み込み自体は完了しているらしく、ページ上に映る広告ボタンはオレンジ色になっている。なお、動画への広告は問題なし。
あと症状が出始めた頃、ニコニ広告を二コ生枠起動して上に出る「ニコニ広告EX」のバナーが出てなかった気がする...

問題が発生したURL

https://live.nicovideo.jp/watch/lv331885206 ニコ生の枠全般

環境

Chrome

From

@Nameko_Re_Nicofrom GForm

生放送スクリプトの見直しがしたい

生放送スクリプトが複数の分岐があり複雑化しているため、一元化し、メンテナンスしやすくしたい。

現状

現状大まかに数えると以下の分岐がある

  • "ギフト"画面を広告画面に置き換え (iframe replace)
  • "放送ネタ"一覧画面を広告画面に置き換え (iframe replace)
  • コメント欄の非表示・広告画面の表示を全てスクリプトで行う

前者2つは、基本的内容は同じだが、ボタンの調整など微妙なズレがある。

3つ目は全てスクリプトで行っているため、対応がしづらい。
またv1.1.4現在バグも発生している #2 ため早急に対応が必要。

対応

仕様がまとまり次第コメントで追記予定。

公式の既存ボタン(ギフトや放送ネタボタン)に一切頼らず、スクリプトで管理したほうがわかりやすそうではあるが、広告ボタンの置き換え等もあるので要検討。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.