🖱️

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

2022/11/02に公開

React

ドラッグ & ドロップ (Drag & Drop)

この記事では、新Canva APIの5種類の機能のうち、「ドラッグ & ドロップ (Drag & Drop)」について、サンプルを使って詳細をみていきたいと思います。

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

Canva API ドキュメント

この機能は読んで字のごとく、アプリからデザインに要素をドラッグ & ドロップで追加できるようにするものです。

サンプルアプリ

Canvaのスターターキットに入っているドラッグ & ドロップのサンプルアプリは下記になります。

drag_and_drop

早速起動してみます。

npm start drag_and_drop

上記のサンプルアプリのように、このAPIを使うことでドラッグ & ドロップが簡単に実装することができます。実装は下記のようになるかと思います。

import { DraggableImage } from "../components/DraggableImage";
import { FC } from "react";

const App: FC = () => {
  return (
    <DraggableImage src="DATA URL GOES HERE" />
  );
};

export default App;

制限

ただ、このAPIには、2022年11月現在、いくつかの制限があります。

デスクトップデバイスでしか動作しない
Firefoxでは動作しない
pngとjpeg画像しかデザインに追加することができない
画像は、データURLとして提供する必要がある　等

今後、画像以外もドラッグ & ドロップができるようになるかもしれませんが、今は画像にしか使えなそうなので、個人的にはあまりうまみがないように思いました。

まとめ

短いですが、この記事はここまでとしたいと思います。次は「一括作成用のデータ作成 (Data Provider)」についてみていきたいと思います。

Part 4はこちら👇です。

ドラッグ & ドロップ (Drag & Drop)

サンプルアプリ

制限

まとめ

Discussion