この節では、記事一覧ページから選択された記事を1件取得し、詳細ページとして表示します。

最後に、完成したポートフォリオをGoogle Apps ScriptのWebアプリとして公開します。

URLクエリパラメータidを取得する

記事一覧ページでは、各記事のリンクにmicroCMSの記事IDを付けています。

<https://script.google.com/macros/s/デプロイID/exec?id=記事ID>

例えば、記事IDがclinic-reception-appの場合は次のURLになります。

<https://script.google.com/macros/s/デプロイID/exec?id=clinic-reception-app>

GASでは、doGet(event)のevent.parameterからURLの値を取得できます。

function doGet(event) {
  const articleId = String(
    event?.parameter?.id ?? '',
  ).trim();

  if (articleId) {
    return renderDetailPage(articleId);
  }

  return renderIndexPage();
}

event.parameter.idには、URLの?id=以降の値が入ります。

?id=clinic-reception-app
       ↓
event.parameter.id
       ↓
clinic-reception-app

idがある場合は詳細ページを表示し、ない場合は一覧ページを表示します。

renderDetailPage()で詳細ページを生成する

記事詳細ページは、renderDetailPage()で生成します。

function renderDetailPage(articleId) {
  const template =
    HtmlService.createTemplateFromFile('Detail');

  template.article = getArticle(articleId);

  return template
    .evaluate()
    .setTitle(template.article.title)
    .addMetaTag(
      'viewport',
      'width=device-width, initial-scale=1',
    );
}

この関数では、次の処理を行っています。

1. Detail.htmlをテンプレートとして読み込む
2. 記事IDを使ってmicroCMSから記事を1件取得する