[Redmine] ログイン時にかっこいい効果音を鳴らす

  • このエントリーをはてなブックマークに追加
  • LINEで送る

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

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

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


- Sponsored Link -

準備

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

Data URI Scheme

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

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');

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

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

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

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

おまけ

ツイートしたら思いの外好評でしたw

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPal(ペイパル)
PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま
- Sponsored Link -

ご質問やリクエストなどお気軽に。メールアドレスの入力は任意です。書き込みが反映されるまで時間がかかります。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください