VueSatori を使用してグリーティングカードメーカーを構築する-jsチュートリアル-php.cn

Build a Greeting Card Maker w/ Vue Satori

作者 デュベム・イズオラ

コーディングスキルを活用したお祝いプロジェクトを求めているクリエイティブデベロッパーの皆さんは、カスタマイズしたり、独自の写真を追加したり、すぐにダウンロードしたりできるデジタルホリデーグリーティングカードを作成しましょう。これを実現するためにいくつかの最先端の Web テクノロジーを使用します。その過程で、グラフィックスの生成、いくつかのクールなパッケージ、およびいくつかの優れた Vue 3 トリックについて学びます。

私たちが構築しようとしているもの

Build a Greeting Card Maker w/ Vue Satori

ホリデーグリーティングカードメーカーインターフェイスのスクリーンショット

このチュートリアルが終わるまでに、次のことができるようになります:

パーソナライズされたホリデーカードを作成するための完全な機能を備えた Web アプリ
Vue 3、Nuxt、およびいくつかの強力なレンダリングライブラリを実際に使用した経験
ブラウザでグラフィックスを動的に生成する方法を理解する

プロジェクトの初期化

Nuxt 3 は、Vue アプリケーション用の堅牢なバッテリー付属のセットアップを提供するため、フレームワークとして使用します。ターミナルを開き、以下のコマンドを実行してプロジェクトを作成しましょう:

npx nuxi init christmas-card-maker 
cd christmas-card-maker
yarn install

ログイン後にコピー

Nuxt を選ぶ理由これにより、組み込みルーティング、簡単なモジュール統合、全体的な簡単なセットアップによる強固な基盤が得られます。グリーティングカードメーカーに最適です!

ツールキットのインストール

ここで、カード生成の魔法を実現するライブラリを追加します。ターミナルで次のコマンドを実行します:

yarn add @vue/server-renderer @vueuse/core nuxt satori satori-html
yarn add -D @nuxtjs/tailwindcss

ログイン後にコピー

それぞれを選択する理由を詳しく説明します:

@vue/server-renderer: Vue コンポーネントとプロップを HTML 文字列としてレンダリングできるようにします - SVG 生成にとって重要です
satori: HTML と CSS 文字列を美しい SVG グラフィックスに変換します
Satori HTML:Satori
@vueuse/core: ローカルストレージ、watchDebounce などの便利なユーティリティを提供します
@nuxtjs/tailwindcss: 迅速なスタイリング機能を提供します

プロジェクトの構成

nuxt.config.ts を更新して開発環境をセットアップしましょう:

? nuxt.config.ts

export default defineNuxtConfig({
  ssr: false,
  devtools: { enabled: true },
  modules: ["@nuxtjs/tailwindcss"],
});

ログイン後にコピー

このクライアント側アプリのサーバー側レンダリングを無効にし、Tailwind CSS モジュールを有効にします。これにより、グリーティングカードメーカーに最適な、軽量で応答性の高いセットアップが実現しました。

カードメーカーのコーディング

すべてのセットアップが完了したので、ホリデーカードメーカーを段階的に作成してみましょう。

ステップ 1. カードメーカーインターフェイスの実装

まず、カードメーカー用の簡単なレイアウトの作成に焦点を当てましょう。ユーザーが名前、挨拶、画像のアップロードを追加するためのフィールドを含むフォームを設定します。カードが表示されるプレビュー領域も追加します。

基本レイアウトは次のようになります:

? app.vue

npx nuxi init christmas-card-maker 
cd christmas-card-maker
yarn install

ログイン後にコピー

この設定が必要な理由

