🎨

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

2022/11/02に公開

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

Canva API

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

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

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

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

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

Canvaの公開APIがあれば利便性が高まるサービスはたくさんありそうですが、Canvaとしては他のサービスの利便性を高めるのではなく、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 APIが使えるようになると、Canva Developer Portalのヘッダーの右側に「Your apps」
というボタンが追加されます。

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

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

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

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