[Part 4] Canva APIを使ったアプリ作成 事始め
Part 3はこちら👇です。
一括作成用のデータ作成 (Data Provider)
この記事では、新Canva APIの5種類の機能のうち、「一括作成用のデータ作成 (Data Provider)」について、サンプルを使って詳細をみていきたいと思います。
- 他サービスの認証 (Authentication)
- 👉一括作成用のデータ作成 (Data Provider)
- 要素の追加・更新 (Design Interaction)
- ドラッグ & ドロップ (Drag & Drop)
- 他サービスとの連携 (Fetch)
一括作成 (Bulk Create)
一括作成 (Bulk Create) は、2022年10月にリリースされたCanvaの機能です。この機能を使えば、表に入力されたデータを元に一括で複数枚の画像を作成できます。
例えば、名前や電話番号、メールアドレス等を表に入力しておけば、複数人分のウェブ会議用背景画像を一気につくることも可能です。
一括作成機能のデータソースとしては、手入力で作成した表やアップロードしたCSVを利用することができますが、ここで紹介するデータ作成APIで作成したデータも利用することができます。
サンプルアプリを使って、データ作成機能の使い方を詳細にみていきたいと思います。
サンプルアプリ
Canvaのスターターキットに入っている、データ作成のサンプルアプリは下記になります。
- data_provider_basic
- data_provider_option
早速サンプルアプリを起動したいところですが、今回はその前にCanva Developer Portalでアプリの設定を変更する必要があります。
これまでとは異なり、今回のアプリは一括作成機能のデータソースとして用います。一括作成機能のデータソース一覧にアプリが表示されるようにするため、アプリの設定で「Data Provider」という項目を有効にします。
アプリの設定が完了したら、まずはbasicを起動してみます。
npm start data_provider_basic
アプリ一覧から一括作成を選択し、「More data sources」を選択すると、データソース一覧にサンプルアプリが表示されます。
サンプルアプリをクリックすると、下記のようなデータがインポートされます。
| Name | Type | Level | isCaptured |
|---|---|---|---|
| Pikachu | Electric | 42 | true |
| Squirtle | Water | 29 | true |
| Bulbasaur | Grass | 32 | false |
| Charmander | Fire | 9 | true |
ちなみに、Squirtleはゼニガメ、Bulbasaurはフシギダネ、Charmanderはお察しのあれです。
その後、デザインにテキスト要素を追加し、データを接続すれば一括で画像が作成できます。
サンプルアプリ2
もうひとつのサンプルアプリは、下記のような3つのデータ群から1つを選択できるようにしたものです。データソースを選択後、もう1度データ (Sydney or Brisbane or Melbourne) を選択するステップが追加されている点が、先程のサンプルアプリと異なります。
Sydney
| address | price | soldAt |
|---|---|---|
| 110 Kippax Street | 105 Kippax Street | 5 Lacey Street |
| 3000000 | 1000000 | 2000000 |
| new Date() | new Date() | undefined |
Brisbane
| address | price | soldAt |
|---|---|---|
| 110 Kippax Street | 105 Kippax Street | 5 Lacey Street |
| 3000000 | 1000000 | 2000000 |
| new Date() | new Date() | undefined |
Melbourne
| address | price | soldAt |
|---|---|---|
| 110 Kippax Street | 105 Kippax Street | 5 Lacey Street |
| 3000000 | 1000000 | 2000000 |
| new Date() | new Date() | undefined |
起動して確認してみます。
npm start data_provider_options
👇🆕
上記2つのサンプルアプリでみたように、データ作成APIを使うことで、一括作成用のデータを作成できます。例えば、外部サービスからAPIで取得したデータや、CSV以外のフォーマットのファイルから読み込んだデータから、複数枚の画像を一気に作成することが可能です。
制限
2022年11月現在、データ作成機能でサポートされているデータタイプは下記の通りです。
| Value | Example |
|---|---|
| string | "Hello world" |
| boolean | true |
| number | 42 |
| date | new Date() |
上記の通り、テキスト要素しかサポートされておらず、画像要素はサポートされていません。手入力でデータを作成する場合は、一括作成機能で画像が使えるのに、データ作成APIで作成する場合、画像が使うことができないため、一括作成機能をフルに使えないようになっています。
データ作成が使えるアプリ
データ作成機能 (Data Provider) で作成したデータを、データソースとして使えるアプリ (Data Consumer) は、2022年11月現在、一括作成機能だけです。ただ、Canva APIのドキュメントをみると、今後データ作成機能を使えるアプリは増えていきそうな気配が感じられます。
所感
ドラッグ & ドロップ同様、データ作成も今のところ制限が多く、使いどころがみえにくい機能です。テキスト要素以外に、画像要素もデータとして使えるようになったり、一括作成以外のアプリでも使えるようになれば、より使いやすくなりそうです。
また、一括作成機能で使う場合も、すぐにデータの中身を確認することができないので、使いにくいと感じました。現在は、下記のようなフローになっていますが、ステップ2とステップ3が逆になっている方が使いやすいのではないかと個人的には思いました。
- ステップ1: データソースの選択
- ステップ2: データ接続
- ステップ3: データの確認・選択
ただ、一括作成はCanva内製のアプリで、外部の開発者が手を加えることはできないので、改善されるのを待つほかありません。外部の開発者がAPIを使ってできることは、一括作成機能で使えるデータを作成する部分だけです。
まとめ
一括作成機能で使えるデータ作成API (Data Provider) についてまとめました。次の記事では、他サービスの認証 (Authentication) についてみていきたいと思います。
Part 5はこちら👇です。
Discussion