createSSRApp および renderToString : コンポーネントとその prop を仮想的にマウントし、最終出力をレンダリングすることによって、Vue コンポーネントを HTML 文字列にレンダリングします。
useLocalStorage : フォームデータをローカルに保存するため、ユーザーがリロードしても進行状況が失われないようにします。
watchDebounced : 入力が停止した後、一定の時間が経過するまでユーザー入力の処理を遅らせることで、パフォーマンスの問題を防止します。
satori : グラフィック用に HTML を SVG に変換します。
satori-html : HTML 文字列をSatori が理解できる形式に解析します。
フォント参照は、useLocalStorage を使用してユーザーの入力を保持します。ページを更新しても、フォーム入力は失われず、前のページから続行できます。
svg 変数と fonts 変数には、生成されたカードデザインとロードされたフォントデータが保存されます。

ステップ 3. カードテンプレートの作成

次に、先ほどインポートしたカードテンプレートコンポーネントを作成しましょう。ここで魔法が起こります。

フォームのデータを使用してカードをカスタマイズします。 Components/ChristmasCard.vue で、カードのビジュアルテンプレートをデザインします。これは、ユーザーが挨拶をカスタマイズできるキャンバスをデザインするようなものだと考えてください。

? コンポーネント/ChristmasCard.vue

yarn add @vue/server-renderer @vueuse/core nuxt satori satori-html
yarn add -D @nuxtjs/tailwindcss

ログイン後にコピー

内訳:

Nuxt 3 に自動インポートされる onMounted フックを使用して、グラフィックの生成に必要なフォントを読み込み、保存します。
任意の .ttf フォントファイルを使用できます。私が使用したのと同じフォント「Instrument Sans」フォントを入手するには、Google Fonts にアクセスし、「Get Font」をクリックして、フォントファイルをダウンロードします。 ZIP ファイルを解凍し、.ttf フォント (InstrumentSans- Regular.ttf など) を Nuxt プロジェクトの public/fonts フォルダーにコピーします。コード内で /fonts/InstrumentSans- Regular.ttf として参照します。
onMounted 内で、refreshGraphics を呼び出して、フォントが読み込まれた後に初期 SVG グラフィックを生成します。
watchDebounced を使用してフォームの変更を追跡し、最後の更新から 500 ミリ秒後にグラフィックを更新します。 注: これはパフォーマンス上のトリックです。
loadFonts 関数は、必要なフォントを順番にではなく Promise.all を使用して一度に読み込みます。 注目すべきもう 1 つのパフォーマンスのトリック。

ステップ 5. Vue コンポーネントから SVG を生成する

ここですべてを結び付けます。 ChristmasCard コンポーネントを SVG に変換します。

? app.vue

npx nuxi init christmas-card-maker 
cd christmas-card-maker
yarn install

ログイン後にコピー

説明しましょう:

まず、renderToHTML ユーティリティ関数を使用して、前にインポートした ChristmasCard.vue コンポーネントを HTML 文字列に変換します
次に、先ほど SATORI-HTML からインポートした HTML 関数を使用して、HTML 文字列を SATORI パッケージで受け入れられるマークアップ形式に変換します
最後に、satori を呼び出し、マークアップ、幅、高さの設定と、onMounted フックで以前にロードしたフォントを渡します
結果の svg 文字列は svg.value ref に保存されます。これを app.vue テンプレートセクションで使用して、ビューポートに svg を表示します。テンプレートセクションを参照してください

ステップ 6. ユーティリティ関数

コードとテンプレートの機能に重要なユーティリティ関数をいくつか追加して、これまで取り組んできたことをまとめましょう。

画像アップロードのサポートの追加

画像のアップロードを処理する機能を追加しています。これにより、ユーザーは画像を選択し、サイズ制限 (100KB) 内かどうかを確認して表示できるようになります。

これをrefreshGraphicsコードの下に貼り付けます:

? app.vue

yarn add @vue/server-renderer @vueuse/core nuxt satori satori-html
yarn add -D @nuxtjs/tailwindcss

ログイン後にコピー

ファイルサイズを確認する理由 スムーズなパフォーマンスを確保するためにファイルサイズを制限しています。これより大きいと動作が遅くなる可能性があるため、100 KB が安全な上限です。

Vue コンポーネントを HTML 文字列に変換する

