作業ログ｜Googleサイトをつくってみた｜つくれぽ

## はじめに（この記事の背景）

独立して[合同会社をつくり][01]、いまさらながら`Googleサイト`をつかって自社サイトをつくってみた。

ヘルプはあるけど、あまりわかりやすいとも言えず、ほかの情報も少なさそう。
ここに書いてあることはひとつの例でしかないですが、お役に立てていただければ幸いです。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/6f5e989c-ad20-a799-27c0-102efe88b2f7.png" width=80%>

## 環境

ここで書いていることは、下記のバージョンで実施しました。

- iOS 14.7
- macOS BigSur 11.5
- Safari バージョン14.1.2 (16611.3.10.1.3)
- FireFox 90.0.2 (64 ビット)

SafariをGoogle Workspaceのメインブラウザにしているが、Googleサイトの編集はかなり困難。
（たとえば、テキストボックスの編集がふつうに動かない）

やむを得ず、Googleサイトの編集のみ、FireFoxで行うことにした。

## Googleサイトの向き・不向き

（新）Googleサイトでウェブサイトをつくるほうがいい場合と悪い場合があるような気がする。

全体の感じとしては`Googleフォーム`にノリが似ているなと思っていて、あまり凝らずにサクっとサイトをつくるには、`Googleサイト`は便利なんじゃないかとおもう。

### Googleサイトで自社サイトをつくろうと思った理由

1. 自社サイトの作成にそれほど気合が入っていない
    - サイトで集客というビジネスモデルではない
    - サイト構築にあまり費用をかけたくない（特に定期的な支出は避けたい）
    - 定期更新みたいなことも今のところ積極的になれない
1. サイト構築を外注したくない
    - なにを目的につくるのかとか、今は思考リソースを割きたくない
    - ちょこちょこ作りながら変えていきたい
    - 外注すると、費用だけじゃなく更新リードタイムもかかる
1. でも名刺にウェブサイトのURLを書いてしまった
    - っていうか名刺さえもつくっていなかったのだった
    - 重い腰を上げてつくったところ、デザイン上、URLがほしい
    - 名刺に限らずだが、サイトURLを求められることがある（銀行の口座開設とか）

### やってみて良かったこと

- ノリをつかめてくると、意外と簡単につくれる
- すぐに修正してすぐに公開できる
- 1つ作れば、PC・タブレット・モバイル、すべてに自動的に対応

さいごの、各種デバイスに自動対応はけっこう大きい。
前職で外注したとき、PCサイトはOKだがモバイルは更新されてないとか、チェック工数が発生したり、請求で押し問答したり、意外と手間がかかった。

### Googleサイトが向いていないであろうケース

- 自社サイトを構築するのに、費用がかかってもよい
- 細かなところは外部のプロに任せ、「よきにはかって」ほしい
- あるていどネットワークに関する知識を持っている人が内部にいない

## 作成手順

### Googleサイトで作成する

- [Google][02]サイトを開く
- 適当につくる（詳細は略）
    - テンプレートをいじっているとだんだんわかってくる
    - チームテンプレートを使ってみた

### Googleサイトで、公開の設定をする

#### 公開 > 公開設定

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/a6bd7fdc-036e-600b-952f-b6275c87603a.png" width=60%>

- ウェブアドレス：任意の名前をつけられる。年月日でつけておくと、後で変更するときに便利なんじゃないかとおもう
- 検索の設定：自社サイト表示……これは任意
- 公開前に変更を確認：OFFにしたが、ひとりでやっているなら関係ないかも（あまりわかっていない）

#### 変更したら公開ボタンを押す

のだとおもう。編集するだけでは反映されていないように見えた。

#### 他のユーザと共有 > リンク

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/2c73729a-c184-37c9-95b3-dc8cf1dcfc67.png" width=60%>

公開済みサイトを「公開」にする。
デフォルトでは同一ドメイン内のユーザだけが見られる（たぶん社内サイトをイメージしているのか、情報漏えいに対する安全性確保を優先している）。

### カスタムURLをマッピングする

ここが山場の気がする。
いちおうは[「Google サイトで作成したサイトに新しい URL をマッピングする」][04]がヘルプページである。

- Google Admin（管理）
- Google Domains

の両方で設定をしなければならない。

#### Google Admin（管理）

[Google Admin（管理）][03]にログインする。

Googleの`︙︙︙`ボタン（アプリランチャーというらしい）を押したときに出てくるアプリ名は「管理」。

アプリ > Google Workspace > Googleサイトの設定 > カスタムURL

で追加ボタン（＋）を押し、聞かれたことに答える。

サイトの種類は、新しいGoogleサイト
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/1902d254-4ae6-6f69-1bea-450903d6850e.png" width=45%>

サイトのURLは、さきほど公開設定で入力した`ウェブアドレス`を入れる
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/305fe283-dd41-f753-e84a-b816c2919f95.png" width=45%>

> `https://`は除く。そこでハマった😢

カスタムURL（任意）を指定する。ふつうは`www`でいいかな。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/bb8b1b70-c23a-814a-2591-a0669515c500.png" width=45%>

CNAMEレコードを設定せよと言われる
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/63186369-3206-86e2-b30f-99acd33b6353.png" width=45%>

ということで`Google Domains`に行く。

#### Google Domains

本ケースは、独自ドメインをGoogleに取ってもらった（Workspace申込みのときに、Googleのサービスを利用してドメインを取得した）ので、`Google Domains`を利用する。

他のケースもあるとおもうんですが、わかりません……。

[Google Dmain][05]にログインする。

ドメイン選択 > DNS > カスタムレコード > カスタムレコードを管理
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/3aa7c5e1-f5c2-5e60-b22b-248240b3b610.png" width=60%>

- ホスト名は：`www`（さっきGoogle AdminのカスタムURLで設定した）
- タイプ：CNAME
- TTL：3600（デフォルト）
- データ：`ghs.googlehosted.com`（これを入力せよとさっき案内された）

これで`Google Domains`でやること終わり。`Google Admin（管理）`に戻る。

#### Google Admin（管理）ふたたび

`カスタムURLを追加`ボタンを押す

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/a28252e6-1dc2-7f25-097b-2f6ff4ecce95.png" width=80%>

カスタムURL（`www.boofoo.com`）が、GoogleサイトのURL（`sites.google.com/boofoo/yymmdd`）にマッピングされている。

ステータス「保留」が✅に変わればOK。

## 全体像

図にすると（たぶん）こんな感じだと思われる。

![Cachesimage-0.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184128/6bf6cf30-e118-3892-cd52-f5ba3d1a80c1.jpeg)

あ、[作成したサイトはこちら][06]。見てもらうようなものでもないですが。
[お手伝いしたサイト][07]も、公開されました。

[01]: https://qiita.com/hann-solo/items/3a2410c05111ab9c1c64
[02]: https://sites.google.com
[03]: https://admin.google.com/ac/home
[04]: https://support.google.com/a/answer/7392423?hl=ja&ref_topic=6399210
[05]: https://domains.google.com/registrar/?hl=ja
[06]: https://www.zelo-loop.com
[07]: https://www.kamesei-kyoto.com