ブログ

2025/12/10
【プリザンター】 第326回)ユーザー操作時にクライアントスクリプトを実行させる様々な方法をご紹介

ユーザー操作を契機に処理を実行させるには様々な方法があります

こんにちは、シーイーシーカスタマサービスの新村です。

業務アプリを利用していると「ユーザーが操作したタイミングで、標準機能には無い処理を実行したい」というニーズはよくあります。
簡単な例でいきますと、「登録・更新前にメッセージを出したい」「登録・更新後にメッセージを出したい」といったケースです。

プリザンターでは、標準機能だけでも十分に業務を回せますが、クライアントスクリプトを組み合わせることでユーザー体験をさらに向上させることが可能です。
本記事では、その一例としてユーザーによるボタン操作を契機にスクリプトを実行させる方法をいくつか紹介します。

クライアントスクリプトによる具体例の紹介

今回ご紹介する方法はすべてクライアント側(ブラウザ上)で動作するスクリプトです。
『テーブルの管理』画面の『スクリプト』タブに設定してお試しください。

✅ボタンクリック時の処理
ユーザー操作の代表例は「ボタンを押した瞬間に処理を実行する」方法です。
通常、以下のような jQuery の click イベントで、ユーザーのボタンクリックをキャッチして処理を実行できます。

例:レコード編集画面で「戻る」ボタン(id="GoBack")をクリックした際に処理を実行する場合


$(document).on('click', '#GoBack', function(e) {
// 処理内容
alert('戻るボタンをクリックしました');
});


ただし更新ボタン(id="UpdateCommand")のようにデータの更新などでサーバーサイド処理が優先される場合は、通常の jQuery の click イベントは無効化されます。
その場合は、プリザンターで用意されている「$p.events.before_send」などの専用イベントフックを利用することで独自処理を追加できます。

例:レコード編集画面で「更新」ボタン(id="UpdateCommand")をクリックした際に処理を実行する場合
🆖データ更新の処理が優先されるため動作しない

$(document).on('click', '#UpdateCommand', function(e) {
// 処理内容
alert('更新ボタンをクリックしました');
});

🆗サーバへデータを送信する前を指定しているため動作する

$p.events.before_send_UpdateCommand = function (args) {
//処理内容
alert('ボタンが押されました!');
}


✅マウス操作を契機にする
クリック以外の操作でも処理を実行できます。

例:レコード編集画面で「更新」ボタン(id="UpdateCommand")にマウスカーソルが重なった瞬間に処理を実行する場合(mouseover)

$(document).on('mouseover', '#UpdateCommand', function(e) {
// 処理内容
alert('更新ボタン内です');
});


例:レコード編集画面で「更新」ボタン(id="UpdateCommand")からマウスカーソルが外れた瞬間に処理を実行する場合(mouseout)

$(document).on('mouseout', '#UpdateCommand', function(e) {
// 処理内容
alert('更新ボタン外です');
});




jQueryのon() には上記以外にも様々なイベントが用意されていますので、柔軟なカスタマイズが可能です。

✅Ajax監視による検知
ユーザー操作の結果、サーバーへ送信されるリクエストをキャッチして処理を実行することも可能です。
処理が実行されたことを確実に検知できる点がメリットです。

例:レコード編集画面で「更新」ボタンがクリックされ、サーバーへupdateリクエストが送信された際に処理を実行する場合


$(document).ajaxSend(function(event, jqXHR, settings) {
// URL に「/update」が含まれるリクエストを検知
if (settings.url.indexOf('/update') !== -1) {
// 処理内容
alert('更新されました');
}
});

まとめ

ユーザー操作を契機にクライアントスクリプトを実行させる方法は、マウス操作や Ajax 監視、そしてプリザンター専用のイベントフックなど多彩に存在します。
目的に応じて適切な方法を選ぶことで、ユーザー体験をよりリッチにし、業務要件にフィットしたアプリケーションを構築できます。
プリザンターは標準機能だけでも十分に業務を回せますが、こうした拡張的な仕組みを組み合わせることで「現場のちょっとしたニーズ」にも柔軟に応えられるのが大きな魅力です。ぜひ日々の運用に取り入れてみてください。

弊社では、プリザンター導入・活用に関して以下のサービスをご提供しています。
年間サポート
各種書籍
帳票出力(Excel/PDF)支援パック

プリザンターの導入から開発・運用をあらゆる角度から全力サポートいたします。
ぜひお気軽にご相談ください!

☆☆☆
サービスの説明などをご希望の方は【 問い合わせフォーム 】よりお気軽にお問い合わせください。
☆☆☆

お問い合わせ
PAGE TOP