STB-ダイブ

すべての良い一日。

多くの人が家庭用テレビについて聞いたことがあると思いますし、高品質のテレビを楽しんだり、映画を購入したり、天気を調べたり、テレビを離れずにもっと多くのことができるように、家庭でテレビデコーダー（セットトップボックス）を購入するという提案もあります。

次に、ソフトウェア開発者の側からこのプレフィックスを紹介します。
興味があれば、猫にようこそ。

プレフィックスとは何ですか？

プレフィックス（ STB、セットトップボックス、ボックス ）は、GNU / Linuxファミリーの最大切り捨て軸がインストールされているシングルボードコンピューターです。

Uname -aコマンド：

# uname -a Linux (none) 3.1.5-1.7 #66 SMP Wed Oct 22 14:40:19 EEST 2014 mips GNU/Linux 

ボックスは通常弱いです。
強力な代表者（そしてそれに応じて高価な）には次のものがあります。

• RAM -300Mbから1Gbまで
• コンソールの合計スペース -〜250Mb
• 空き領域 -〜5〜20 MB（おそらくそれ以上ありますが、これらはまさにあなたが作業しなければならない数字です）
• プロセッサー -最大1.3Ghz（最大2コア）

各ボックスには次のものがあります（リストには重要な要素のみが含まれています）。

• イーサネット入力 -IPTV（IPTVボックスの場合）、セットトップボックスに接続するためのサービスとの統合に必要
• HDMI出力 -コメントなし
• アナログ出力 -コメントなし
• S / PDIF-コメントなし
• USB入力は通常1つの入力ですが、さまざまなフラッシュドライブと外部ハードドライブを同時に接続するように設計されているため、より多くの入力が可能なボックスがあります。 一部のボックスはUSBハブもサポートしています。

ボクシングのタスクと他のいくつかの要因に応じて、ボクシングには以下が含まれます。

• SIMカードの挿入 -一部のコンソールには3Gモジュールがあり、SIMカードを介してイーサネットケーブルなしでインターネットにアクセスできます。 さらに、オペレーターからのメッセージはSIMカードに届く可能性があり、プラットフォームAPIを使用してSMSメッセージを操作できます。
• 信号入力 （衛星/ケーブル入力）-セットトップボックスが衛星またはケーブルの場合、デジタル放送を受信するために必要です（言い換えれば、TVチャンネルのストリームに接続できるようにするため）。 ケーブルを介した放送に加えて、サービス情報が届く場合があります。
• スマートカードへのログイン -以下で少し説明します。
• Wi-Fiアンテナ用のコネクタ -一部のボックスはWi-Fiネットワークで動作します。

ここに見えるかもしれません（例えば、ネットワークからの写真）：

ここでJavaScriptとは何ですか？

加入者が自宅でセットトップボックスを起動すると、セットトップボックスからコンソールを使用して使用できる美しい便利なポータルが表示されます。

このポータルは 、JavaScriptで記述され た単一ページアプリケーション （ SPA-単一ページアプリケーション ）に過ぎず 、コンソールで実行されているブラウザーのタブで開きます。

（栄養のために）ボクシングをオンにすると、一般的な場合、次のことが起こります（すべての過剰を説明するわけではありません）。

1. コンソールの軸が開始しました
2. プレフィックスはブラウザを起動し、その中のHTMLファイルを開きます

独自の特性があります。

• 一部のコンソールでは、構成ファイルは書き込み可能です。たとえば、ブラウザーを起動または再起動するときにブラウザータブで開くHTMLファイルへのパスを変更できます。 一般的に、多くの設定は、コードのデバッグプロセスを最適化するために使用されます。
• 一部のコンソールでは、ポータルのHTMLファイルではなく、リモートコントロールを使用してファイルアドレス（またはソースを配布するサーバーのアドレス）を入力するコンソール独自のポータルが起動し、ブラウザーは単に入力したリンクを開きます。

ルールから追加：

すべてのコンソールでポータルページまたはポータルアドレスを変更できるわけではありません。 たとえば、最初のページのAminoでは、このメーカーの特別なキーが必要です。 これにはいくつかのアクセスレベルがあります。

コンソールでポータルを開発するためのスキルはほとんど必要ないことがわかりましたか？ プレフィックスを構成し、アプリケーションをデプロイする方法を学ぶだけで十分ですか？ - これは完全に真実ではありません 。

プレフィックスはパフォーマンスが非常に低いプラットフォームであるため、Webとボクシングの開発はまったく異なるレベルの複雑さです。 そのため、ほとんどすべてのコーディングエラーが感じられます。アプリケーションは正しくレンダリングされず、「ラダー」でレンダリングされ、スローダウンし、動作を拒否し、ブラウザを「クラッシュ」させ、アーティファクトを発行し、メモリを消去します。 これについては少し後で説明します。

