CONTENT
ここから
完成するポートフォリオの構成
今回作成するのは、制作したアプリや開発実績を掲載するシンプルなポートフォリオサイトです。
主なページは次の2つです。
- 制作実績を一覧表示するページ
- 各制作実績の内容を表示する詳細ページ
制作実績のタイトル、概要、サムネイル画像、本文、公開日は、microCMSから管理します。
完成リンクはこちら
Google Apps Scriptの役割
Google Apps Script（GAS）は、ポートフォリオサイトを公開するWebサーバーとして使用します。
主な役割は次のとおりです。
- ブラウザからのアクセスを受け取る
- microCMSから制作実績を取得する
- 取得したデータをHTMLへ渡す
- 記事一覧ページや詳細ページを表示する
GASをWebアプリとしてデプロイすることで、専用のサーバーを用意せずにサイトを公開できます。
microCMSの役割
microCMSは、制作実績を登録・編集するためのコンテンツ管理画面として使用します。
microCMSでは、次の情報を管理します。
- タイトル
- 概要
- サムネイル画像
- 本文
- 公開日
サイトのコードを変更しなくても、microCMSの管理画面から制作実績を追加・修正できます。
記事一覧ページと詳細ページの関係
記事一覧ページには、microCMSに登録された制作実績をカード形式で表示します。
カードをクリックすると、URLに記事IDが追加されます。
<https://公開URL/exec?id=記事ID>
GASはURLにidがあるかを確認し、次のように表示するページを切り替えます。
idなし → 記事一覧ページ
idあり → 記事詳細ページ
ブラウザ・GAS・microCMS間のデータの流れ
データは次の順番で取得されます。
ブラウザ
↓ ページへアクセス
Google Apps Script
↓ Content APIを呼び出す
microCMS
↓ 制作実績をJSON形式で返す
Google Apps Script
↓ HTMLへデータを渡す
ブラウザ
↓ ポートフォリオを表示
microCMSのAPIキーはGAS側で管理するため、ブラウザへ直接公開されません。
今回実装しない機能と学習範囲
今回の授業では、ポートフォリオの基本構成に絞ります。
実装する機能は次のとおりです。
-
制作実績の一覧表示
-
制作実績の詳細表示
-
サムネイル画像の表示
-
公開日の表示
-
microCMSとのAPI連携
-
GAS Webアプリとしての公開 次の機能は今回扱いません。
-
タグによる絞り込み
-
キーワード検索
-
ログイン機能
-
問い合わせフォーム
-
コメント機能
-
ページネーション
-
独自ドメイン設定
到達目標
この節では、GASをWebサーバー、microCMSをコンテンツ管理画面として利用する全体構成を説明できることを目標とします。
次ページ