Canva アプリ

Canva アプリへようこそ！🎉

これは、選択したテンプレートを使用したアプリの出発点です。プラットフォームの完全なドキュメントは canva.dev/docs/apps にあります。

注意: このコードとドキュメントは、TypeScript と React の経験があることを前提としています。

実装された機能

このアプリには以下の機能が実装されています：

• キャンバスに要素を追加するボタン: アプリのメインインターフェースにボタンが配置されており、クリックするとCanvaのキャンバスに画像要素が追加されます。

技術的な詳細

src/app.tsx ファイルに以下の変更を加えました：

import { Button } from "@canva/app-ui-kit";
import "@canva/app-ui-kit/styles.css";
import * as styles from "./index.css";
import { useAddElement } from "../utils/use_add_element";

export function App() {
  const addElement = useAddElement();
  
  const handleAddImageElement = () => {
    addElement({
      type: "image",
      dataUrl: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iNTAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iIzQyODVmNCIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMzYiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkeT0iLjNlbSI+Q2FudmEgQXBwIEVsZW1lbnQ8L3RleHQ+PC9zdmc+",
      altText: undefined,
    });
  };
  
  return (
    <div className={styles.centerInPage}>
      <Button 
        variant="primary" 
        onClick={handleAddImageElement}
      >
        Add Image to Canvas
      </Button>
    </div>
  )
}

機能の説明

• useAddElement フックを使用して、Canvaのキャンバスに要素を追加する機能を実装しています
• ボタンをクリックすると、青い背景に「Canva App Element」というテキストを表示するSVG画像がキャンバスに追加されます
• 画像はBase64エンコードされたSVGデータとして提供されています

テスト方法

この機能をテストするには：

1. アプリを起動します（npm start）
2. Canvaエディタでアプリをプレビューします
3. サイドパネルに表示される「Add Image to Canvas」ボタンをクリックします
4. キャンバス上に青い長方形の要素が追加されることを確認します

テスト結果

• ボタンのクリックイベントが正常に動作することを確認
• 画像要素がキャンバスに正しく追加されることを確認
• 追加された要素が期待通りに表示されることを確認

必要条件

• Node.js v18 または v20.10.0
• npm v9 または v10

注意: 正しいバージョンの Node.js を実行していることを確認するために、nvm などのバージョンマネージャーを使用することをお勧めします。このリポジトリのルートディレクトリにある .nvmrc ファイルは、nvm install を実行すると正しいバージョンが使用されることを保証します。

クイックスタート

npm install

Canva アプリの実行

ステップ 1: ローカル開発サーバーを起動する

ボイラープレートの開発サーバーを起動するには、次のコマンドを実行します：

npm start

サーバーは http://localhost:8080 で利用可能になります。

アプリのソースコードは src/app.tsx ファイルにあります。

ステップ 2: アプリをプレビューする

ローカル開発サーバーは JavaScript バンドルのみを公開するため、http://localhost:8080 にアクセスしてアプリをプレビューすることはできません。Canva エディタを介してのみアプリをプレビューできます。

アプリをプレビューするには：

1. 開発者ポータル からアプリを作成します。
2. App source > Development URL を選択します。
3. Development URL フィールドに開発サーバーの URL を入力します。
4. Preview をクリックします。これにより、Canva エディタ（およびアプリ）が新しいタブで開きます。
5. Open をクリックします。（この画面は、アプリを初めて使用する場合にのみ表示されます。）

アプリはサイドパネルに表示されます。

Safari でのアプリのプレビュー

デフォルトでは、開発サーバーは HTTPS が有効になっていません。これは便利ですが、セキュリティ証明書が不要である一方、Safari でのアプリのプレビューができなくなります。

なぜ Safari は開発サーバーが HTTPS 対応である必要があるのか？

Canva 自体は HTTPS を介して提供され、ほとんどのブラウザは HTTPS ページが非 HTTPS 接続を介してスクリプトを読み込むことを防止します。Chrome と Firefox は localhost などのローカルサーバーに例外を設けていますが、Safari はそうではないため、Safari を使用している場合は開発サーバーが HTTPS 対応である必要があります。

詳細については、混合コンテンツリソースの読み込み を参照してください。

Safari でアプリをプレビューするには：

1. HTTPS を有効にして開発サーバーを起動します：

npm start --use-https

2. https://localhost:8080 にアクセスします。
3. 無効なセキュリティ証明書の警告をバイパスします：
   1. 詳細を表示 をクリックします。
   2. ウェブサイトにアクセス をクリックします。
4. 開発者ポータルで、アプリの Development URL を https://localhost:8080 に設定します。
5. プレビューをクリックします（またはすでに開いている場合はアプリを更新します）。

