高校の同窓会ホームページをWordPressではなく「Google サイト」でつくりました

# はじめに

「[Google サイト](https://sites.google.com/)」を使ってみて善かったという感想を書きます。

ITを生業としているわけではない方たちが、「ホームページを欲しい」と言った場合に指している、所謂(いはゆる)ホームページの制作は、「[Google サイト](https://sites.google.com/)」等Googleさんのサービスを組み合わせれば十分なのではないかとおもいました。

# 論よりRun

制作したホームページです。

https://www.kaho49.one/

# 制作経緯

**多少、ストーリーを誇張して書いています。**

43歳になる今年、もう何十年と連絡を取っていない友人から電話がある。一体何の用だろう ーー 不信におもいつつも、高校時代の懐かしさが湧いてきて受話器を上げる。電話の向こうの声は明るい。
「なんしよん？」懐かしい響きだ。筑豊弁、あのころと何も変わっちゃいない。お互いに二、三近況を情報交換したあと、先方は本題を切り出す。
「プログラマーしよっちゃろ。だったらホームページ作ってよ」
きたきた軽いノリで、プログラマーだったらなんでもできるとおもっていやがる。
正直にいうと、オレはホームページというものを作るのが苦手だ。大学生のときにhtmlタグを手打ちして研究室のホームページを作っていた。部活動の野球の試合の記事を勝手に載せたりしていて楽しんでいた。いま近いものを探せば「[阿部 寛のホームページ](http://abehiroshi.la.coocan.jp/)」だ。２０年くらい前はこんなのばっかりだった。しかし求められているものはそれとは違うと直感している。オレはCSSが苦手だし、覚える気もない。あまり気は進まなかったが打ち合わせが一週間後にあるとのことでそれに参加することにした。

一週間後の打ち合わせに参加すると１０名くらいが参加していた。４５０人くらい同級生がいるらしい。記憶力はいいほうだとおもっていたが、もう25年も経つと思い出せない。オレだってわからないが、向こうもオレのことなんかわからない。あれこれ話を聞くと二年後の大同窓会の準備をしているとのことだった。同級生の集まりだけではなく８０歳オーバーの御大、大先輩たちも招いての大同窓会とのことであった。打ち合わせは続く。

なにかの拍子にオレの中でカチリとスイッチが入った。気づいたときは言ってしまった。「ホームページはオレが作りましょう！」だけど弱気もつい口をついた。「[阿部 寛のホームページ](http://abehiroshi.la.coocan.jp/)みたいになるかもしれんけど……」同級生たちは、それでもいいと言ってくれた。自分たちではできないことを頼むのであるから贅沢は言わないと。それで少しは気が楽になった。（まあ、後述するように出来上がったものを見るとあれこれ言われてしまうわけだが、それはまた別の話であり想定の範囲内）

翌日、どうやって作るのか考えてみた。みんなの期待に応えたいとおもった。ホームページの制作は、専門分野ではないがITという分野でプロの末席を汚しているものとしての矜持がある。オレのせいで業界の評判を落とすようなことがあってはならない。だからこそ、htmlを手で書くことだけはやめようとおもった。ろくなものができあがらない。

手打ちしてできあがったろくでもないものがこれだ。

[ろくでもないもの](https://kaho49-3a20a.web.app/)

![スクリーンショット 2022-12-03 14.10.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/d234dcac-2a66-af3e-5f4f-545985d7b33e.png)


これを成果にはしたくない。そこで考えた。
真っ先に思い浮かんだのは、WordPressだ。あんまり使ったことはないがホームページと言えばこれだ。海外の安いVPS、たとえば[Time4VPS](https://www.time4vps.com/)で動かせば安く運用できそうだ。ただ、これって確かMySQLを使うし、データベースのバックアップとかどうするんだとふだんの開発業務以上に気になりだした。
オレは[Elixir](https://elixir-lang.org/)が好きなので[Phoenix](https://www.phoenixframework.org/)も候補にあげてみた。[Elixir](https://elixir-lang.org/)は書いていて楽しい。だが、そのコードは彼らの目で見えるところにはどこにもでてはこない。オレの楽しみとは切り離して考えてみる必要がある。[Phoenix](https://www.phoenixframework.org/) 1.7からは、[TailwindCSS](https://tailwindcss.com/)が標準だ。CSSがオレを追ってくる。

なにか他にいいものがないか探してたどり着いたのが、「[Google サイト](https://sites.google.com/)」だ。無料で使える。サーバーのお守りの必要がない。Googleさんがやってくれる、おそらくSEO対策もバッチリ。GUIでポチポチいけるので、やり方を教えればパソコンを使っている人と更新を分担できそうだ。活動報告等ブログのようなものは作れないことはないが作りにくくはある。それは、Googleさんの「[Blogger](https://www.blogger.com/about/?hl=ja)」を使えばいい。「[Google サイト](https://sites.google.com/)」でつくった大元のホームページから「[Blogger](https://www.blogger.com/about/?hl=ja)」へリンクを貼るわけだ。ホスト名がかわったって、そんなことが気になるのはITのなんちゃって専門家、評論家だけだ。（ここだけはプロとは書かなかった。プロと呼びたくなかった。その意味は読者諸兄に考えてもらいたい。）
住所変更の登録ができるようにして欲しいという要望があった。「[Google Forms](https://www.google.com/intl/ja_jp/forms/about/)」を使えばいい。フォーム系はこれで十分だ。ドメインは「[Google Domains](https://domains.google/)」で取得した。Googleさんのサービスとの連携が簡単にできる。DNSの設定に悩まなくていい。ただ少し浸透するまで待てばいいだけの話だ。
その他いろいろな要望はきっとGoogleさんがすでにサービスを用意してくれているだろう。それらを組み合わせることで、所謂(いはゆる)ホームページはできあがるのだ。

後日、活動報告を[Blogger](https://www.blogger.com/about/?hl=ja)にまとめた。できあがったものをみせると、あれこれ追加の要望がでてくる。そういうものだし、オレはそういう星のもとに生まれているし、オレだからこそなんでも言いやすいのだろう。これは人徳とも言える ーー と前向きにとらえる。想定の範囲内だ。要は心の持ちよう次第だ。
要望は、「複数の人が会話しているようみえる記事にせよ」とのことであった。「[Blogger](https://www.blogger.com/about/?hl=ja)」はカスタムCSSを追加できる。CSSの意味は相変わらずわからないがどこかの技術記事をリスペクトしつつ、一文字一文字石に刻みこむ気持ちで、コピー&ペーストすることでふきだしが完成した。

CSSから逃げるな ーー そう天から言われている気がした。

# Googleさんのサービス

利用したGoogleさんのサービスを列挙しておきます。

- [Google サイト](https://sites.google.com/)
- [Blogger](https://www.blogger.com/about/?hl=ja)
- [Google Forms](https://www.google.com/intl/ja_jp/forms/about/)
- [Google Domains](https://domains.google/)
- [Firebaseホスティング](https://firebase.google.com/docs/hosting)

# おわりに

Googleさんのサービスを組み合わせると、人類の９割以上の人が想像する所謂(いはゆる)「ホームページ」というものができあがります。
みなさんもある日突然、懐かしい人からホームページを作って欲しいとお願いされることがあるかもしれません。そんなときに思い出してください。
わたしには高校時代の記憶が驚くほど消え去ってしまっているのですが、それは１０００年先を見つめているとも言えるわけです。
わたしと同じようなことがありましたら、ぜひ協力してあげてください。あのころとは違う、新鮮な気持ちでまた新しい人間関係をきっと築けます。

とにかく言いたいことは、畢竟「闘魂」です。
嫌だなとおもっている食わず嫌いな分野も飛び込んでみると新たなおもしろさに気づくことがあります。楽しみが見つかることがあります！
「迷わず行けよ　行けばわかるさ」です。
闘魂とは **己に打ち克ち、闘いを通じて己の魂を磨いていくこと** です。


https://www.shinchosha.co.jp/book/129721/

https://presidentstore.jp/item/008105.html

---

# [闘魂Elixirシリーズ](https://qiita.com/advent-calendar/2022/elixir)

ところで、私は「[闘魂Elixirシリーズ](https://qiita.com/advent-calendar/2022/elixir)」というものを書いています。
東洋道徳(闘魂)と西洋芸術([Elixir](https://elixir-lang.org/))を一日一話形式で読めるようにしています。
もしもこの記事をおもしろいと感じてくださった方は、波長がきっと合います。ぜひ「[Elixir Advent Calendar 2022](https://qiita.com/advent-calendar/2022/elixir)」をご購読してみてください。
ちなみに、「[Elixir Advent Calendar 2022](https://qiita.com/advent-calendar/2022/elixir)」は、2022-12-09時点でカレンダー13まで伸びています。参加登録も、`"hello, world"`から大歓迎です。[Elixir](https://elixir-lang.org/)に触れてみて、一歩踏み出す勇気をQiitaに書くという行動でお示しになることを、私は応援します。もちろん、[Elixir](https://elixir-lang.org/)コミュニティも大歓迎です。私がコミュニティを代表しているわけではありませんが、きっとそうに違いありません。カレンダー13まで伸びているのです。「[Elixir](https://elixir-lang.org/)をはじめてみました〜」という記事はきっと歓迎されることでしょう。


```elixir
iex> "Elixir" |> String.graphemes() |> Enum.frequencies()
%{"E" => 1, "i" => 2, "l" => 1, "r" => 1, "x" => 1}
```