SmartStageのGoogleForms連携方法をご案内します。
目次
GoogleForms連携とは
GoogleForms連携とは、GoogleFormsにタスクの登録内容と同じものを準備しておくことで、
ユーザーが「SmartStage」にログインすることなく問い合わせが行える機能です。
事前準備
・API トークンの発行
「SmartStage」 WebAPIを呼び出すために、認証用の 「API トークン」の発行が必要となります。
「API トークン」の発行については、以下の記事を参照してください。
・フォームの追加
googleアカウントにログインし、右上のベントウメニューをクリックし、フォームを開いて下さい。
「空白」をクリックしてください。
下記のような画面に移行したことを確認して下さい。画像赤線部をクリックし、フォームタイトル、コンポーネントを追加します。
「メールアドレス」、「発行者」、「発行日」、「優先度」など必要な画面項目を以下画像のようにフォームに追加してください。
右上ハンバーガメニューから「スクリプトエディタ」を起動してください。
以下画像の画面に移行したことを確認してください。
GASの名称を「無題のプロジェクト」から「お問合わせ新規登録フォーム[SmartStage]」に変更してください。「無題のプロジェクト」をクリック>「プロジェクトタイトル」を「お問合わせ新規登録フォーム[SmartStage]」に変更>名前を変更 の順にクリックしてください。
スクリプトプロパティの設定
「APIトークン」は秘匿性の高い情報のため、スクリプトプロパティで管理します。
スクリプトプロパティに「APIトークン」を追加します。
画面左のプロジェクトの設定アイコンをクリックし、「appsscript.json」マニフェストファイルをエディタで表示するにチェックを入れます。そして「スクリプトプロパティを追加」をクリックします。
プロパティに「SS_API_TOKEN」、値にAPI トークンの発行で発行した値を設定し、
「スクリプトプロパティを保存」 をクリックし完了です。
スクリプトの設定
エディタに移行してください。
「コード.gs」の名称を変更してください。「ハンバーガメニュー」>「名前の変更」をクリックして下さい。
「config」と入力してください。(.gsは自動で設定されます。)
ファイルを追加します。「+ボタン」をクリックしてください。
「スクリプト」をクリックしてください。
「main」と入力してください。(.gsは自動で設定されます。)
「appsscript.json」をクリックし、内容をクリアにしてから、以下コードを画像緑枠部分「appsscript.json」に貼り付けてください。
{
"timeZone": "Asia/Tokyo",
"dependencies": {
"enabledAdvancedServices": []
},
"exceptionLogging": "STACKDRIVER",
"oauthScopes": [
"https://www.googleapis.com/auth/drive.readonly",
"https://www.googleapis.com/auth/drive",
"https://www.googleapis.com/auth/forms.currentonly",
"https://www.googleapis.com/auth/forms",
"https://www.googleapis.com/auth/script.external_request"
],
"runtimeVersion": "V8"
}
「config.gs」をクリックし、内容をクリアにしてから、以下コードを画像緑枠部分「config.gs」に貼り付けてください。
const SS_API_BASE_URL_EXTERNAL = "https://api.smart-stage.io"; // リクエスト送信先URL 外部API
const SS_API_BASE_URL_INTERNAL = "https://app.smart-stage.io/apicore"; // リクエスト送信先URL 内部API
const SS_WORKSPACE_ID = "6555bf2a70c532f3d45744be"; // ワークスペースID
const SS_DATASTORE_ID = "6555bf36ea483285f2e5a76d"; // データストアID プロセス「サービスリクエスト」
const SS_ACTION_ID_CREATE = "6555bf38ea483285f2e5a800"; // アクションID「新規作成」
const SS_ACTION_ID_UPDATE = "6555bf38ea483285f2e5a7fc"; // アクションID「更新」
const SS_FIELD_ID_CONTENTS_ATTACHMENT_FILE = "6555bf36ea483285f2e5a787"; // フィールドID「内容（添付ファイル）」
const SS_FIELD_NAME_TITLE = "タイトル"; // フィールド名「タイトル」
const SS_FIELD_NAME_CONTENTS_ATTACHMENT_FILE = "内容（添付ファイル）"; // フィールド名「内容（添付ファイル）」
const SS_ITEM_IDS = {
"サービス名": {
"PORTAL": "6555bf2baa64f0003a276957",
"給与アプリ": "6555bf2baa64f0003a276956",
"経費アプリ": "6555bf2baa64f0003a276955",
},
"ハードウェア": {
"VMware Workstation Player": "6555bf2eaa64f0003a27695c",
"Sun N1 Service Provisioning System": "6555bf2eaa64f0003a27695b",
"Surface Pro 3": "6555bf2eaa64f0003a27695a",
"dynabook U63/H": "6555bf2eaa64f0003a276959",
"dynabook U63/M": "6555bf2eaa64f0003a276958",
},
"ソフトウェア": {
"Microsoft Hyper-V": "6555bf32aa64f0003a276966",
"VMware ESXi": "6555bf32aa64f0003a276965",
"マカフイー": "6555bf32aa64f0003a276964",
"SalesForce": "6555bf32aa64f0003a276963",
"Microsoft Windows 10": "6555bf32aa64f0003a276962",
},
"ネットワーク": {
"dsra01-100001-1": "6555bf33aa64f0003a27696a",
"dsra01-000003-1": "6555bf33aa64f0003a276969",
"dsra01-000002-1": "6555bf33aa64f0003a276968",
"dsra01-000001-1": "6555bf33aa64f0003a276967",
}
};
「main.gs」をクリックし、内容をクリアにしてから、以下コードを画像緑枠部分「main.gs」に貼り付けてください。
/**
* スクリプトプロパティからAPIトークンを取得
* @return {string} APIトークン
*/
const getApiToken = () = {
const scriptProperties = PropertiesService.getScriptProperties();
return scriptProperties.getProperty("SS_API_TOKEN");
};
/**
* フォームの情報からリクエストデータを作成
* @param {object} e イベントオブジェクト
* @param {string} workspaceId ワークスペースID
* @return {object} リクエストデータ
*/
const buildCreateRequest = (e, workspaceId) = {
const payload = {
workspaceId: workspaceId,
fields: {
},
};
const questions = e.getGradableItemResponses();
for (const question of questions) {
const title = question.getItem().getTitle();
const answer = question.getResponse();
if (!answer) continue;
switch (title) {
case "対応完了希望日":
case "発行日":
const date = new Date(answer);
payload.fields[title] = Utilities.formatDate(
date,
"Asia/Tokyo",
"yyyy-MM-dd'T'HH:mm:ss'+09:00'"
);
break;
case "発行者":
case "ユーザー":
payload.fields[title] = [answer];
break;
case "サービス名":
case "ハードウェア":
case "ソフトウェア":
case "ネットワーク":
payload.fields[title] = SS_ITEM_IDS[title][answer];
break;
case "内容（添付ファイル）":
break;
default:
payload.fields[title] = answer;
}
}
return payload;
};
/**
* フォームから添付ファイルを取得
* @param {object} e イベントオブジェクト
* @returns {object} 添付ファイル
*/
const getAttachmentFile = (e) = {
const questions = e.getGradableItemResponses();
for (const question of questions) {
const title = question.getItem().getTitle();
const answer = question.getResponse();
if (title == "内容（添付ファイル）") {
const filename = encodeURIComponent(DriveApp.getFileById(answer).getName());
const file = DriveApp.getFileById(answer).getBlob();
return { filename, file };
}
}
}
/**
* タスク作成リクエストを送信する
* @param {string} apiToken APIトークン
* @param {string} datastoreId データストアID
* @param {string} actionId アクションID
* @param {object} payload ペイロード
* @returns {object} APIレスポンス
*/
const createRequest = async (apiToken, datastoreId, actionId, payload) = {
const createOptions = {
method: "post",
headers: {
Authorization: `Bearer ${apiToken}`,
"Content-Type": "application/json",
},
payload: JSON.stringify(payload),
muteHttpExceptions: false,
};
Logger.info(payload);
try {
// POSTリクエスト実行(createAPI)
const res = await UrlFetchApp.fetch(
`${SS_API_BASE_URL_EXTERNAL}/datastores/${datastoreId}/actions/${actionId}/create?name=true&email=true`,
createOptions
);
Logger.log(`タスク作成しました。res: ${res}`);
return JSON.parse(res.getContentText());
} catch (e) {
Logger.log(`タスク作成に失敗しました。エラー情報: ${e}`);
}
};
/**
* 添付ファイル登録リクエストを送信する
* @param {string} apiToken APIトークン
* @param {string} itemId アイテムID
* @param {string} fieldId フィールドID
* @param {object} file ファイル
* @returns {object} APIレスポンス
*/
const fileAttachRequest = async (apiToken, itemId, fieldId, file) = {
const attachOptions = {
method: "post",
headers: {
Authorization: `Bearer ${apiToken}`,
},
payload: file,
muteHttpExceptions: false,
};
Logger.info(file);
try {
// POSTリクエスト実行(fileAttachmentAPI)
const res = await UrlFetchApp.fetch(
`${SS_API_BASE_URL_INTERNAL}/items/${itemId}/fields/${fieldId}/attachments`,
attachOptions
);
Logger.log(`ファイル添付しました。res: ${res}`);
return JSON.parse(res.getContentText());
} catch (e) {
Logger.log(`ファイル添付に失敗しました。エラー情報: ${e}`);
}
};
/**
* タスク更新リクエストを送信する
* @param {string} apiToken APIトークン
* @param {string} workspaceId ワークスペースID
* @param {string} datastoreId データストアID
* @param {string} itemId アイテムID
* @param {string} actionId アクションID
* @param {object} fieldRequired 必須項目
* @param {object} fieldAttachment 添付ファイル
*/
const updateRequest = async (
apiToken,
workspaceId,
datastoreId,
itemId,
actionId,
fieldRequired,
fieldAttachment
) = {
const payload = {
datastoreId,
workspaceId,
fields: {
...fieldRequired,
...fieldAttachment,
},
};
const updateOptions = {
method: "post",
headers: {
Authorization: `Bearer ${apiToken}`,
"Content-Type": "application/json",
},
payload: JSON.stringify(payload),
muteHttpExceptions: false,
};
Logger.info(payload);
try {
// POSTリクエスト実行(updateAPI)
await UrlFetchApp.fetch(
`${SS_API_BASE_URL_EXTERNAL}/items/${itemId}/actions/${actionId}/update?name=true`,
updateOptions
);
Logger.log("タスク更新しました。");
} catch (e) {
Logger.log(`タスク更新に失敗しました。エラー情報: ${e}`);
}
};
/**
* フォーム送信時にタスク作成を行う
* @param {object} e イベントオブジェクト
*/
const onSubmit = async (e) = {
const thisResponse =
(e !== undefined) ? e.response
: FormApp.getActiveForm().getResponses()[2]; // NOTE: フォームの回答がスタックに積まれているのでデバッグ時に何度も入力しなくて済みます
const apiToken = getApiToken();
const createPayload = buildCreateRequest(thisResponse, SS_WORKSPACE_ID);
const attachmentFile = getAttachmentFile(thisResponse);
const resCreate = await createRequest(apiToken, SS_DATASTORE_ID, SS_ACTION_ID_CREATE, createPayload);
if (!resCreate) return;
if (!attachmentFile) return;
const resAttach = await fileAttachRequest(
apiToken,
resCreate.itemId,
SS_FIELD_ID_CONTENTS_ATTACHMENT_FILE,
attachmentFile);
if (!resAttach) return;
const fieldRequired = {[SS_FIELD_NAME_TITLE]: createPayload.fields[SS_FIELD_NAME_TITLE]};
const fieldAttachment = {[SS_FIELD_NAME_CONTENTS_ATTACHMENT_FILE]: [resAttach.attachmentId]};
await updateRequest(
apiToken,
SS_WORKSPACE_ID,
SS_DATASTORE_ID,
resCreate.itemId,
SS_ACTION_ID_UPDATE,
fieldRequired,
fieldAttachment,
);
};
トリガーの設定
「トリガー」をクリックしてください。
「トリガーを追加」をクリックしてください。
トリガーを以下の内容に設定し、「保存」をクリックしてください。
権限を付与するか確認されるため、アカウントを選択してください。
詳細をクリックします。
「（安全ではないページ）に移動」をクリックします。
「許可」をクリックします。
トリガーが登録されました。
動作確認
実際にGoogleFormsからタスクが登録されるか確認しましょう。
・作成したフォームの「送信」をクリックします。
・リンクアイコンをクリックします。
・「コピー」をクリックします。
・コピーしたURLをブラウザのアドレスバーに貼り付けると、フォームに回答ができます。回答を入力し、画面下部の「送信」をクリックします。
・回答した内容がSmartStgaeのサービスリクエストに新規登録されていることを確認してください。
コメント
0件のコメント
サインインしてコメントを残してください。