[Redmine] ログイン時にかっこいい効果音を鳴らす - ねこの足跡R

小ネタです。 Redmineのような作業工程を管理するソフトって人間扱いされてない感じがして、ぶっちゃけテンション上がらないじゃないですかｗというわけでログイン時にかっちょいい効果音をバーン！と鳴らして少しでもモチベーションを上げたいと思います。

……え？迷惑だって？それが目的です←

ここではView Customizeプラグインを利用して実装します。インストール方法などは以下の記事をご覧ください。 blog.katsubemakito.net

準備
- Data URI Scheme
- BASE64へ変換
設定する
- パターン、挿入位置、種別
- コード
おまけ

準備

まずは適当な音声ファイルを探してください。仕掛けがバレないようこっそりと埋め込む場合は数kbyte程度の軽いものにするのが鉄則です。

Data URI Scheme

今回はHTMLに直接データを埋め込める「Data URI Scheme」を利用します。ファイルの内容をBASE64に変換し冒頭にファイル形式の情報を埋め込んだ文字列です。詳細はWikipediaを参照くださいませ。 ja.wikipedia.org

BASE64へ変換

macOSやLinuxにはBASE64形式に変換してくれるbase64コマンドが存在します。ファイルのパスを渡すだけで変換できます。

$ base64 xxxx.wav
UklGRiQsAQBXQVZFZm10IBAAAA(略)

あとはこの文字列の先頭にdata:audio/wav;base64,といった情報を追加してあげれば準備完了です。wavの部分は音声ファイルの形式を指定してくださいね。

設定する

View Customizeプラグインにカスタマイズを追加します。

パターン、挿入位置、種別

パスのパターン: /login$
プロジェクトのパターン: （空欄）
挿入位置: 全ページのヘッダ
種別: JavaScript

コード

以下のJavaScriptを追加します。変数wavに最初に準備したData URI Schemeを代入してください。

$(document).ready(function(){
  // 再生する音声データ
  const wav = 'data:audio/wav;base64,UklGRiQsAQBXQVZFZ(中略)AAAAAAAA=';
  const se1 = new Audio(wav);

  // ログインボタンが押されたら
  const form = $('form');
  form.submit( function(e) {
    e.preventDefault();  // Submit時の処理をキャンセル
    se1.play();          // 音声を再生

    // ボタンの文言を変更
    $('#login-submit').attr('value', '...Now loading');

    // ２秒後にSubmitする
    setTimeout( function() {
        form.off('submit');   // 【重要】現在設定されているイベントを削除
        form.submit();        // 送信
      },
      2000 );
  });
});

音声の再生に関する詳細は以下の記事を参照ください。 blog.katsubemakito.net

ちなみにform.off('submit')の箇所を書かないと、無限ループに陥って永遠にログインできなくなるので注意してください。このコードを書いてる最中にうっかりなりまして、MySQLにログインしSQLで直接消す羽目になりましたｗ

またここでは2秒間で再生が終わるのでsetTimeout()に2000を指定していますが、ここは音声の長さに合わせて変更を。あまり長いとストレスになるので長くても3秒程度にしておくのが良いかと思います。再生が終わとendedイベントが発生するのでこれを拾っても良かったのですが、何らかの要因で発生しなかった場合にログインできなくなる可能性が頭をよぎり現在の形になりました。