🎨

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

2022/11/02に公開

React

要素の追加・更新 (Design Intercation)

この記事では、新Canva APIの5種類の機能のうち、一番基本的な「要素の追加・更新 (Design Intercation)」について、サンプルを使って詳細をみていきたいと思います。

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

Canva API ドキュメント

要素とは

Canvaでは、画像やテキスト等、デザインに追加できるものを総称して「要素 (Element)」と呼んでいます。

2022年11月現在、Canva APIでサポートされている要素は、下記の4種類です。

埋め込み (Embeds)
画像 (Images)
図形 (Shapes)
テキスト (Text)

これらの要素は、Canva APIを使ってアプリから追加を行えます。
例えば、ボタンを押すと「⭐️」の図形をデザインに追加するというアプリを作成することできます。

2種類の要素

また、アプリからどのぐらい要素を制御できるかによって下記の2種類に分けられます。

ネイティブ要素 (native element)
アプリ要素 (app element)

ネイティブ要素は、一度アプリから追加すると、アプリから制御ができなくなります。
一方、アプリ要素では、追加したあともアプリから制御が可能です。

少しわかりにくいと思うので、サンプルを使って詳しくみていきたいと思います。

サンプルアプリ

Canvaが提供しているスターターキットには、それぞれの機能の使い方がわかるようなサンプルアプリが含まれています。

ネイティブ要素追加のサンプルアプリ

native_embed_elements
native_image_elements
native_shape_elements
native_text_elements

アプリ要素追加・更新のサンプルアプリ

app_embed_elements
app_image_elements
app_shape_elements
app_text_elements
app_element_children

サンプルアプリの起動方法

Canvaのスターターキットで、自分が開発しているアプリを起動する際は

npm start

でしたが、

npm start SAMPLE_APP_NAME

のように後ろにサンプルアプリ名を入力して実行することで、サンプルアプリを起動することができます。

ネイティブ要素のサンプルアプリ

まず、テキストのネイティブ要素を追加するサンプルアプリを起動したいと思います。

npm start native_text_elements

上記を実行すると、このような画面が表示されます。

テキストや色、フォント等を指定して、テキスト要素を追加するシンプルなアプリです。
ネイティブ要素として追加しているので、アプリから要素に対して操作をすることはできません。
この要素を操作する際は、いつも通りCanvaのエディタを使うことになります。

その他のサンプルアプリ

続いて、画像のネイティブ要素を追加するサンプルアプリもみてみたいと思います。

npm start native_image_elements

画像を選択して、画像要素を追加するアプリです。

上記2つの例で、ネイティブ要素を追加する機能についてご理解いただけたかと思います。

一応、図形、埋め込みのサンプルアプリについても、下記に画像を貼っておきます。

アプリ要素のサンプルアプリ

続いてアプリ要素を追加・更新するサンプルアプリをみてみたいと思います。
まずはテキストから。

npm start app_text_elements

ネイティブ要素とは違い、アプリから追加だけでなく、更新もできるようになっています。
上記の例では、要素を追加した後、幅と回転を指定して更新を行なっています。
このようにアプリ要素では、アプリから要素の操作が可能です。

一方で、アプリ要素は、Canvaのエディタから行える操作が制限されます。
例えば、テキスト要素は通常、フォントやサイズ・色等をCanvaのエディタで操作できますが、アプリ要素の場合は、選択してもCanvaのエディタにそのような操作ペインが出てきません。
細かな操作を実現したい場合は、アプリで実装する必要があります。