INDUSTRIES

自動車

航空・宇宙

金融

ゲーム

メドテック

IoT

デジタルプロダクト

USE CASES

エンタープライズ向け

個人向け

チーム向け

教育向け

KEY FEATURES

ハードウェア・システム統合

Beta

ProtoPie MCP

マルチデバイス・プロトタイピング

インタラクション・ロジック

開発者へのハンドオフ

ProtoPie AI

New

ユーザーテスト

PLUGINS

Figma

Sketch

Adobe XD

INSIGHTS & INSPIRATION

ブログ

eBook

カスタマーストーリー

イベント&ウェビナー

ProtoPie ギャラリー

PRODUCT LEARNING & SUPPORT

ProtoPieスクール

ProtoPieをダウンロード

製品ドキュメント

コミュニティ

INDUSTRIES

自動車

航空・宇宙

金融

ゲーム

メドテック

IoT

デジタルプロダクト

USE CASES

エンタープライズ向け

個人向け

チーム向け

教育向け

KEY FEATURES

ハードウェア・システム統合

Beta

ProtoPie MCP

マルチデバイス・プロトタイピング

インタラクション・ロジック

開発者へのハンドオフ

ProtoPie AI

New

ユーザーテスト

PLUGINS

Figma

Sketch

Adobe XD

INSIGHTS & INSPIRATION

ブログ

eBook

カスタマーストーリー

イベント&ウェビナー

ProtoPie ギャラリー

PRODUCT LEARNING & SUPPORT

ProtoPieスクール

ProtoPieをダウンロード

製品ドキュメント

コミュニティ

ProtoPie Connect

5

分で読める

Intro to ProtoPie Connect 2 of 7: Your First Integration with IFTTT

Learn how to use the IFTTT plugin in ProtoPie Connect to prototype with hundreds of online services.

Jeff Clarke、 UX Designer & ProtoPie Educator

はじめに

このクイックチュートリアルでは、ProtoPie Connectに標準搭載のIFTTTプラグインを使って、あなたのPieとサードパーティのオンラインサービスを連携させる非常にシンプルな例を見ていきます。

学べること

このチュートリアルでは、以下の内容を扱います:

  • IFTTTとは?

  • IFTTTProtoPie Connectとどのように連携するのか

  • IFTTTでシンプルなアプレットを作成し、ProtoPie Studioからそれをトリガーする方法

所要時間: ≤15分

IFTTTとは?

IFTTTは“If This, Then That”の略で、“G”を抜いた“Gift”のように発音します。これは、何百もの人気のあるインターネットサービス間で相互運用を可能にし、自動化の新たな可能性を生み出すオンラインプラットフォームです。IFTTTで現在利用できるたくさんのアプリや製品を確認するには、IFTTTのサービスページをぜひ見てみてください。Twitter、Dropbox、Evernote、FitBit、Amazon Alexa、Google Assistantなど、数例を挙げるだけでも、700以上のサービスがあります。IFTTTとは何かについては、こちらで詳しく読めます。

これはProtoPieのトリガーレスポンスのモデルと似ています。自分で定義した何かによってトリガーされるアプレットを作成し、その結果として特定のアクションが実行されます。たとえばスマートホームのシナリオでは、玄関のドアの施錠が解除されたときに廊下の照明を点灯させるアプレットを作ることができます。あるいは、より具体的には:


IF the August Smart Front Door Lock is unlocked, THEN turn on the Hue Lights in the Entrance way.

IFTTTはProtoPie Connectとどのように連携するのか?

ProtoPie Connectには、“Webhook.”と呼ばれるものをトリガーするために使える組み込みプラグインがあります。これは、ProtoPieで送受信が動作するのとほとんど同じように考えればよいでしょう。メッセージ——“Event”と呼ばれます——がIFTTTに送信されます。IFTTTはそのイベントを受け取るよう設定され、あなたが設定したアクションを実行します。そしてProtoPieと同じように、少量のデータをメッセージと一緒に任意で送ることもできます。

この例では、トリガーとしてWebhookを使用し、アクションはメールを送信することです。

さあ、始めましょう!

ここから開始用のPieをダウンロードして、下の動画に沿って進めましょう!

[Big Red Button Pie]

動画の3:27の時点で、Connectに送るメッセージに含める値として、“JSON文字列”を作成する様子を紹介しています。動画に沿って進めてもよいですし、これをそのままコピーしても構いません。以下のままで動作します:

\"{\\"value1\\":\\"\" + Name.text + \"\\"}\"

JSONに不慣れな場合は、この記事の下部にある参考資料をご覧ください。

動画

これで完了!お手のもの

これはIFTTTプラグインの使い方としては非常にシンプルな例ですが、Pieをサードパーティのサービスと連携させるのがどれほど簡単かを示しています。IFTTTが対応しているどのサービスでも、ProtoPie ConnectからのWebhookイベントでトリガーできます。StudioのプレビューウィンドウからPieが飛び出し、インターネット上のさまざまなものとやり取りを始める様子がよくわかるはずです。

参考資料

動画の3:27の時点で、最終的にIFTTTアプレットへ渡される“JSON文字列”と呼ばれるものを作成しました。JSONは、情報を人が読める形式で保存・転送するために、インターネット全体で広く使われています。JSONについてもっと学べるいくつかの参考資料を以下にご紹介します:





完成版Pie

このチュートリアルで使用したPieファイルの完成版はこちらです:

次のProtoPie Connect入門 3/7: Arduino パート1 - Blokdotsとの接続でお会いしましょう!