H5エディターでテンプレートライブラリを設計し、カバーアートの自動生成を実現する方法

過去の選択

H5エディターの画像アップロードと画像ライブラリの設計スキーム
H5エディターのリアルタイムプレビューと実機スキャンコードプレビュー機能の実現方法
オンラインIDE開発の開始：オンラインコードエディタを最初から実装する
React + Koa-Dooringに基づくh5ページのビジュアルエディタ
TSコアナレッジポイントの要約と実際のプロジェクトケースの分析

序文

HTML5はHTMLの最新リビジョンです。モバイルデバイスでマルチメディアをサポートするように設計されており、より豊富なページパフォーマンスを提供します。HTML5もクロスプラットフォームであり、さまざまなタイプのハードウェア（PC、タブレット、携帯電話、テレビなど）。したがって、モバイル公式Webサイト、H5イベントページ、H5マーケティングページなど、さまざまなシナリオのアプリケーションが導出されます。インターネットペアの開発により、ビッグデータの分野でのモバイルBIモデルもH5で実行できるようになります。

上記のニーズを満たすために、多くの企業が特定のショーや特定の展示会などのH5編集プラットフォームの構築を開始しました。著者は以前に独自のH5エディターH5-Dooringをオープンソース化して、企業がビジネスシナリオに適合するH5ページを迅速に構築できるようにしました。

使いやすいH5エディターを設計するには、ユーザー操作を簡素化し、ユーザーコストを大幅に削減する必要があることは誰もが知っています。この標準を達成するには、次の条件が必要です。

豊富なコンポーネントライブラリ
豊富な画像リソース
柔軟なコンポーネント構成
愚かな操作
箱から出してすぐに使えるH5ページテンプレート（テンプレートライブラリ）

上記の5つの条件は、H5エディターを開発するための非常に重要な参照指標です。著者は、前の記事の最初の4つの条件の具体的な実装計画を持っています。著者は、H5エディターでのテンプレートライブラリ関数の実装を具体的に紹介します。同じことを提供したいと思います。この要件を必要とするITエンジニアにはリファレンスがあります。

章のまとめ

H5エディターでのテンプレートライブラリ設計の基本的な考え方
iframeの子ページと親ページ間の通信を実現する方法
dom要素に基づいてカバー画像を自動的に生成するソリューション

テキスト

フロントエンドエンジニアとして、プロジェクトの問題を解決することは私たちの基本的な責任の1つです。取得した知識を使用して、プロジェクト開発の問題やニーズを解決できます。これは、プロとしてのキャリアの最初の段階でもあります。 —適応期間。昇進を継続したい場合は、今後も問題が発生した場合に最適なソリューションを活用して効率的に問題を解決できるよう、さまざまなスキルを磨き上げていく必要があります。これが第2段階です— -開発期間。

次に、H5エディターでテンプレートライブラリを完成させ、カバーマップスキームの自動生成を実現するために、作成者が段階的に説明します。フロントエンドエンジニアが必要とする基本機能（javascript、html5、モジュラー開発メソッド（es6モジュール性とサードパーティモジュールの使用方法）。

H5エディターのテンプレートライブラリを設計する基本的な考え方

H5エディターでのページレンダリングは主にjsonスキーマに基づいており、各コンポーネントをjsonメタデータに絞り込むことができます。これにより、コンポーネントをよりきめ細かく制御でき、テンプレートは次のようになります。多くのコンポーネントで構成されるブロックまたは完全なページは、json要素配列に対応します。したがって、対応する解決策は、テンプレートを保存するためのボタンをユーザーに提供することです。ユーザーが[保存]をクリックすると、現在構成されているjsonデータのみを取得する必要があります。、対応するデータベースに保存します。データ構造はおおまかに次のとおりです。

[
    {
        "id": "12reg2",
        "name": "趣谈前端落地页",
        "tpl": [...组件配置数据项]
    },
     {
        "id": "12rdg5",
        "name": "H5-Dooring落地页",
        "tpl": [...组件配置数据项]
    }
]

复制代码

上記のデータをデータベースから取り出し、reactまたはvueを直接使用してレンダリングすることができます。jsonデータの取得方法については、H5-Dooringの特定の実装プロセスを参照してください。

ただし、データを保存するだけでは不十分です。ユーザーが独自のテンプレートを保存した後、後で以前に構成したテンプレートを直接使用する場合、どのようにしてすばやく見つけることができますか？テンプレートの名前でさまざまなテンプレートを識別できますが、一度だけです。テンプレートはますます増えており、ユーザーはテンプレートの名前から必要なテンプレートを簡単に選択できないため、現時点では、H5エディターがテンプレートプレビューの機能を提供することを期待することがよくあります。以下に示すように、次のようになりました。難しい問題は、テンプレートプレビューを生成する方法です。

