blog

ソフトウェア開発|このオープンソースツールを使ってReactでインタラクティブなタイムラインを作る

Planbyは、ストリーミングサービスや音楽・スポーツイベントなどのスケジュールやタイムライン、電子番組ガイドの作成を支援するコンポーネントです。...

Oct 28, 2025 · 2 min. read
シェア

Planbyは、ストリーミングサービス、音楽、スポーツイベントなどのスケジュール、タイムライン、電子番組ガイドを作成するために使用されるJavaScriptコンポーネントです。

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

時間線形エネルギー(TWE)

タイムライン機能を実装する際に最も重要なことはパフォーマンスです。多くの異なるチャンネルで無限のデータストリームを扱う可能性があります。アプリケーションは常に更新され、移動し、スクロールします。ユーザーとコンテンツのやり取りは流動的であるべきです。

また、デザインが悪いという潜在的な問題もあります。アプリがEPGタイムラインを縦スクロールのリスト形式で実装していることがありますが、これは時間的に左右に移動するためにボタンをクリックしなければならないことを意味し、すぐに疲れてしまいます。さらに、EPGと相互作用するカスタム機能(読み取りなど)が単に動作しないか、動作してもパフォーマンスの問題を引き起こすこともあります。

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

プランビーとは何ですか?

Planbyの出番です。PlanbyはReactとTypescript、そしてわずかなリソースを使ってゼロから作られました。大量のデータを操作できるカスタム仮想ビューを使用しています。ユーザーに番組とチャンネルを表示し、時間と指定されたチャンネルに基づいてすべての要素を自動的に配置します。リソースにコンテンツが含まれていない場合、Planby は時間帯が正しく配置されるように配置を計算します。

Planbyはサイドバー、タイムライン、快適なレイアウト、ライブプログラムリフレッシュなど、必要な機能を全て備えたシンプルなインターフェースを持っています。また、レイアウトに含めたくない要素を非表示にするオプション機能もあります。

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

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

プランビーをお試しください。

Planbyを試してみたい方、あるいはPlanbyについて知りたい方は、 アクセスしてください。そこにいくつかのサンプルがありますし、詳細についてはドキュメントを読んでください。パッケージは npm からも入手できます。

Read next