なぜプレフィックスが必要なのですか？

• 私は加入者です -私は壁にプラズマを保持し、それに接頭辞を接続し、高品質の映画、衛星テレビを見て、仕事に行くときに朝に交通渋滞があるかどうかを調べて、努力しないようにします。
• 私は電気通信事業者です。セットトップボックスを加入者に販売（またはレンタルなど）し、それを通じてサービス（映画、チャンネルパッケージなど）を販売して利益を上げることができます。

したがって、セットトップボックスのポータルの大部分は、1つの大きな問題を解決することを目的としています-一方では、サービスを販売する機会を作成し（映画の販売、有料チャンネルの視聴など）、他方では、最も便利なアプリケーションを他のサービス（カード、メール、ソーシャルネットワーク、ニュース、SMS、インターネットサーフィンなど）、1つの「ボックス」でテレビを見たり、他の多くの問題を解決したりできます。

これが通常のブラウザである場合、これをすべて実装できますか？ テレビ？ 映画？ SMS？ - プレフィックスは、ブラウザが内部にある単なるボックスではないため、できます 。 各ボックスには独自のJavaScript APIがあります。

JavaScript APIプレフィックス

一般に、プレフィックスAPIはグループに分けることができます。

• コンソールプレーヤーAPI-再生を制御するためのメソッド。
• 現在のストリームに関する情報を受信するためのAPI-字幕、オーディオトラック、テレテキストなど
• セットトップボックス入力を操作するためのAPI-HDMI、イーサネットケーブル、衛星ケーブル、3G可用性などの確認...
• 接続の可用性を確認するためのAPI-挿入されたケーブル内のインターネットの存在、衛星信号の存在または品質など...
• コンソールストレージを操作するためのAPIはすべてのボックスにあるわけではありませんが、多くの場合、コンソールの再起動後にローカルブラウザーストレージがクリアされるため、リブート間でデータを保存するために別のAPIが使用されます。
• データを受信するためのAPI-IPボックス、MACアドレス、ボックスモデルなどを取得します。
• ブロードキャストネットワークAPI-チャンネルスキャンなど。
• ボクシングカスタマイズAPI-画像拡大フォーマット、アスペクト比、その他..
• ファイルとファイルシステムを操作するためのAPI-ファイルの継続時間を取得し、フラッシュドライブ上のファイルのリストを取得し、ビデオコーデックを見つけます。

これは、ほとんどの問題を解決するには十分です。

ユーザーはどのようにポータルと対話しますか？

各コンソールにはコントロールパネルが付属しています。 通常、テレビに関連する基本的なタスクを解決するためのボタンが含まれています。

• ナビゲーションボタン-「上」、「右」、「下」、「左」、「入力」、「メニュー」、「戻る」。
• 音量調節ボタン-「音量を上げる」、「音量を下げる」、「ミュート」
• チャンネルを切り替えるためのボタン-「次のチャンネル」、「前のチャンネル」
• 再生制御ボタンは、「再生」、「停止」、「一時停止」、「巻き戻し」、「巻き戻し」、「録画開始」です。 製造元によっては、一部のボタンが欠落している場合や組み合わされている場合があります。
• 数字キーパッド-数字と文字が描かれています。 文字入力を簡素化するために必要な、
• 色付きのボタン-ページとの対話を容易にします。 現在のページの状態に応じて、これらのボタンにはいくつかのロジックがかかっています。
• 有効化/無効化
• その他のカスタムボタン-アプリケーションの特定のページにつながるボタンを追加します。 ナビゲーションコントロールなど。

ポータルはどのようにコンソールと対話しますか？

アプリケーションを開発するときは、ボタンのクリックをキャッチして処理する必要があります。 ここでは、すべてが非常に簡単です-リモコンのボタンを押すことは、キーボードのキーを押す通常のように扱われます。 1つの違い-各ベンダーのキーコードは異なります。

ボーナストラック -一部のボックスでは、イベント「キーアップ」と「キーダウン」が同時に発生します。 したがって、リモートコントロールキーを押す処理を行う場合（そのような場合があります）、crutches_and_bicycles.jpgの画像を覚えておいてください

何がありますか？

この簡単な紹介の簡単な要約を要約するには：

• ボクシングは弱いLinuxマシンです
• ボックスをオンにすると、ブラウザが起動されるため、コンソール上のアプリケーションは本質的にWebアプリケーションです。
• ボクシングの作業は、SSHまたはTelnetを介して行われます。
• Boxingは、TV、オーディオ/ビデオファイル、その他多くに関連する幅広いタスクを解決するために、ブラウザーからアクセス可能なAPIを提供します。

