埋め込み
⑪地図と⑭スプレッドシートについては、埋め込み機能から説明します。
挿入メニューにあるこれらのGoogleサービスは、予めそれぞれのサービスプログラム上で作成されたものを挿入するボタンです。Googleサイトで利用する場合は、＜＞「埋め込む」を利用した方がその後の編集などで有利です。
ここでは、「埋め込む」について、Googleマップを例に説明し、続いて、フォームとスプレッドシートの例を紹介していきます。
１．＜＞「埋め込む」
HTMLの<iframe>インラインフレーム要素を使った埋め込み処理です。
編集画面ダブルクリックメニューから「埋め込む」を選択すると、ウェブからの埋め込み画面が開きます。「URL]と「埋め込みコード」から「埋め込みコード」をクリックすると、＜html＞コードをここに入力画面になります。
ここにGoogleの各サービスで作成したものから「埋め込みコード＝html」をコピーして貼り付けます。
Googleサイトに限らずホームページにカレンダーを貼り付けるのは、情報を公開するためであり、「公開設定」がすることになります。
以下カレンダー側とサイト側で行う設定について説明します。
２．Googleマップ（地図）の埋め込み例
下図は、GoogleクロームでGoogleマップを開いたところです。左上の「≡」マーク（メニュー）をクリックし、「地図を共有または埋め込む」を選択します。次の「共有」画面で、「リンクを送信する」と「地図を埋め込む」で、「地図を埋め込む」をクリックします。
下図になります。右上の「HTMLをコピー」をクリックします。これで、パソコンのメモリーに埋め込みコードが記憶されています。
Googleサイトの編集画面の埋め込み画面でctrl+ｖで貼り付けると「次へ」から次の画面の「挿入」でGoogleサイトに埋め込まれます。
なお、HTMLをコピーした段階でGoogleサイトが開けないなどの場合は、Windowsのメモ帳などのアプリを起動し、そこに一端ペーストして保存しておくてから利用してください。
こちらの画面「URL」は、地図の「共有」画面のリンクのコピーで貼り付ける方法もあります。HPからGoogleマップにリンクするだけなので、あまり利用価値は無いと思います。
Googleマップで、地点を指定たり、ルートを作成したりした状態を埋め込むと下図のような地図も埋め込むことができます。このような地図をGoogleマップのマイマップとして保存して活用するとさらに有用な地図を埋め込むことができます。
３．Googleスプレッドシートの埋め込み例
予め、Googleスプレッドシートでデータを作成しておく必要があります。
エクセルデータをアップロードしてGoogleスプレッドシートに変換して利用することもできます。
作成したGoogleスプレッドシート(以下「スプシ」とします。）を開き、ファイルメニュー→共有→ウェブに公開を選択します。
「埋め込む」をクリックし、続けて、「ドキュメント全体」をクリックして公開するシートを選択します。（シートが1枚だけの場合もありますが、シート指定を必ずやっておくと方がよいでしょう）
シートを選択すると右下図の埋め込み用のコードが表示されます。コード内でクリックすると文字列が青色反転し、「コピーするには、ctrl+ｃを押します」と表示がでるとおり、コピーします。
Googleサイト側で、先の地図同様に、埋め込みます。
なお、複数のシートを表示する場合には、下の「公開するコンテンツの設定」で表示させるシートを指定することができます。
注：シート指定しても1度では上手くいかない場合があります。複数指定したのに1シートしか表示（シートリストが表示されない）ことがあり、再度指定することで解決できることがあります。
４．埋め込みの応用
Googleサービスから埋め込みすると必要な表示が上手くいかなばい場合が多くあります。最初に説明したように、埋め込みは、HTMLの<iframe>インラインフレームです。
Googleサービスプログラムから埋め込みコードの貼り付けは、表示に必要最小限度のものです。そのため、下左図のような細長い表からコードは貼り付けても下右図のように、一部しか表示されません。
そのため、埋め込み後の編集操作が必要になります。
埋め込んだ状態のコード
<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vStP6nxTdYCZxLwEAjuo1l73n1EumnRyI2-KEqaOO7pjA98NC74eHHSi2h4nLeSgA/pubhtml?widget=true&headers=false"></iframe>
まず、表示サイズの設定と表示させる表の範囲指定（セル）
を指定します。
セルの範囲が、A1～E30です。この範囲から表示サイズを480px980pxと想定しました。
「widh=」で表示サイズを「range=」でセル範囲を指定します。
<iframe width="480px" height="980px" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vStP6nxTdYCZxLwEAjuo1l73n1EumnRyI2-KEqaOO7pjA98NC74eHHSi2h4nLeSgA/pubhtml?gid=2132138893&single=true&widget=true&headers=false&range=a1:e31"></iframe>
widthは横幅、heightは縦の長さです。
コードの簡単な説明は、
gid=: シート IDです。スプシを開いた状態でURl欄に表示されているgid=*********9桁の数字です。
widget=: true または false。true の場合、シートタブが下部に表示されます。
headers=: true または false。true の場合、行番号と列文字が表示されます。
chrome=: true または false。true の場合、タイトルとフッターが表示されます。
これ以外にも
frameborder="0"はスプレッドシートの一番外側の枠線を非表示
Htmlのスタイル表現も追加可能です。