本記事はImitate Advent Calendar 2025にだいぶ遅れて参加しています。

プログラミングをちょっと嗜んでいる学生のまめーんと申します。
枠が空いているようなので書こうかな、って微かに考えていたことを載せておきます。
(結構技術寄りだけど許してください)

スペシャルデザイン

界隈人のみなさま、「全て歌詞の所為です。」(以下「すべかし」)使っていますでしょうか？
このサービスでエヌとかK²の歌詞を見ると、上部に「スペシャルデザイン」というボタンを見かけます。

さて、押してみると...?

K²の場合は、歌詞がドット化して雨が降り出します。
また、すべかし本人の作った曲であるΛに関しては曲が流れ歌詞がスクロールされていくスペシャルデザインが実装されています。
こういう曲を再生するスペシャルデザインを「再生型」とでも言いましょうか。
あと例外として、五千兆言絶句は、誰かがHTMLを埋め込めるバグを用いて制作されたデザインを、バグ修正時にスペシャルデザイン化したもので、すべかし本人が開発していないが本番環境に適用された初めてのスペシャルデザインです。

現状、本番環境でスペシャルデザインがある曲はこの4曲のみです。
しかし、すべかしのGithub(プログラ厶が置いてある場所)を見てみると、以下の記述があります。

全て歌詞の所為です。ではプルリクエストを積極的に受け入れています。
主に以下のことをやっていただけると嬉しいです。

・ スペシャルデザインの追加

...スペシャルデザインの追加が、受け入れられている。
つまり、自分の好きな曲のスペシャルデザインを作って送れば、採用される可能性がある！
ぜひ好きな曲にスペシャルデザインをつけて、一目置かれる曲にしてみませんか？

...ということでやり方を解説していきます。
なお、ここから先はHTML,Javascriptがある程度できる人向けの内容となります。覚悟を持ったら進んでください。

開発環境を作ろう

まずスペシャルデザインを作るために自分のPCにすべかしの環境を作ります。
基本的にはすべかしのREADMEに従って操作すればできます。
https://github.com/izumin2000/subekashi/blob/main/README.md

あと、VSCode等開発エディタがない人は入れておきましょう。 メモ帳とかで縛りプレイをしたいなら別に構いませんが...

スペシャルデザインの下準備

本番環境のすべかしから作りたい曲をコピーします。

1.まずコピーしたい曲のIDを取得します。
本番環境すべかしにてコピーしたい曲のページを開いてください。
そしてURLを見て、一番最後の数字を控えておいてください。
例: やくそく のIDは7279
https://lyrics.imicomweb.com/songs/7279/

2.シェルで以下のコードを実行してPythonの対話環境を開きます。

python manage.py shell

3.以下を打ち込みます。0000をさっき取得したIDに書き換えてください。

id = 0000

4.以下を打ち込みます。

from subekashi.models import Song
import urllib.request
import json
req = urllib.request.Request("https://lyrics.imicomweb.com/api/song/" + str(id))
with urllib.request.urlopen(req) as res:
    result = json.load(res)

song = Song(**result)
song.isspecial = True
song.save()
exit()

これによって、曲のコピーおよびスペシャルデザインの有効化が完了します。

スペシャルデザインを書く

subekashi/static/subekashi/specialフォルダに、ファイル0000.js(0000を曲のIDに置き換える)を作成します。
このファイルが、「該当の曲のページでロードされるJavascriptファイル」となります。
これだけでは何にもなりません。
ボタンを追加するため、目的に合わせてどちらかを選んでください。

スペシャルデザインボタン

ボタンを押すことでページに変化を起こす仕掛けに最適です。

function special() {
    document.querySelector(".dummybuttons").remove();
    // スペシャルデザインボタンが押されたときの処理
}

document.addEventListener("DOMContentLoaded", () => {
    add_special_button();
});

再生/停止ボタン

再生型のスペシャルデザインに最適です。

const defaultDummybuttonsEle = document.getElementsByClassName("dummybuttons")[0];
async function play() {
    // 停止ボタンに変更
    const stopEle = `
    <div class="dummybuttons">
        <a>
            <div class="dummybutton" onclick="stop()"><i class="fas fa-stop"></i><p>停止</p></div>
        </a>
    </div>
    `;
    defaultDummybuttonsEle.innerHTML = stringToHTML(stopEle).innerHTML;
    defaultDummybuttonsEle.style.position = "sticky";
    defaultDummybuttonsEle.style.top = "15px";
    defaultDummybuttonsEle.style.zIndex = '9999';
    defaultDummybuttonsEle.style.opacity = '0.5';

    //再生
    //音声の再生やアニメーションを行うコードを入れる

}

