SuperSaaS-FAN
〜 SuperSaaSの使い方 〜

Loading...

PipedreamでSuperSaaSをトリガーとした他サービスなどへのアクション連携設定を試してみました

PipedreamはSuperSaaSでの更新をトリガーに、他サービスを連携するなどのアクションが設定できるサービス

SuperSaaSの公式GithubにPipedream用のコンポーネントが公開されたり、追ってSuperSaaS公式ブログでその紹介や使い方が案内されるなど、SuperSaaSでのテコ入れが感じられるPipedream。

Pipedreamサービスは日本語でのソースがなかなか見当たらず、サイトもちょっと見ただけでは内容や用法がイマイチよくわからないのですが…
およそウェブフックなどのトリガーで他サービスを簡単連携してアクションできるIntegromatZapierとおなじようなのサービスで、定型のトリガー&アクションの組み合わせだけでなく、NodeJS(javascript)で構築したアクションが可能であることが特色のようです。

正直まだよくわかっていません。
ともあれPipedreamにも無料版があるようですので、実際に試しながら具合を確かめてみましょう☆

Pipedreamのアカウント登録をしてみよう!

Pipedreamを利用するためにはアカウント登録が必要です。
制限はありますが無料版が用意されていて試用には十分。
何はともあれ無料版のアカウントを登録してみます。

サイトのあちこちにアカウント登録用のリンクがありますので、適当に「for Free」とあるボタンをクリックすると…………ログイン用の画面に!?

えっ? いや、アカウント登録したいんだけど…
そういうものなのか何か間違ったか、気を取り直して一番下にある「Sign up」リンクを改めてクリック。

無事アカウント登録画面になりました!

メールアドレスの他に、GoogleアカウントやGithubアカウントを使ってアカウント登録もできるようです。

どのようなサービスであれ、試用の時は「捨てアド(フリーメールアドレスやそれを使って取得したGoogleアカウントとか)」を用いたほうが安心かもですね。

今回はメールアドレスを指定する方法で「SIGN UP」開始。
続いてPipedreamでのユーザー名設定画面になりました。
SIGN UP時に用いたメールアドレスアカウント情報からデフォルトで提示されます。

特にこだわりもなかったので、提示されているユーザー名のまま「CONTNUE」クリックしました。

続いてパーソナルな情報の入力や、何かしらアクティベートやイニシャライズなどが続くかと思いましたが……登録用の入力はそれだけだったようで、いきなりチュートリアルの案内が表示されました。

さぁ使え!そら使え!今使え!と言わんばかりの唐突さに苦笑していると、登録に使ったメールアドレス宛に着信があり、見ればPipedreamアカウントのベリファイを促すメールが届いていました。

もちろんとばかりに送られたベリファイURLにアクセスすると、アカウントメニューにある「Settings」画面が表示されました。

ベリファイURLにアクセスしたけど完了などの案内もないし、よくあるウェルカムメールも届かないけど、これで登録完了かな?

よく言えばシンプルでスッキリしていますが、ちょっと言葉足らずで不親切に感じてしまうのは日本風のサービスに慣れてしまっているせいかも。。。

ともあれ、Pipedreamの利用登録(アカウント登録)には、メールアドレスなどの最小情報のみで、そのほかの個人情報やクレカなど支払い情報の登録もいらないので、およそ不安なく簡単に登録して無料版の利用が開始できることがわかりました!

Pipedreamを使ってSuperSaaSを用いた連携を試してみよう!

さて、いざ使ってみようにも、ほんとに何をどうすればいいのかわからない。
UIを眺めてみてもピンとこないので、ここはSuperSaaS公式ブログのGui Práさんの記事を参考にしながら手探りしてみます。

どうやら「ワークフロー」というのが連携処理(トリガー+アクション)設定のことのようですね。
メニューにある「workflows」をクリックすると、ワークフローの管理画面になりました。

まだ何も設定してないので空っぽのようで、アカウント登録時に無視したチュートリアルの案内のみが表示されていますw

とりあえず、新規ワークフローを作ってみようと右上にある目立つ緑のボタン「NEW WORKFLOW」をクリックすると、ワークフローの新規作成画面になりました。

えっと…とりあえずSuperSaaS公式Githubでも公開されているコンポーネント(トリガー)で試したいから「Create Event Source」かな?

イベントソースを選択

アプリケーション選択となったので、「SuperSaaS」を選択。

SuperSaaSを選択

SuperSaaSを選択すると、Select a Sourceで公開されているコンポーネントを選択できるようになりました。

ユーザー情報の更新をトリガーに

3つのトリガーが選択できますが、ここではテスト確認しやすそうなユーザー登録・編集をトリガーとする「New or changed users」を選択して試用してみます。

ソースを指定すると、続いて指定SuperSaaSアカウントの認証設定となります。
認証の設定は「Connect SuperSaaS」ボタンからですね。

