著者: Xuan Tang（カーネギーメロン大学コンピュータサイエンス学部、ArcBlockサマーインターン）
メンター: Han Zhang（ArcBlock、エンジニア）

この夏、私はArcBlockで3か月間のインターンシップを経験しました。このインターン期間中に、ReactやNode.jsを含むウェブ開発について学びました。この基礎をもとに、ArcBlockの開発者向けドキュメントを読み、ArcBlockのBlockletプラットフォームについて理解を深めました。その後、テンプレートに基づいて画像を生成できる分散型アプリケーション（DApp）の完成に注力しました。本ブログでは、このプロジェクトを簡単に紹介します。

なぜ分散型画像ジェネレーターが重要なのか

一部のウェブアプリケーションでは、テンプレートから生成された大量の画像を使用する必要がよくあります。例えば、ECサイトのテンプレート化された商品画像、ソーシャルシェア用のキャンペーン画像、検索エンジンやソーシャルリンク最適化のためのOpen Graph画像などです。画像を一つひとつデザイナーに作成してもらうよりも、テンプレートベースの画像ジェネレーターを使う方がはるかに効率的です。過去にはこのようなサービスを提供するものもありましたが、その場合、サイトが第三者サービスに依存してしまうというデメリットがあります。

分散型画像ジェネレーターは、このテンプレートベースの画像生成サービスをコンポーザブルなBlockletとして提供します。これにより、利用したいサイトは第三者サービスに依存せず、自身の画像ジェネレーターをインストールして組み合わせることが可能になります。

デザイン

画像ジェネレーターはホームページと編集ページの2つのページに分かれています。ホームページはユーザーが使用したいテンプレートを選ぶためのページです。下の画像のように、テンプレートは教育、技術、エンターテインメント、金融、環境の5つのテーマに分かれており、それぞれのテーマに6つのテンプレートがあります。選択すると、ユーザーは編集ページに進みます。

編集ページはタイトルセクション、プレビューセクション、パラメーター編集セクション、機能セクションの4つに分かれており、それぞれについて紹介します。

タイトルセクションとプレビューセクション

上図のように、左上にはホームページに戻るボタンがあります。このボタンと中央のテキストがタイトルセクションを形成しています。プレビューセクションは画像の下に表示され、初期状態ではユーザーが選択したテンプレートが表示されます。その後、ユーザーはパラメーター編集セクションで画像のパラメーターを変更したりテキストを追加したりするだけで、変更内容がリアルタイムにプレビューセクションに反映されます。

パラメーター編集セクション

パラメーター編集エリアは5つのセクションに分かれており、画像の5種類のパラメーターに対応しています。

パラメーター領域1：左上エリアでは、画像のサイズ（幅と高さ）を調整できます。初期値はテンプレートの元のサイズです。2つの入力ボックスの下には「元のアスペクト比を維持する」かどうかのチェックボックスがあります。これをチェックすると、幅か高さのどちらか一方を変更するだけで、もう一方が自動的に比率に合わせて調整されます。

パラメーター領域2：ユーザーが画像にテキストを追加して表現できる情報を豊かにするため、このエリアでテキストを入力できます。入力ボックスは改行やスペースの追加に対応しています。

パラメーター領域3：テキストを追加すると、次の3つのパラメーター領域はテキストのフォーマット調整用になります。まず、テキストサイズを数値で入力して調整できます。また、テキストの位置も調整可能で、上マージンは画像の上端からテキストまでの距離、左マージンは画像の左端からテキストまでの距離を表します。

パラメーター領域4：2行目の左端エリアでは、テキストのフォントを選択できます。初期値は多くの人が使うArialフォントです。

パラメーター領域5：最後にテキストの色を調整できます。まず色バーから大まかな色を選び、その下に表示される5色の中から具体的な色を選択します。

上記の機能は基本的にフロントエンドで実装しているため、Reactを用いて開発しました。各パラメーター領域はReactコンポーネントに対応しており、管理が容易です。各パラメーターはReactのstateに対応しているため、入力ボックスやドロップダウンメニューで簡単に調整できます。入力ボックスの実装にはMUIライブラリを利用しました。これらのパラメーターをHTMLやCSSのスタイルに渡すことで、プレビューセクションに反映しています。

ユーザーがダウンロード可能な画像を生成する機能はhtml2canvasライブラリを呼び出して実装しています。html2canvasはプレビューセクションの画像をスクリーンショットとして取得し、ユーザーが最終的に得る画像がプレビューと同じになるようにしています。

機能セクション

機能セクションは2つのボタンで構成されており、それぞれ画像のダウンロードと共有を提供します。

ユーザーが「Download」ボタンをクリックすると、前述のhtml2canvasライブラリがプレビューセクションの画像をスクリーンショットし、その画像をユーザーのローカルディスクにダウンロードします。

ユーザーが「Share」ボタンをクリックすると、画像のURLが画面下部に表示されます。ユーザーはこのリンクをコピーして必要な場所に貼り付けることで、画像をダウンロードせずに他者と共有できます。もちろん、この画像はプレビューセクションに表示されているものと同一です。

画像共有機能はバックエンドのサーバー側も関わっており、主にExpress.jsフレームワークで実装しています。まず、プレビューセクションの画像パラメーターをすべてURLとしてバックエンドに渡します。ここではaxiosライブラリを使用しました。バックエンドではルーターがフロントエンドからのURLを受け取り、各パラメーターを抽出します。その後、canvasライブラリを使ってこれらのパラメーターに基づきフロントエンドと同じ画像を描画します。こうしてユーザーが生成した画像をバックエンドで取得できます。

描画時にユーザーが選択したテンプレートを読み込む必要があるため、すべてのテンプレートをバックエンドサーバーの静的リソースとしてアップロードしています。プロジェクト全体はcreate-blockletテンプレートで作成されているため、これらの画像はBlockletのdata_dirパスに保存しています。同様に、バックエンドがユーザーの画像を生成した後は、それらをdata_dirに書き込み、assetsパスにマウントします。最後に、この画像のパス／URLをフロントエンドに返すだけです。

GitリポジトリとBlocklet Store

ぜひ試してみてください。またはフォークして本格的な製品に改良しても構いません。

Github：https://github.com/dnfisreal/image-generator

Blocklet Store：https://test.store.blocklet.dev/blocklets/z8ia3a66nQ7eqpSbj37cZj6qNnsmMsuUkATmP

謝辞

本記事はこの画像ジェネレーターの概要紹介です。約3か月のインターンシップ期間中にBlockletを完成させることができ、大変嬉しく思います。また、学校ではなかなか触れられない多くの知識を学ぶことができました。

改めて、この機会を与えてくださったArcBlockに感謝いたします！