プリザンターに寿司を流してみた（仕事が捗ります）

こんにちは。IISの石崎です。
みなさん、寿司は好きですか？ 私は好きです。
読者のみなさんの中にも寿司が好きな方も何人かはいると思います。寿司があまり好きではない方は今回はすみません。

プリザンターには寿司が足りない！

プリザンターはなんでもできるプロダクトです。しかしなんでもできるわけではありません。残念ながら唯一寿司要素が足りません。

これは重大な問題なので、今回はスタイル設定・スクリプト設定の機能を使ってプリザンターに寿司を流してみます。

実行イメージ

今回の設定を行うと、次のような動作になります。

レコードの編集画面で更新ボタンを押すと

更新処理中に画面下部のボタンやフッター領域に寿司が流れます

1周0.3秒の高速回転ずしです

更新処理が終わると寿司が消えます

とにかく速い が売り文句のプリザンターですから寿司の回転も速くしてみました。冷静に見切っておいしく頂いてください。

※ Windows ７の方はFireFoxを使用してください。IEやChromeでは絵文字がモノクロの巻きずしであまりおいしそうに見えません。Windows10ではChromeでもおいしそうな寿司が流れます。

設定

テーブルの管理でスタイルとスクリプトにそれぞれ次のコードを設定します。

スタイル

@keyframes animation-sushi {
    from {width: 1%;}
    to   {width: 100%;}
}
.sushi{
    position: absolute;
    top: -10px;
    animation-name: animation-sushi;
    animation-duration: 0.3s;
    animation-iteration-count: infinite;
    text-align: right;
    font-size: 6em;
}

スクリプト

// プリザンターに寿司を流すスクリプト
$(function() {
    // デフォルトの機能（関数）を変数に保持
    const functionLoading = $p.loading;
    const functionLoaded = $p.loaded;
    
    // 通信開始時のプログレスリング設定関数を上書き
    $p.loading = function () {
        // 寿司要素を作成し画面に追加（表示）
        const div = $('<div>', {id: 'sushigressBar', text: '🍣', class: "sushi", });
        const commandContainer = $("#MainCommandsContainer");
        commandContainer.append(div);
        
        // 変数に保持しておいたデフォルトの機能を実行
        functionLoading();
    };

    // 通信終了時のプログレスリング設定関数を上書き
    $p.loaded = function () {
        // 変数に保持しておいたデフォルトの機能を実行
        functionLoaded();

        // 寿司要素を画面から削除
        const div = $('#sushigressBar');
        div.remove();
    };
});

スタイル解説

今回のスタイルでのポイントは animation-～ という3つのプロパティと、@keyframes とついた設定です。これで寿司が流れます。

@keyframes

animation-sushi という名前で要素の横幅がは開始時はゼロから、終了時は画面いっぱいまで広がるように設定しています。

animation-name

前述の animation-sushi の名前を書き、この要素に適用しています。

animation-duration

アニメーションの一回の動作時間にかける時間を0.3秒と設定しています。

animation-iteration-count

アニメーションの実行回数を infinite （無限に繰り返す）と設定しています。

スタイルまとめ

これだけで要素が横幅ゼロから画面いっぱいまで広がるアニメーションを無限に繰り返せます。
このスタイルと、text-align: right; によって文字を右寄せにすることで、左から右に文字が流れる動作を実現しています。

スクリプト概要

簡単にまとめると次の処理を行っています。

• 更新ボタンを押したら寿司要素を作成
• 寿司要素に前述のスタイルを設定
• 寿司要素を画面に追加（表示）
• 処理が終わったら寿司要素を画面から削除

要素の作成や追加・削除は特別なことは行っていないので今回は語りません。JavaScriptコードを読んでください。
特別なのは 「更新ボタンを押したら」 「処理が終わったら」 の部分です。

スクリプトの実行タイミング

プリザンターは 「Javascriptによるイベントハンドラ」 として、Javascriptによる更新ボタン押下後などの各種イベントに対するハンドラが用意されています。

しかし残念ながら今回の要求にマッチするイベントハンドラが無いようでした。そこで少し荒業ですが、プリザンターの内部JavaScriptの関数を上書きして実現しています。

※注意：IIS独自研究の検証コードです。動作を保証するものではありません。

これらの関数は、プリザンターのボタンを押した際に実行されることがあり次の動作を実装しています。

• $p.loading
  押したボタンのアイコンをぐるぐる回る画像にします。
• $p.loaded
  押したボタンのアイコンを元に戻します。

この動作を上書きすることで、実現したかったタイミングで寿司の表示と削除を行うことができました。

このスクリプトを登録すると

更新ボタンを押すたびに好物の寿司が流れるので、とにかく更新ボタンを押したくなります。
早く更新ボタンを押したくて、仕事を素早く進めるようになるので非常に生産性が上がります（※個人の感想です。効果には個人差があります）。

皆さんもぜひ職場のプリザンターにこのスクリプトを適用して、仕事を捗らせてください！

「＋読者になる」のお願い

プリザンターの他、C#によるWebアプリ開発もIISの得意とする領域です。今後もプリザンターの機能、拡張スクリプト、ページ追加の研究を進めて行くつもりです。関心のある方、よかったらブログ上部の「＋読者になる」をクリックをお願いします！

最後に

IISはプリザンターのスクリプトによるカスタマイズの経験が豊富です。
プリザンター導入に際してカスタマイズをご検討されている方は是非ご相談ください！
またご不明点やご質問などございましたら弊社までお問い合わせください。