DUICUO

このオープンソース ツールを使用して、React でインタラクティブなタイムラインを作成します。

数年間、オンラインTVとビデオ・オン・デマンド(VOD)業界で働いていました。スケジューラーWebアプリケーションを開発している中で、電子番組表(EPG)とスケジュール管理に適したソリューションがないことに気づきました。確かに、これは多くのWeb開発者にとってニッチな機能ですが、TVアプリケーションでは一般的な要件です。多くのWebサイトが独自のEPGやスケジュール管理を実装しているのを見て分析する中で、なぜ誰もが使える共通のソリューションを開発するのではなく、独自のソリューションを開発しているのだろうと疑問に思うことがよくありました。そんな時にPlanbyの開発を始めました。

Planbyは、オンラインTVやビデオ・オン・デマンド(VOD)、音楽、スポーツイベントなどのスケジュール、タイムライン、電子番組表(EPG)を作成するのに役立つReact(JavaScript)コンポーネントです。Planbyはカスタム仮想ビューを使用することで、大量のデータを操作し、ユーザーフレンドリーで役立つ方法で視聴者に提示することができます。

Planbyには、サードパーティのUIライブラリとの統合を可能にするシンプルなAPIが備わっています。コンポーネントテーマは、アプリケーションデザインのニーズに合わせてカスタマイズできます。

タイムラインのパフォーマンス

タイムライン機能を実装する際には、パフォーマンスが最優先事項です。様々なチャネルを経由する無限のデータストリームを処理することになるかもしれません。アプリケーションは常に更新、移動、スクロールを繰り返しているかもしれません。ユーザーとコンテンツのインタラクションはシームレスである必要があります。

もう一つの潜在的な問題は、設計の不備です。アプリによってはEPGのタイムラインをリスト形式で実装しているものがあり、縦スクロールが必要になります。つまり、左右に移動するにはボタンをクリックする必要があり、すぐに疲れてしまいます。さらに重要なのは、EPGと連携するカスタム機能(評価、お気に入りチャンネルの選択、右から左への読み上げ(RTL)など)がまったく使えなかったり、たとえ使える機能であってもパフォーマンスの問題を引き起こしたりする場合があることです。

よく遭遇するもう一つの問題は、アプリケーションのデータ転送が長すぎることです。EPGをスクロールしているときにアプリケーションがデータを要求すると、タイムラインが遅く感じられ、クラッシュすることさえあります。

Planbyとは何ですか?

Planby はまさにこれを実現します。Planby は、React と TypeScript を使い、少数のアセットからゼロから構築されました。カスタム仮想ビューを使用することで、大量のデータを操作できます。プログラムとチャンネルをユーザーに表示し、時間と指定されたチャンネルに基づいてすべての要素を自動的に配置します。アセットにコンテンツが含まれていない場合、Planby は時間セグメントの正確な配置を保証するために配置を計算します。

Planbyは、サイドバー、タイムライン、魅力的なレイアウト、ライブプログラム更新など、必要な機能をすべて備えたシンプルなインターフェースを備えています。さらに、レイアウトに含めたくない要素を非表示にするオプション機能も備えています。

PlanbyにはシンプルなAPIが用意されており、開発者は独自のプロジェクトやユーザー設定を実装できます。Planbyのテーマを使用して、新機能を開発したり、選択したデザインに合わせたカスタムスタイルを作成したりできます。カレンダー、評価オプション、お気に入りリスト、スクロール、「今すぐ」ボタン、録画スケジュール、フォローアップコンテンツなど、他の機能も簡単に統合できます。さらに重要なのは、RTL機能を含むカスタムグローバルスタイルを追加できることです。

最も重要なのは、MIT ライセンスに基づくオープンソースであることです。

Planbyを試す

Planbyを試してみたい方、あるいはただ触ってみたい方は、Gitリポジトリをご覧ください。すでにいくつかのサンプルを掲載しています。また、詳細はドキュメントをご覧ください。パッケージは​npm​からも入手できます。