Google フォームとProtoPediaのイベントページを連携してみよう！

# はじめに

ハッカソンやコンテストの作品登録に [Google フォーム](https://www.google.com/forms/about/)を使うと容易に作成、送信が出来ます。今回は、[Google Apps Script](https://developers.google.com/apps-script/)を使って、その回答を素早く[ProtoPedia](https://protopedia.net/)に登録して行きます。

# 1. 事前に必要なもの
* Googleアカウント
* ProtoPediaアカウント ※イベントを編集するための権限が必要になります。

# 2. 開発の流れ
* ProtoPediaのイベントページ作成
* Googleフォームの作成
* Google Apps Scriptによるプログラムの作成
以上の手順で開発して行きます。

# 3. ProtoPediaのイベントページ作成
※イベントページの作成方法は[こちら](https://protopedia.gitbook.io/helpcenter/event)から

# 4. Googleフォームの作成
Google アカウントにログイン後、右トップメニューのGoogleアプリアイコンより、Googleフォームを選択し（または、https://docs.google.com/forms/ から直接ログイン）、「新しいフォームを作成」の「＋」サインをクリックします。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20464/105b065b-64df-713d-32eb-20af261f6d3b.png)

Googleフォームの作成画面が表示されるので、フォームのタイトル、フォームの詳細をして行きます。
この時必ず、「作品番号」という項目を記述式で、作成してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20464/e4d009d8-e2c9-40a2-c2db-33622b4f145f.png)

回答は、以下のように「必須」を選択します。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20464/6eeb80a4-9eb2-62a1-bbc9-563005cbf826.png)

「作品番号」の項目名称から、内容を取得してPtotoPediaに送信しますので、「作品番号」の名前は必ず同じにしてください。
その他にも必要に項目がある場合は項目を追加して、Googleフォームの完成させます。

# 5. Google Apps Scriptによるプログラムの作成
上記で作成したGoogleフォームを再び開き、「その他」メニューから「スクリプトエディタ」をクリックします。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20464/ec9b41a0-251e-c137-46ec-2c0c0c4271b8.png)

以下の画面が開くので、プロジェクト名、ファイル名を入力します。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20464/b576b74e-d546-2a22-e7ee-fa6aba5ac99d.png)

下記のソースコードをコードエディタにコピペします。
```jsx
const sendToProtopedia = (e) => {
  'use strict';
  Logger.log('Protopedia Send Start!!!');
  const eventId = 0;// イベントID
  const token = "xxxxxxxxxx";// APIトークン
  const prototypeId = getFormResponse(e);
  sendHttpPost(eventId, prototypeId, token);
  Logger.log('Protopedia Send End!!!');
}

const sendHttpPost = (eventId, prototypeId, token) => {
  'use strict';
  const params = 
  { 
    eventId: eventId,
    prototypeId: prototypeId,
    token: token,
    delFlg: 0
  };
  const qs = queryString(params);
  Logger.log(qs);
  const options =
  {
    method: "post",
    payload: qs
  };

  UrlFetchApp.fetch("https://protopedia.net/api/eventRelation", options);// 本番環境
  // UrlFetchApp.fetch("https://protopedia.livlog.xyz/api/eventRelation", options);// テスト環境
}

const getFormResponse = (e) => {
  'use strict';
  const itemResponses = e.response.getItemResponses();// アンケートの回答を取得
  let prototypeId = null;
  for (let i = 0; i < itemResponses.length; i++) {
    const itemResponse = itemResponses[i];
    switch (itemResponse.getItem().getTitle()) {
      case '作品番号':
        prototypeId = itemResponse.getResponse();// 作品番号を取得
        break;
    }
  }
  return prototypeId;
}

const queryString = (obj, encode) => {
  // :param encode use encodeURIComponent defalut:false
  return Object.keys(obj).map(function(key) {
    if (encode) {
      return key + '=' + encodeURIComponent(obj[key]);
    }else {
      return key + '=' + obj[key];
    }
  }).join('&');
}
```
以下の部分の「**イベントID**」と「**APIトークン**」はPtotoPediaのイベント編集ページから取得します。
```jsx
const sendToProtopedia = (e) => {
  'use strict';
  Logger.log('Protopedia Send Start!!!');
  const eventId = 0;// イベントID
  const token = "xxxxxxxxxx";// APIトークン
  const prototypeId = getFormResponse(e);
  sendHttpPost(eventId, prototypeId, token);
  Logger.log('Protopedia Send End!!!');
}
```
イベントIDとAPIトークンはこちらから確認できます。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20464/4c64ef6f-f450-e5b6-dcb0-cbcd13b9a7b8.png)

コーディング終了後、保存します。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20464/5dca606e-7072-94b4-cee9-7140b9a2519f.png)

トリガーの設定画面を表示し、「**トリガーを追加**」からトリガーを追加します。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20464/4b61980b-532d-27b0-7def-d77a8b363216.png)

イベント発生時に実行する関数、トリガーとなるイベントを設定し、保存します。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20464/fb0f3758-69c3-7a5c-8d90-8912ec7e5bbc.png)

# 6. 動作の確認
作成したGoogle フォームの右上の送信ボタンをクリックし、「フォームを送信」画面にて送信先のメールアドレス、件名、メッセージを入力し、送信ボタンでフォームを送信します。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20464/f401e4c3-142c-e572-1340-a1186f04a55d.png)

メールに届いたGoogleフォームへのリンクより、回答を入力し送信します。![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20464/bb93ecf1-9f1a-aa22-891e-b4cf08bfca69.png)

送信後、回答したデータがProtoPediaのイベントページに追加されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20464/6511a557-37b4-91ca-ea4a-baf4c01cc6da.png)

# 7. まとめ
Googleフォームを使うとのコンテストやハッカソンの応募フォームを簡単に作成できる上、応募と同時にProtoPediaのイベントページに作品追加が同時に行えるようになります。
コンテストのサイトにフォームを埋め込む事も可能ですので、作品の応募促進を図ることができるのではないでしょうか。