SuperSaaSアカウントの指定

「Connect SuperSaaS」ボタンをクリックするとトリガーとして指定するSuperSaaSアカウントの認証情報の入力が求められました。

SuperSaaSアカウント情報の入力

「account」はSuperSaaSアカウント名、「api_key」はそのアカウントのAPIキーですね。
「Nickname」はこの認証情報設定の名前のようで、任意に設定できますし、省略するとプレースホルダーとして表示されている俗称で自動設定されます。
一度設定したら、2回目以降はこのニックネームでこの認証設定を呼び出せるので再設定の手間がいりません。

それぞれ情報を入力して「SAVE」すると、内容に問題がなければSuperSaaS欄に設定した認証情報がニックネームで表示されます。

SuperSaaSアカウントの設定完了

ちなみに、SuperSaaS欄のニックネームの横にある赤文字の「unlink」をクリックすると、認証情報の設定を解除して再設定ができます。

最後の「Name」の設定は、このワークフロー名です。
とりあえず今回は「TEST」と命名して、青い大きな「Create source」ボタンをクリックすると、数秒の反映待ちの後、無事登録されました。

この「Name」の設定では日本語全角が使えないのか、使用するとエラーが出ました(汗

トリガーとして設定完了

Listening for webhook requests…」とあるので、待機状態(アイドル中)にあるものと思います。
試しに、この状態のままSuperSaaS側でユーザー登録をしてみましたら、ちゃんと更新をフックできているとが確認できました。

更新を取得できてる!

さて、トリガーのフックが確認できたので、次はアクションの設定です。
トリガー設定の下に伸びてる四角に「+」ボタンを押すと、ずらりとアクション候補が表示されました。

アクション先の設定

とりあえず、挙動が確認しやすそうなアクション先としてGoogleスプレッドシートの「Add single row to sheet」を選択しました。
SuperSaaSでユーザー登録や編集などで更新があった場合、「その内容をスプレッドシートに1行情報として順次追加していく」イメージです。

Googleスプレッドシートへの認証

まずは「auth」の設定で、アクション先とするスプレッドシートの認証設定を「CONNECT GOOGLE SHEETS」ボタンから行います。

クリックするとGoogleアカウントの選択と権限許可の承認が求められます。
認可が求められる権限はスプレッドシートへのアクセス(表示と編集)です。

権限の許可

灰色の非アクティブの権限内容がちょっと気になりますが、そもそもの認証に必要な暗黙的な基本情報のようで、Pipedream以外のサービスでもGoogleサービスと連携するときにはよく権限許諾が求められる内容です。
(もちろん、だからといってみだりに許可して良い権限ではないので、大事なアカウントの場合は信用できるサービスだけ許可するようにしましょう)

これらの承認設定は初回のみで、2回目以降は以前に認可登録したGoogleアカウントの選択する形で権限を流用し、この手続きを省略できます。

問題なく認証設定されると、GoogleSheetsの横にアカウント名が表示されますので、次はスプレッドシートへのアクション内容「Params」の設定を行います。

アクション設定

最初の「Columns」は、シートの「列(カラム)」にどの情報を出力するかの指定です。
公式ブログでは構造化をオフにして内容情報(body)を一括設定していましたが、同じように設定してもエラーが出てうまく動かなかったので、下の画像のように構造化はオンのままで、各セルへ出力する設定としました。

カラム設定

指定するための枠は最初一つだけですが、右横の丸に「+」アイコンをクリックすることで増やせます。

ちなみに、シートへの情報出力は、上の枠から順に、A列、B列、C列…へ出力といった仕組みで、上の画像の設定はA列に「name(ユーザー名)」、B列に「full_name(氏名)」、C列に「email(メールアドレス)」情報を出力する設定にした状態です。

送られてくる情報構造「event」の中でも「body」に格納されている情報のみでテストしていますが、「event」には「meta」情報もあり、その中の「summary」にはその情報が新規なのか更新なのか、削除なのかといった処理の種類も格納されています。

次の「Spreadsheet ID」設定は、アクション先のスプレッドシートのIDを指定します。
これは単純にスプレッドシートのURLのID部分(docs.google.com/spreadsheets/d/****この部分******/edit#gid=0)を抜粋して設定します。

スプレッドシートIDの指定

最後の「Sheet Name」設定は、アクション先をどのシートとするかをシート名で指定します。

シートの指定

設定の全てを埋めたら「SAVE」で設定を保存して、「DEPLOY」で稼働開始!
さて、うまく動くかな?

テスト開始

動作確認のためにSuperSaaSでユーザーを新規登録してみると…

ユーザーの新規追加テスト

ほぼリアルタイムで、スプレッドシートに情報が反映しました!

連携成功

ごく簡単な動作確認テストでしたが、ちょいちょい躓きながらもなんとか挙動を確認することができました!

PipedreamでSuperSaaSのwebhookを受け取っての連携を試してみよう!

現状でPipedreamで用いることのできるSuperSaaSのコンポーネント(トリガー)は3つですが、SuperSaaSが提供しているwebhook(トリガー)はもっとたくさん提供されています。

今度はPipedreamに登録されているSuperSaaSのコンポーネント(トリガー)を使わずに、SuperSaaSのwebhook(トリガー)を用いてPipedreamを介した連携の設定も試してみようと思います。

後述していますが、この方法はSuperSaaSの無料版アカウントでは利用できない機能を用います。
有料版か、試用版(新規登録したての無料版)のアカウントでのみ可能な方法です。

ではさっそく設定をしてみましょう!
新規ワークフロー作成で、トリガーの種類を「HTTP/Webhook」を選択します。

ワークフローの設定

すると、webhook受け入れ用のURLが生成されます。

トリガー受け入れURL

このURLはあくまで受け入れ用のURLなので、ここにSuperSaaSのwebhookを発信する必要があります。

SuperSaaSのwenbookの発信設定はSuperSaaS側で行います。
その設定はwebhookカスタマイズ画面から行いますが、SuperSaaSの管理メニューにリンクはありませんので、直接URLにアクセスしてください。
SuperSaaSのwebhookカスタマイズURL:https://www.supersaas.jp/hooks

webhookカスタマイズ画面

この機能は有料版の機能ですので、試用期限が切れている無料版の場合など利用権利がない場合はアクセスできません。

もしかしたら管理画面のどこかにwebhookカスタマイズ画面へのリンクがあるのかもしれませんが覚えがありません。
公式サイトのデベロッパー系のページには案内とリンクがあったりするんですけどね。

今回はテストとして、PipedreamのSuperSaaSコンポーネント(トリガー)には無い、「新規フォーム」をトリガーとして用いてみます。
ちょっと表現がわかりづらいと思いますが、「新規フォーム」とは、「フォームから新たな情報が登録された」がトリガーです。フォーム自体の新規登録がトリガーとなっているとかではありません。

今回は、事前に作成していたフォーム「testform」で情報が登録されることをトリガーとして、Pipedreamで作成した受け入れURL(TARGET URL)へ送る設定としてみます。

webhookの設定

webhook作成ボタンで、webhookが作成されて稼働を開始です。

webhookの詳細

これでSuperSaaS側でのwebhook(トリガー)設定は完了です。
続いてPipedreamに戻って、このトリガーに対するアクションを設定します。

今回も先ほどと同じ様に、Googleスプレッドシートに出力する設定にしてみました。

アクションの設定

詳細は省きますが…
SuperSaaSのフォーム「testform」で情報が登録されるたびに、指定したスプレッドシートのシート「TEST」に、その登録されたフォームの入力項目の1つ目をA列に、2つ目をB列に行の情報として順次出力するといった設定です。

何はともあれ、設定を「SAVE」して「DEPLOY」!
実際にフォームに入力して試してみましょう。

webhookに設定したフォーム(testform)で情報を登録してみます。

テスト用のフォーム

送信した内容が見事にスプレッドシートに出力されました!

スプレッドシートに出力

この方法ならPipedreamに登録されているトリガー以外にも、SuperSaaSで提供されているwebhookをトリガーとしてPipedreamで連携を構築することができますね!

再度記しますが、このSuperSaaSのwebhookカスタマイズ機能は有料版の機能ですので、このwebhookをpipedreamで受け取ってアクションにつなげる方法は、無料版では利用できませんので留意ください。

ともあれ、SuperSaaSの試用版(登録したての無料版)なら期間限定ですがwebhookカスタマイズ機能の利用が可能ですので、使い具合を試す場合などは、新規にSuperSaaSアカウントを作ることで、この方法を試すことが可能です。

簡単連携できる便利さとかではなく、デベロッパーとしてアクションを構築できる可能性こそが魅力かも…

ざっと使った感じでは、IntegromatZapierのほうがアクション先に設定できるアプリやサービスが格段に多いし、設定なども定型で融通は効かないですがその分簡単なので、それと比較してしまうとPipedreamの使用感は微妙といった感想を持ちました。

Pipedreamの真骨頂は、単にアプリへの連携に用いるだけでなく、アクション先に「Run Node.js code」を選択して、トリガーで得た情報を自由構築したNode.js((javascript)で処理することも可能になっているところにあるのかもしれません。

ともあれ、そこは人それぞれですし、SuperSaaSの活用状況にもよると思います。

何よりアクションをnode.js(javascript)で構築できるので、デベロッパー系の人にはちょっと惹かれる魅力になると思いますので、興味がある方はぜひ一度試してみてはいかがでしょうか☆


Tips一覧