JavaScript レポートでのカスタム フォントの使用

フォントは、 JavaScriptアプリケーションや Web ベースのレポートの視覚的表現において大きな役割を果たします。デフォルトでは、JavaScript を使用すると、開発者はフォント サイズ、太さ、スタイルなどをカスタマイズしたり、カスタム フォント タイプを含めたりすることができます。開発者はフォントを操作およびカスタマイズできるため、表示する情報の美しさと読みやすさの両方を向上させることができます。

JavaScript の柔軟性に合わせて、ActiveReportsJS を使用すると、ユーザーはレポート内のテキストを大幅にカスタマイズできます。この記事では、ActiveReportsJS デザイナーのフォントをカスタマイズする機能を活用する方法に焦点を当て、次のトピックについて説明します。

• フォントの基本

• スタンドアロン デザイナー アプリケーションの構成

• ActiveReportsJS ベースのアプリケーションの構成

• レポート デザイナー コンポーネントの構成

  
  

フォントの基本

すべての ActiveReportsJS コンポーネントは、Web ブラウザ環境内で動作します。

• スタンドアロン レポート デザイナーは、Chromium を使用してユーザー インターフェイスを表示するElectronで構築されています。

• JavaScript レポート ビューアおよびデザイナーコンポーネントは、ユーザーのマシン上のブラウザで実行される Web アプリケーションの一部です。

• PDF、表形式データ、および HTML エクスポート フィルターは、Web ブラウザ環境を使用してレポート コンテンツを測定します。

  
  

一般的なレポートは、ブラウザがグリフと呼ばれる形状を使用してレンダリングするテキスト コンテンツで構成されます。フォント リソースには、文字コードをこれらの文字を表すグリフにマップする情報が含まれています。したがって、テキストを期待どおりに表示するには、ブラウザーがフォント リソースにアクセスする必要があります。

ActiveReportsJS のすべてのテキスト コンテンツには、次のようないくつかのフォント プロパティがあります。

• フォント ファミリー: フォント ID、つまり Arial、Calabri、または Times New Roman。
• フォント スタイル: 標準または斜体。
• フォントの太さ：細、極軽、標準、中、半太字、太字、極太、太。

これら 3 つのプロパティの一意の組み合わせは、 Font Faceと呼ばれます。フォント ファミリは通常、複数のフォント フェイスで構成されており、それらは (通常は) 複数のファイルで表されます。

たとえば、 Calibriフォント ファミリには 6 つの異なるフォントフェイスがあります。

ActiveReportsJS はレポートを表示するときに、これらのフォント プロパティを font-family、font-style、および font-weight CSS スタイル プロパティに変換します。ブラウザーに依存して、関連するフォント リソースを解決し、必要なグリフを抽出します。ブラウザにはフォント リソースにアクセスする 2 つの方法があります。ローカル、ブラウザが実行されるシステム上、またはダウンロードによって。

ダウンロード可能なフォント リソースは保守が簡単です。最新のブラウザはすべてこれらをサポートしており、すべての環境で一貫したテキスト コンテンツの出力が保証されます。さらに、ActiveReportsJS PDF エクスポートでは、フォントのサブセットが PDF ドキュメントに埋め込まれるため、ダウンロード可能なフォントが必要です。したがって、すべての環境で一貫したレポート出力を保証する最善の方法は、ダウンロード可能なフォント リソースにアクセスするように ActiveReportsJS コンポーネントを構成することです。

始める前に、レポートに使用するフォント ファミリを決定する必要があります。 Arial、Times New Roman、Helvetica などの標準フォントを使用できます。または、任意の数の Web フォントを使用することもできます。この例では、Montserrat フォントを使用します。これはデモ レポートで使用しているのと同じフォントです。

いずれの場合も、使用する予定のすべてのフォント ファミリのすべてのフォント フェイス ファイルがあることを確認してください。 ActiveReportsJSは次のフォント形式をサポートしています。

スタンドアロン レポート デザイナーの構成

スタンドアロン デザイナーにフォント ファミリを追加するには、まず ActiveReportsJS フォント構成ファイルが保存されているフォルダーに移動する必要があります。これらは、オペレーティング システムに応じて次の場所にあります。

• Windows : %AppData%\ActiveReportsJS Designer\fontsConfig.json

• macOS : ~/ライブラリ/アプリケーション サポート/ActiveReportsJS デザイナー/fontsConfig.json

• Linux : ~/.config/ActivereportsJS デザイナー/fontsConfig.json

  
  

