カスタムコンポーネントでQodlyアプリケーションを拡張する

4D Qodly Proは、アプリケーションの設計に役立つ幅広いネイティブコンポーネントを既に提供しています。しかし、それをさらに進化させることができることをご存知ですか？コミュニティによって開発されたカスタムコンポーネントのおかげで、オーダーメイドの機能でプロジェクトを強化することができます！

これらのカスタムコンポーネントは、4Dのプラグインやコンポーネントのように、パーソナライズされた機能を追加することで、4D Qodly Proの機能を拡張することができます。

この記事では、これらのコンポーネントの使用方法と統合方法について、パフォーマンスレビューアプリケーションの実際の使用例とともにご紹介します。

パフォーマンス・レビュー・アプリケーション

カスタムコンポーネントとは？

カスタムコンポーネントは、特定のニーズを満たしたり、4D Qodly Proのビルトインコンポーネントでカバーされていない機能を追加するために、ユーザーが作成したビルディングブロックです。Reactで開発され、開発者にパワフルで柔軟な基盤を提供します。

カスタムコンポーネントをQodly Studioに統合することで、いくつかの利点が得られます：

• 拡張性：拡張性：プロジェクトの要件に合わせてページをカスタマイズできます。
• 再利用性：異なるプロジェクトやQodlyコミュニティでコンポーネントを共有できます。
• 効率性：ゼロから始めるのではなく、ビルド済みのコンポーネントを使用することで時間を節約できます。

カスタムコンポーネントの使い方

1. コンポーネントを選ぶ
   • カスタムコンポーネントの GitHub リポジトリをブラウズして、必要なコンポーネントを選択します。
2. 最新バージョンをダウンロード
   • 選択したコンポーネントをクリックします。
   • リリースセクションに移動します。
   • 最新バージョン（ZIPファイル）をダウンロードします。ソースコードではなく、コンパイル済みバージョンを取得するために Releases セクションにいることを確認してください。
3. Qodly Studioにインストールする
   • Components セクションで、Upload component をクリックします。
   • ダウンロードした ZIP ファイルをドラッグ＆ドロップするか、選択します。
   • Install Component] をクリックし、[Reload] をクリックします。
   • 利用可能なコンポーネントのカスタムセクションにコンポーネントが表示されます。
   • これで、ページに直接ドラッグ＆ドロップすることができます。

詳しくは公式ドキュメントをご覧ください：カスタムコンポーネントのアップロード

独自のカスタムコンポーネントを作成するには？

あなたのニーズに合うコンポーネントが見つからない場合、自分で作成することができます。

4D Qodly ProのAPIは、専用のCLIツールである@qodly/cliを使ってReactでのカスタムコンポーネントの作成を簡素化します。このツールは、Reactプロジェクトの初期化を効率化し、開発者が再利用可能なコンポーネントを設計・共有できるようにします。一度統合されると、これらのコンポーネントは簡単なドラッグ＆ドロップでPagesに追加できます。

詳細は公式ドキュメントをご覧ください。

カスタムコンポーネントはアプリケーションをどのように強化できますか？

Performance Reviewアプリケーションでは、ユーザーエクスペリエンスを向上させるためにいくつかのカスタムコンポーネントを統合しました。具体的な例をいくつか紹介します：

• pdfViewerコンポーネントでPDFドキュメントを表示する。
• fileDownloadコンポーネントを使ってファイルをダウンロードする。
• Popoverコンポーネントで動的メニューを作成する。
• PopoverコンポーネントとDatePickerコンポーネントを組み合わせて、年ピッカーを作成する。

ドキュメントを表示する：pdfViewerでPDFを統合する

pdfViewerコンポーネントを使います。

PDFビューアを統合する手順

• 前のセクションで説明したように、pdfViewerコンポーネントをダウンロードしてインストールします。
• このコンポーネントをページにドラッグし、PDFを含む “selectedReview.DocumentPDF “データソースにリンクします。

• すると、文書がページ上に動的に表示されます。

このコンポーネントは、4D Write Proテンプレートとデータベースデータから動的に生成されたドキュメントを表示するのに特に便利です。

fileDownloadコンポーネントでPDFファイルをダウンロードする

fileDownloadコンポーネントを使用すると、ドキュメントをダウンロードすることができます。

ファイルダウンロードオプションを作成する手順

• fileDownloadコンポーネントをインストールします。
• コンポーネントをページにドラッグし、ダウンロードするPDFファイルを含むデータソースをリンクします。この場合、データソースは「selectedReview.DocumentPDF」です。

• 一度設定すれば、クリックするだけでファイルをダウンロードすることができます。

ポップオーバーでインタラクティブなメニューを作成する

Performance Reviewアプリケーションでは、ページの上部にメニューを統合し、Page Loaderウィジェットの上に配置しました。このメニューはページローダコンポーネント内でロードされるページを動的に決定します。メニューはpopoverコンポーネントで作成しました。

メニューの作成手順

• popoverコンポーネントをインストールします。
• popoverコンポーネントをページにドラッグ＆ドロップします。
• メニューセクションにHuman Resourcesという静的テキストを挿入します。
• overセクションにCollaborator、Reviews、Trainingsという3つのボタンを挿入します。

少しスタイルを調整するだけで、機能的で人間工学に基づいたメニューができあがります：

デザインを微調整し、間隔、色、ホバー効果を調整することで、Qodlyアプリケーションにシームレスでユーザーフレンドリーなナビゲーション体験を作り出すことができます。

ポップオーバーとDatePickerでカスタムDatePickerを作成

4D Qodly Proは、日付選択用のネイティブコンポーネントを提供しています。しかし、パフォーマンスレビューアプリケーションでは、カスタムDatePickerコンポーネントを使用することにしました。これにより、カスタムコンポーネントの組み合わせのデモンストレーションも行うことができました。

カスタム年入力の作成手順

• スタイルボックスをページにドラッグ＆ドロップします。
• スタイル ボックス内に数字形式の入力テキストを追加します。
• スタイル ボックス内にポップオーバー コンポーネントを挿入します。
• ポップオーバーのメニュー セクションに、日付セレクタを開くためのアイコンを挿入します。
• オーバーセクションに DatePicker コンポーネントを挿入します。
• 入力テキストとDatePickerにデータソースを追加します。

いくつかのスタイル調整（ボーダー、色など）を行った結果がこちらです：

このアプローチは、柔軟性とカスタマイズされたデザインを組み合わせ、ユーザーエクスペリエンスを向上させます。

次のステップ

カスタムコンポーネントは、複雑な開発をすることなくQodlyアプリケーションを強化し、特定のニーズを満たすための強力なソリューションです。GitHubのコンポーネントリポジトリを探索して、さらなる可能性を発見してください。

独自のコンポーネントを作成した場合は、Qodlyコミュニティと共有しましょう！

さらに詳しく知りたい方は、こちらのチュートリアルビデオをご覧ください：Qodlyアプリにカスタムコンポーネントを追加する方法。