ホームページ >ウェブフロントエンド >jsチュートリアル >VueSatori を使用してグリーティング カード メーカーを構築する
VueSatori を使用してグリーティング カード メーカーを構築する
- Mary-Kate Olsenオリジナル
- 2024-12-20 20:39:20730ブラウズ
作者 デュベム・イズオラ
コーディング スキルを活用したお祝いプロジェクトを求めているクリエイティブ デベロッパーの皆さんは、カスタマイズしたり、独自の写真を追加したり、すぐにダウンロードしたりできるデジタル ホリデー グリーティング カードを作成しましょう。これを実現するためにいくつかの最先端の Web テクノロジーを使用します。その過程で、グラフィックスの生成、いくつかのクールなパッケージ、およびいくつかの優れた Vue 3 トリックについて学びます。
私たちが構築しようとしているもの
ホリデー グリーティング カード メーカー インターフェイスのスクリーンショット
このチュートリアルが終わるまでに、次のことができるようになります:
- パーソナライズされたホリデー カードを作成するための完全な機能を備えた 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 と互換性のある HTML コンテンツをレンダリングするためのヘルパー ライブラリ
- @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 要素は、アスペクト比を維持しながら、利用可能なスペースを満たすようにサイズ変更されます。
これまでに、プロジェクトはこのスクリーンショットのようになっているはずです。実行して本当の魔法を見てみましょう!
コードを実行する
アプリの動作を確認するには、以下のコマンドを実行し、ブラウザで 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>
上の GIF のインターフェースに似たものが表示されるはずです。詳細を編集したり、画像を追加したり、画像をダウンロードしたりできます。おめでとうございます！これで、自分専用のホリデー カード メーカーが完成しました。
まとめ
これで、パーソナライズされたグリーティング カード メーカーが構築できました。 ?しかし、ここで立ち止まらないでください。さまざまなデザインを試したり、カスタマイズ オプションを追加したり、他の機会に使用するカードを作成したりすることもできます。
プロジェクトを拡張するためのいくつかのアイデア:
- さらに背景テーマを追加します
- テキストの色/フォントの選択を含める
- 誕生日や記念日用のテンプレートを作成する
クライアント側でさらに多くのことを行いたいですか?この記事を読んで、ブラウザで 3D オブジェクトをレンダリングする方法を学びましょう。
元々は、2024 年 12 月 19 日に https://www.vuemastery.com で公開されました。
以上がVueSatori を使用してグリーティング カード メーカーを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。