Googleドキュメント + S3で簡易CMSを実現する

コンテンツ管理といえば最近はCMSを使ったりして、非エンジニアでも編集可能なUIを提供し、APIを通してコンテンツを利用するようなことが多いと思います。

今回はコンテンツの編集をGoogleドキュメントで行い、S3に置くことで簡易なCMSとして使用することを考えてみます。

Googleアカウントを持っていたりする場合はGoogleドキュメントを使用することで、新しくCMSを導入することによるアカウント管理や認証等が不要になります。

なおAWS側で以下の用意ができていることを前提とします。

• S3バケット
• S3バケットへのアクセスキー

Googleドキュメントを用意する

まずはGoogleドキュメントを用意しましょう。

用意できたらツール > スクリプトエディタを開きます。

GASを書いていく

GASからS3を利用するためにS3-for-Google-Apps-Scriptというライブラリを使用します。

新エディタを使用している場合は、ライブラリの＋ボタンを押下して以下のスクリプトIDを入力してライブラリを追加します。

1Qx-smYQLJ2B6ae7Pncbf_8QdFaNm0f-br4pbDg0DXsJ9mZJPdFcIEkw_

（旧エディタではProject Keyを利用してライブラリを追加していましたが、新エディタではスクリプトIDしか利用できなくなっていて戸惑いました。 ちなみにProject KeyはMB4837UymyETXyn8cv3fNXZc9ncYTrHL9）

ライブラリが追加できたら以下のコードを書いていきます。

const accessKey = "XXXXXXXXX"; // アクセスキー
const secretKey = "XXXXXXXXX"; // シークレットキー
const bucketName = "XXXXXXXX"; // S3バケット名
const filePath = "XXXXXXX.html"; // ファイル名

function exportAsHtml() {
  const document = DocumentApp.getActiveDocument();
  const fileId = document.getId();

  const url = `https://docs.google.com/feeds/download/documents/export/Export?id=${fileId}&exportFormat=html`;

  const params = { 
    method: "get",
    headers: {'Authorization': 'Bearer ' + ScriptApp.getOAuthToken()}, 
  }
  const html = UrlFetchApp.fetch(url, params).getContentText();

  const blob = Utilities.newBlob(html, 'text/html');
  const s3 = S3.getInstance(accessKey, secretKey);
  const response  = s3.putObject(bucketName, filePath, blob, {logRequests: true});
}

Googleドキュメントのデータを保存する際に、GoogleドキュメントのBodyクラスからHTMLやMarkdown等の一般的なデータ形式に変換してくれるAPIがあったりしないかなーと思っていたのですが、調べた感じだとなさそうでした。

ということでGoogleドキュメントのExport機能のURLを叩くという方法を取っています。

MarkdownでExportできなさそうだったので今回はHTMLでExportしています。

これを実行するとS3にHTMLが保存されます。

CloudFront経由でアクセスできるようにする

次にCloudFront経由でアクセスできるようにします。

以下の設定でCloudFrontのディストリビューションを作成します。

• Origin domain: 用意したS3バケット
• S3 bucket access: Yes
• Origin access identity: 任意の名前で新規作成
• Bucket policy: Yes

作成後デプロイが完了したら、 xxxxxx.cloudfront.net/保存したファイルのパスにアクセスするとS3に保存したデータが見えるはずです。

他のアプリケーションから参照できるようにする

作成したDistributionのBehaviorを設定します。

Create behaviorをクリックします。

今回は以下のように設定しました。

• Path Pattern: /*
• CORSやキャッシュ周り

あとはSSGで呼び出すなりHTTPで呼び出すなりすればOKです！

最後に

GoogleドキュメントとS3を使うことで簡易なCMSを実現してみました。

常にこの選択肢が良いものになるとは思いませんが、

Google Workspaceなどを導入して全員がGoogleアカウントを利用できる状態で、

小規模なものを簡易に管理したい程度であればそれなりに良い選択になる気がします。

逆に大量のコンテンツを管理したい場合などは別途CMSを入れたほうが良さそうですね。

参考

GoogleスプレッドシートのデータをS3へCSVとして保存する

Google Apps Scriptを利用してGoogleスプレッドシートのデータをS3へJSONとして保存する