CONTENT
ここから
この節では、Google Apps ScriptからmicroCMSのContent APIへアクセスし、ポートフォリオの記事データを取得します。
記事一覧と記事詳細の取得処理は、Code.gsに記述します。
GASプロジェクトを作成する
Googleドライブを開き、Google Apps Scriptのプロジェクトを作成します。
Googleドライブ
→ 新規
→ その他
→ Google Apps Script
プロジェクト名は、内容が分かるように設定します。
ポートフォリオ
初期状態では、コード.gsというファイルが作成されます。本教材では、これをCode.gsとして扱います。
Code.gsの役割
Code.gsは、Webアプリのサーバー側の処理を担当します。
主な役割は次のとおりです。
- microCMSの接続情報を取得する
- microCMSへAPIリクエストを送る
- 記事一覧を取得する
- 記事を1件取得する
- HTMLテンプレートへ記事データを渡す
- 一覧ページと詳細ページを切り替える
microCMSのAPIキーをHTML側へ書かず、Code.gsから通信することで、ブラウザへAPIキーが公開されることを防ぎます。
BLOG_CONFIGで設定値の名前を管理する
最初に、スクリプトプロパティで使用する名前を定義します。
const BLOG_CONFIG = Object.freeze({
serviceIdProperty: 'MICROCMS_SERVICE_ID',
apiKeyProperty: 'MICROCMS_API_KEY',
endpointProperty: 'MICROCMS_ENDPOINT',
});
BLOG_CONFIGには、実際のサービスIDやAPIキーではなく、スクリプトプロパティのキー名を登録しています。
例えば、次のコードはMICROCMS_API_KEYという名前のスクリプトプロパティを参照するために使用します。
BLOG_CONFIG.apiKeyProperty
Object.freeze()を使用することで、実行中に設定値が誤って書き換えられることを防ぎます。
スクリプトプロパティを登録する
microCMSの接続情報は、GASのスクリプトプロパティに保存します。
Apps Scriptの左側から、次の画面を開きます。
プロジェクトの設定
→ スクリプト プロパティ
→ スクリプト プロパティを追加
次の3件を登録します。
MICROCMS_SERVICE_ID
microCMSのサービスIDを登録します。
プロパティ：
MICROCMS_SERVICE_ID
値：
portfolio
MICROCMS_API_KEY
microCMSで作成した、GET権限のみを持つAPIキーを登録します。
プロパティ：
MICROCMS_API_KEY
値：
microCMSで取得したAPIキー
MICROCMS_ENDPOINT
第2節で作成したAPIのエンドポイントを登録します。
プロパティ：
MICROCMS_ENDPOINT
値：
blogs
APIキーは秘密情報です。Index.htmlやDetail.htmlには記述しません。
PropertiesServiceで設定値を取得する
スクリプトプロパティは、PropertiesServiceを使って取得します。
function getMicroCmsConfig() {
const properties =
PropertiesService.getScriptProperties();
const serviceId = String(
properties.getProperty(
BLOG_CONFIG.serviceIdProperty,
) ?? '',
).trim();
const apiKey = String(
properties.getProperty(
BLOG_CONFIG.apiKeyProperty,
) ?? '',
).trim();
const endpoint = String(
properties.getProperty(
BLOG_CONFIG.endpointProperty,
) ?? '',
).trim();
if (!serviceId || !apiKey || !endpoint) {
throw new Error(
'microCMSのスクリプトプロパティが設定されていません。',
);
}
return {
serviceId,
apiKey,
endpoint,
};
}
getProperty()を使うと、指定した名前の値を取得できます。
properties.getProperty('MICROCMS_SERVICE_ID');
値が登録されていない場合はnullが返るため、空文字へ変換してから確認しています。
?? ''
さらに、値の前後に不要な空白が入っていても問題が起きないように、trim()を使用しています。
microCMSのAPI URLを組み立てる
microCMSの記事一覧を取得するURLは、次の形式です。
<https://サービスID.microcms.io/api/v1/エンドポイント>
例えば、サービスIDがtomoya-portfolio、エンドポイントがblogsの場合は、次のURLになります。
<https://tomoya-portfolio.microcms.io/api/v1/blogs>
コードでは、スクリプトプロパティから取得した値を使ってURLを作成します。
const url = [
`https://${config.serviceId}.microcms.io`,
`/api/v1/${config.endpoint}`,
].join('');
UrlFetchApp.fetch()でAPI通信を行う
GASから外部APIへアクセスするには、UrlFetchApp.fetch()を使用します。
const response = UrlFetchApp.fetch(url, {
method: 'get',
headers: {
'X-MICROCMS-API-KEY': apiKey,
},
muteHttpExceptions: true,
});
今回使用している設定は次のとおりです。
| 設定 | 内容 |
|---|---|
method | HTTPメソッドをGETにする |
headers | microCMSのAPIキーを送信する |
muteHttpExceptions | HTTPエラー時もレスポンスを受け取る |
muteHttpExceptionsをtrueにすると、401や404などのエラーが返った場合でも、ステータスコードやレスポンス本文を確認できます。
X-MICROCMS-API-KEYヘッダーを設定する
microCMSのContent APIへアクセスするには、リクエストヘッダーへAPIキーを設定します。
headers: {
'X-MICROCMS-API-KEY': apiKey,
},
APIキーは、次の流れで利用されます。
スクリプトプロパティ
↓ PropertiesServiceで取得
Code.gs
↓ HTTPヘッダーへ設定
microCMS Content API
ブラウザから直接microCMSへアクセスしていないため、閲覧者にAPIキーは渡りません。
HTTPステータスコードを確認する
API通信後は、レスポンスのステータスコードを確認します。
const statusCode = response.getResponseCode();
一般的なステータスコードは次のとおりです。
| ステータス | 意味 |
|---|---|
200 | 取得成功 |
400 | リクエスト内容が正しくない |
401 | APIキーが正しくない |
403 | APIキーに必要な権限がない |
404 | サービスIDやエンドポイントが正しくない |
500 | サーバー側でエラーが発生した |
成功時のステータスコードは、通常200番台です。
if (statusCode < 200 || statusCode >= 300) {
console.error(response.getContentText());
throw new Error(
`microCMSへの接続に失敗しました。HTTP ${statusCode}`,
);
}
エラー時には、microCMSから返された内容を実行ログへ出力します。
API通信処理を関数としてまとめる
API通信を複数の場所から使えるように、fetchMicroCms()としてまとめます。
function fetchMicroCms(url, apiKey) {
const response = UrlFetchApp.fetch(url, {
method: 'get',
headers: {
'X-MICROCMS-API-KEY': apiKey,
},
muteHttpExceptions: true,
});
const statusCode = response.getResponseCode();
if (statusCode < 200 || statusCode >= 300) {
console.error(response.getContentText());
throw new Error(
`microCMSへの接続に失敗しました。HTTP ${statusCode}`,
);
}
return response;
}
記事一覧と記事詳細の両方で、この関数を再利用します。
JSONレスポンスを解析する
microCMSから取得したデータは、JSON形式の文字列です。
記事一覧では、次のようなデータが返されます。
{
"contents": [
{
"id": "sample-article",
"title": "受付管理アプリ",
"description": "受付状況を管理するアプリです。"
}
],
"totalCount": 1,
"offset": 0,
"limit": 100
}
GASで扱えるオブジェクトへ変換するには、JSON.parse()を使用します。
function parseJsonResponse(response) {
try {
return JSON.parse(
response.getContentText('UTF-8'),
);
} catch (error) {
console.error(error);
throw new Error(
'microCMSのレスポンスを解析できませんでした。',
);
}
}
getContentText('UTF-8')でレスポンス本文を文字列として取得し、JSON.parse()でJavaScriptのオブジェクトへ変換しています。
getArticles()で記事一覧を取得する
記事一覧は、getArticles()で取得します。
function getArticles() {
const config = getMicroCmsConfig();
const url = [
`https://${config.serviceId}.microcms.io`,
`/api/v1/${config.endpoint}`,
'?limit=100',
'&orders=-publishedDate',
'&fields=id,title,description,thumbnail,publishedDate',
].join('');
const response = fetchMicroCms(
url,
config.apiKey,
);
const parsed = parseJsonResponse(response);
if (!Array.isArray(parsed.contents)) {
throw new Error(
'microCMSの記事一覧レスポンスが正しくありません。',
);
}
return parsed.contents;
}
limit
limit=100
最大100件の記事を取得します。
orders
orders=-publishedDate
publishedDateの新しい順に並べます。
先頭の-は降順を表します。
fields
fields=id,title,description,thumbnail,publishedDate
一覧ページで必要なフィールドだけを取得します。
本文のcontentは一覧ページでは使用しないため、取得対象に含めていません。必要なデータだけを取得することで、レスポンスを小さくできます。
getArticle()で記事を1件取得する
記事詳細では、記事IDを指定して1件だけ取得します。
function getArticle(articleId) {
if (!/^[a-zA-Z0-9_-]+$/.test(articleId)) {
throw new Error(
'記事IDの形式が正しくありません。',
);
}
const config = getMicroCmsConfig();
const url = [
`https://${config.serviceId}.microcms.io`,
`/api/v1/${config.endpoint}/`,
encodeURIComponent(articleId),
].join('');
const response = fetchMicroCms(
url,
config.apiKey,
);
return parseJsonResponse(response);
}
記事IDを指定したAPI URLは、次の形式です。
<https://サービスID.microcms.io/api/v1/blogs/記事ID>
例えば、記事IDがsample-articleの場合は次のようになります。
<https://portfolio.microcms.io/api/v1/blogs/sample-article>
詳細取得では、本文を含む記事データ全体が返されます。
記事IDを検証する理由
URLから受け取る値をそのままAPI URLへ使用すると、想定していない文字列が渡される可能性があります。
そのため、記事IDに使用できる文字を制限します。
if (!/^[a-zA-Z0-9_-]+$/.test(articleId)) {
throw new Error(
'記事IDの形式が正しくありません。',
);
}
この正規表現では、次の文字だけを許可します。
- 半角英字
- 半角数字
- ハイフン
- アンダースコア
URLへ組み込む際には、さらにencodeURIComponent()を使用します。
encodeURIComponent(articleId)
testConnection()で接続を確認する
Webアプリとして公開する前に、microCMSから記事を取得できるか確認します。
function testConnection() {
const articles = getArticles();
console.log(
JSON.stringify(articles, null, 2),
);
return articles.length;
}
Apps Scriptエディタの上部でtestConnectionを選択し、実行します。
関数を選択
→ testConnection
→ 実行
初回実行時には、GASが外部サービスへアクセスするための権限確認が表示されます。
正常に接続できると、実行ログにmicroCMSの記事データが表示されます。
[
{
"id": "sample-article",
"title": "受付管理アプリ",
"description": "受付状況を管理するアプリです。",
"thumbnail": {
"url": "<https://images.microcms-assets.io/>..."
},
"publishedDate": "2026-07-13T00:00:00.000Z"
}
]
戻り値には、取得できた記事数が表示されます。
接続できない場合の確認事項
HTTP 401の場合
microCMSへの接続に失敗しました。HTTP 401
次を確認します。
MICROCMS_API_KEYが正しいか- APIキーの前後に空白が入っていないか
- 別サービスのAPIキーを登録していないか
HTTP 403の場合
次を確認します。
- APIキーにGET権限があるか
- 対象APIへのアクセスが許可されているか
HTTP 404の場合
次を確認します。
MICROCMS_SERVICE_IDが正しいかMICROCMS_ENDPOINTがblogsになっているか- microCMSにAPIが作成されているか
記事が0件の場合
次を確認します。
- microCMSにコンテンツが登録されているか
- コンテンツが下書きではなく公開済みか
- 公開日時が未来になっていないか
処理の流れ
記事一覧を取得する流れは次のとおりです。
getArticles()
↓
getMicroCmsConfig()
↓
PropertiesServiceから設定値を取得
↓
API URLを作成
↓
fetchMicroCms()
↓
UrlFetchApp.fetch()で通信
↓
HTTPステータスを確認
↓
parseJsonResponse()
↓
JSONをオブジェクトへ変換
↓
記事一覧を返す
記事詳細の場合は、getArticle(articleId)から同じ通信処理を利用します。
到達目標
この節では、Google Apps ScriptのスクリプトプロパティからmicroCMSの接続情報を取得し、Content APIを呼び出せることを目標とします。
また、getArticles()で記事一覧、getArticle()で記事詳細を取得し、testConnection()で接続状態を確認できるようになります。
次ページ