MakeとHTTPで画像をベクター化：Google DriveからSVGを保存

この手順では、Google Driveのラスター画像を読むMakeのHTTP v4シナリオに、ファイルと応答の項目を割り当てます。リクエスト、変換ID、SVGの取得までを扱います。APIとのやり取りはテストキーで検証し、MakeとDriveの設定は各モジュールの公式ドキュメントに基づいています。

お手持ちの画像で試す

フル機能のツールを開く

PNGJPGWEBPPNGSVGここに画像をドロップまたはクリック · 貼り付け ⌘V画像を選択画像をドロップして確認

無料でお試しいただけます。画像をドロップすると、登録なしでベクターのプレビューを確認できます。

ファイル1枚とテストキーで始める

Google DriveをMakeに接続します。単一フレームのPNG、JPEG、WebPをテスト用フォルダーに置き、別のフォルダーを出力先にして、PerfectVectorのテストキーを取得します。5 MiB以下で各辺が100～4,096ピクセルのファイルを選びます。テスト変換に成功すると固定のサンプルSVGが返ります。PerfectVectorのテストモード

Google Drive → Download a File を追加し、元ファイルのIDを指定します。後でフォルダーのトリガーを追加する場合は、トリガーのIDをこのモジュールに割り当てます。初回は中身が分かっているファイルを1枚使い、モジュール出力のファイル名とデータを確認します。Makeのファイル操作ガイド

ファイルをHTTPリクエストに割り当てる

MakeのHTTP v4アプリで HTTP → Make a request を使います。Credentials の認証方式に API key を指定してテストキーを保存します。キーチェーンの Key に Bearer から始まる値全体を入れ、送信先をヘッダーにし、パラメーター名を Authorization に設定します。オリジンは https://api.perfectvector.com に限定します。ダウンロードにも同じキーチェーンを使います。MakeのAPIキー設定

以下の各エンドポイントで、オリジンに https://api.perfectvector.com を指定します。

本文の種類を指定すると、Makeがマルチパートの境界を生成します。POSTの応答はJSONのままにします。すぐに終わる場合と時間がかかる場合を、同じ形式で確認できます。PerfectVectorのポーリング手順にある2秒は、状態確認の間隔です。MakeのHTTPモジュール · PerfectVectorの待機と非同期処理

処理の流れ

変換が成功してからダウンロードする

HTTP → Download a file の前にフィルターを置き、解析した変換状態が succeeded のときだけ実行します。同じAPIオリジンにパス /v1/vectorizations/{id}/result を指定し、{id} に変換IDを割り当てます。APIのキーチェーンを使い、Return error if HTTP request fails を Yes にします。ダウンロードモジュールが次のモジュールにファイルデータを渡します。MakeのHTTPモジュール · PerfectVectorの結果

Google Drive → Upload a File を追加し、出力フォルダーを選びます。入力元に HTTP → Download a file のファイルを指定します。名前を変更する場合は、ファイル入力で Map を選び、ダウンロード済みのデータを維持したまま logo-test.svg などの名前を付けます。SVG形式を保つため Convert a File はオフのままにします。MakeのGoogle Driveモジュール アップロードしたファイルを開き、「TEST MODE」のサンプルが表示されれば、シナリオ全体で割り当てを確認できます。

未完了の変換を確認してからダウンロードする

ここまでの単発実行はテストファイル1枚が対象です。本番送信で 202 が返ったら、2つ目の HTTP → Make a request を追加し、GET、同じAPIキーチェーン、Parse response の Yes を指定します。同じAPIオリジンに /v1/vectorizations/{id} を指定し、保存済みのIDをパスに割り当てます。succeeded は結果のダウンロードへ、queued と processing は保留へ分岐し、failed は変換IDと結果のエラーを記録します。保留中のIDを再確認するまで約2秒待ちます。PerfectVectorの待機と非同期処理

クライアントがタイムアウトしても、送信済みの変換は続いている場合があります。保存したIDを使うか、IDがなければ24時間以内に同じ画像データとキーで再送します。timeout または provider_unavailable で最終状態が failed なら、再試行する場合は新しいキーが必要です。後者ではサービスが復旧するまで待ちます。無人実行を予約する前に、キーを元ファイルのバージョンと一緒に保存します。未完了のIDも記録すれば、次回は再アップロード前に状態を確認できます。PerfectVectorの安全な再試行 · PerfectVector APIのエラー

PerfectVectorのテストキーとcURLを使い、マルチパートのアップロード、IDでの変換取得、固定のサンプルSVGのダウンロードを確認しました。MakeとGoogle Driveの手順は、Makeの公式モジュール資料とファイル割り当ての説明に基づきます。自分の作業環境で一度実行し、割り当てを確かめてください。

よくある質問

Makeで非対応メディア形式のエラーが出るのはなぜですか？

本文のコンテンツタイプとファイルの割り当てを調べます。multipart/form-data を選び、ファイルのフィールドを image にして、ダウンロードモジュールのデータ出力を割り当てます。元ファイルを開き、条件を満たすPNG、JPEG、WebPか確認します。PerfectVector APIの制限

テストSVGから元画像の何が分かりますか？

確認できるのはリクエストとファイルの受け渡しです。PerfectVectorのテストキーでは固定のサンプルが返ります。元画像を評価するには、本番変換を行い、生成された形や色を確認します。PerfectVectorのテストモード

参考資料

1. Make — ファイルを扱う — Google Driveのダウンロードとアップロードでファイル名とデータを割り当てる方法。
2. Make — HTTP — HTTP v4のマルチパートアップロード、JSON解析、ファイル取得。
3. Make — APIキー認証 — Bearer認証情報の保存とオリジンの制限。
4. PerfectVector — 制限 — 対応入力形式とマルチパートのフィールド。
5. PerfectVector — 待機と非同期処理 — 待機ヘッダーと即時・未完了の応答。
6. PerfectVector — 結果 — 認証付きのSVGダウンロード。
7. PerfectVector — テストモード — テストキーで返る固定のSVGと即時完了。
8. Make — Google Driveモジュール — ダウンロードとアップロードの項目、ファイル変換オプション。

PerfectVector APIのページでテストキーを取得し、条件を満たす画像1枚でAPIクイックスタートのJSON応答例を試します。アップロードで変換IDが返り、結果をダウンロードすると開けるSVGになることを確認してください。