HTML5ビューワは、ActiveReports 12.0J Webサービスでホストされているレポートをプレビューするために、Webアプリケーションで使用できるJavaScriptコンポーネントです。ターゲットとするデバイスの幅を広げるため、HTML5ビューワにはいくつかのUIタイプが用意されています。アプリケーションでパブリックAPIメソッド、およびプロパティを使用して、これらのオプションを切り替えることができます。

HTML5ビューワのモバイルUI

HTML5ビューワモバイルの上部ツールバー

ツールバーの要素	名前	説明
	見出しマップラベル	［見出しマップラベル］ペインを表示します。
	パラメータ	［パラメータ］ペインを表示します。
	検索	［検索］ペインを表示します。
	描画モードの変更	印刷時の用紙サイズを考慮した従来の印刷プレビューモードと、すべてのデータを1ページとして閲覧できるゲラモードを切り替えます。RDLレポートで自動改ページを解除してデータを単一ページで表示します。このモードでは、レポート内に作成した改ページが保持されます。
	単一ページ	ビューワで1ページずつ表示します。
	連続ページ	すべてのページを連続（スクロール可能な形式）で表示します。
	名前を付けて保存	レポートをエクスポートする形式を示すドロップダウンリストを表示します。使用可能なオプションは、PDF文書、Word文書、画像ファイル、MHTML Webアーカイブ、Excelワークブック、CSVファイルです。メニュー項目をタップすると、選択した形式にレポートがエクスポートされます。

HTML5ビューワモバイルの下部ツールバー

ツールバーの要素	名前	説明
	前ページ	表示されているレポートの前のページに移動します。
	次ページ	表示されているレポートの次のページに移動します。
2/124	現在のページ	現在のページ番号とページ総数を表示します。ページ番号を入力すると、任意のページを表示できます。
	親レポートに戻る	ドリルスルーページレポート、またはRDLレポートから親レポートに戻ります。
	全ページ作成	レポートのすべてのページが表示されていない場合にのみ表示されます。このボタンをクリックすると、すべてのページを作成し表示します。
	キャンセル	レポートの作成処理をキャンセルします。このボタンは、ページ作成中にのみ表示されます。

HTML5ビューワモバイルの［見出しマップラベル］ペイン

HTML5ビューワモバイルの［パラメータ］ペイン

HTML5ビューワモバイルの［検索］ペイン

HTML5ビューワのデスクトップUI

HTML5ビューワデスクトップのツールバー

ツールバーの要素

名前

説明

サイドバー

［見出しマップラベル］ペインと［パラメータ］ペインを含むサイドバーを表示します。

検索

［検索］ペインを表示します。

先頭ページ

表示されているレポートの先頭のページに移動します。

前ページ

表示されているレポートの前のページに移動します。

2/124

現在のページ

現在のページ番号とページ総数を表示します。ページ番号を入力すると、任意のページを表示できます。

次ページ

表示されているレポートの次のページに移動します。

最終ページ

表示されているレポートの最後のページに移動します。

親レポートに戻る

ドリルスルーレポートから親レポートに戻ります。

印刷

レポートの印刷を行う印刷ダイアログを表示します。

メモ: 印刷はPDF形式で行われるため、PDFを印刷するためのソフトウェア（Adobe Readerなど）がブラウザにプラグインとして、あらかじめインストールされている必要があります。

描画モードの変更

印刷時の用紙サイズを考慮した従来の印刷プレビューモードと、すべてのデータを1ページとして閲覧できるゲラモードを切り替えます。RDLレポートで自動改ページを解除してデータを単一ページで表示します。このモードでは、レポート内に作成した改ページが保持されます。

単一ページ

ビューワで1ページずつ表示します。

連続ページ

すべてのページを連続（スクロール可能な形式）で表示します。

名前を付けて保存

レポートをエクスポートする形式を示すドロップダウンリストを表示します。使用可能なオプションは、PDF文書、Word文書、画像ファイル、MHTML Webアーカイブ、Excelワークブック、CSVファイルです。メニュー項目をクリックすると、選択した形式にレポートがエクスポートされます。

メモ: HTML5ビューワからページレポート／RDLレポートをPDF形式で出力する場合、PDF描画拡張機能が使用されます。ただし、Grapecity.ActiveReports.configファイル（..\ActiveReportsNET12\Grapecity.ActiveReports.config）のUsePdfExportFilterプロパティを「True」に設定し、対象のWebアプリケーションのルートフォルダに配置することによって、エクスポートフィルタを使用するように方式を変更することができます。

全ページ作成

レポートのすべてのページが表示されていない場合にのみ表示されます。このボタンをクリックすると、すべてのページを作成し表示します。

キャンセル

レポートの作成処理をキャンセルします。このボタンは、ページ作成中にのみ表示されます。

HTML5ビューワデスクトップの［見出しマップラベル］ペイン

HTML5ビューワデスクトップの［パラメータ］ペイン

［パラメータ］ペインは、ツールバーの［サイドバー］ボタンをクリックしてから［パラメータ］タブをクリックすると表示されます。［パラメータ］ペインでは、表示するデータをフィルタリングするための値を入力します。

［レポートを表示］ボタンをクリックすると、選択したパラメータ値に従ってレポートが表示されます。

メモ： Internet Explorer 11で日付・時刻型のパラメータをDateTimeピッカーで表示するには、以下のスクリプト要素をHTML5ビューワを含むindex.htmlの</body>タグの上に追加します。

</body>タグの上に貼り付けます。

コードのコピー

<script src="Scripts/modernizr-2.8.3.js"></script>
    <script src="Scripts/jquery.livequery-1.3.6.js"></script>
    <script src="Scripts/bootstrap-datetimepicker-2.3.11.js"></script>
    <script type="text/javascript">
        $(window).load(function () {
            if (Modernizr.inputtypes.date)
                return;
            $('input[type^=date]').livequery(function () {
                var input = $(this);
                var view = input.attr('type') === 'date' ? 'month' : 'hour';
                var format = input.attr('type') === 'date' ? 'yyyy-mm-dd' : 'yyyy-mm-ddThh:ii:ss';
                input.datetimepicker({ minView: view, format: format }).on('hide', function () {
                    input.trigger('change');
                });
            });
        });
    </script>

注意：HTML5ビューワのDateTime型のパラメータの場合、日付ピッカーの書式文字列は「yyyy/mm/dd」または、時刻ピッカーの書式文字列は「--:--:-- --」で表されます。

詳細については、「パラメータ」を参照してください。

HTML5ビューワデスクトップの［検索］ペイン

メモ：レポート内のページ数がHTML5ビューワに設定されている［previewPages］と等しい場合、ページレポートまたはRDLレポートがロードしている際に［全ページ作成］ボタンが表示されます。

HTML5ビューワのカスタムUI

HTML5ビューワのカスタムUIオプションを使用すると、ターゲットデバイス用にカスタマイズされたビューワを作成し、アプリケーション固有の要件を満たすことができます。

HTML5ビューワの外観は、パブリックAPIメソッドおよびプロパティを使用してカスタマイズできます。「JavaScriptでHTML5ビューワの操作」を参照してください。

メモ：「input」タグがサポートされていないブラウザの場合、HTML5ビューワでdatetime-localの値は正しく表示されません。