待望のAPI連携機能が遂にリリース。 Notion、microCMSなどの外部サービスとの連携が可能に！

APIを通じて外部サービス上のコンテンツを表示するAPI連携機能がついに登場。 「Notion」や「microCMS」等のデータを呼び出し、STUDIOで作成したデザインと繋げてサイトを作れるようになりました！

データ接続に必要な情報（アクセスキー）を取得

外部データをSTUDIOで利用するには、データ接続が必要です。

1. 利用したいサービスから、接続に必要なAPI のエンドポイント(URL) やアクセスキーなどをコピー

2. STUDIO上の入力欄にペースト

これで、データ接続が完了です！

STUDIOで作ったデザインに接続したデータをつなぐ

早速、接続して呼び出したデータをSTUDIOサイトのデザイン要素につなげていきましょう！

呼び出したデータはデータパネルに格納されていて、CMSと同じようにテキストや画像ボックスにつなぐことができます。

以下のヘルプ記事では、専用画面で接続できる３つのサービスのAPI情報取得から接続までの手順をご紹介しています。

• Notionの場合

• microCMSの場合

• Airtableの場合

API連携開始について各社よりコメント

Notion

API連携機能のリリースおめでとうございます！ Notionはオールインワンワークスペースとしてメモ、タスク、Wikiなどを全てを一つにまとめるサービスです。今回のリリースよりNotionに集約した様々なリソースをそのまま利用し、STUDIOでデザインにこだわったWEBサイトが作成可能です。ユーザーの皆さんが思い描いたものをノーコードで、これまで以上に簡単に作成できる世界を一緒に作っていけることにとても興奮しています。

Notion Labs Japan 合同会社　ゼネラルマネジャー　西　勝清

microCMS

API連携機能のリリースおめでとうございます！

microCMSはコンテンツを管理画面から入稿し、APIから取得できる「ヘッドレスCMS」と呼ばれるサービスです。

ヘッドレスCMSはビュー（表示面）を持たないため、APIとの繋ぎ込みも含め自前で実装する必要があります。

今回のリリースによってSTUDIOをビュー、microCMSをデータソースとしたWebサイトを作成できるようになり、非常に可能性を感じています。

複雑なAPI連携部分をすべてGUIでシンプルに表現されていて脱帽です・・・！

ぜひ、皆さま一度お試しください！

株式会社microCMS 創業者兼COO　柴田 和祈

新機能を使ったサイト活用例

一般リリースに先駆け、代表的なサービスのAPIで構築したサイトと制作ユーザーの声をご紹介します！

事例① Notion APIを使った定期イベントのポータルサイト

https://notionzadankai.studio.site/
「Notion座談会ポータルサイト」概要

「Notion座談会」というNotion好きな参加メンバーでお話ししているYouTubeLIVE配信のポータルサイト兼アーカイブの運営のためのサイトです。TOPの「配信予定」、アーカイブページ部分にNotion APIとの接続を利用しています。

たむらりえさん 制作者コメント
Notion公式アンバサダー｜Twitterアカウント

STUDIOエディタ上でNotionのデータとSTUDIOのボックスをつなぐ「線」が見えているので、つながった時大変嬉しかったです！
STUDIOさんの連携でNotionAPIの構造が視覚的になり、大変勉強になりました！

私は仕事もプライベートもNotionに集約しているので、一度STUDIOで設定してしまえばNotionから離れずに記事更新できるのは大変ありがたいです。NotionとSTUDIOのAPI連携は、記事をNotionで管理したい方、STUDIOのキレイなサイトで運営したい方、API初心者の方におすすめです！

事例② microCMS APIを活用した計算メモ帳アプリLP

https://kanau.app/ 
「計算メモ帳アプリ kanau LP」概要

個人開発の計算メモ帳アプリ「kanau」のLPとしてSTUDIOを活用しています。 microCMSとAPI連携して、リリース情報や今後追加したい機能などのコンテンツのほか、利用規約、プライバシーポリシー、ライセンスなどの情報も連携しています。

佐藤あゆみさん 制作者コメント
株式会社necco CTO｜Twitterアカウント

kanauのLPは、元々はmicroCMSとJekyll（テンプレートエンジン）とFirebase Hostingを組み合わせて構築していたのですが、STUDIOへの移行ではmicroCMSに入力済みのデータをそのままサイトに表示できました。
コーディングどころかデータ移行の手間もなく、デザインにデータを紐付けるだけ。デザインの際もダミーデータではなく実際のAPIからのデータを表示しながらデザイン調整できるため、様々な手間がはぶけ、STUDIOスゴイ！と感じました。 私と同様にアプリを開発している方、またはエンジニアを目指している方にもAPI活用入門としてオススメですね！

API連携ができるようになり、活用の幅が広がったSTUDIOをぜひ実際にご体感ください！

期間限定のキャンペーンページやブログ・メディアの運用に、ぜひ便利にご活用いただき、Slack Communityや公式Twitterにご感想をお寄せください！