🎨

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

2022/11/02に公開約3,400字

Part 1は、こちら👇です。
https://zenn.dev/aninomiya/articles/143e0ab8e50701

要素の追加・更新 (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のエディタにそのような操作ペインが出てきません。
細かな操作を実現したい場合は、アプリで実装する必要があります。

その他のサンプルアプリ

続いて画像のアプリ要素を追加するサンプルアプリです。

npm start app_image_elements

幅・高さ・回転を指定して画像を追加できるようなアプリです。
ネイティブ要素では、サイズや回転等を指定することができませんが、アプリ要素では可能です。
一方で、アプリ要素を選択しても、Canvaのエディタで切り抜きや反転といった操作は行えません。

図形、埋め込みについても画像だけ貼っておきます。

最後に、アプリ要素では複数の要素を追加するサンプルアプリがあるので、そちらも紹介します。

npm start app_element_children

このようにアプリ要素では、複数の要素をグループ化して追加・更新することも可能です。
ただ、この場合、個々の要素を選択したり、グループ解除をすることはできません。

まとめ

Canva APIの「要素の追加・更新 (Design Intercation)」についてまとめました。次の記事では、「ドラッグ&ドロップ (Drag & Drop)」についてみていきたいと思います。

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

Discussion

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