PTAのwebサイトを0円・誰でも運用できる構成にリニューアルした話①設計編

はじめに

ITエンジニアをしていると、社内の非技術部門、PTAやNPO、地域のスポーツクラブなどに関わって「ホームページどうにかならないかな…お金はないんだけどさ。」という困りごとに直面することがある。自分は解決できる技術は持っているが、ボランティアでは割に合わないため、見過ごしてきた人も少なくないのではないだろうか。私もその一人だった。

この度PTAの執行部になり、再度この課題に直面した。生成AIが爆速で手を動かしてくれる今なら取り組んでみても良いのでは、と考えて自分なりの最適解を実装したので共有する。

作ったもの

Google ドキュメントで記事を書いて、メニューバーに追加される「公開」ボタンを押すと、GASが自動でMarkdownに変換してGitHubにpushする。GitHubのビルトイン機能でpushをトリガーにJekyllが動き、GitHub Pagesでサイトが更新される。運用者はGoogleのサービスだけ使えればよく、GitHubやJekyllの知識は不要。

ClaudeCodeを活用し、手作業でのコーディングは一切行っていない。子供が寝静まった夜の数時間でアニメを見ながらゆるく作業して、約1週間で完成した。

現行サイトの状況と目標

現行サイトは2017年から個人サーバーを間借りして運用してきた。html直打ちでFTP投稿する方式で、運用が面倒な上に引き継ぎも困難。記事数は100記事超で年間2,500円程度のコストが発生していた。

これを以下の観点で評価して刷新することにした。

• 0円で運用できる
• 記事投稿や掲載内容の変更が簡単で、誰でも運用できる
• 移行がしやすい
• 最低限のセキュリティを確保する

なぜその構成を選んだか

候補は3つに絞った。

1. 無料CMS（WordPress等）
2. Google SitesやNotion
3. Google Docs + GAS + GitHub Pages（採用）

各観点の比較を以下に示す。

0円で運用できるか

3案とも0円運用は可能。ただし無料CMSは、無料サーバーでWordPressを動かす場合にサーバー側の広告が自動挿入されるケースがある。PTAサイトに無関係な広告が表示されるのは避けたい。

誰でも運用できるか

PCに不慣れな方は意外なところでつまずく。これまでの経験を参考に判断した。

無料CMS：簡単に投稿できるようになっているが、不慣れな人には難しい。コーポレートサイトでCMSを導入したとき、使い方を教えてほしいと他部門から何度も問い合わせを受けた。DBを持つことで管理要素が増える点も懸念材料だった。

Google SitesやNotion：直感的な操作で変更できるので運用面は問題なし。

Google Docs + GAS + GitHub Pages：Google Docsやスプレッドシートの編集は、PC作業の経験がほとんどない方でも少し教えれば使えるようになる。

移行しやすいか

現行サイトはhtmlのみで保持している。記事・ファイルの移行、見た目の再現、将来的な他サービスへの移行、の3点で検討した。

無料CMS：XMLに変換後DBへのインポートが必要で、100記事超の規模ではタイムアウトのリスクがある。無料サーバーの場合は広告が自動挿入されるため、見た目を再現しても意図しない広告が表示されてしまう。

Google SitesやNotion：記事データを直接操作できないので、GUIで1記事ずつ移行することになる。将来的に他のサービスへ移行する際も同様で、地獄。見た目を現行に合わせることも難しい。

Google Docs + GAS + GitHub Pages：GitHubにMarkdownで記事を保存するので、変換さえできればpushするだけ。AIを活用してコードを組めばほぼ自動で作業できる。見た目も自由に設計でき、簡素なサイトであればAIと作業すれば比較的簡単に再現できた。

最低限のセキュリティを確保できるか

アカウント乗っ取りによる踏み台リスクと、会員限定ページのセキュリティ水準の2点を確認した。

無料CMS：ソースコードが公開されているため脆弱性を発見されやすく、利用者が多いため攻撃対象になりやすい。「定期的なアップデートを誰がやるか」が問題で、引き継いだ後に更新が止まり踏み台になるシナリオが現実的なリスクだ。

Google SitesやNotion：アカウント管理が運営企業側に集約されており、定期的なアップデートもされるため最低限のセキュリティは担保されている。

Google Docs + GAS + GitHub Pages：アカウント保護はGoogleやGitHubに準拠。攻撃対象になるソフトウェアを自分でホストしていないので、メンテ放置によるリスクが構造的に発生しない。会員限定ページは暗号化してGitHubに保管し、ログインIDとパスワードの入力で閲覧できる仕組みで、現行と同等のセキュリティレベルを実現した。

詰まったところ

つまずきポイントは2点あった。

テンプレDocのコピーでスクリプトプロパティが引き継がれない問題

非技術者が引き継ぐことを想定すると、テンプレDocをコピーするだけでセットアップが完了するのが理想だ。いざ実装しようとしたら、Docをコピーしてもスクリプトプロパティは引き継がれないことが判明した。これは詰んだと思った。いろいろ調べた結果、config.gsを空テンプレートとしてリポジトリに含め、トークンはGASエディタ上でのみ管理する方式に落ち着いた。コードと設定の分離という観点では議論の余地がある判断だが、「Docをコピーするだけで引き継ぎできる」という運用上の制約を優先した。

DocとGitHub・Driveをどう紐付けるか問題

記事の投稿だけなら難しくない。問題は編集・削除を実装しようとしたときだ。この3者の紐付けが曖昧なまま進めると、管理が破綻することに気づいた。最初は自前で採番しようとしたが、うまくいかない。またも詰んだと感じた瞬間、GoogleがDocsに対して必ずユニークなIDを発行していることを思い出した。doc.getId()をそのまま使えばいい。拍子抜けするほどシンプルに解決した。

この設計で得た判断基準

サービスとして完成されたものを使おうとするとコストや制限がかかる。自作しようとするとUIUX・セキュリティの水準を保つのに膨大な労力がかかる。その間を取りにいく、つまり無償で提供されている仕組みを組み合わせて要件を満たす設計をするところが、ボランティアでも割に合う仕事になる部分だった。

思いついたアイデアをAIにポンポン投げかければ調査やフィードバックをしてくれるし、仮実装もサクッとやってくれるので、負担なく楽しみながら実装できた。

まとめ

達成したことは4つ。0円運用への移行完了、非技術者でも運用できる投稿フローの実現、100記事超の旧サイト記事・画像の移行完了、会員限定ページの実装。

残課題は正直に書く。実際に引き継いだ後の運用検証がまだできていない。現時点でまだ自分が管理していて、次の担当者が本当に一人で運用できるかは未知数だ。次に同じような依頼があったときに引き受けるかどうかも、運用コストを見てから判断したい。

やってみたいことはいくつかある。運用面では非技術者向け引き継ぎマニュアルの整備、機能面ではアクセス解析・インスタとの連携・PTAについて答えてくれるAIチャットbotの実装、サイト改善として執行部スカウトの手間を削減できるような魅力的なサイト構成の模索を考えている。

②では実装編として、GASのコードや詳細なつまずきポイントを書く予定。