大分前に新アプリとしてリニューアルされた「新しいGoogle Sites」ですが、昨年12月頃にようやく「Google Apps ScriptによるAppガジェット」や「独自ドメイン」にも対応して、旧Google Sitesから十分移行することが出来るようになりました。新しいGoogle Sitesですが作り方が旧サイトよりもちょっと癖があって、とっつきにくい面があります。

今回は新しいGoogle Sitesの作り方について学んで行きたいと思います。

※メールフォームより、独自ドメイン設定について表示がsites.google.com/view/サイト名になっている場合にviewの部分をドメインに変更する件を頂きましたが、返信後メアド不明でしたので、本件を「ウェブアドレスをマッピングする」の項目に追記しました。

※メールフォームよりお便り頂きました。Google SitesがGoogleの検索エンジンにインデックスされない・・・Search Consoleに登録できればクローラーが定期的に来るので、その方法を追記しました。要Google Analyticsです。

今回使用するファイル

サンプルファイルを公開したサイトはこちら。色々と無意味に貼り付けてます。

今後のロードマップ

2019年1月28日に、新Google Siteに関するロードマップが公開されました。主だった内容は以下の通り。2021年終わりに旧Google Sitesはシャットダウンされます。

  • 新しいサイトテーマの追加
  • 目次およびカルーセルスライダーの追加
  • 新しいGoogle Sitesに於けるGoogle Apps Scriptのサポート追加(SiteAppが使えるようになるかも)
  • 大きなサイト構築と管理手法の提供
  • バージョン履歴と復元手段の装備
  • 新バージョン公開時に差分の表示

これらがいつ提供されるかわかりませんが順調に旧サイトでの機能を新Siteでも装備中のようです。

旧Sitesからの変換

以前のGoogle Sitesから新しいGoogle Sitesへの変換機能が提供されています。変換ページは

https://sites.google.com/site/ここにサイト名/system/app/pages/admin/migration

のURLへアクセスすると開きます。まだ、全てのアカウントで有効になってるわけではないようで、出てこない場合は少し時間を待つ必要があります。変換手順は以下の通りです。

  1. 変換したいSitesを開きます。
  2. ページの上部に「新規 サイトを新しい Google サイトに変換 使ってみる」のリンクをクリック
  3. 開始ボタンを押します。同じユーザと共有も一応チェックしておきましょう。
  4. 変換が開始されます。暫く待ちましょう。
  5. 100%になったら、続行ボタンを押します。
  6. 下書きを確認ボタンを押します。
  7. 接続を解除ボタンを押すと、旧サイトから分離されURLが変更されるので注意!!
  8. Google Driveを開きます。
  9. マイドライブ直下に「converted from Classic Sites」という名称でファイルが出来ています。
  10. 最期に変換された新しいGoogle Sitesで公開をしないとページが見られません。

変換してみた結果(昔作りかけてたこのサイトの元)ですが、正直な所、必要最低限変換されている感じです。旧Sitesと新Sitesでは構造がまるで異なるのと、使えなくなってる機能などもあるので、あくまで変換後は手修正をして、カスタマイズし直す必要があると思います。日々変換精度は上がっているようで、埋め込みガジェットなども移行してくれてるみたい。。

図:変換をするためのURLが出てきます。

図:変換ページの様子

新しいGoogle Sitesの概要

出来る事

バージョンアップを重ねた結果、現在は旧サイトと遜色ないほど出来るようになりました。以下に出来る事を列挙してみました。

  1. 管理コンソールから独自ドメインを設定できます。
  2. Google Apps Scriptで作ったAppガジェットを貼り付けられます
  3. 直接埋め込みでJavaScriptを書いてアプリを作ることも可能です。
  4. iFrame対応!!外部サイトの埋め込み(ツイッターやガジェット類)が可能です。
  5. Google Driveの各種アプリの埋め込みが可能です。
  6. 標準でスマフォ対応のレスポンシブデザイン
  7. Youtubeの動画を埋め込む事が出来ます。
  8. コンテンツの配置が割りと直感的になり、横に並べることも可能になった。
  9. デフォルトでSSL対応なので、httpsで接続が可能です。
  10. カスタムURLでのアクセスが可能(独自ドメインを使用できる)
  11. ボタンを追加してリンクを開くことができるようになった。
  12. サイトのコピーを作成できる機能