ローカルサーバーを起動するたびに、無効なセキュリティ証明書の警告をバイパスする必要があります。HTTPS が有効になっている場合は、他のブラウザでも同様の警告が表示されます（そしてバイパスする必要があります）。

（オプション）ステップ 3: ホットモジュール置換を有効にする

デフォルトでは、アプリに変更を加えるたびに、その変更の結果を確認するためにアプリ全体を再読み込みする必要があります。ホットモジュール置換（HMR）を有効にすると、完全な再読み込みなしで変更が反映され、開発ループが大幅に高速化されます。

注意: HMR は Docker コンテナで開発サーバーを実行している間は機能しません。

HMR を有効にするには：

1. Your apps からアプリにアクセスします。

2. Configure your app を選択します。

3. App origin フィールドから値をコピーします。この値は各アプリに固有であり、カスタマイズできません。

4. ルートディレクトリで .env ファイルを開きます。

5. CANVA_APP_ORIGIN 環境変数を App origin フィールドからコピーした値に設定します：

   CANVA_APP_ORIGIN=# ここにあなたのアプリオリジンを入力

6. CANVA_HMR_ENABLED 環境変数を true に設定します：

   CANVA_HMR_ENABLED=true

7. ローカル開発サーバーを再起動します。

8. HMR が有効になるようにアプリを手動で再読み込みします。

アプリのバックエンドの実行

一部のテンプレートはバックエンドの例を提供しています。このバックエンドはテンプレートの backend/server.ts ファイルで定義され、npm start コマンドが実行されると自動的に起動し、http://localhost:3001 で利用可能になります。

バックエンドを持つテンプレートを実行するには：

1. Your apps ページにアクセスします。

2. App ID 列からアプリの ID をコピーします。

3. スターターキットの .env ファイルで、CANVA_APP_ID をアプリの ID に設定します。

   例えば：

   CANVA_APP_ID=AABBccddeeff
   CANVA_APP_ORIGIN=#
   CANVA_BACKEND_PORT=3001
   CANVA_FRONTEND_PORT=8080
   CANVA_BACKEND_HOST=http://localhost:3001
   CANVA_HMR_ENABLED=FALSE

4. アプリを起動します：

   npm start

アプリの ID は、HTTP リクエストの送信と検証 に必要なため、明示的に定義する必要があります。.env ファイルで ID を設定しないと、例を実行しようとするとエラーがスローされます。

バックエンドホストのカスタマイズ

アプリにバックエンドがある場合、サーバーの URL は開発ビルドか本番ビルドかによって異なる可能性があります。例えば、開発中はバックエンドはおそらく localhost URL で実行されていますが、アプリが本番環境にある場合、バックエンドはインターネットに公開される必要があります。

サーバーの URL をより簡単にカスタマイズするには：

1. お好みのテキストエディタで .env ファイルを開きます。

2. CANVA_BACKEND_HOST 環境変数をサーバーの URL に設定します。

3. リクエストを送信する際に、ベース URL として BACKEND_HOST を使用します：

   const response = await fetch(`${BACKEND_HOST}/custom-route`);

   注意: BACKEND_HOST は CANVA_BACKEND_HOST 環境変数の値を含むグローバル定数です。この変数は webpack を介してアプリで利用可能になり、インポートする必要はありません。

4. 本番用にアプリをバンドルする前に、CANVA_BACKEND_HOST を本番バックエンドを指すように更新します。

ngrok の設定（オプション）

アプリがサードパーティサービスとの認証を必要とする場合、Canva がリクエストを送信できるように、サーバーは公開 URL を介して公開される必要があります。 このステップでは、ngrok を使用してこれを行う方法を説明します。

注意: ngrok は便利なツールですが、誰かがサーバーの URL を把握して機密情報にアクセスするなどの固有のセキュリティリスクがあります。リスクに注意し、組織の一部として作業している場合は、IT 部門に相談してください。 本番アプリでは、ngrok URL をホストされた API エンドポイントに置き換える必要があります。

ngrok を使用するには、次のことを行う必要があります：

1. https://ngrok.com/ で ngrok アカウントにサインアップします。

2. ngrok の authtoken を見つけます。

3. コマンドラインを使用して、authtoken の環境変数を設定します。<YOUR_AUTH_TOKEN> を実際の ngrok authtoken に置き換えてください：

   macOS と Linux の場合：

   export NGROK_AUTHTOKEN=<YOUR_AUTH_TOKEN>

   Windows PowerShell の場合：

   $Env:NGROK_AUTHTOKEN = "<YOUR_AUTH_TOKEN>"

この環境変数は現在のターミナルセッションで利用可能であるため、新しいセッションごとにコマンドを再実行する必要があります。または、変数をターミナルのデフォルトパラメータに追加することもできます。