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

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

今回使用するファイル

旧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で接続が可能です。

現時点で出来ない事

  1. 個別ページ単位の閲覧権限設定
  2. 旧XMLガジェットの貼付け
  3. Google Apps ScriptからSitesAppで操作が出来ない(旧サイトのみ)
  4. HTML直打ちじゃないと表組が出来ない
  5. スマートデバイスからの更新手段がない
  6. ヘッダーとフッターに要らないものがついてくるし消せない
  7. Google検索上、Google Sitesという文字列がついてしまう。これが消せない。

操作の基本

新しい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の設定画面

独自ドメイン設定

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

  1. 管理コンソールを開き、アプリを開きます。
  2. 「G Suite」を開き、「サイト」を開きます。
  3. 下のほうに「ウェブアドレスのマッピング」という項目が出てくるので開きます。新しいウェブアドレスを追加をクリック。
  4. サイトの場所のほうには、現在のsitesに付けたサイトのURLを入れます。https://sites.google.com/ドメイン名/の後についてる名前ですね。kinokoと命名しました。
  5. ウェブアドレスのほうにはサブドメインのように名前を入れます。今回は同じにしました。
  6. マッピングを追加ボタンをクリックすると、DNS設定に「CNAME」でkinokoと入れてアドレスはghs.googlehosted.comを入れろと出てきます。ここで注意点はghs.googlehosted.comの後に「.」を付け忘れないように。
  7. 自分の独自ドメインレジストラの管理画面より、DNS設定としてCNAMEとアドレスを追加します。
  8. 管理コンソール画面に戻り「指定された手順を完了しました」をクリックして閉じる
  9. 設定におかしな点がなければ、独自ドメイン設定完了です。
  10. 但し、管理コンソールにてGoogle Sitesが組織内でのみ閲覧可能なサイトの場合、リダイレクトされて終わりです。Googleドライブの共有設定を見直す必要があります。

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

図:DNS設定を編集中

サイトを編集する

基本パーツを貼り付ける

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

図:色々埋め込んでみた

ページを追加する

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

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

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

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

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

サブページを追加

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

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

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

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

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

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

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

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

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

パーツを移動させる

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

パーツ移動手順は

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

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

間延びしないように

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

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

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

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

外部サイトや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の投稿リストが表示されるようになります。

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

埋め込みコード

埋め込みコードは外部サイトというよりも、一時期流行ったウィジェットやアクセス解析タグなどを直接埋め込める機能です。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になるので注意!

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

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

関連リンク