ValenceのURLウィジェットを使用すると、アプリケーションで簡単に画像やPDFを表示できます。
URLウィジェットに表示した画像はデフォルトではiframe内のimgタグとして画面に表示されます。
本Tipsでは、表示した画像をズームイン/ズームアウトする方法をご紹介します。
URLウィジェットについて
URLウィジェットを使用すると、URLリンクプロパティに指定したURLの画像やPDFを簡単に表示することができます。
また、URLウィジェットを使用してポップアップ上で別アプリケーションを呼び出すようなことも可能です。
URLウィジェットをカスタマイズ
Gridの行をクリックすると対応する画像がURLウィジェット上に表示されます。
画像を表示する設定については以下の記事を確認して実装してください。
URLウィジェットに設定した + / – のボタンをクリックすると画像がズームイン / ズームアウトされます。
また、URLウィジェット上でマウスホイールを操作することでも画像のズームイン / ズームアウトを行えるようにカスタマイズしました。
表示した画像のズームイン/ズームアウトの実装
URLウィジェットに名前を設定
URLウィジェットに名前を設定します。アプリケーション編集画面の「設定」アイコンをクリックすると、左側のパネルにURLウィジェットの設定画面が表示されます。
「名前」の項目でウィジェットに名前を設定することができます。
例では「URL01」としました。
スタートアップにスクリプトの実行を追加
「動作内容」 > 「Startup」から「スクリプトの実行」を追加します。
以下のようなスクリプトを実装します。
// URLウィジェットを取得
const widget = getWidget('URL01');
// URLウィジェット内のiframe要素を取得
const iframe = widget.getiFrame();
// iframeの読み込み完了時にイベントを登録
iframe.addEventListener('load', function () {
// iframe内のdocumentを取得
const iframeDocument =
iframe.contentDocument ||
iframe.contentWindow.document;
// iframe内でマウスホイールが操作されたときのイベントを登録
iframeDocument.addEventListener('wheel', function (event) {
// マウスホイールによる画面のスクロールを無効化
event.preventDefault();
if (event.deltaY < 0) {
// マウスホイールを上方向に回した場合、画像を拡大
widget.customize.changeZoom(0.3);
} else if (event.deltaY > 0) {
// マウスホイールを下方向に回した場合、画像を縮小
widget.customize.changeZoom(-0.3);
}
}, { passive: false });
});
// URLウィジェットのカスタム処理を格納するオブジェクトを作成
widget.customize = {};
/**
* iframe内の画像の表示倍率を変更する
*
* @param {number} delta 表示倍率の増減値
* 正の値：拡大
* 負の値：縮小
*/
widget.customize.changeZoom = function(delta) {
// iframe内のimg要素を取得
const img = this.getiFrame()
.contentDocument
.querySelector('img');
// img要素が存在する場合のみ処理
if (img) {
// 初回実行時は表示倍率を1（100%）で初期化
if (!img.zoom) {
img.zoom = 1;
// 拡大・縮小の基準位置を画像の左上に設定
img.style.transformOrigin = 'top left';
}
// 表示倍率を変更
// 0.1（10%）未満にならないように制限
img.zoom = Math.max(0.1, img.zoom + delta);
// CSSのscale()を使用して画像を拡大・縮小
img.style.transform = `scale(${img.zoom})`;
}
}.bind(widget); // changeZoom内のthisをURLウィジェットに固定要素の取得
// URLウィジェットを取得
const widget = getWidget('URL01');
// URLウィジェット内のiframe要素を取得
const iframe = widget.getiFrame();getWidgetでURLウィジェット要素を取得
iframeにはURLウィジェットに含まれるiframe要素を設定しています。
イベントの処理
// iframeの読み込み完了時にイベントを登録
iframe.addEventListener('load', function () {
// iframe内のdocumentを取得
const iframeDocument =
iframe.contentDocument ||
iframe.contentWindow.document;
// iframe内でマウスホイールが操作されたときのイベントを登録
iframeDocument.addEventListener('wheel', function (event) {
// マウスホイールによる画面のスクロールを無効化
event.preventDefault();
if (event.deltaY < 0) {
// マウスホイールを上方向に回した場合、画像を拡大
widget.customize.changeZoom(0.3);
} else if (event.deltaY > 0) {
// マウスホイールを下方向に回した場合、画像を縮小
widget.customize.changeZoom(-0.3);
}
}, { passive: false });
});iframeのloadイベント発生後、iframe内のdocumentオブジェクトを取得し、マウスホイールのイベントを登録します。
マウスホイールのイベントでは、preventDefault()メソッドを使用して、ホイール操作による画面のスクロールが発生しないように制御しています。
また、マウスホイールの操作に応じてwidget.customize.changeZoomを呼び出し、画像の拡大・縮小を行います。
ウィジェットにカスタマイズメソッドを追加
// URLウィジェットのカスタム処理を格納するオブジェクトを作成
widget.customize = {};
/**
* iframe内の画像の表示倍率を変更する
*
* @param {number} delta 表示倍率の増減値
* 正の値：拡大
* 負の値：縮小
*/
widget.customize.changeZoom = function(delta) {
// iframe内のimg要素を取得
const img = this.getiFrame()
.contentDocument
.querySelector('img');
// img要素が存在する場合のみ処理
if (img) {
// 初回実行時は表示倍率を1（100%）で初期化
if (!img.zoom) {
img.zoom = 1;
// 拡大・縮小の基準位置を画像の左上に設定
img.style.transformOrigin = 'top left';
}
// 表示倍率を変更
// 0.1（10%）未満にならないように制限
img.zoom = Math.max(0.1, img.zoom + delta);
// CSSのscale()を使用して画像を拡大・縮小
img.style.transform = `scale(${img.zoom})`;
}
}.bind(widget); // changeZoom内のthisをURLウィジェットに固定widget.customize.changeZoomメソッドでは、引数に表示倍率の増減値を渡して、正の値では拡大、負の値では縮小をします。このメソッドの中では「this」が「widget」になります。
メソッドの最終行の.bindメソッドでthisをURLウィジェットに固定しているためです。
上記の設定でマウスホイールのスクロールにより画像のズームイン / ズームアウトが実現できました。
次はURLウィジェットへ追加したボタンをクリックした際のズームイン / ズームアウトを追加します。
ボタンクリック時のズームイン / ズームアウト
ボタンクリック時のズームイン / ズームアウトを追加します。
ボタンのクリックイベントに「スクリプトの実行」を追加して、widget.customize.changeZoomを呼び出すことで実現ができます。
ズームイン
const widget = getWidget('URL01');
widget.customize.changeZoom(0.3);ズームアウト
const widget = getWidget('URL01');
widget.customize.changeZoom(-0.3);おわりに
URLウィジェットを少しカスタマイズして画像のズームイン / ズームアウトができるようになりました。
少しのカスタマイズで機能が追加できるため、ぜひお試しください。