1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

ニコニコをダークモード化する拡張機能を作ったが、クソコードになったので改良修正した話。

この記事は N高等学校 (1) Advent Calendar 2020 の12日目の記事です。

はじめに

N高等学校 3年の猫月遥歩(ねこづきあゆむ)です。
ネット上では、VOICEROID解説動画の投稿や、VR空間からの生放送など色々なことをしています。

先日、以下の動画を投稿したところ、再生数3万回超えとかなりの好反響をいただきました。ありがとうございます。

ニコニコを "ダークモード" 化する拡張機能作ってみた! - ニコニコ動画 nicodark_logo.png

今回は、この「ニコニコをダークモードに対応させる拡張機能」について、実装面だったり、開発秘話とかを話したいと思います。

niconico Darkmode - Github

なぜ作ったか

今となっては覚えてないです。
first commit が今年6月なんですが、新マイページに移行したのは7月末。
どこか気に入らないページとかあったのかなぁ...

とりあえず実装してみる

当時の僕は要件定義とか全くせずに、勢いだけで「うおおおおおおおおおおおおおお」って言いながら作ってました。

結果、ぐちゃぐちゃクソコードのCSSファイルだけでできた、ver1.0.0のダークモード拡張機能が錬成されました。
当時のコードはコチラ

これでも見た目はそれっぽくできてたので、自分でもびっくりしています。
002.png

クソコードを修正する

見えてきた問題点

作ったものを使ってるうちに問題点が見えてきました。

  • 1つ配色に修正箇所があると、全てのコードを見直す必要がある
  • 総合TOPのイベント(超会議やボカコレ等)に個別対応できない
  • デフォルト(ライト)時との切り替えが面倒くさい

1つの配色に変更点、
例えば、灰色を#999999にしていたけど、もうちょっと明るくしてほしい等の要望があったときに、
当時はカラーコードを直接指定していた為、修正作業量が膨大になり、面倒でした。

また、デフォルトのデザインに戻すときに、ブラウザの拡張機能の設定パネルからオンオフする必要があり、とても手間&面倒でした。

対応策を考える

ということで、対応策を考えていたところ、SCSSがオススメというものを聞き、移行を開始しました。
また、javascript + chrome.storage APIでオンオフ機能も実装しました。

実装する

がんばりました

SCSSへの移行

これまでCSSでカラーコード直接指定していたスタイルシートを、全てSCSSに移行しました。
恐らく一番大変な作業だったかなと思います。

事前に色定義ファイルdefault.scssを用意し、それをインポートさせて指定することで色修正等は定義ファイルを変更するだけでよくなりました。

example.scss
@import 'default';

.niconico-darkmode-setting-true{
    background: $main-background-color;

    div.example{
        background-color: $nico-black;
    }
}

オン・オフ機能の実装

javascript + chrome.storage API を利用してオンオフ機能も実装しました。

上のSCSSコードには.niconico-darkmode-setting-trueというclassが上部に指定されています。
このclassはbodyタグに付与され、オンのときは付与、オフのときは削除することでオンオフ機能を実装しています。

オンオフは、chrome.storage API を利用することで設定の保持等を行っています。

また、そのオンオフボタンは、リニューアルが進められているcommonHeaderに作成することで利便性を上げました。
image.png

修正完了!

image.png

いい感じに修正できました。

さいごに

作成、修正、改良してみて思ったこと。
開発をやる上で以下は絶対考えておくべき。

  • 後々の自分を想定する
    • 予想される修正点に対し、簡単に修正などできるようにしておく

ニコニコの再建、レガシーコードの改善はこれ以上にやばそうなので運営さんにはホント頭が上がりません...w

最後になりましたが、今日はニコニコ建国記念日。14年目のお誕生日、おめでとうございます!!
ニコニコが無ければ今の自分は存在してないし、こんな拡張機能を作ることも、記事を書くこともない。更には学校(N高)自体無かったと思います。

改めてこの場にはなりますが、運営さんはもちろん、関わっている方々全員に感謝を。


というわけでここまでお読みいただき、ありがとうございました!
明日以降も N高アドベントカレンダー続きますのでぜひ御覧ください!

N高等学校 (1) Advent Calendar 2020
N高等学校 (2) Advent Calendar 2020

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
Sign upLogin
1
Help us understand the problem. What are the problem?