古いテレビをヴィンテージ空港フリップボードに変える方法
かつて駅や空港のターミナルに吊り下げられていた本物の機械式分割フラップディスプレイは、法外な費用がかかりました。家庭やオフィス用に購入しようとすると、商用メーカーは3,000〜5,000ドルを請求します。flipoffリポジトリは、完全にデジタルなソリューションでこの問題を解決します。
このプロジェクトは、ブラウザ搭載の任意の画面、タブレット、TVを、テキスト変更時にクリック音とランダムキャラクターアニメーションを備えたクラシックな情報ボードに変えます。
バンドラーやサードパーティライブラリなし
このリポジトリには、package.json、Node.js、Reactはありません。著者はプロジェクト全体を純粋なHTML、CSS、バニラJavaScriptで書きました。
ボードを起動するには、リポジトリをクローンしてダブルクリックでローカルにindex.htmlを開くか、シンプルなHTTPサーバーを立ち上げるだけです：
git clone https://github.com/magnum6actual/flipoff.git
cd flipoff
python3 -m http.server 8080
ページを開いた後、ブラウザはWeb Audio APIでオーディオ再生をロック解除するために任意の場所での最初のクリックを待ちます。Fキーを押すと、ボードがフルスクリーンに展開され、余分なインターフェース要素が非表示になります。
アニメーションとサウンドの仕組み
複雑なCanvas描画の代わりに、このプロジェクトはDOM要素のグリッドを使用します。各ボードセグメントは独自の状態と更新ロジックを持っています。
メッセージが変更されると、スクリプトは一度にグリッド全体を更新するのではなく、実際に文字が変更されたタイルだけを更新します。本物の機構と同じように。最後の文字や数字を確定する前に、タイルはスクランブルシーケンスを経て、ランダムな文字を素早く循環させ、背景色を変更します。
クリック音は本物の機械式ボードから録音されました。外部アセットを読み込まずにプロジェクトを完全にオフラインで動作させるために、著者はオーディオファイルをBase64でエンコードし、JSスクリプトの内部に直接埋め込みました。サウンドトラックはタイルの回転開始と同時に同期して始まります。
キーボードでボードを操作できます：
EnterまたはSpaceで次のテキストに切り替え- 左右の矢印キーでメッセージを前後にスクロール
Fでフルスクリーンモードを有効化Mでサウンドをミュート
ニーズに合わせたカスタマイズ
すべての基本パラメータは別ファイルjs/constants.jsに抽出されています。そこで編集できます：
- メッセージと引用符のリスト
- グリッドサイズ（変数
GRID_COLSとGRID_ROWS） - アニメーション速度と回転遅延
- 背景のカラーパレット
ハードコードされた引用符の代わりにライブデータを表示する必要がある場合（CIビルドステータス、天気、為替レートなど）、ローカルAPIから通常のfetch()でデータをフェッチするようにMessageRotator.jsを書き換えることができます。
どこで使えるか
これらはラウンジエリアのTVダッシュボード、オフィス、または棚に埃をかぶっている古いiPadでとても映えます。このプロジェクトはインターネットを必要とせず、複雑な計算でCPUに負荷をかけず、4Kまでの任意の画面解像度正しくスケールします。
コードは透明性に書かれ、小さな分離されたクラス（Tile.js、Board.js、SoundEngine.js）に分かれているので、メカニズムを理解したり、プロジェクトのニーズへの適応したりするのは、ものの30分もかからないでしょう。
関連プロジェクト