現時点で出来ない事

  1. 個別ページ単位の閲覧権限設定
  2. 旧XMLガジェットの貼付け(完全に廃止ですね・・・)
  3. Google Apps ScriptからSitesAppで操作が出来ない(旧サイトのみ)
  4. HTML直打ちじゃないと表組が出来ない
  5. スマートデバイスからの更新手段がない
  6. ヘッダーとフッターに要らないものがついてくるし消せない
  7. Google検索上、Google Sitesという文字列がついてしまう。これが消せない。
  8. 旧にあったサイトマップ自動生成機能は新にはありません
  9. RSSやsitemap.xml生成機能もありません。

操作の基本

新しいGoogle Sitesからは、Google Driveにファイルという形でSitesは管理されるようになりました。その結果、少々とっつきにくい仕様に変更されています。ここを抑えておかないとややこしいことになりますので、注意してください。

ファイルの共有権限と閲覧権限は別

他のGoogle Driveアプリ類はファイルに与えられている権限で管理をしています。閲覧権限や編集権限ですね。Google Sitesの場合はこれとは別に「公開したサイトの閲覧権限」というものが存在しています。ファイルの操作とサイトの閲覧が別々になっているんです。

さらに、企業で使用するG Suiteの場合には、「ドメイン内で限定」かどうか?のどちらかを選ぶことが可能です。イントラを作って外部にまで公開したら大変な事になるので、注意が必要です。(逆を言えば、外部とファイル共有出来ない設定の中、唯一フォームだけが外部にオープン出来る仕様になっていると言えます)。

図:サイトだけちょっと特殊な権限設定がある

図:G Suiteのみ「ユーザに限定する」項目がある

ファイルのURLと公開URLは別

もうひとつ、なかなか慣れないのですが、ファイル自体のURLと公開URLは全く別という点です。ファイル自体のURLは「最後に/editがつく」URLなのですが、公開したサイトのURLは、「独自ドメインや自分で設定したURL」が表示されます。独自ドメインそのものは管理コンソールから行いますが、そこにぶら下がるサイトのURLは以下の手順で設定します。独自ドメインじゃない場合は、以下のようになります。

https://sites.google.com/view/設定した名前

右上の「公開」の隣の▼をクリックしてから設定します。

  1. 「公開設定を開く」
  2. ウェブアドレスに名前を入れる。これが公開サイトのURLの一部になります。
  3. 公開サイトのURLからは、編集権限があれば右下の鉛筆マークをクリックすれば編集画面に移動できます。
  4. 今回のサンプルファイルの公開サイトはこちらになります。

図:ウェブアドレスが自分が名付けるURLの一部

公開しないと反映されない

とても重要なポイント!!

いくら頑張って編集をしても、その都度「公開」ボタンをクリックして公開をしないと、直前までの編集内容が公開サイトに反映されることはありません。最初は誰もが嵌まるポイントです。未だに自分も嵌まることがあります。Google Apps Scriptのウェブアプリケーションの公開と似たような仕様なんですね。

まぁ、編集している側から内容が反映されても困るといえば困るので、妥当な仕様です。

初期設定

新しく作った時点では、空っぽです。ここにサイトを作り込んでゆくのですが、設定だけは最初に済ませてしまいましょう。初期設定する場所はいくつかあります。

ウェブサイトの公開設定

すでに紹介しましたが、公開設定にてウェブアドレスを設定しておきましょう。独自ドメインの場合URLが被ることは少ないと思いますが、一般のGoogleアカウントの場合、既に使われていて設定できないこともあるので、いくつか考えておきましょう。また、この画面から、検索エンジンにクロールさせるか?させないか?の設定も行っておきます。