次に、Vue コンポーネントを HTML 文字列としてレンダリングします。これにより、サーバー側のレンダリング、電子メールテンプレート、または静的サイトの生成に Vue を使用できるようになります。この場合、グリーティングカードテンプレートを生成するためのものです。これもコードに追加しましょう。

npx nuxi init christmas-card-maker 
cd christmas-card-maker
yarn install

ログイン後にコピー

説明：

createSSRApp : この関数は、HTML 文字列にレンダリングできるサーバー側レンダリング (SSR) Vue アプリケーションインスタンスを作成するために使用されます。
renderToString : これは、Vue コンポーネント (GreetingCard) を HTML 文字列にレンダリングし、コンポーネントに必要な props を渡します。

カードをJPEGとしてダウンロードする

最後に、カードを JPEG としてダウンロードできるようにするコードを追加しましょう。

? app.vue

yarn add @vue/server-renderer @vueuse/core nuxt satori satori-html
yarn add -D @nuxtjs/tailwindcss

ログイン後にコピー

これはなぜ機能するのですか? HTML Canvas API を使用すると、SVG をキャンバスに描画し、簡単にダウンロードできるように JPEG に変換できます。これは、ベクターグラフィックスから画像ファイルを生成する迅速かつ効率的な方法です。

ステップ 7. スタイリング

SVG 要素がコンテナ内で正しく表示されるようにするには、CSS スタイルを適用する必要があります。生成された SVG のサイズは 1080 ピクセル x 1080 ピクセルの固定サイズですが、親コンテナーの方が小さいため、歪みなくコンテナー内に収まるように SVG をスケーリングする必要があります。

? app.vue

export default defineNuxtConfig({
  ssr: false,
  devtools: { enabled: true },
  modules: ["@nuxtjs/tailwindcss"],
});

ログイン後にコピー

この CSS ルールにより、.banner-here div 内の SVG 要素は、アスペクト比を維持しながら、利用可能なスペースを満たすようにサイズ変更されます。

Build a Greeting Card Maker w/ Vue Satori

これまでに、プロジェクトはこのスクリーンショットのようになっているはずです。実行して本当の魔法を見てみましょう!

コードを実行する

アプリの動作を確認するには、以下のコマンドを実行し、ブラウザで http://localhost:3000 を開きます。

参考までに、このチュートリアルの Github リポジトリは次のとおりです。

<template>
  <div>



<p><strong>So what’s happening here?</strong></p>

<ol>
<li>
<strong>Card Preview:</strong> The  with v-html="svg" is where our card will appear as an SVG once it’s generated.
</li>
<li><strong>Form Fields:</strong></li>


<ul>
<li>Two text fields: name and greeting. These will dynamically update the card when the user types.</li>
<li>File input: Allows users to upload an image.</li>
</ul>

<ol>
<li>
<strong>File Restrictions:</strong> The small tag below the file input informs users about allowed file size and formats. Large images can slow down rendering, so we’re capping the size at 100KB.</li>
<li>
<strong>Download Button:</strong> This triggers the downloadSvgAsJpeg function, which saves the card as a JPEG image.</li>
</ol>

<h3>
  
  
  Step 2. Setting up Dependencies
</h3>

<p>Now let’s set up the logic and install the packages needed to power our Holiday Card Maker. Let’s import a few packages that will make things easier for us.</p>

<p>? <strong>app.vue</strong><br>
</p>

<pre class="brush:php;toolbar:false">...
</template>

<script setup lang="ts">
import { createSSRApp } from "vue";
import { renderToString } from "@vue/server-renderer";
import { useLocalStorage, watchDebounced } from "@vueuse/core";
import satori from "satori";
import { html } from "satori-html";
import ChristmasCard from "./components/ChristmasCard.vue";
const form = useLocalStorage("app-form", {
  name: "",
  greeting: "Merry Christmas",
  photo: null,
});
const svg = ref("");
const fonts = ref([]);
...
</script>

ログイン後にコピー

Build a Greeting Card Maker w/ Vue Satori