実践的なデータ可視化

第9章. ウェブに埋め込む

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

これまで、第6章ではチャート、第7章ではマッピング、第8章ではテーブルの作成方法を学んできた。本書では、データとのインタラクション、新しいパターンの調査、必要であればファイルのダウンロード、ソーシャルメディアでの作品の簡単な共有など、インターネット上で幅広いオーディエンスを巻き込むインタラクティブなビジュアライゼーションをデザインする利点を強調している。この章では、iframeと呼ばれる コンピュータコードのタグについて学ぶ。このタグを使えば、読者はあなたのデータを別のページで積極的に探索することができる。ピクチャーフレームのように、iframe は図 9-1 に示すように、あなたがコントロールする 2 番目の Web ページ（個人または組織の Web サイトなど）の中にライブの Web ページ（インタラクティブなデータ可視化など）を表示する。iframeが正しく行われると、データ可視化はWebページ上にシームレスに表示され、オーディエンスはそれが別のホストから来たものであることを知ることなくコンテンツを探索することができる。

Google Sheets、Datawrapper、Tableau Publicなど、これまでに学んだ可視化ツールのいくつかは、 、そのプラットフォーム上で作成したオンライン・チャートやマップへのiframeを含む埋め込みコードを生成する。ビジュアライゼーション・ツール・サイトから埋め込みコードまたはリンクを取得し、そのコードを2つ目のWebサイトに貼り付けて、インタラクティブ・コンテンツをシームレスに表示する方法を紹介する（「埋め込みコードまたはiframeタグを取得する」と「コードまたはiframeをWebサイトに貼り付ける」を参照）。この入門書ではコーディングのスキルは必要ないが、コードに興味があることは確かに役に立つ。

図9-1. iframeを使ってWebページに他のWebページを埋め込むことができる。

静止画像とインタラクティブiframeの比較

まず、静的なビジュアライゼーションとインタラクティブなビジュアライゼーションの違いを明確にしよう。チャートやマップの静止画像は、凍結された画像である。多くのビジュアライゼーション・ツールでは、チャートやマップの静止画像をJPGやPNG、PDF形式でダウンロードすることができる。静的画像は、文書やプレゼンテーションのスライド、あるいはWebページに挿入したい場合に便利である。もう一つの方法は、静的画像を貼り付け、インタラクティブなチャートやマップへのリンクやウェブアドレスのカスタムショートリンクを追加し、オーディエンスにオンラインでそれを探索するように誘うことである（"Google Sheetsを共有する "を参照）。

あなたのコンピュータ上のWebページの静止画像をキャプチャする必要がある場合は、、これらの組み込みコマンドでスクリーンショットを撮る：

クロームブック

Shift+Ctrl+F5（「Windowsを表示」ボタン）を押し、十字カーソルをクリックしてドラッグする。

マック

Shift-Command-4を押しながら、十字カーソルをクリックしてドラッグし、スクリーンショットを撮る。 ...