概要
このページは Cloudflare Pages という静的ページを無料でホスティングできるサービスを用いて公開している為、HTMLやCSSのみで構成されています。 しかし、予定の追加や編集・削除を行う際にHTMLを直接操作するのは大変なので情報は基本的にGoogleスプレッドシートに記述して、GAS (Google Apps Script) を介してそのデータをサイトに反映しています。 それによって予定の追加や編集・削除はGoogleフォームを使って行えるようにしています。
1. このサイトの構造
このサイトは以下のようなフォルダ構造となっています。
曲にはそれぞれ個別のページが存在しており、一般曲はlist1フォルダ内、聖歌はhymnフォルダ内、聖歌はさらに第1部はpart1フォルダ内、第2部はpart2フォルダ内に個別の楽曲フォルダが格納されています。
一般曲は追加順にsong1から、聖歌はそれぞれで番号順で1_songからナンバリングしていき、楽曲の個別フォルダ内には
- その楽曲の個別ページとなる HTML ファイル
→汎用型なので曲ごとに変更する必要はない - 楽譜のPDFファイル
- 各パートのMP3音源
→m4aなど音声ファイル形式ならおそらく何でもOK
曲それぞれの情報は個別フォルダにファイル類を入れた後にGoogleフォームより詳細情報を登録します。その情報によって曲ごとの個別ページが作成されます。
2. ドライブ内の構造
Googleドライブ内のは以下のような構造となっています。
mypagedata：サイトのすべてが入っており、ページを更新した際にはここにもアップロードする。
practice_schedule：このスプレッドシートにはGoogleフォームの回答が集められ、
練習予定タブ[タイムスタンプ、練習日時、練習場所、集合時間、備考・連絡事項、終了時間]、
本番予定タブ[タイムスタンプ、本番日時、会場、集合時間、賛美曲、備考・連絡事項]、
曲マスタタブ[タイムスタンプ、カテゴリ、曲名、検索名、聖歌番号、ページURL、備考、YouTube_URL、ソプラノ音源、アルト音源、テノール音源、バス音源、楽譜PDF]、
予定操作タブがあり、このスプレッドシートを基に予定や曲の表示、操作を行っています。
それぞれのGoogleフォーム：これらのフォームによって情報の更新や変更、予定の変更・削除フォームは回答送信をトリガーにスプレッドシートの変更などを行っています。
3. サイトの更新手順
-
Googleドライブ にアクセスしてmypagedataフォルダをダウンロード
-
エクスプローラーからダウンロードへ行って手順1で入手したmypagedataフォルダを開き、追加や更新などの変更を行う
-
Cloudflare Pages にアクセスして以下の画像の赤丸の場所をクリックしてpraise.pureecho@gmail.comのアカウントでログイン
-
画面左側のbuildの中にあるComputeをクリックし、さらにWorkers & Pagesをクリック
-
画像の赤丸で囲ったpraise-pureechoという文字をクリック
-
画像の赤丸で囲ったCreate deploymentというボタンをクリック
-
画像の赤枠で囲ったDrag in or click to upload a file or folder.と書いてある枠内に手順2で変更を行ったmypagedataフォルダを丸ごとドラッグ＆ドロップ
-
画像の青枠で囲ったあたりにAll files were successfully uploaded.と表示されているのが確認出来たら、右下の赤丸で囲ったSave and deployというボタンをクリック
-
画像のようにSuccess!と表示されたら画像の赤枠で囲ったURLをクリックしてページの変更内容を確認
-
最後にもう一度 Googleドライブ にアクセスして変更を行ったmypagedataフォルダをドラッグ＆ドロップしてフォルダを更新
-
アップロードオプションは既存のフォルダを置換するを選択してアップロードボタンをクリック
-
少し待って画面右下に以下の画像のように1件のアップロードが完了しましたと表示されたら更新作業は完了
しかし、アップロード中に編集するなどでアップロードに失敗する場合もあるので注意する