この場所にFontsという名前のフォルダーを作成し、使用する予定のすべてのフォント フェイスのすべてのファイルをこのフォルダーにコピーします。

次に、選択したテキスト エディターでfontsConfig.jsonファイルを開きます。このファイルには、レポート作成者がテキスト コンテンツに使用するフォント レースの記述子が含まれています。 pathプロパティには、 Fontsディレクトリの親フォルダーへの絶対パスを指定します。記述子配列のデフォルト項目を、目的のフォントフェイスの記述子に置き換えます。

各記述子には次のプロパティが含まれます。

たとえば、 Montserratフォントの標準、斜体、および太字を許可するには、次の記述子を使用します。

 { "name": "Montserrat", "weight": "400", "style": "normal", "source": "Fonts/Montserrat/Montserrat-Regular.ttf" }, { "name": "Montserrat", "weight": "400", "style": "italic", "source": "Fonts/Montserrat/Montserrat-Italic.ttf" }, { "name": "Montserrat", "weight": "700", "style": "normal", "source": "Fonts/Montserrat/Montserrat-Bold.ttf" }

スタンドアロン デザイナー アプリケーションを実行し、レポート本文に TextBox を追加し、そのFont FamilyプロパティをfontsConfig.jsonファイルで列挙したフォントの 1 つに設定できること、およびすべてのフォント フェイスが正しく表示されていることを確認します。

ActiveReportsJS ベースのアプリケーションの構成

JavaScript レポート ビューアでレポートを表示するアプリケーション、レポートを PDF にエクスポートするアプリケーション、またはレポート デザイナー コンポーネントをホストするアプリケーションは、スタンドアロン デザイナー アプリケーション用に作成したのと同じ構成を使用する必要があります。これを実現する最も簡単な方法は、 FontsフォルダーとfontsConfig.jsonファイルをアプリケーションの静的アセット フォルダーにコピーすることです。

このフォルダーは、フロントエンド フレームワークごとに異なります。以下にいくつかの例を示します。

• Angular : アセット構成を使用します。 FontsフォルダーとfontsConfig.jsonファイルがアセット フォルダーにコピーされている場合は、 fontsConfig.jsonファイル内のフォント記述子のソース プロパティを変更して、アセットで始まるようにします。例えば：

  { "name": "Montserrat"、"weight": "900"、"style": "italic"、"source": "assets/Fonts/Montserrat/Montserrat-BlackItalic.ttf" }

• React : create-react-app で作成されたアプリケーションにパブリック フォルダーを使用します。

• Vue : 静的アセット処理を使用します。

  
  

最後に、アプリケーションは、 fontsConfigファイルの URL を指定して FontStore オブジェクトのregisterFontsメソッドを呼び出す必要があります。このコードは、アプリケーションがレポートの表示またはエクスポートを開始する前に実行する必要があります。 registerFontsメソッドは非同期であり、 Promiseオブジェクトを返すことに注意してください。

このメソッドを呼び出すコードは、レポートをビューア コンポーネントにロードするかエクスポートする前に、返された Promise が解決されるまで待機することもできます。

純粋な JavaScript アプリケーションの場合、コードは次のようになります。

 <script src="https://cdn.grapecity.com/activereportsjs/2.2.0/dist/ar-js-core.js"></script> <script> GC.ActiveReports.Core.FontStore.registerFonts( "/resources/fontsConfig.json" // replace the URL with the actual one ) </script>

Angular 、 React 、および Vue アプリケーションの場合:

 import { Core } from "@grapecity/activereports"; Core.FontStore.registerFonts("/assets/fontConfig.json") // replace the URL with the actual one

このコードの例は、ライブ デモで見つけることができます。

レポート デザイナー コンポーネントの構成

最後に、レポート デザイナー コンポーネントが登録されたフォントのみを表示するようにするには、デザイナー インスタンスのfontSetプロパティを登録済みに設定します。

さらに、新しく追加されたレポート アイテムに登録済みフォントのいずれかがデフォルトで確実に含まれるようにしたい場合は、 カスタム初期テンプレート機能を使用できます。

結論

以上で、この記事は終わりです。これまで説明したように、フォントは開発者にとって美しさと読みやすさを向上させる強力な方法です。この記事では、ActiveReportsJS レポート デザイナーおよびビューアーを使用してカスタム フォントをレポートに簡単に組み込むことができることを説明しました。

コーディングを楽しんでください!