HTML5ビューワのUIは閲覧するデバイスに合わせてAPIで切りかえることができます。以下のボタンをクリックすると、それぞれ対応したUIモードでHTML5ビューワを表示します。
また、スクリプトを使用すれば、 ウィンドウのサイズに合わせてUIをレスポンシブに切り替えることも可能です。以下のサンプルでは、ウィンドウ幅が一定（640px）以下、またはiPad／iPhoneからのアクセスときはモバイルUI、それ以外のときはデスクトップUIで表示します。ボタンをクリックすると実際の動作をお試しいただけます。
◆サンプルコード（JavaScript）
<script type="text/javascript">
// UIモード
var mode;
// 現在のUIモードを保持
var c_mode;
var ua = {};
ua.name = window.navigator.userAgent.toLowerCase();
// ユーザーエージェントからブラウザを判別
ua.isIE = (ua.name.indexOf('msie') >= 0 || ua.name.indexOf('trident') >= 0);
ua.ischrome = ua.name.indexOf('chrome') >= 0;
ua.isiPhone = ua.name.indexOf('iphone') >= 0;
ua.isiPad = ua.name.indexOf('ipad') >= 0;
$(function () {
var w = $(window).width();
var x = 640;
// ウィンドウサイズが一定以下、またはiPhone、iPadからのアクセスの場合はモバイルUIで表示します
if (w <= x || ua.isiPhone || ua.isiPad) {
mode = 'mobile';
// モバイルUIの場合は、ウィンドウ幅に合わせてビューワの幅を変更します
document.getElementById("viewer").style.width = w + "px";
} else {
mode = 'desktop';
document.getElementById("viewer").style.width = "1480px";
}
// HTML5ビューワを定義
var viewer = GrapeCity.ActiveReports.Viewer(
{
element: '#viewer',
report: {
id: "SampleReport.rdlx"
},
localeUri: 'i18n/ja.txt',
reportService: {
url: '/ActiveReports.ReportService.asmx'
},
uiType: mode,
});
// 現在のUIモードを保持
c_mode = mode;
});
// ウィンドウがリサイズされたときに、UIモードの切り替えを行います
$(window).resize(function () {
var w = $(window).width();
var x = 640;
// ウィンドウサイズが一定以下の場合はモバイルUIで表示します
if (w <= x) {
mode = 'mobile';
// モバイルUIの場合は、ウィンドウ幅に合わせてビューワの幅を変更します
document.getElementById("viewer").style.width = w + "px";
} else {
mode = 'desktop';
document.getElementById("viewer").style.width = "1480px";
}
// UIモードが変更された、またはモバイルUIの場合はHTML5ビューワを再定義します
if (c_mode != mode || mode == 'mobile') {
var viewer = GrapeCity.ActiveReports.Viewer(
{
element: '#viewer',
report: {
id: "SampleReport.rdlx"
},
localeUri: 'i18n/ja.txt',
reportService: {
url: '/ActiveReports.ReportService.asmx'
},
uiType: mode,
});
// 現在のUIモードを保持
c_mode = mode;
}
});
</script>