ペン操作とスタイラス操作への反応 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
ペンやスタイラスのサポートを追加して、手書きノート、描画、コメントを作成できるアプリを作成します。
ヒント このトピックの情報は、JavaScript を使った Windows ストア アプリにのみ適用されます。
C++、C#、Visual Basic を使った Windows ストア アプリについては、「ペン操作とスタイラス操作への反応 (XAML)」をご覧ください。
前提条件: JavaScript を使って Windows ストア アプリを開発するのが初めての場合は、以下のトピックに目を通して、ここで説明されているテクノロジをよく理解できるようにしてください。
JavaScript を使った初めての Windows ストア アプリの作成
JavaScript を使った Windows ストア アプリのためのロードマップ
イベントについては、「クイック スタート: HTML コントロールの追加とイベントの処理」をご覧ください。
アプリの機能の概要: この機能について詳しくは、「アプリの機能の概要」シリーズをご覧ください。
注
プラットフォーム コントロール ライブラリ (HTML と XAML) は、標準的な対話式操作、アニメーション化された物理的効果、視覚的フィードバックなど、Windows の完全なユーザー操作エクスペリエンスを提供しています。 操作のサポートをカスタマイズする必要がない場合は、これらのビルトイン コントロールを使います。
プラットフォーム コントロールでは十分に対応できない場合は、以下のユーザー操作ガイドラインに従うと、どの入力モードでも一貫性のある、魅力的でイマーシブな対話式操作エクスペリエンスを実現できます。これらのガイドラインは、主にタッチ入力を対象として説明していますが、タッチパッド、マウス、キーボード、スタイラスでの入力にも当てはまります。
サンプル: Windows ストア アプリのサンプルで、この機能の動作を実際に確かめることができます。
入力: DOM ポインター イベント処理のサンプルに関するページ
概要
ペン/スタイラスは、ポインティング デバイスとして使うことができます。また、デジタル インクに関連付けられた描画デバイスにすることもできます。
Windows 8 のインク プラットフォームでペン/スタイラス デバイスを使うと、自然な形で手書きノート、描画、コメントを作成できます。このプラットフォームは、デジタイザー入力からのインク データのキャプチャ、インク データの生成、出力デバイスへのインク ストロークとしてのデータのレンダリング、インク データの管理、手書き認識の実行をサポートします。
ユーザーが書いたり描画したりするときのペンの空間移動のキャプチャに加えて、アプリで筆圧、形状、色、不透明度などの情報を収集して、紙の上でペン、鉛筆、ブラシを使っているときに近いユーザー エクスペリエンスを実現することもできます。
注 Windows 8 のインク プラットフォームは、タッチ デジタイザーやマウス デバイスなどの他のポインター デバイスからの入力もサポートします。
ペン入力の固有の正確さは、Windows 8 の UI でも当然サポートされていますが、タッチの本来の不正確さに合わせて最適化されています。Windows ストア アプリの設計はタッチ入力用に最適化し、既定の基本的なペンのサポートを利用します。
直接的な操作が中心となるシナリオでペン操作をサポートするには、ペン固有の UI を取り入れ、使用デバイスに関係なく同等の機能をアプリのユーザーに提供します。たとえば、ペンが検出されているときに、スクロール バーを使ってパンをエミュレートしたり、"前へ" ボタンと "次へ" ボタンを使ってコンテンツのページをフリップしたりします。
このセクションの内容
| トピック | 説明 |
|---|---|
このクイック スタートでは、入力デジタイザーからのインク データのキャプチャについて説明します。 |
|
インク ストローク セグメントを滑らかなベジエ曲線としてレンダリングする方法について説明します。 |
|
このトピックでは、インク データを ISF メタデータとしてシリアル化してそのメタデータをグラフィックス交換形式 (GIF) ファイルに埋め込むことで、インク データを保存する方法について説明します。 |
|
このトピックでは、グラフィックス交換形式 (GIF) ファイルに埋め込まれた ISF メタデータから逆シリアル化することで、インク データを読み込む方法について説明します。 |
|
JavaScript を使った Windows ストア アプリでインク ストロークを選ぶ方法について説明します。 |
|
JavaScript を使った Windows ストア アプリでインク ストロークを消去する方法について説明します。 |
|
JavaScript を使う Windows ストア アプリで手書き認識を使い、インク ストロークをテキストに変換する方法について説明します。 |
関連トピック
概念