Canva CLI（公式）触ってCanvaアプリ入門してみた

canvaコマンド、便利そうですね。地元で仕事の人にあったようなモヤモヤ感があります。

サードパーティかと思ったら公式で出ています。

CLIからスライド作るツールではなくCanvaアプリを作るツール

Canvaアプリを作るとCanva内でボタンを押して何かするなどができそうでした。

みたいですね。

npmのページはこちら

@canva/cli is a command line tool designed for creating and managing Canva Apps. Use @canva/cli to get started creating and testing your app. The Canva CLI allows you to create apps from the command line, and to use Canva's recommended development tools and templates.

To learn more about app development, visit the official documentation.

Canvaアプリの作成と管理できる模様

こちらの投稿で発見

試していく

Node.js V20系で試したらうまくいきましたが、22や24などだとエラーが出て厳しかったです。

インストール

npm install -g @canva/cli@latest

ログイン

canvaコマンドが使えます。

$ canva login

ブラウザが開いてOAuth認証です。

認証コードが表示さるのでコピー

ターミナル側に貼り付け

この状態でエンター。ﾀﾀｰﾝ

ログインできました。めちゃめちゃClaude CodeやGemini CLIぽい。

試しにアプリを作ってみる

適当なフォルダで以下を実行します。

$ canva apps create "My New App" --template="hello_world" --distribution="public" --git --installDependencies

思ったより時間かかりました。 90%からが進みが悪い。

プロジェクト作成成功。フォルダ移動して実行せよとのことなので実行します。

$ cd my-new-app
$ npm start

ビルドされてますね

ここにアプリが表示される...らしい

デフォルトで試しただけだけどエラーが。。。

Node.js v20でやった人はうまくいくはず

補足: v22や24で試したらエラーでした

npm run startでのサーバー起動もwebpackのエラーっぽい感じでした。
npm run buildも同様

$ npm run build
> build
> webpack --config webpack.config.ts --mode production && npm run extract
[webpack-cli] Failed to load '/Users/n0bisuke/ds/2_playground/my-new-app/qr-generator/webpack.config.ts' config
[webpack-cli] SyntaxError: The requested module 'webpack' does not provide an export named 'DefinePlugin'
    at ModuleJobSync.runSync (node:internal/modules/esm/module_job:466:37)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:435:47)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1565:24)
    at Module._compile (node:internal/modules/cjs/loader:1716:5)
    at Object.loadTS [as .ts] (node:internal/modules/cjs/loader:1826:10)
    at Module.load (node:internal/modules/cjs/loader:1469:32)
    at Module._load (node:internal/modules/cjs/loader:1286:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:235:24)
    at Module.require (node:internal/modules/cjs/loader:1491:12)

Node.jsをv20 && npm run build

Node.js v20だとnpm startで開発サーバー起動もトラブってました。

v20系で試してnpm run buildをするとdistフォルダができ、その中のjsファイルを使ってうまくいきました。

$ npm run build

• distフォルダが作成されてjsファイルが

生成されたJSファイルをDevelopersサイトで登録します。

• Developersサイトへ

• アプリのソースの項目でアップロード

動いた！

ボタンを押すと、Hello worldの文字がスライドに出力されました。なるほどこういうサンプルだったんですね。

ムスカの名前を入力

テンプレートは以下のにようなsrc/app.tsxを書き方えたら良いみたいですね。

import { Button, Rows, Text } from "@canva/app-ui-kit";
import { requestOpenExternalUrl } from "@canva/platform";
import { FormattedMessage, useIntl } from "react-intl";
import { useAddElement } from "utils/use_add_element";
import * as styles from "styles/components.css";

export const DOCS_URL = "https://www.canva.dev/docs/apps/";

export const App = () => {
  const addElement = useAddElement();

  const onClick = () => {
    addElement({
      type: "text",
      children: ["Hello world!"],
    });
  };

  const openExternalUrl = async (url: string) => {
    const response = await requestOpenExternalUrl({
      url,
    });

    if (response.status === "aborted") {
      // user decided not to navigate to the link
    }
  };

  const intl = useIntl();

  return (
    <div className={styles.scrollContainer}>
      <Rows spacing="2u">
        <Text>
          <FormattedMessage
            defaultMessage="
              To make changes to this app, edit the <code>src/app.tsx</code> file,
              then close and reopen the app in the editor to preview the changes.
            "
            description="Instructions for how to make changes to the app. Do not translate <code>src/app.tsx</code>."
            values={{
              code: (chunks) => <code>{chunks}</code>,
            }}
          />
        </Text>
        <Button variant="primary" onClick={onClick} stretch>
          {intl.formatMessage({
            defaultMessage: "Do something cool",
            description:
              "Button text to do something cool. Creates a new text element when pressed.",
          })}
        </Button>
        <Button variant="secondary" onClick={() => openExternalUrl(DOCS_URL)}>
          {intl.formatMessage({
            defaultMessage: "Open Canva Apps SDK docs",
            description:
              "Button text to open Canva Apps SDK docs. Opens an external URL when pressed.",
          })}
        </Button>
      </Rows>
    </div>
  );
};

  const onClick = () => {
    addElement({
      type: "text",
      children: ["私の名前は、ロムスカ・パロ・ウル・ラピュタ"],
    });
  };

こんな感じです。

まとめ

Canvaアプリ、ストアにリリースもできそうなので色々と作って誰かに使ってもらうもできそうですね。

CanvaCLIはアプリ作る時に使う模様ですが、Node.js v22などでバグるのがちょっと気になりますね。。。

まず試すにはNode.js v20系でやるのがオススメです。