faviconの設定

faviconとは、ブックマークなどをした時に表示されるアイコンで、Google Chromeならばタブにそのアイコンが表示されるようになっています。これがあると自分のサイトをブックマークから見つけやすくなるので、是非設定しましょう。拡張子がicoやpngなどのファイルが設定できます。

今回はフリー素材からPNG形式で設定をしてみました。faviconの設定手順は以下の通り。

  1. 編集画面の右上「︙」をクリックし、「ファビコンを編集」をクリック
  2. アップロードか?選択にて例えばGoogle Driveからもファイルを選択できます。
  3. アップロードが完了したらすぐに反映します。そのままダイアログは閉じてしまって結構です。

サイトのロゴ設定

サイトロゴも設定しておきましょう。サイトロゴは公開ページの左上のサイト名の左横に表示されるものです。自分はfaviconで設定したアイコンと同じ画像を指定しています。設定手順は以下の通り

  1. 左上のサイト名をクリックする
  2. 下に「ロゴを編集」ボタンが出てくるのでクリック
  3. favicon同様アップロードをする。
  4. 背景色を設定する。自分は透明を選択しています(透明、白、黒しか選択できませんが・・・)。

図:赤線の中のサイト名をクリックして設定します。

タイトル背景画像を変更

メイン画面のページタイトルの背景画像はドドーンと表示されるものなので、これも変更しておきましょう。画像を使わない設定にしたり表示そのものをしないようにする事も可能です。

  1. タイトルの画面をクリックすると「画像を変更」というボタンが出てくるのでクリック
  2. 画像をアップロードする。
  3. 自動で画像の色彩調整が入り、タイトルの文字色との整合性を取ってくれます。
  4. おなじくタイトル画面をクリックすると「見出しのタイプ」というボタンがあるのでクリック
  5. 大きさを設定できます。タイトルのみにすると、画像は非表示になります。

図:タイトル背景画像は意外と重要

テーマを変更

テーマの変更は出来ると言えば出来るのですが、旧Google Sitesと比較して貧弱で、せいぜいフォントスタイルと一部の色を変更できるだけで細かいデザイン設定が出来るわけじゃありません。なので、ここはさっくり「シンプル」のままで使用しましょう。変更自体は、右サイドバーの上にある「テーマ」をクリックすれば設定可能です。

Google Analyticsのサイト分析

新しいGoogle Sitesは簡単にGoogle Analyticsと連携が可能になっています。Google Analyticsから得たサイトのトラッキングコードを設定するだけで、サイト内のアクセス解析が可能です。トラッキングコードの設定手順は以下の通り。

  1. 編集画面の右上「︙」をクリックする
  2. 「サイト分析」をクリックする
  3. サイトとアナリティクスの画面にて、トラッキングコードを貼り付けて、OKです。

問題のトラッキングコードですが、Google Analyticsでは以下の手順で取得可能です。但し取得するにはGoogle Sitesの公開URLが必要になるので、まずは公開URLをコピーしておきましょう。但し、アカウントの設定などは完了済みの状態でお話を進めます。

  1. Google Analyticsにまずはログインする
  2. メイン画面の左下にある「管理」をクリックする
  3. 真ん中の「プロパティ」にて、プルダウンより「新しいプロパティ」を選択。
  4. 対象はウェブサイト、他にサイト名、コピーしておいたウェブサイトURL(httpsを選択しましょう)を設定
  5. 業種は適当に選んでおき、タイムゾーンは日本を選択します。
  6. トラッキングIDを取得ボタンで、コードが手に入ります
  7. UAから始まるトラッキングIDが今回の目的の品です。これをコピーしてサイトに設定してあげます。
  8. データ収集が反映するには最低24時間〜48時間は必要です。

図:Google Analyticsの設定画面

ウェブアドレスのマッピングについて

