この記事は N高等学校 (1) Advent Calendar 2020 の12日目の記事です。
はじめに
N高等学校 3年の猫月遥歩（ねこづきあゆむ）です。
ネット上では、VOICEROID解説動画の投稿や、VR空間からの生放送など色々なことをしています。
先日、以下の動画を投稿したところ、再生数３万回超えとかなりの好反響をいただきました。ありがとうございます。
ニコニコを "ダークモード" 化する拡張機能作ってみた！ - ニコニコ動画 
今回は、この「ニコニコをダークモードに対応させる拡張機能」について、実装面だったり、開発秘話とかを話したいと思います。
なぜ作ったか
今となっては覚えてないです。
first commit が今年6月なんですが、新マイページに移行したのは7月末。
どこか気に入らないページとかあったのかなぁ...
とりあえず実装してみる
当時の僕は要件定義とか全くせずに、勢いだけで「うおおおおおおおおおおおおおお」って言いながら作ってました。
結果、ぐちゃぐちゃクソコードのCSSファイルだけでできた、ver1.0.0のダークモード拡張機能が錬成されました。
当時のコードはコチラ
これでも見た目はそれっぽくできてたので、自分でもびっくりしています。
クソコードを修正する
見えてきた問題点
作ったものを使ってるうちに問題点が見えてきました。
- １つ配色に修正箇所があると、全てのコードを見直す必要がある
- 総合TOPのイベント（超会議やボカコレ等）に個別対応できない
- デフォルト（ライト）時との切り替えが面倒くさい
１つの配色に変更点、
例えば、灰色を#999999にしていたけど、もうちょっと明るくしてほしい等の要望があったときに、
当時はカラーコードを直接指定していた為、修正作業量が膨大になり、面倒でした。
また、デフォルトのデザインに戻すときに、ブラウザの拡張機能の設定パネルからオンオフする必要があり、とても手間＆面倒でした。
対応策を考える
ということで、対応策を考えていたところ、SCSSがオススメというものを聞き、移行を開始しました。
また、javascript + chrome.storage APIでオンオフ機能も実装しました。
実装する
がんばりました
SCSSへの移行
これまでCSSでカラーコード直接指定していたスタイルシートを、全てSCSSに移行しました。
恐らく一番大変な作業だったかなと思います。
事前に色定義ファイルdefault.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に作成することで利便性を上げました。
修正完了！
いい感じに修正できました。
さいごに
作成、修正、改良してみて思ったこと。
開発をやる上で以下は絶対考えておくべき。
- 後々の自分を想定する
- 予想される修正点に対し、簡単に修正などできるようにしておく
ニコニコの再建、レガシーコードの改善はこれ以上にやばそうなので運営さんにはホント頭が上がりません...w
最後になりましたが、今日はニコニコ建国記念日。14年目のお誕生日、おめでとうございます！！
ニコニコが無ければ今の自分は存在してないし、こんな拡張機能を作ることも、記事を書くこともない。更には学校（N高）自体無かったと思います。
改めてこの場にはなりますが、運営さんはもちろん、関わっている方々全員に感謝を。
というわけでここまでお読みいただき、ありがとうございました！
明日以降も N高アドベントカレンダー続きますのでぜひ御覧ください！
N高等学校 (1) Advent Calendar 2020
N高等学校 (2) Advent Calendar 2020