メンヘラなWebを作りました

メンヘラなWebってなに

メンヘラムーブで身を滅ぼしたことはありますか？僕は最近あります。
Webでメンヘラムーブできないかと思ってこんなの作ってみました。

タブがアクティブになるとmeta titleが「🥰」になり、非アクティブになると「🥺」に変わります。
すみませんこれだけです。（すぐ謝罪するのはメンヘラの特徴です。）

技術解説

document.addEventListener("visibilitychange", () => {
    if (document.hidden) {
        document.title='🥺🥺🥺🥺🥺🥺🥺🥺';
    } else {
        document.title='🥰🥰🥰🥰🥰🥰🥰🥰';
    }
});

Page Visibility API というAPIがあり、visibilitychangeイベントでタブのアクティブ / 非アクティブを検知することができます。

何に使える？

例えばrequestAnimationFrameは、端末のパフォーマンスを下げないためにタブが非アクティブになると止まります。
今回の例のようにユーザーの注意を引くために遊びとして使うのも面白そうですが、本来はパフォーマンス目的に使うといいのかもしれません。

普段使っているサービスで言うと、YouTubeはブラウザを非アクティブにした際には画質が下がります。
内部実装はわからないですがvisibilitychangeイベントを使っているのでしょう。
audioを止めることも実装によってはできると思いますが、バックグラウンド再生も考えて止めないでくれているのはありがたいですね。

まとめ

何かに執着して身を滅ぼさないよう気をつけてください。
あとmetaのtitleに絵文字って使えるんですね。
macのこの画面でこんな感じで出ててかわいかった。