HTML5ビューワ - デスクトップ/モバイルUI -

HTML5ビューワのUIは閲覧するデバイスに合わせてAPIで切りかえることができます。以下のボタンをクリックすると、それぞれ対応したUIモードでHTML5ビューワを表示します。



またスクリプトを使用すれば、 ウィンドウのサイズに合わせてUIをレスポンシブに切り替えることも可能です。以下のサンプルでは、ウィンドウ幅が一定(640px)以下、またはiPad/iPhoneからのアクセスときはモバイルUI、それ以外のときはデスクトップUIで表示します。ボタンをクリックすると実際の動作をお試しいただけます。




◆サンプルコード(JavaScript)
<script type="text/javascript">

    var mode;  // UIモード
    var c_mode;  // 現在のUIモードを保持
    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>
このページの先頭へ戻る