🎨

[Part 1] Canva APIを使ったアプリ作成 事始め

2022/11/02に公開約2,500字

https://can-sil.com/canva-update/

2022年9月にCanva APIがアップデートされるというニュースがありましたが、Canva APIのベータ版にアクセスできるようになり、具体的にどんなことができるかわかってきたので、記事を書いてみたいと思います。

Canva API

過去にもCanvaのAPIが提供されていたことがあるようですが、APIの利用目的や機能が大幅にリニューアルされ、2022年11月現在は新しいバージョンのAPIが特定のユーザ限定で公開されています。

過去のAPI

過去のAPIでは、下記3種類の機能拡張をすることができました。

  • コンテンツの拡張 (Content)
  • 編集機能の拡張 (Editing)
  • 公開機能の拡張 (Publish)

過去のAPIドキュメント

新しいAPI

新しいCanva APIでできることは下記の5種類です。

  • 他サービスの認証 (Authentication)
  • 一括作成用のデータ作成 (Data Provider)
  • 要素の追加・更新 (Design Interaction)
  • ドラッグ & ドロップ (Drag & Drop)
  • 他サービスとの連携 (Fetch)

新しいAPIドキュメント

新しいAPIでは公開機能の拡張ができないようになっております。
例えば、Canvaで作成した画像や動画をAPIを使って他のサービスに保存することはできません。

一見すると、新しいAPIでもデザインを他のサービスに保存できそうに思いますが、あくまでデザインの編集のために、他のサービスから画像等の素材を取得したり、重い処理を他のサービスに任せて結果を取得するという使い方が想定されおり、デザインの完成型を他のサービスに送信することはできなそうです。

Canvaの公開APIがあれば利便性が高まるサービスはたくさんありそうですが、Canvaとしては他のサービスの利便性を高めるのではなく、Canva自身の利便性を高める(より簡単に思い通りのデザインを作成する)ためにAPIを提供したいという意思が伝わってきます。

それぞれの機能についてサンプルを見ながら詳細をみていきたいと思いますが、量が多くなってしまいそうなので、この記事では開発環境の構築までに止め、それぞれの機能の詳細は次の記事以降に譲りたいと思います。

Canva APIの利用方法

2022年11月現在は、すべてのユーザに公開されているわけではなく、Waitlistに登録してCanvaの審査をしばらく待つ必要があります(私の場合は1ヶ月ぐらいだったと思います)。

審査が通過したらCanva APIのスターターキットのリポジトリにアクセスできるようになり、開発をスタートできます。

スターターキットで挙動確認

Canvaのアプリは基本的にTypeScript、Reactで開発することが前提になっています。

git clone REPOSITORY_URL
cd REPOSITORY_NAME
npm install
npm start

上記を実行すると、https://localhost:8080 でNode.jsのサーバが起動し、開発をスタートできます。(スターターキットのリポジトリはまだ公開されていないので、伏せておきます。)

この後、開発者ならすぐにブラウザで https://localhost:8080 にアクセスしたくなりますが、ブラウザから直接アクセスしても何も表示されません。

Canva Developer Portalにて下記の設定を行うことで、Canvaのエディタから開発環境にアクセスできるようになります。

Canva Developer Portalの設定

Canva Developer Portal

Canva APIが使えるようになると、Canva Developer Portalのヘッダーの右側に「Your apps」
というボタンが追加されます。

「You apps」からアプリを新規作成し、アプリの設定でDevelopment URLに https://localhost:8080 を追加します。

この設定を行うと、Canvaで自分のアプリが表示されるようになります。

これで開発環境の構築が完了しました。

まとめ

リニューアルされたCanva APIについて、変更点や利用方法、開発環境の構築についてまとめました。次の記事以降でCanva APIの各機能の詳細をみていきたいと思います。

Part 2はこちら👇です。
https://zenn.dev/aninomiya/articles/22478789138511

Discussion

ログインするとコメントできます