様々な画面サイズに対応するキャンバス・レイアウトの設計

キャンバス・レイアウトは、各画面サイズのブラウザに収まるようにコンテンツを最適化することで、サイズの異なるデバイスに合うよう設計できます。

トピック:

画面サイズが異なるデバイスで表示するキャンバス・レイアウトの設計について

キャンバス・レイアウトは、モバイルやタブレット、ラップトップなどのブラウザのコンテンツを最適化することで、サイズの異なるデバイスに合うように設計できます。

様々な画面サイズに対応するためのキャンバス・レイアウトの最適化

サイズの異なるデバイスでワークブックを開くと、キャンバスの画面サイズは、ブラウザのデフォルトを使用し、ブラウザの画面サイズに合せて決定されます。ブラウザのサイズを小さくしてサイズ変更すると、ビジュアライゼーションの細部の確認に影響する可能性があります。たとえば、散布図やヒートマップのデータ、またはタイル・ビジュアライゼーションのメジャー・データの大部分は読み取るのが困難になり、重要な情報を確認できなくなります。

ブラウザでキャンバスのサイズを小さくすると、ビジュアライゼーションが小さくなりすぎて、データが正しく表示されなくなる可能性があります。
この画像は、画面サイズを小さくしたキャンバスをブラウザで表示したもので、ビジュアライゼーションの中には小さくなりすぎて、データを正しく表示できなくなっているものがあります。

作成者の場合は、キャンバスのブレークポイントを設計して、キャンバスの画面サイズが小さくなった場合には、ビジュアライゼーションのレンダリングを変更して、新しい画面サイズに調整されるようにすることが可能です。たとえば、使用可能な画面サイズが小さすぎてビジュアライゼーションを完全に表示できない場合は、ビジュアライゼーションを再編成するか非表示にして、小さな画面サイズでの作業をやりやすくできます。画面サイズやレイアウトが異なるキャンバスの指定には、キャンバスのブレークポイントを使用しますが、それぞれのブレークポイントは、各画面サイズに表示される編成の異なるビジュアライゼーションを表します。

小さい画面サイズのブレークポイント用に最適化されたキャンバスには、小型デバイスで表示しやすいように再編成されたビジュアライゼーションが表示されています。
この画像には、画面サイズが小さいデバイス用のブレークポイントを使用して作成され、最適化されたビジュアライゼーションが表示されています。

コンシューマ・ユーザーがサイズの異なるデバイスでキャンバスを表示したときのために、画面サイズの定義にはスライダを使用します。たとえば、ビジュアライゼーションの位置やサイズ、キャンバスでの見え方を再編成することで、ビジュアライゼーションの表示のされ方を変更できます。

キャンバスにブレークポイントを追加すると、そのブレークポイントの画面サイズにより、その画面サイズで表示されたときに、ビジュアライゼーションがどのように表示されるかが決まります。キャンバスのブレークポイントのビジュアライゼーションの位置やサイズの変更または削除を行って、ユーザーに表示するビジュアライゼーションを最適化できます。ブレークポイントごとに構成の異なるビジュアライゼーションを指定でき、各ブレークポイントの違いがコンシューマ・ユーザーに表示されるのは、ブラウザの画面サイズの解像度が、変更が行われたブレークポイントの画面サイズと一致した場合のみです。

種類の異なるデバイスで表示するキャンバス・レイアウトの設計

キャンバスのブレークポイントを作成すると、画面サイズが異なるデバイスのコンシューマ・ユーザーに、ビジュアライゼーションをどのように表示するかを決定できます。たとえば、ブレークポイントを数種類設定して、モバイル・デバイスのブラウザや、タブレット、ラップトップでの表示を最適化することが可能です。

チュートリアル

ホーム・ページで、ワークブックにカーソルを合せ、「アクション」をクリックして「開く」を選択します。
「編集」をクリックして、編集するワークブックを表示します。
キャンバスを最大化し、「キャンバスのプロパティ」で「レイアウト」を「自動調整」に設定して、「OK」をクリックします。
フッターで「レスポンシブ・キャンバス・エディタ」をクリックしてエディタを開き、ブレークポイントを定義して、種類の異なるデバイスのキャンバスを表示します。
キャンバスのブレークポイントを設定します:
- 現在のスライダの位置にブレークポイントを追加 - スライダをクリックして、このブレークポイントに使用する画面サイズのピクセルの値までスライダをドラッグし、
  
  「ブレークポイントの追加」()をクリックして、現在のスライダの位置にブレークポイントを追加します。
- ブレークポイントの値を手動で入力 - 「レスポンシブ・キャンバス・エディタを開く」メニューをクリックして、「ブレークポイントの追加」をクリックし、「位置」フィールドにこのブレークポイントに必要な数値を入力します。
前のステップを繰り返して、さらにキャンバスのブレークポイントを定義します。
キャンバスのそれぞれのブレークポイントに、ビジュアライゼーションを含めるか除外します:
- 管理するキャンバスのブレークポイント()を右クリックし、「ブレークポイントの管理」をクリックします。
- このキャンバスのブレークポイントのキャンバスに含めるか除外するビジュアライゼーションをリストでクリックし、「OK」をクリックします。
オプション: ビジュアライゼーションを作成してブレークポイントに追加するには、「データ」ペインからデータを選択し、キャンバスに追加します。
新しいビジュアライゼーションが追加されるのは現在のブレークポイントのみですが、ブレークポイントの「ブレークポイントの管理」ダイアログにあるリストからビジュアライゼーションを選択すると、キャンバスのその他のブレークポイントにビジュアライゼーションを追加できます。
オプション: キャンバスのブレークポイントのビジュアライゼーションの表示を最適化します。
モバイルなどの小型デバイスに表示するコンテンツの最適化が必要な場合があります。
- ビジュアライゼーションの再配置 - ビジュアライゼーションをクリックして、新しい位置にドラッグします。
- ビジュアライゼーションの最適化 - 「プロパティ」ペインを使用して、タイトルや凡例などの不要なコンテンツを非表示にします。
ブレークポイントのビジュアライゼーションを最適化しても、その変更は、キャンバスのその他のブレークポイントには適用されません。
「保存」をクリックします。