function stop() {
    playEle = `
        < div class="dummybuttons" >
            <a>
                <div class="dummybutton" onclick="play()"><i class="fas fa-play"></i><p>再生</p></div>
            </a>
        </ >
    `
    defaultDummybuttonsEle.innerHTML = stringToHTML(playEle).innerHTML;

    //停止
    //曲を停止する処理を入れる
}

document.addEventListener("DOMContentLoaded", () => {
    const designedDummybuttonsEle =
    `
    <div class="dummybuttons">
        <a>
            <div class="dummybutton" onclick="play()"><i class="fas fa-play"></i><p>再生</p></div>
        </a>
        <a href="history">
            <div class="dummybutton"><i class="fas fa-history"></i><p>編集履歴</p></div>
        </a>
    </div>
    `
    defaultDummybuttonsEle.innerHTML = stringToHTML(designedDummybuttonsEle).innerHTML;
});

ここまでやって、該当の曲のページを再読み込みしてみてみてください。
うまくいっていれば、スペシャルデザインボタンか再生ボタンが上部に表示されているはずです。
...今は押しても何も起きません。
再生ボタンは押すと停止ボタンに変化するだけです。
しかし、今たしかにスペシャルデザインの作成が始まりました。

中身を書く

HTMLやJavascriptに慣れないうちは小さな内容から始めてみましょう。
背景を変える、文字の色を曲のMVと合わせる、ネタ曲であれば五千兆言絶句のように文字をでっかくして装飾してみるとか。
再生型のスペシャルデザインを作りたい場合は、曲をロードする必要があります。
Λのスペシャルデザインのコードを真似て、音声を再生し、主要なCSSプロパティを調べ、暗号や歌詞の表示を変更してかつての界隈のようなシンプルなMVを作ることで、次第にやり方を覚える。
DOM操作に慣れてきて、自分でHTMLを操れるようになれば、オリジナルの演出の幅が広がる。
ユーザーが動かしたり、クリックしたりできる要素を増やすことで、「動画では再現できない」スペシャルデザインが作れるようになる。
それが中身を考え、スペシャルデザインを作る楽しみではないでしょうか。

本番環境に送る

もし満足いくスペシャルデザインができたら、すべかしさんに見てもらい、見事認められれば本番環境に適用してもらえます。
どちらの方法でも対応にはある程度期間が必要です。

Githubを使用

Git/Githubがある程度扱えるなら、すべかしのリポジトリにPull Requestを送って見てもらうことが可能です。
だいたいやり方は「OSS コントリビュート やり方」等で検索したらいっぱい出てきます。
すべかしのリポジトリでは特にプルリクの書き方などに指定はありませんが、コミット時に [Add] スペシャルデザイン0000の追加 という形式でコメントをつけるとわかりやすいです。

Discordで送信

すべかし公式Discordサーバーの技術チャンネル等、またはすべかしさんのDMに、作成したスペシャルデザインの動画と作成したJavascriptファイルをアップロードし見てもらいましょう。

適用された旨のメッセージが来たら、ぜひ見に行ってみましょう。自分のスペシャルデザインを見て優越に浸りましょう。
きっとそのページを訪れた界隈人があなたのスペシャルデザインを見て楽しめるようになったはずです。そして印象に残れば布教成功です。

最後に

私は今までいくつかスペシャルデザインを作ってきました。(本番環境には上げていませんが...)
例えば、これは私の作った「揺」のスペシャルデザインです:

(私のフォークリポジトリ ですべかしの環境を作れば他数曲のスペシャルデザインをみることが可能です)

最近スペシャルデザインに興味を示し、実際2つのスペシャルデザインを書いた方がいて、「せっかくならもっと多くの人にスペシャルデザインの興味を持ってもらいたい」という思いと、ラスト1枠を埋めておきたかったので記事を作成しました。
アドベントカレンダーも後半に差し掛かったのに3日目の枠を唐突に埋めたのは申し訳ありませんでした。

長文を読んでくださりありがとうございました。この記事を通して少しでもスペシャルデザインに興味を持ってくれたら幸いです。