この項目はSitesを例えばhttps://www.hogehoge.com運用ではなく、sites内のアドレスをhogehogeにする方法です。つまり、https://sites.google.com/hogehoge/となる場合です。この設定をウェブアドレスのマッピングと呼びます。旧来からある方法で、主に内部で利用する場合に使う方法になります。

設定前は、https://sites.google.com/view/kinoko といったアドレス表記になっているはずです。何もドメインが含まれていませんね。kinokoの部分は公開設定でつけたトップページの名前です。

  1. 管理コンソールを開き、アプリを開きます。
  2. 「G Suite」を開き、「サイト」を開きます。
  3. 下のほうに「ウェブアドレスのマッピング」という項目が出てくるので開きます。新しいウェブアドレスを追加をクリック。
  4. サイトの場所のほうには、現在のsitesに付けたサイトのURLを入れます。今回のケースだと、kinokoがそれに該当します。当サイトだとhttps://sites.google.com/officeforest.org/kinokoになります。
  5. ウェブアドレスのほうにはサブドメインのように名前を入れます。今回は同じにしました。
  6. マッピングを追加ボタンをクリックすると完了です。DNS設定が出てきますがこれは、独自ドメイン設定で行う設定になりますので、スルーでOKです。
  7. 反映するまで時間が掛かるのでしばらく待ちます。これで完了です。これだけでは、kinoko.officeforest.orgのような独自ドメイン運用は完了していないので、次の項目を引き続き行います。
  8. ただし、6.でスルーすると、独自ドメイン運用したい場合、1度マッピングを削除してやり直しになるので、ご注意ください。

図:サイトをマッピング中

独自ドメイン設定

