作ったソースを登録して、Canvaの左メニューに追加してアプリとして利用できるよ！
わたしはてっきりソースCLIベースでデザインできるものだと思ってたんだよ！！
経緯
わたしはCanvaを登録したことがありますが
ほとんど使ったことがありません！
何となーく理解の中、CanvaCLIが出ていたのでこれを機に
触ってみようと思います
CanvaCLIを利用するには以下が必要です
- Node.js v18.20.4 or v20.17.0
- npm v9 pr v10
- Canvaのアカウント
※Canvaアカウント取得がまだの方は取得してください
CanvaDevelopers
Canvaのインストール
以下のNPMコマンドでインストール完了
npm install -g @canva/cli@latest
Canvaへログイン
インストール後、以下コマンドを実行
おお流石、デザイン良い
上記内容がプロンプトに表示されると、ブラウザアクセス確認が入るので「許可」を押下
codeをコピー
再度ターミナルに戻り、Confirmation codeにはりつけて、エンター
（ちょっといっぱい ****** が出てびっくりしますが、***** になってくれるの個人的に好感度高いです！）
ログイン完了しました！
サンプルプロジェクトの作成
それでは、サンプルプロジェクトを作成しましょう
以下コマンドをターミナルで実行します
canva apps create "newCanvaApp" --template="hello_world" --distribution="public" --git --installDependencies
いちいちかっこいいですね？
ここで躓いたよ
90%まで順調に進み、90%で止まりますが大丈夫です
画面に書いてある通り、お茶でも飲んで待ちましょう
完了！
アプリをプレビューする
早速プレビューしましょう
作成されたプロジェクトディレクトリへ移動
アプリケーションを開始（HTTP）
アプリケーションの開始（HTTPS）
npm run start --use-https
サーバが起動します
プレビュー用のURLが生成されブラウザが開きます
開かない場合は、「Preview URL」をクリックしてください
以下画面が出たら「開く」をクリック
Canvaアプリの診断
Canvaアプリの診断を実行します
UnitTestまでやってくれてました
-
フラグ:
-
--ci: CI モードで実行します (他のすべてのフラグをオーバーライドします:--report、を有効にし--silenceUpdates、 を無効にし--fix、--verbose環境チェックをスキップします)。 -
--fix: 可能な場合は、問題に対する修正を自動的に適用します。 -
--report: 修正を要求せずにチェック結果を出力します。 -
--verbose: AI エージェント支援に最適化された詳細な診断出力を表示します。
-
実際にさわってみる
DeveloperPotarlにアクセス
「newCanvaApp」をクリック
左ナビの「Configuration」
スクロールして「アプリのソース」がDevelopmentURLで先のサーバと同じになっていることを確認
サーバの起動
先ほどHTTPSにした場合は、HTTPSで起動してください
面白いのは、Canvaを開いてローカルの修正をするとCanva上のアプリが動的に更新されます。
どうも、iframeで読み込んで、メッセージパッシングなどしてそう？詳しくは見てないです。
実装や動きは動画どぞー
作ったファイルをBuildします
./distディレクトリにBuild結果ファイルが格納されます
app.jsをアップロード
アップロードすると保存されます
適当なCanvaのデザインページを開きます
するとサイドバーに「newCanvaApp」が追加されているのでクリック
先ほどローカルで作った内容が、表示され「ソースバンドルから実行されている」旨のメッセージが表示されます
これソースだけ売る感じになるのかな…ｗ
今のところCanvaSDKで出来ることはほとんどできそうです
ただ、Canvaを使わない私からすると困っていることが分からないので
なにがうれしいんというのだい？
状態です。Canvaの使い手求む!!!!
Views: 0