このように、セットトップボックスはパフォーマンスの低いプラットフォームであり、何らかの方法でテレビに接続して問題を解決できます。 このプラットフォームに必要なすべてのツールがあります。

それはいいですね？ -いいね！ しかし、実際には、すべてがそれほど良い音ではないので、今度は記事のより興味深い第2部に移ります。

注釈

繰り返しますが、プレフィックスはLinuxを搭載したコンピューターであり、ブラウザーは追加のAPIにねじ込まれます。これにより、コンソール上のポータルが直面するほとんどのタスクが実現可能になります。

私たちにとって、この声明の2番目の部分だけが重要です- ボックスメーカーはブラウザを完成させます！

さまざまなブラウザーがボックスにインストールされていますが、OperaまたはWebKitブラウザーが最もよく見られます。 その結果、酔っ払ったブラウザはさまざまなバグを抱え始めます：最も予期しない場所でのメモリリーク、部分的に非アクティブなガベージコレクタ、最も一般的なメソッド呼び出しの結果としてのブラウザのクラッシュ、バグのレンダリングなど。

以下に書かれているノートは、詰められたコーンと見つかったレーキに基づいた主観的な結論です。 それらが役に立つことを本当に願っています。

行こう..

DOM操作

DOM 操作は最も難しい操作です。 コンソールでは、これは非常に（！）顕著です（文字通りの意味で）。

DOMを使用した操作の数が最小化されていない場合、次の可能性があります。

• 非常に不快な効果が得られます - ページがどのように描画されるかが（文字通り）表示されます。 実際、これは非常にゆっくりと機能する複合レイヤーであるため、ページグリッドは肉眼で再描画されます（グリッドのセクターを次々に置き換えますが、一度にすべてを置き換えるわけではありません）。
• ページのレンダリングに多くの時間を費やしてください。

これから生じる主な問題は、 UXが著しく損なわれることです。 ユーザーとして、ボタンを押して、レイヤーを再描画したり、1〜3秒で待機したりすることなく、すぐに開くページを見たいと思います。 いつもこれを見ると、ポータルとのやり取りで不快な気持ちになります。 まず第一に、ユーザーとして、私はアプリケーションとやり取りする喜びを体験したいのですが、無駄にお金を使わなかったと思います。

もう少し掘り下げます-最小化する必要があるものは何ですか？

以下を最小化または排除する必要があります。

• 要素をバッチで挿入する-document.createDocumentFragment （）と友達になりましょう。
• 要素のスタイルの変更 -特定の場合（要素の移動など）に要素のパック全体ではなく1つまたは2つの要素のスタイルを変更できるようにページを設計できる場合は、それを使用する必要があります。
• レイアウト+要素のツリーの再描画。 危機にwhatしているものを理解するために、例を挙げます。 たとえば、3つのレイヤー（div）が隣り合っているとします。 最初の境界線を1pxで追加すると、1つではなくすべてのレイヤーが再描画されます。 この余分な負荷は、別の方法でページを設計することで排除できます。
• 画像のサイズ変更-100x100のサイズの画像を取得し、90x90のサイズに設定して配置すると、ブラウザに余分な負荷がかかります（ブラウザは画像を圧縮します）。 各要素に画像が含まれるタイルでカタログを作成する場合、これは余分な負荷になります。 可能であれば、サーバーから厳密に必要なサイズのイメージをプルし、この場合は不要なアクションでブラウザーを過負荷にしないでください。
• アニメーション プレフィックスを使用すると、アプリケーションにアニメーションを追加できますが、軽量アニメーション（小さなリスト、メニュー、テキストのスクロール）のみを追加できます。 それ以外の場合、コンソールのパフォーマンスが十分でなく、アニメーションがぎくしゃくします。 大きなページ要素のアニメーション化を完全に忘れることができます。 2つの例外があります-キャンバス変換とCSS3変換。 それらは多かれ少なかれ機能します（大幅に遅くなることはありませんが、「60fps」ではありません。それをトレラントと呼びましょう）、これは開発の追加の複雑さです。

まとめます。 DOMを使用するためのレシピ：

• document.createDocumentFragmentを使用します。DOMを使用した1つの操作は、複数の操作よりもはるかに効率的です（Captain Evidenceが再び用意されています）。
• ページと対話するときに、最小限のDOM変更でページを設計します。
• 絶対間隔の要素を含むレイアウトを使用します。
• サイズに合わない画像は使用しないでください。
• ブラウザへの不必要な負荷を排除してください。
• 透明度を使用しないようにしてください-これにより、ブラウザーはより多くの計算を行うようになります。
• アニメーションを放棄するか、キャンバスを使用します。

CSS

水が多すぎず、 スタイルシートを最適化し、クラスとやり取りするためのレシピ ：

