小ネタです。
Redmineのような作業工程を管理するソフトって人間扱いされてない感じがして、ぶっちゃけテンション上がらないじゃないですかｗ というわけでログイン時にかっちょいい効果音をバーン！と鳴らして少しでもモチベーションを上げたいと思います。
……え？迷惑だって？それが目的です←
ここではView Customizeプラグインを利用して実装します。インストール方法などは以下の記事をご覧ください。
準備
まずは適当な音声ファイルを探してください。
仕掛けがバレないようこっそりと埋め込む場合は数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');
// ２秒後にSubmitする
setTimeout( function() {
form.off('submit'); // 【重要】現在設定されているイベントを削除
form.submit(); // 送信
},
2000 );
});
});
音声の再生に関する詳細は以下の記事を参照ください。
ちなみにform.off('submit')の箇所を書かないと、無限ループに陥って永遠にログインできなくなるので注意してください。このコードを書いてる最中にうっかりなりまして、MySQLにログインしSQLで直接消す羽目になりましたｗ
またここでは2秒間で再生が終わるのでsetTimeout()に2000を指定していますが、ここは音声の長さに合わせて変更を。あまり長いとストレスになるので長くても3秒程度にしておくのが良いかと思います。再生が終わとendedイベントが発生するのでこれを拾っても良かったのですが、何らかの要因で発生しなかった場合にログインできなくなる可能性が頭をよぎり現在の形になりました。
おまけ
ツイートしたら思いの外好評でしたｗ
ついカッとなって、Redmineへログインする度にモビルスーツ音が鳴るコード書いた（迷惑ｗ） pic.twitter.com/X3efHXebqV
— 勝部麻季人 💦👏 (@katsube) September 16, 2020
このブログを応援する
お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。