テンプレートプレビューを生成する方法

テンプレートプレビューを生成する一般的な考え方は、プレビューページに基づいてプレビューページのスクリーンショットを生成し、対応するテンプレートデータに保存することです。手順は次のとおりです。したがって、ユーザーはH5エディターの編集ページでH5テンプレートを構成してから、プレビューにジャンプする必要があります。ページは、プレビューページに基づいてプレビューのスクリーンショットを生成し、最後に編集ページに戻って保存します。このプロセスは、異なるページの相互ジャンプを伴うため、あまりユーザーフレンドリーではありません。さらに最適化して、編集ページでプレビュー画像を直接生成できます。、このロジックを実現するために、2つのスキームがあります。

サーバーを介してプレビューページをリクエストし、サーバー上でページのスクリーンショットを生成して、テンプレートデータと一緒にデータベースに保存します
キャンバス+ iframeテクノロジーを介してdomフロントエンドに基づいてプレビュー画像を生成します

前者の実装プロセスはより複雑であるため、puppeteerなどのライブラリに依存し、画像とテンプレートデータの同期を維持する必要があるため、2番目のオプションである純粋なフロントエンド実装をお勧めします。次のコンテンツで1つずつ説明します。前書き。

iframeの子ページと親ページ間の通信を実現する方法

上記の紹介では、キャンバス+ iframeテクノロジーを使用してページのスクリーンショットを作成することを選択しました。最初に実装効果を見てみましょう。上の図から、デフォルトの画像を使用する方法とカバーを自動的に生成する方法の2つの方法でカバーを設定できることがわかります。

ユーザーは、Dooringが提供するデフォルトのカバーを使用するか、生成されたプレビューカバーを直接使用できます。図2では、ポップアップウィンドウは実際にはiframeです。作成者は、iframeコンテンツがレンダリングされた後、スクリーンショットをサーバーに自動的にアップロードし、次にiframeと親をアップロードするメカニズムを設計しました。ページ通信は、画像のURLを編集ページに渡し、テンプレートデータとともに保存します。ページの親子通信を実現するには、iframeが親ページとどのように相互作用するかを理解する必要があります。親子ページ通信の詳細については、作成者の古いレコードを参照してください。プロジェクトのクロスページ通信の問題とファイルダウンロード機能のフロントエンド実装。ここでは、iframeが親ページとどのように通信するかを見てみましょう。

// iframe点用副页面函数
parent.window.getFaceUrl(url);

// 父页面定义的全局函数
window.getFaceUrl = (url) => {
  setFaceUrl(url)
  setShowModalIframe(false)
}

复制代码

上記では、基本的に父子の価値移転とプロセス設計計画全体を克服しました。データの保存方法やテンプレートへのデータの統合方法など、具体的な詳細が多数あるため、著者のH5-Dooringプロジェクトでそれについて学ぶことができます。

dom要素に基づいてカバー画像を自動的に生成するソリューション

上記は基本的にテンプレートライブラリ全体の保存プロセスを実装します。次にプレビュー画像の保存の詳細を実装します。ページ要素に基づいてプレビュー画像を生成するため、domを画像に変換できるフロントエンドが必要です。ここで著者は2つの有名なものを調査しました。図書館：

html2canvas
dom-to-image

html2canvasはまだ実験段階であり、著者の周りの友人がヨーロッパを使用した後に実際に説明できないバグを書いたので、著者は基本的に現在のニーズを満たすことができるdom-to-imageを分析し、それを直接使用して達成します。

上記のプロセスを実装する必要があります。つまり、domを画像に変換してからサーバーに送信し、最後にサーバーから返された画像アドレスを取得して、最後に画像アドレスとテンプレートデータを一緒に保存する必要があります。コードを直接見てみましょう。

import domtoimage from 'dom-to-image';
// ...其他库

// 将dom转化为图片逻辑
const generateImg = (cb) => {
    domtoimage.toBlob(ref.current)
    .then(function (blob) {
        const formData = new FormData();
        formData.append('file', blob, 'tpl.jpg');
        req.post('/files/xxx/xxx', formData).then((res) => {
          cb && cb(res.url)
        })
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });
  }

复制代码

次の手順は非常に簡単です。画像のURLを取得し、表示と保存のために親ページに渡します。