• 複数レベルのネストを使用しないようにしてください -これがブラウザの負荷です。 より多くのネストを行う場合、レイアウト、要素クラス、または要素スタイルを変更すると、ブラウザは最小のネストよりも多くのノードをバイパスして要素スタイルを生成します。
• 重いセレクターを使用しないでください。
• 結合できない複数の操作（要素のスタイルを変更する）を実行する必要がある場合は、それらを連続して実行します。 ブラウザはこれを判断し、n回余分な要素を再描画しません（スタイルを再計算しないことを含む）。

その結果、CSSフレームワーク（ブートストラップなど）の使用は望ましくありません。

強力なパフォーマンスブーストを提供する優れたソリューションがあります。クラスを放棄し、インラインスタイル（スタイルタグ）でレイアウトを生成してみてください。 おそらく、Gulp / Grunt用のプラグインもあります。

CSSプロパティのサポートについて少し説明します。 ほとんどのボックスにはWebKitがあり、CSS3の多くがサポートされています。 1つのボックスではなく、一度に複数のアプリケーションを開発する場合、さまざまな新しい「バン」の使用はお勧めしません。 1つのプラットフォームで問題なく動作し、2番目のプラットフォームではバグが発生しない可能性があります。

詳細を追加します。 多くの場合サポートされているもの（CSS3から。実際のケースに基づいて、メモリからのリストは非常に不完全です）：

• 境界半径
• rgba
• 線形勾配
• テキストオーバーフロー
• 背景サイズ
• 変換
• アニメーション
• 不透明度
• 箱影
• オーバーフローx
• オーバーフローy
• 改行
• ワードラップ
• テキスト影
• @ font-face
• ボックスサイズ
• テキストオーバーフロー

虫

誤ってプログラムされたロジックの結果として発生する可能性のある通常のバグに加えて、ボクシングは非常に頻繁に非自明な場所に潜む可能性があります。

バグは何ですか？

ほとんどの場合、ページレンダリングに関連するバグがあります。divの背景は描画されませんでした。要素が再描画されたときに古い背景がアンロードされませんでした。

バグはエンジンではあまり一般的ではありません：ネイティブメソッドの呼び出しはブラウザをドロップします。ブラウザが特別な条件下でドロップすると、オブジェクトのキーの繰り返しが未ソートの形式で発生します（ バグではなく、バグではない：from gibson_devそして、ソートされた形式でのみソートされた配列があり、for..in構造はこれを保証しません”）、およびその他のさらにまれなケース。

バグの別のグループはベンダーバグです。ストリームは曲がって動作し、ファイルシステムは正しく読み取られません。APIを使用すると、答えが誤って生成されます。

上記のモラルは、 サポートするすべてのプラットフォームでソリューションを常に徹底的にテストすることです。 ソリューションが1つのプラットフォームで機能する場合、他のすべてのプラットフォームで機能するという保証はありません。

メモリリーク

コンソールのメモリリークはどこからともなく発生する可能性があります。 これを回避するための普遍的なレシピはないため、例はありません。

ルールは単純です - メモリリークに対して定期的にアプリケーションを実行します。 リークがある場合は、どこを探して「リーク」を閉じます。

その他

アプリケーションは通常どのようにデプロイされますか（開発中）？

いくつかの方法があり、それらはすべて簡単です。 展開全体では、ファイルをマシンからボックスのフォルダーにコピーするか、（さらに簡単に）コンソールを構成して、ファイルシステムからではなくネットワーク（たとえば、ローカルサーバー）からソースを取得します。

各方法について（説明として）書きましたが、記事を煩雑にしないために、すべてがネタバレに包まれています。

スマートカード

ボックス内にスマートカードがある場合があります。 私はこの分野の専門家ではないので、ウィキペディアでそれについて読みました 。

ボクシングでは、2つの形式で表示できます。

• 外部カード-ボックスの特別な入り口に自分で挿入する必要があります。
• 内蔵カードはボックス内に配線されており、実際には、ボックスの電源を入れると常に「挿入」されます。

私はそれについて他に何も書きません-私は専門家ではありません、そしてそれが「タッチ感」レベルでのみどのように機能するか理解しています。偶然あなたに嘘をつきたくありません。

終わり

ボクシング（プレフィックス）は興味深いプラットフォームであり、これと連携することで、最も生産的なアプリケーションの作成方法に関する経験を積むことができます。さらに、このプラットフォームで作業する際の興味深いタスクやバグが大量に提供されます。

筋金入りの（言葉の意味で）プログラミング、単一ページのアプリケーションが好きで、あなたに役立つ貴重な体験を探しているなら、コンソールアプリケーションを書いてみてください。

PS

, - . , , .

, , - .

, — , .