【OneDrive活用】ExcelシートをブログやWebサイトに埋め込む方法

時間を節約するための方法は人それぞれですが、SNSでの情報共有を思い浮かべてみてください。私たちは普段、リンクを貼るだけでなく、投稿そのものを埋め込んで共有しています。投稿の埋め込みは時間の節約になるだけでなく、ブログの見栄えも向上させてくれます。ところがファイルの共有となると、ついリンクを共有しがちです。せっかくファイルも埋め込めるのに、なぜリンクだけなのでしょうか?以前、Word文書をWebサイトに埋め込む方法をご紹介しましたが、今回はExcelシート(スプレッドシート)をWebサイトに埋め込む方法を詳しく解説します。

スプレッドシートを埋め込むには、有効なOneDriveアカウントと、埋め込みたいExcelファイルが必要です。OneDrive上のドキュメントを開くと、パソコンで使用しているアプリケーションのWeb版が起動して表示されます。

ExcelシートをWebサイトに埋め込む手順

作業を始める前に、埋め込むファイルに重要な情報や個人情報などが含まれていないことを必ず確認してください。公開したくないデータが入っていないか、事前のチェックが大切です。

まずOneDriveアカウントにログインし、埋め込みたいシートをアップロードします。ファイル形式は.xlsx形式にしておくのがおすすめです。

アップロードが完了したら、ファイルを右クリックして「埋め込む(Embed)」を選択します。

画面右側に新しいパネルが開きます。パネル内の「生成(Generate)」をクリックすると、ファイルを埋め込むためのコードが自動的に生成されます。

あとは生成されたコードを、ブログやWebサイトの好きな場所に貼り付けるだけです。

埋め込みコードをコピーすると、その下に「この埋め込みブックの表示方法をカスタマイズする(Customize how this embedded workbook will appear)」というオプションが表示されます。これをクリックすると、シートのウィジェットの見た目に関する詳細設定が現れます。主な設定項目は以下の5つです。

1. 表示内容(What to show)
2. 外観(Appearance)
3. 操作(Interaction)
4. サイズ(Dimensions)
5. 埋め込みコード|JavaScript

1. 表示内容(What to show)

このオプションでは、ブック全体を表示するか、ウィジェットに表示する行・列の範囲を指定するかを選択できます。必要な部分だけを見せることで、ページをすっきりと保てます。

2. 外観(Appearance)

「格子線を非表示にする(Hide grid lines)」「行と列の見出しを非表示にする(Hide row and column headers)」「ダウンロードリンクを含める(Include a download link)」などのオプションで、埋め込んだシートの外観を細かく調整できます。

3. 操作(Interaction)

ここでは、閲覧者がデータの並べ替えやフィルタリングを行えるようにするかどうかを設定できます。また、セルへの入力を許可することも可能ですが、入力されたデータは保存されません。さらに、最初に選択されるセルを指定することもできます。

4. サイズ(Dimensions)

ウィジェットウィンドウの幅と高さをピクセル単位で指定できます。サイトのレイアウトに合わせて最適なサイズに調整しましょう。

5. 埋め込みコード|JavaScript

コードには「埋め込みコード」と「JavaScript」の2種類があり、どちらか一方を選択できます。自分でサイトを運営していてJavaScriptの仕組みを理解しているなら、用途に応じて使い分けるとよいでしょう。

埋め込まれたファイルは、Webページ上に小さなウィジェットとして表示されます。閲覧者はそれをダウンロードしたり、編集したり、好みに合わせて操作することも可能です。ただし、閲覧者による変更は一時的なものであり、元のファイルに保存されることはありません。埋め込んだシートのイメージは以下のようになります。

スプレッドシートを埋め込んでサイトを公開すると、ドキュメントはWebページ上にインタラクティブなウィジェットとして表示され、訪問者に動的なデータ体験を提供できます。

関連記事:PowerPointプレゼンテーションをWebサイトに埋め込む方法