最初の速度メーターを作る

ダッシュボードで その他（…）→ カスタムメーター を開き、新しいメーターを追加 を選択します。新しいメーターにはすでに基本速度入力が付属しています。

1. エディターの上部にある名前をクリックし、メーター設定 に移動し、「My Speed」という名前を付けます。
2. 入力の割り当て の横にある歯車をクリックして パラメータ設定 を開きます。速度入力を確認してください: 識別子は speed、タイプは 基本データ、ソースは 速度 です。見つからない場合は、パラメータを追加 を使用して新しいものを作成します。
3. 完了 をクリックして設定に戻って保存し、編集領域に戻ります。

スクリプトは $data.current.speed を介して速度を読み取ります。ここで、フィールド名は入力識別子から取得されます。エディターは、定義どおりに型ヒントを提供します。この例では、OBD バインディングは必要ありません。

編集領域の元のコンテンツ全体を以下の完全なコードに置き換えます。別の main() でラップしないでください。この例には、エントリ関数が 1 つだけあります。

現時点ではコードを同じにしておきます。描画する必要があるたびに現在の速度を読み取り、値と単位を上下に配置します。読み取り値が欠落している場合は、水平線が表示されます。次のセクションでは、実行順に説明します。

function main() {
  const speed = $data.current.speed;
  return (
    <VStack spacing={8}>
      <Text fontSize={64} color={$env.foreground}>
        {speed?.value == null ? '—' : Math.round(speed.value)}
      </Text>
      <Text fontSize={16} color={$env.accent}>
        {speed?.unit ?? $env.speedUnit}
      </Text>
    </VStack>
  );
}

まずデータを見て、次に画像を見てください。今回は speed が { value: 42.3, unit: "km/h" } であるとします。

1. const speed = $data.current.speed この測定値を取得します。ここで、speed は数値そのものではなく、数値と単位を含むオブジェクトです。
2. speed?.value == null は欠測値をチェックします。オブジェクトが存在しない場合、または値が空の場合は、'—' が選択されます。値が 0 の場合、この分岐は選択されません。
3. Math.round(speed.value) は 42.3 を 42 に丸め、それを最初の Text に与えて表示します。丸めはこのメーターの表示にのみ影響し、元の測定値は変更されません。
4. 2 番目の Text には speed.unit が表示されます。現在単位がない場合、?? $env.speedUnit は現在の表示環境の速度単位を使用します。
5. VStack は 2 つのテキストを上下に配置し、spacing={8} はテキスト間の間隔を制御します。

$env.foreground と $env.accent は、現在のテーマのテキストとアクセントの色を提供します。これらの色は、テーマが変更されると更新されます。

欠測値を判断するために speed?.value || '—' を使用しないでください。JavaScript は有効なゼロを false 値として扱い、駐車時に水平線が正しく表示されなくなります。

エディターの下部にある プレビュー をクリックします。上の行には大きな速度の数値が表示され、下の行には小さな単位が表示されます。プレビューの数値は車両発進を必要としないシミュレーション値であり、その時点で携帯電話で計測した速度と必ずしも一致しません。

次に、3 つの小さな変更を加えて、そのたびにプレビューします。

さまざまなサイズと明るいテーマと暗いテーマを確認してください。コンテンツが特定のサイズで切り取られる場合は、まずフォント サイズまたは間隔を小さくしてから観察します。レイアウトの問題を隠すために大量の x/y オフセットを使用しないでください。

エラーが発生した場合は元の状態に戻し、ログの行番号を基に確認してください。プレビューすると、右上隅は ログ になります。プレビューを閉じて編集状態に戻ると、右上隅が 保存 に戻ります。プレビューが成功したということは、この一連のシミュレーション入力を表示できることを意味するだけであり、実際のデータは次のステップで確認する必要があります。

プレビューを閉じ、保存 をクリックし、エディタを終了して、機器ライブラリで「My Speed」を見つけます。 その他（…）→ ダッシュボードを編集 を再度開き、+ をクリックして追加し、最後に 完了 をクリックします。

この時点で、カードが実際の速度を読み取るように変わります。検証のためにそれと内蔵速度メーターを同じページに置くことができます。同じ基本速度フィールドを使用する場合、値は対応している必要があります。小数保持方法が異なるため、表示が若干異なる場合があります。

この時点で、最初の機器が完成します。次の記事では、「速度の取得」を「独自の OBD パラメータの取得」に置き換えます。レイアウトと表示コードは引き続き使用できます。