Tableau Desktop と Web 作成のヘルプ

ダッシュボードには、幅広い画面サイズにわたるさまざまなタイプのデバイスのレイアウトを含めることができます。これらのレイアウトを Tableau Server または Tableau Cloud にパブリッシュすると、ダッシュボードを表示する人々は、スマートフォン、タブレット、またはデスクトップに向けてデザインが最適化されていることに気付きます。作成者としては、単一のダッシュボードを作成し、単一の URL を配布する必要しかありません。

ヒント: モバイル向けのレイアウトの最適化に加えて、ワークブックのパフォーマンスの最適化することで、帯域幅が限られていて、急いでいることが多いモバイル ユーザーのニーズに対応できるようになりました。

既存ダッシュボードとデバイス レイアウトの関係性

デバイス レイアウトは、[ダッシュボード] タブの [既定] に表示されます。最初は、各デバイス レイアウトには、既定ダッシュボードのすべてのアイテムが含まれ、サイズやレイアウトも同様に既定から取得されます。

既定ダッシュボードが親、デバイス レイアウト (デスクトップ、タブレット、電話) は子であると考えてください。デバイス レイアウトに追加するビュー、フィルター、操作、凡例、またはパラメーターは、最初に既定のダッシュボード内に配置されている必要があります。

スマートフォン レイアウトと既定のダッシュボード

変更内容を自動的に既定のダッシュボードに反映させるユニークなスマートフォン レイアウト オプションを使用して時間を節約するには、開いたロック アイコン をクリックするか、ポップアップ メニューから [レイアウトの自動生成] を選択します。

閉じたロック アイコン をクリックするか、メニューから [レイアウトの編集] を選択すると、スマートフォン レイアウトが完全に独立するので、アイテムの追加と配置を手動で行い、変更内容を既定のダッシュボードに反映させる必要があります。

デスクトップ レイアウトおよびタブレット レイアウトと既定のダッシュボード

スマートフォン レイアウトとは異なり、デスクトップ レイアウトおよびタブレット レイアウトはダッシュボードに手動で追加する必要があります。デスクトップ レイアウトおよびタブレット レイアウトは常に既定のダッシュボードから独立しているため、各デバイス レイアウトにはオブジェクトの独自の配置を含めることができます。

電話のレイアウトを自動で追加する

2 つのオプションで、電話レイアウトを自動的に追加できます。

• 不足している古いダッシュボードを開くたびに電話のレイアウトを作成するには、 ダッシュボード > 既存のダッシュボードに電話レイアウトを追加を選択します。
• 新しいダッシュボードを作成するたびに電話レイアウトを作成するには、[ダッシュボード] > [新しいダッシュボードに電話レイアウトを追加] を選択します(このオプションは既定で有効になっています。)

デバイス レイアウトのプレビューと追加

1. ダッシュボード シートを開きます。

2. 左側の [ダッシュボード] タブで、[デバイスのプレビュー] をクリックします。

   

   デバイスのプレビューモードで、これらのオプションはダッシュボードの上に表示されます。

   

3. [デバイス タイプ] や [モデル] をクリックし、さまざまな画面サイズを探索します。次に、これらのオプションを設定します。

   • ダッシュボードが横モードまたは縦モードでどのように表示されるかを確認するには、 をクリックします。通常、横はタブレット、縦は携帯電話に最適です。

   • Tableau Mobile アプリを選択して、ブラウザーではなくアプリでダッシュボードが表示された場合にどう見えるかを確認します。このオプションは iOS または Android デバイスで利用可能で、ダッシュボードをわずかに縮小し、アプリ制御用のスペースを残ります。

4. [デバイスのタイプ] (タブレットなど) を選択します。

   

