【覚書】GASからbit.lyのAPIを叩いてみた話

だいぶテクニカルな話です。

今回は、自分のための覚え書き的な要素が強いです。

 

予約管理から参加者名簿作成までのほとんどを自動化する!

 

これ、日々改善を目指しています。

 

流れとしては

  1. ゲストが仮予約フォームから予約
  2. 既に確定している予約情報をワンクリックで表示し、受入可否を判断。OKなら詳細情報入力フォームのURLを含めたメールテンプレートを表示
  3. ゲストが詳細情報入力フォームに記入
  4. 自動で予約カレンダーや現場運営表に反映

ってな感じです。

 

今回のお題は2.の詳細情報入力フォームのURLに絡むものです。

 

予約フォームでは最低限の情報、詳細情報フォームでダイビングスキルやレンタル器材の情報、と考えていたのですが、予約の受入可否判断の際にダイビングスキルを知っておきたいというニーズがあることがわかりました。

確かに、3桁ダイバーばかりで予約が入っている日に、初ファンの人1人だけでは全員がかわいそうですもんね…

 

ということで、予約フォームでもダイバーとしての情報を少しは聞く必要が出てきました。

ただ、詳細情報→運営表、はあくまで詳細情報フォームに入力された情報から自動で読み取ります。

予約フォームまで遡って、というのは、解決策が無くも無いのですが、かなり複雑になってしまい、ゲストが入力する手間を増やす結果となってしまうことがわかりました。

ということで妥協策として、詳細情報フォームに、予約フォームで入力してもらった情報を予め入力した状態で、フォームを提示すれば良いのでは、ということになりました。

 

Googleフォームで予め情報を入力しておく方法は以下にご説明した通りです。

Googleフォームに情報を事前入力する

 

ただこれ、結果として、URLが物凄く長くなってしまうんですね。

 

物凄く長いURLがメールに載ってたら…怪しいですよね。

世の中には便利なサービスがあり、長いURLを短縮してくれるサービスがあります。

 

今回は、GoogleAppsScript(GAS)内で短縮URLにしてしまおうという算段です。

 

Google謹製のgoo.glというサービスがあるので、きっとGASとも相性が良いんだろうなと思いきや…

まさかの2019年3月30日でサービス終了。

 

仕方が無いので、もうひとつの短縮URLサービスであるbit.lyを使うことに。

幸いなことにAPI(外部のプログラムからそのサービスの仕組みを使うための仕組み)がある様なので、挑戦してみました。

 

そして、得意のコピペ作戦で上手くいかなかったので、同じように困っている方のために、残しておこうと思います。

 

bit.lyへの登録

まずはbit.lyのアカウントを作成します。

こちらのURLからです。

https://bitly.com/

単発でURLを短縮したいだけであれば、中央のボックスに短縮したいURLを入力し、オレンジ色の『SHORTEN』というボタンを押すだけで利用できます。

今回はAPIを利用するので、右上の『SIGN UP』からユーザー登録を行います。

 

こちらの画面になるので、SNSアカウントか、直接メールアドレス等の情報を入力します。

 

僕の場合は、facebookアカウントで登録しました。

これが1つの混乱を招くのですが、それは後ほど。

 

すると、こんな画面になります。

ログイン後の画面ですね。

ぼかしてある部分は、初回ログイン時には何も無いはずです(既に利用しているAPIの情報なので)

 

時を同じくして、よくあるメールアドレスの認証、というメールが(英語ですが)来ているはずなので、認証ボタンを押しておきます。

 

これでユーザー登録が完了しました。

 

APIキーの発行

次はAPIキーの発行です。

右上のハンバーガーメニューから

 

Settingsを選び

 

Advanced Settings

 

赤丸で囲ったOAuth

 

Generic Access Token

 

と、進んでいきます。

するとパスワードの入力を求められるのですが…

 

facebookアカウントでユーザー登録したので、パスワードなんて設定してないよ…

と、困ったことになりました。

 

ひとつ前のメニューでChange Passwordというのがあるので見てみると

 

改めて先ほどの

 

当たり前と言えば当たり前ですが、現在のパスワードの入力を求められます。

だから、パスワードなんて設定してないんだって。

 

あれこれやってみた挙句、試しに現在のパスワードの部分を空欄で、希望のパスワードを入力してみると…

通りました(笑)

パスワードの設定はこれで良いようです。

 

これ、色々とググっても出て来なかった情報なので、困っていた方もいるかもしれませんね。

 

 

改めて先ほどのGeneric Access Tokenからパスワードを入力すると…

 

 

見事、APIキー(Access Token)が発行されました。

コピーしておきましょう。

 

実装

こちらのサイトを参考にさせて頂き、GASからbit.lyのAPIを叩いてみました。

短縮URL を goo.gl から bit.ly へ乗り換えてみた (Google Apps Script)

const OAUTH_TOKEN = '[OAUTH_TOKEN]';

function createBitlyUrl(url) {
var endpoint = 'https://api-ssl.bitly.com/v3/shorten?access_token=' + OAUTH_TOKEN + '&longUrl=' + url;
var result = UrlFetchApp.fetch(endpoint, {//
method: "GET",
contentType: "application/json;"
});
var json = JSON.parse(result.getContentText('utf-8'));
return json.data.url;
}

動きませんでした。

エラー出ました。

 

OAUTH_TOKENを

function createBitlyUrl(url) {
var endpoint =
var OAUTH_TOKEN =

と、関数内に入れてみました。

 

何やらエラーメッセージが変わりったのですが、それでもエラー。

ここであることに気づきます。

var endpoint = 'https://api-ssl.bitly.com/v3/shorten?access_token=' + OAUTH_TOKEN + '&longUrl=' + url;

ここです。

 

今回は、変数url内の文字列にも?や&といったパラメーター付与に必要な記号が入っています。

リクエストを送るURLにもパラメーター。

これ、悪さをしそうな気しかしません。

ということで色々と調べてみると、bit.lyのAPIにパラメーター付きURLを渡すときは、エンコードする必要があるのだとか。

こちらのサイトを参考にさせて頂きました。

Bitly APIとJavaScriptでAJAXな短縮URL生成ツールを作成

ということで、この関数に元々のURLを渡す前にencodeURIComponent()を利用してエンコードしてから渡してみると…

 

無事成功!!!

 

ということで、今回ググってコピペ、でつまづいた点は以下3つです。

  • facebookログインでユーザー登録した場合、現在のパスワード欄は空白のままでパスワードを設定する
  • OAuth Tokenを格納する変数はグローバル変数ではなく関数内に
  • APIに投げるURLにパラメーターが存在する場合にはエンコードしてから渡す

 

参考までに、全部載せておきます。

//呼び出す関数内
var longurl = "https://docs.google.com/forms/d/e/'フォームのID'/viewform?usp=pp_url&entry.以下情報事前記入の為のパラメーターずらずらと

longurl = encodeURIComponent(longurl);
var url = createBitlyUrl(longurl);

function createBitlyUrl(url) {
var OAUTH_TOKEN = 'APIキー';
var endpoint = 'https://api-ssl.bitly.com/v3/shorten?access_token=' + OAUTH_TOKEN + '&longUrl=' + url;
var result = UrlFetchApp.fetch(endpoint, {//
method: "GET",
contentType: "application/json;"
});
var json = JSON.parse(result.getContentText('utf-8'));
return json.data.url;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です