アプリ内印刷ボタンを使って印刷する方法 (HTML)

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

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

このチュートリアルでは、Windows ストアアプリに印刷ボタンを追加する方法について説明します。

既定では、ユーザーはデバイスチャームから印刷デバイスを選ぶことによってアプリからの印刷を行います。ユーザーがボタンをクリックしたときに ShowPrintUIAsync を呼び出すことによって、ユーザーがアプリの UI から印刷ジョブを開始できるようにすることができます。

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

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

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

テクノロジ

Windows ランタイム

必要条件

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

手順

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

このチュートリアルの手順では、印刷サンプルのサンプルアプリの PrintSampleJS アプリを参照しています。独自のアプリに印刷ボタンを追加する場合は、印刷サンプルのサンプルアプリではなく独自のアプリを Visual Studio で開いてください。

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

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

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

ステップ 3: 印刷時に使うスタイルを定義する

アプリの画面を印刷用に書式設定するには、印刷時に変更するスタイルを定義するカスケードスタイルシート (CSS) を作ります。

このチュートリアルで追加する印刷ボタンなどの表示セクションが印刷出力に含まれないようにするには、セクションのスタイルを display: none に定義します。

印刷時に使うスタイルを定義します。たとえば、次に示すのは、印刷サンプルのサンプルアプリに含まれている print.css ファイルです。印刷時に使われるスタイルを定義します。
```
#rootGrid
{
    width: 100%;
    height: 100%;
    display: block;
}

#inputLabel, #outputLabel, #input, #statusMessage
{
    display: none;
}

.article
{
    border:none;
}
```
印刷ボタンを表示する画面の HTML ファイルの head タグに次のコードを追加して、アプリにスタイルシートを含めます。このスタイルシートが画面の印刷時にのみ適用されるようにするには、media="print" 属性を含めます。
```
<link rel="stylesheet" type="text/css" href="/css/print.css" media="print" />
```

ステップ 4: 印刷ボタンを追加する

この手順では、画面に印刷ボタンを追加し、印刷ボタンのクリックイベントハンドラーを作成します。

アプリの画面の任意の場所にボタンを追加します。印刷するコンテンツの妨げにならないようにします。

この例は、印刷サンプルのサンプルアプリの scenario2.html から抜粋したものです。
```
<button id="Print">Print</button>
```
印刷ボタンイベントハンドラーをアプリの JavaScript コードに追加します。

この例は、印刷サンプルのサンプルアプリの scenario2.js から抜粋したものです。印刷ジョブの前後に Windows 印刷機能によって呼び出される関数も追加されています。印刷サンプルのサンプルアプリでは、これらは定義されますが、使われません。ただし、印刷コンテンツの前処理や後処理に使うことはできます。
```
function PrintButtonHandler() {
    // Optionally, functions to be executed immediately before and after printing can be configured as following:
    window.document.body.onbeforeprint = beforePrint;
    window.document.body.onafterprint = afterPrint;

    // If the print contract is registered, the print experience is invoked.
    Windows.Graphics.Printing.PrintManager.showPrintUIAsync();
}
```
ボタンクリックイベントハンドラーに印刷ボタンを接続します。これは、画面を作るために呼び出される WinJS.UI.Pages.define 関数への members パラメーターの ready メンバーで行われます。これにより、画面が完全に読み込まれた後で割り当てが行われるようになります。
```
document.getElementById("Print").addEventListener("click", PrintButtonHandler, false);
```
上記で説明した方法でアプリをビルドし、テストします。