自分はウェブはレンタルサーバ、メール等はG Suiteで今は運用しています(office365にしてたのですが、使い勝手が悪かったので止めました)。Google Sitesも以下の手順で独自ドメイン設定を行う事ができます。但し、G Suite契約時と同様に自分でDNS設定を施してあげなければならないので、ちょっとハードルは高いです。

  1. 管理コンソールを開き、アプリを開きます。
  2. 「G Suite」を開き、「サイト」を開きます。
  3. 下のほうに「ウェブアドレスのマッピング」という項目にある、ウェブアドレスマッピング済みの項目がある場合には削除をします。
  4. ウェブアドレスのマッピングでマッピングしたいアドレスを設定します。前項のマッピングを参考にしてください。
  5. ウェブアドレスのほうにはサブドメインのように名前を入れます。今回は同じにしました。
  6. マッピングを追加ボタンをクリックすると、DNS設定に「CNAME」でkinokoと入れてアドレスはghs.googlehosted.comを入れろと出てきます。ここで注意点はghs.googlehosted.comの後に「.」を付け忘れないように。
  7. 自分の独自ドメインレジストラの管理画面より、DNS設定としてCNAMEとアドレスを追加します。
  8. 管理コンソール画面に戻り「指定された手順を完了しました」をクリックして閉じる
  9. 設定におかしな点がなければ、独自ドメイン設定完了です。DNS設定変更の反映までしばらく時間がかかります。
  10. 但し、管理コンソールにてGoogle Sitesが組織内でのみ閲覧可能なサイトの場合、リダイレクトされて終わりです。Googleドライブの共有設定を見直す必要があります。
  11. 試しに、テストで作ったサイトをサブドメインでマッピングしてみました(https://kinoko.officeforest.org/)。SSLも無償で有効化された状態なので、お得ですね。

図:DNS設定を促すダイアログ

図:DNS設定を編集中

図:SSL運用がそのまま可能です。

Googleの検索結果に表示させる

ある程度、Google Sitesでコンテンツを作り込んでからでも良いのですが、事前準備の段階でやっておけば、作りながら進められるのが「サーチエンジンへの登録」です。Google Sitesは特別な事をしなくても、Googleのクローラーが拾いに来てくれるのですが、すぐ拾ってくれるわけでもなく、また全部のページを拾ってくれるとも限らない。

また、新しいGoogle Sitesは旧式と違ってRSSの生成やsitemap.xmlの生成機能がないため、登録通知(ブログのPing送信みたいなもの)がありません。ですので、登録といってもいつ来てくれるのやら・・・ということで、公開しているSitesでクローラーに来てもらいましょう。

  1. Google Search Consoleを開く
  2. 左上にある▼をクリックして、プロパティの追加をします。
  3. 独自ドメイン設定しているならば、左、そうでない単体のURL登録ならば右のパネルにSitesの公開用URLを入れます。
  4. 続行ボタンを押す。
  5. HTMLファイルのアップロードは不可能なので、Analyticsアカウントでやってみます。
  6. Google Analyticsにて新しいプロパティにて、SitesのトップページのURL(自分のサイトならば、https://sites.google.com/view/mushroom-worldを登録)にて登録。トラッキングコードを入手しておく。
  7. Google Sitesの編集画面にて「」をクリック、サイト分析を開く
  8. トラッキングコードを貼り付けて保存ボタンを押す。
  9. Search Consoleの画面に戻って、Google Analyticsで確認をしてみる。
  10. 所有権を確認が完了すればOK。何日かするとクローラーが拾いに来てくれ、またSearch Consoleに色々な情報が出てくるようになります。
  11. 独自ドメイン運用しているならば、DNSレコード登録でも行けるかもしれません。
  12. サイト名直で検索してみたら、ヒットするようになった。

図:サイトを登録します

図:所有権確認できたら完了

サイトを編集する

基本パーツを貼り付ける

右のサイドバーから埋め込みたいパーツをクリックし、埋め込みたいファイルやYoutubeの動画、地図、カレンダーなどを選択するだけの簡単仕様。埋め込んだものは直接編集はできませんが、閲覧することは可能です。但しデータ量の多いGoogleスプレッドシートなどを埋め込むと表示まで相当な時間が掛かります。

また、2018年9月より簡単にボタンの設置ができるようになりました。といっても、リンクを開く程度の機能です。サンプルでは、GASから出力したJSONを表示するGET通信のリンクを入れておきました。

図:色々埋め込んでみた

画像カルーセルを挿入する

2019年5月7日より使えるようになった新機能。画像を複数挿入しても、全部が並ぶのではなくカルーセルスライダーのように1つの画像をスライドしながら全部表示できるような仕組みが用意されました。およそ反映するまでに15日間のタイムラグがあるとのこと。

  1. 右サイドバーより、画像カルーセルを選択
  2. 複数のファイルをアップロードしたり選択する
  3. カルーセルとして画像が貼り付けられる

といった手順。実際に貼り付けてみました。

図:2枚以上の画像のアップロードが必要

図:簡単にカルーセルスライダーが実現出来る

ページを追加する

新しいGoogle Sitesはトップページ以外にもページをいくつも追加可能です。また、追加することで自動的に右上にアクセス用のメニューも表示されるようになる仕組みになっています。どのページをどこにぶら下げるか?よく事前に考えてページの配置を決めておくと良いでしょう。親になるページにぶら下がるページをサブページとよび、階層としては3階層くらいまで作ることが可能です。

尚1度作ったページは自由に別のトップページ配下に移動させたりすることが、ドラッグだけで出来るようになっています。

新規のトップページを追加

ホームという固定のトップページが最初から追加されているページです。このホームは削除はできませんが、別のトップページを最初に表示されるホームに変更は可能です。新規のトップページは右サイドバーの一番下にあるえんぴつマークをクリックして追加が可能です。また、掴んでドラッグすれば、どこかのトップページ配下に移動させて、サブページにすることも可能です。

各トップページは右上にメニューとして表示され、サブページを追加するとドロップダウンに変更されます。まずは、ここで新規のトップページをいくつか用意しておくと後の作業がやりやすいですよ。各ページの設定は、トップページの右にある「︙」をクリックすると、ページの削除やプロパティでページ名を変更可能です。

サブページを追加

サブページの追加は、トップページの右側の「︙」をクリックし、「サブページを追加」で追加が可能です。こうすることで、トップページにサブページがぶら下がり、メニューにもドロップダウン形式で自動的に生成されます。三階層目は▼マークがメニューに出てくるので、それをクリックすることで、さらなるサブページが出て来る仕組みになっています。

尚、ナビゲーションに表示しないをクリックすると、右上のサブメニューには表示されなくなります。自分の場合、例えば研修というトップページに個別の研修用サイトをサブページで追加したり、フォームというトップページを用意して、サブページに申請用の各種Googleフォームを貼り付けたページを用意したりしています。

図:サブページをいくつか配置してみた

カスタムリンクを追加する

2018年4月11日より追加された新機能で、ページの追加の代わりに、外部のサイトへの直リンクを追加できるもので、上に自動で生成されてるページ一覧に加える事が出来るようになりました。作り方は至って簡単です。

  1. 右サイドバーのページタブを開きます。
  2. 一番下のページを追加するボタンにマウスカーソルを載せると、「新しいリンク」が出て来るのでクリック
  3. 出て来るダイアログに名前とリンク先URLを入れて完了ボタンを押す
  4. 後はどこの親ページに属するか?移動させておしまい。

ためしにサンプルページのホームの中にリンクを一個追加してみました。右上のナビゲーションメニューの「ホーム」をクリックすると、中にリンクが1個入っています。これは外部のサイトです。非常によく使うリンクだけでひとつ親ページを作ってぶら下げると効果的ですね。

図:外部リンクやファイルへの直リンクにピッタリ

自動目次を追加する

2019年2月26日より追加された新機能で、追加することで自動目次を設定します。これはGoogleドキュメントでも同じ機能が搭載されていますね。手順は以下の通り、

  1. いくつかのコンテンツを追加し、それぞれに見出しを設定しておく
  2. 右のパネルから目次をクリックすると挿入される

これだけです。大見出しと小見出しの2つしかないでの、使い勝手は悪いですが・・・4段階くらいはほしいところですね。

図:目次を追加してみました。

パーツの配置とレイアウト

パーツを移動させる

各パーツは上下に場所を移動させる事が出来るので、上下入れ替えができます。それだけではなく、既存のパーツの真横に配置させる事も可能です。ですので、上から順番にパーツを並べていくだけでなく簡単に左右に配置をしレイアウトを組む事が可能です。また、この後の間延びしないようにするテクニックを合わせれば、結構格好いいページが作れますよ。ちょっと最初は挙動になれるまでとっつきにくいかもしれません。

参考事例はこのページです。

パーツ移動手順は

  1. セクションの余白の左端に︙のような模様が出てきます。これが掴んで移動できるものです。
  2. 掴んだ状態でドラッグし、別のパーツの所まで移動させます。
  3. 入れ替えたり、同じセクションに所属させたり、左右に配置したり、自由に配置出来ます。
  4. 移動させると青いラインが表示されるので、そこで離すと配置完了

図:テキストボックスを左側に配置中

間延びしないように

各パーツを追加すると上から順番に、1つのセクションとして追加がされてゆきます。このセクションですが1個ではなく複数のパーツを詰め込むことが出来ます。普通にテキストボックスでタイトルを追加し、スプレッドシートを貼り付けるとどうしても間に隙間ができ、サイトが間延びしてしまいます。

この場合、既に貼り付けたセクション内に詰め込む形でパーツを追加が出来ます。以下の手順で追加しましょう。

  1. 既にパーツを追加したセクションの左側の余白をダブルクリック
  2. メニューが出てくるので、さらに埋め込む項目を選択。試しにテキストを選んでみましょう。
  3. テキストボックスがパーツのすぐ真下に追加されるので、内容を記述
  4. 3.のパーツの上部分が掴んで移動できるので、ドラッグして既存パーツの上に移動させてみる
  5. 隙間なく埋め込みパーツのタイトルのように配置できてGood!!

図:セクション内にさらにパーツを追加しよう

セクションレイアウト

前項のように、各セクション内にパーツを次々に配置ができ、またその配置位置も手動でドラッグする事で上下左右に並べる事が可能になっています。しかし、結構面倒で思うように配置できずにイラっとするシーンもあります。そこで、2018年9月にセクションレイアウトというものが用意されました。

予め6種類のレイアウトをポンっと入れることができるので、手動で追加して位置を調整する手間が省けます。

図:画像とテキストのセクションレイアウトを追加してみた

外部サイトやAppガジェット埋め込み

2017年9月頃の大型アップデートにて、iframeにて外部サイト埋込やJavaScript埋込、Google Apps Scriptで作ったAppガジェット埋込が出来るようになりました。基本パーツにないような高度なものでも貼り付けられるので、サイトの可能性が一気に広がりました。

URLから埋め込み

URLから埋め込みはその名の通り、特定のURLの外部サイトをiframeとしてページに埋め込みます。基本パーツには存在しない「Googleグループ」のアドレスなどを埋め込んで、ML投稿リストを表示したりも可能です。今回はGoogleグループのMLを埋め込んでみましょう。

  1. Googleグループを開く
  2. 自分が参加してるグループや作ったグループを表示
  3. その時のURLをコピーしておく
  4. Google Sitesにて埋め込みをクリックする
  5. URL埋め込みにて3.のURLを貼り付けてOK.
  6. 横のサイズを調整して、公開すればMLの投稿リストが表示されるようになります。
  7. 同じ方法で、Google+も埋め込めるようになりました@2019年1月29日(もうすぐ、G Suiteユーザ以外ではシャットダウンされちゃいますが・・・)

図:グループはなぜか基本パーツにないので・・・

図:Google+のコミュニティを貼り付けてみた

埋め込みコード

埋め込みコードは外部サイトというよりも、一時期流行ったウィジェットやアクセス解析タグなどを直接埋め込める機能です。HTMLやJavaScriptを記述出来るので、直接的にウェブアプリをここに記述することも可能です。もちろんTableタグも使えますし、<style>タグをつけて、CSS装飾も可能です。非常に便利な機能です。

  1. 外部サービスなど(ツイッターなど)の埋め込みコードを取得しておきます。今回はお天気ウィジェットを使ってみました。
  2. Google Sitesにて埋め込みをクリックする
  3. URLではなく埋め込みコードを選択し、1.のコードを貼り付けたり、また新規にコードを書いたりする。
  4. OKを押してうまく動けば、表示されるようになります。
  5. 但し、一部のJavaScript(例えばalert()など)は、Ignored call to ‘alert()’. The document is sandboxed, and the ‘allow-modals’ keyword is not set.というエラーが出て動きません。iframeと同じということですね。

図:埋め込みコードはHTMLそのもの

Google Apps Scriptのアプリ埋込み

基本的にはURLから埋め込みと変わりません。ただ独特な点がいくつかあるので、以下にそれらをおさらいしてみたいと思います。

  1. Google Apps ScriptのHTML Serviceにて作ったサイトを「ウェブアプリケーションとして公開」
  2. URLの最後がexecになるURLをコピーする
  3. Google Sitesにて埋め込みのURLに2.を貼り付けてOK.
  4. レスポンシブ対応などはスクリプトの作りて側に要求されるので注意。
  5. 旧Google Sitesと違って、doGet()にてパラメータを渡せるので、GETパラメータ付きURLが使えるようになっています。
  6. Google PickerなどではsetOriginはscript.google.comではなく、sites.google.comになるので注意!
  7. G Suite Business以上で利用できる「App Maker」で作ったウェブアプリも埋め込み可能です。

今回は簡単なリンク集スクリプトをスプレッドシートに作成し、アプリを埋め込んでみました。今回のものはjQueryのライブラリを使った、見た目もグッドなリンク集です。スプレッドシートのサイドバー内でのGoogle Pickerについては、デベロッパーキーが入っていないと使えませんので注意!!

図:自作スクリプトが使えるのは大きなメリット

図:App Makerで作ったアプリを埋め込んでみた

関連リンク

共有してみる: