印刷プレビュー UI の標準オプションを変更する方法 (HTML)

[アーティクル]
11/10/2015

[この記事は、Windows ランタイムアプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

このチュートリアルでは、印刷プレビュー UI に表示される印刷オプションをカスタマイズする方法について説明します。

既定では、印刷プレビュー UI には次のオプションが表示されます。

colorMode

copies

orientation

これらの設定に加え、Windows には、印刷プレビュー UI に追加できるその他の一般的なプリンターオプションがいくつか用意されています。このようなその他の一般的なオプションを次に示します。

binding	collation	duplex	holePunch
inputBin	mediaSize	mediaType	nUp
printQuality	staple

これらのオプションは、standardPrintTaskOptions クラスで定義されます。印刷プレビュー UI に表示されるオプションの一覧へのオプションの追加や、この一覧からのオプションの削除ができます。また、オプションが表示される順序の変更や、ユーザーに表示される既定の設定の構成もできます。

ただし、この方法を使って加えた変更は、印刷プレビュー UI にのみ影響します。ユーザーは印刷プレビュー UI で [その他の設定] をクリックすることで、プリンターでサポートされているすべてのオプションにいつでもアクセスできます。

アプリでは、どの印刷オプションも表示するように指定できますが、選んだプリンターでサポートされているオプションのみが印刷プレビュー UI に表示されます。印刷プレビュー UI には、選んだプリンターでサポートされないオプションは表示されません。

ロードマップ: このトピックと他のトピックとの関連については、以下をご覧ください。

JavaScript を使った Windows ストアアプリのためのロードマップ

理解しておく必要があること

テクノロジ

Windows ランタイム

必要条件

HTML、JavaScript、Windows イベント、イベント処理について理解している必要があります。
Microsoft Visual Studio がインストールされている必要があります。
プリンターがインストールされている必要があります。
印刷ボタンの追加先となる Windows ストアアプリが存在している必要があります。独自のアプリがない場合は、印刷サンプルのサンプルアプリをダウンロードして使うことができます。
アプリは基本的な Windows 印刷機能をあらかじめサポートしている必要があります。サポートしていない場合は、「クイックスタート: アプリからの印刷」に目を通して、基本的な Windows 印刷サポートをアプリに追加する方法を確認してください。

手順

ステップ 1: Visual Studio でアプリを開く

このチュートリアルの手順では、印刷サンプルのサンプルアプリの PrintSampleJS アプリを参照しています。独自のアプリの印刷プレビュー UI をカスタマイズする場合は、印刷サンプルのサンプルアプリではなく独自のアプリを Visual Studio で開いてください。

印刷サンプルのサンプルアプリを開き、コンピューターに JavaScript の例をダウンロードします。
Visual Studio で、[File]、[Open Project] の順にクリックし、前の手順でダウンロードしたサンプルアプリのソリューションファイルが格納されているフォルダーに移動します。
PrintSampleJS ソリューションファイルを選び、[開く] をクリックします。

ステップ 2: アプリをビルドしてテストする

[ビルド]、[ソリューションのビルド] の順にクリックし、作業するアプリをビルドします。画面下部の [出力] ウィンドウにエラーメッセージが表示されていないことを確かめます。
[デバッグ]、[デバッグなしで開始] の順にクリックします。
数秒間待ち、画面に Print JS Sample アプリが表示されたことを確認します。
アプリがエラーなしで実行された場合は、Visual Studio に戻り、[デバッグ]、[デバッグの停止] の順にクリックします。

ステップ 3: 表示する印刷オプションを定義する

アプリの画面が読み込まれると、印刷コントラクトに登録されます。その登録には、PrintTaskRequested イベントハンドラーの定義が含まれています。印刷プレビュー UI に表示されるオプションをカスタマイズするコードは、PrintTaskRequested イベントハンドラーに追加します。

PrintTaskRequested イベントハンドラーを変更して、印刷プレビュー UI に表示する印刷設定を構成する printTask.options 命令を含めます。

アプリの PrintTaskRequested イベントハンドラーを探します。印刷サンプルのサンプルアプリでは、基本的な PrintTaskRequested イベントハンドラーは次の例のようになっています。

function onPrintTaskRequested(printEvent) {
    var printTask = printEvent.request.createPrintTask("Print Sample", function (args) {
        args.setSource(MSApp.getHtmlPrintDocumentSource(document));

        // Register the handler for print task completion event
        printTask.oncompleted = onPrintTaskCompleted;
    });
}

function onPrintTaskCompleted(printTaskCompletionEvent) {
    // Notify the user about the failure
    if (printTaskCompletionEvent.completion === Windows.Graphics.Printing.PrintTaskCompletion.failed) {
        WinJS.log && WinJS.log("Failed to print.", "sample", "error");
    }
}

印刷プレビュー UI に表示する印刷オプションを追加します。オプションは、追加した順序で縦に印刷プレビュー UI 上に表示されます。最初に追加したオプションが最上部に表示され、残りのオプションがその下に順番に表示されます。

注このコードは、印刷サンプルのサンプルアプリの scenario3.js から抜粋したものです。このコードを独自のアプリに追加する場合は、印刷プレビュー UI でユーザーに表示する印刷オプションを割り当てます。

重要 printTask.options.displayedOptions.clear() を呼び出すと、すべての印刷オプションが印刷プレビュー UI から削除され、[その他の設定] リンクだけが残ります。印刷プレビュー UI に表示するオプションは、必ず append メソッドを使って指定してください。

function onPrintTaskRequested(printEvent) {
    var printTask = printEvent.request.createPrintTask("Print Sample", function (args) {
        args.setSource(MSApp.getHtmlPrintDocumentSource(document));

        // Choose the printer options to be shown.
        // The order in which the options are appended determines the order in which they appear in the UI
        printTask.options.displayedOptions.clear();
        printTask.options.displayedOptions.append(Windows.Graphics.Printing.StandardPrintTaskOptions.copies);
        printTask.options.displayedOptions.append(Windows.Graphics.Printing.StandardPrintTaskOptions.mediaSize);
        printTask.options.displayedOptions.append(Windows.Graphics.Printing.StandardPrintTaskOptions.orientation);
        printTask.options.displayedOptions.append(Windows.Graphics.Printing.StandardPrintTaskOptions.duplex);

        // Preset the default value of the printer option
        printTask.options.mediaSize = Windows.Graphics.Printing.PrintMediaSize.northAmericaLegal;

        // Register the handler for print task completion event
        printTask.oncompleted = onPrintTaskCompleted;
    });
}

上記で説明した方法でアプリをビルドし、テストします。

注釈

Windows ストアアプリでの印刷シナリオについて詳しくは、印刷サンプルのサンプルアプリに関するページをご覧ください。

次の方法で共有