5. 右上隅で、選択したデバイス種別の [レイアウトの追加] ボタンをクリックします (例えば、[タブレット レイアウトの追加]。

   

6. 新しい [デバイスのタイプ] を選択し、[レイアウトの追加] をクリックしてレイアウトを追加します。

   

   各デバイス タイプにレイアウトを作成すると、ユーザーが別のデバイスからダッシュボードを閲覧した際のユーザー体験を最大限にコントロールできます。3 つのレイアウトすべてを備えたダッシュボードをパブリッシュした後は、ユーザーは既定のダッシュボード レイアウトを目にしません。その代わりに、適切なデバイス固有のレイアウトが常に表示されます。

   

注: ビューに変更を加える場合は、関連するデバイス レイアウトをダブルクリックし、期待通りの外観になっていることを確認してください。

デバイス レイアウトのカスタマイズ

デバイス レイアウトをダッシュボードに追加した後、オブジェクトの再配置を開始して好みの外観を作成することができます。

1. デスクトップ レイアウトおよびタブレット レイアウトでは [カスタム] をクリックします。

   

   スマートフォン レイアウトでは、ロック アイコン をクリックするか、ポップアップ メニューから [レイアウトの編集] を選択します。

   

2. レイアウトに追加した内容は、左側の [レイアウト] の下に表示されます。アイテムに付いた青いチェック マークは、現在作業中のデバイス レイアウトの一部であることを意味します。

   

3. アイテムを削除しても、現在のデバイス レイアウトから削除されるだけです。既定のダッシュボード上にはまだ存在しているため、デバイス レイアウトに再び追加できます。

   

4. [デバイス モデル] オプションを順にクリックし、さまざまなレイアウトでレイアウトがどのように表示されるかを確認します。

   

   最終的には、ダッシュボードを読み込む Web ブラウザーのサイズによってデバイス上に表示するレイアウトが決まります。詳細については、デバイスが表示するレイアウトの確認を参照してください。

5. [サイズ] の下にある左側のオプションを使ってみてください。

   

   既定:デバイス レイアウトの高さと幅は、既定ダッシュボードが使用しているものを模倣します。たとえば、タブレットのレイアウトを作成して既定ダッシュボードをデスクトップ ブラウザー (1000 x 800) の固定サイズに設定し、[サイズ] を [既定] に設定すると、タブレット レイアウトのサイズは 1000 x 800 になります。

   すべてを適応:すべてのアイテムは、デバイスのフレーム サイズに合わせて自動的にサイズ変更されます。デバイスのフレーム サイズはデバイスのタイプ、モデル、向き (縦または横)設定によって決まります。

   幅に合わせる (携帯電話の推奨設定): アイテムはデバイス フレームの幅に合わせて自動的にサイズ変更されますが、高さは固定されます。これは、携帯電話のレイアウトや縦スクロール レイアウトに適したオプションです。

携帯電話用に最適化

携帯電話で画面が小さくても、さらに最適化するとメリットが得られます。これらの技術を試してみてください。

手動でのスマートフォン レイアウトの最適化

自分でスマートフォン レイアウトを編集することにした場合、フィルターの配置をすぐに最適化するほか、空白の削除などを行うことができます。[ダッシュボード] タブで、[スマートフォン] の右側にあるポップアップ メニューをクリックし、[レイアウトの最適化] を選択します。

このコマンドでは、現在スマートフォン レイアウトにあるアイテムの再配置のみが行われます。スマートフォン レイアウトを継続的に更新し、すべての変更内容を既定のダッシュボードに反映させる場合は、[レイアウトの自動生成] を選択します。

インスタント メッセージと電話呼び出しを起動するリンクの追加

携帯電話ユーザーがカギを握る人々にダッシュボードのコンテンツについて迅速に連絡できるように、自動的に SMS メッセージと通話を起動する URL アクションをオブジェクトに追加します。リンク形式 sms:phone-number または tel:phone-number を使用します。必要に応じて国コードと市外局番を含めてください。

携帯電話固有のバージョンのビューの作成

既定のダッシュボードの特定のビューの複製を作成し、1 つをデスクトップ表示に最適化して 2 つを携帯電話用に最適化します。

1. ビューのワークシートに移動し、タブをクリックしてから、[シートの複製] を選択します。

   

2. モバイル閲覧用にビューをカスタマイズします。

   たとえばマップに関しては、既定で特定の地域にズーム インしたり、パン、ズーム、およびその他の機能を無効化する場合もあります。ユーザーによるマップの操作方法のカスタマイズを参照してください。

   

3. 新しいビューを既定のダッシュボードに追加し、作成中のデバイス レイアウトで利用できるようにします。

タイトルの短縮化

モバイルの閲覧には、短いタイトルが適しています。タイトルを編集するには、ダブルクリックします。

空白の最適化

空白は考慮すべき別の視覚要素です。携帯電話では画面のスペースが小さく、そのスペースを最大限に活用する必要がある一方、ユーザーがフィルターやその他のアイテムを不用意に選択しないよう、ユーザーがタップやスクロールを開始できる安全な場所を提供しなければならない場合もあります。

空白を追加するには、パディングまたは[ブランク]オブジェクトを使用します。詳細については、ダッシュボードのサイズとレイアウトを参照してください。

ダッシュボードのパブリッシュ

1. [サーバー] > [ワークブックのパブリッシュ] をクリックします。まだサインインしていない場合は、認証資格情報を求められます。

2. [Tableau Server にワークブックをパブリッシュ] ダイアログ ボックスで、[シートをタブとして表示] チェック ボックスがオフになっていることを確認します。

   

   デバイス固有のダッシュボードでこのチェック ボックスをオンにすると、Web ブラウザーのサイズを正しく検出し、正しいレイアウトを読み込むサーバーの機能とタブのサイズ調整要件が干渉します。

3. [パブリッシュ] をクリックします。

ダッシュボードのテスト

ダッシュボードを Tableau Server や Tableau Cloud にパブリッシュした後、別のブラウザー サイズで表示してダッシュボードをテストします。

1. Tableau Server または Tableau Cloud でダッシュボードを開きます。

2. ページの右上隅で [共有] をクリックし、[リンク] テキスト ボックスの内容をコピーします。

   

3. 文字列を Web ブラウザー URL に貼り付けます。文字列には、embed=y を含める必要があります

4. ブラウザー URL として埋め込みコード文字列を使用し、Web ブラウザー ウィンドウのサイズを変更して異なるレイアウトを試してから更新してください。

デバイスが表示するレイアウトの確認

デバイスの表示するダッシュボード レイアウトは Tableau ビューが表示される iframe の極小寸法 (高さまたは幅) に基づきます。時折デスクトップ、タブレット、または携帯電話レイアウトが他の種別のデバイスに現れることがあります。例えば、デスクトップ コンピューターのディスプレイまたはブラウザー ウィンドウが小さければ、タブレット レイアウトが現れる可能性があります。

Tableau Cloud や Tableau Server のユーザーが、スマートフォンやタブレットのレイアウトに制限が多いと感じたら、ツールバーの表示設定ボタンを使用して、デスクトップ イアウトを表示することができます。このボタンは、デスクトップ レイアウトとモバイル レイアウトを切り替えることができるトグルです。ボタンの配置は、ダッシュボードを表示しているデバイスによって異なります。