Power Apps：自由を手に入れよう！カスタムコンポーネントを構築してみる【実装編】

<?xml version="1.0" encoding="utf-8" ?>
<manifest>
  <control namespace="reirePCF" constructor="AutoScrollLabel" version="0.0.1" display-name-key="AutoScrollLabel" description-key="AutoScrollLabel description" control-type="standard">
    <external-service-usage enabled="false">
    </external-service-usage>
    <property name="ScrollText" display-name-key="テキスト" description-key="表示する文字列を入力します" of-type="SingleLine.Text" usage="bound" required="false" />
    <property name="DelayTime" display-name-key="遅延時間" description-key="スクロールが始まるまでの時間を指定します" of-type="Whole.None" usage="bound" required="false" default-value="3000" />
    <property name="FontSize" display-name-key="フォントサイズ" description-key="文字の大きさを指定します" of-type="Whole.None" usage="bound" required="false" default-value="13" />
    <property name="Font" display-name-key="フォント" description-key="文字のフォントを指定します" of-type="Enum" usage="bound" required="false" default-value="1">
      <value name="Arial" display-name-key="Arial">0</value>
      <value name="Open Sans" display-name-key="Open Sans">1</value>
      <value name="Verdana" display-name-key="Verdana">2</value>
      <value name="Courier New" display-name-key="Courier New">3</value>
      <value name="Georgia" display-name-key="Georgia">4</value>
    </property>
    <property name="LPadding" display-name-key="パディング(左)" description-key="左のパディングを指定します" of-type="Whole.None" usage="bound" required="false" default-value="0" />
    <property name="RPadding" display-name-key="パディング(右)" description-key="右のパディングを指定します" of-type="Whole.None" usage="bound" required="false" default-value="0" />
    <property name="TPadding" display-name-key="パディング(上)" description-key="上のパディングを指定します" of-type="Whole.None" usage="bound" required="false" default-value="0" />
    <property name="BPadding" display-name-key="パディング(下)" description-key="下のパディングを指定します" of-type="Whole.None" usage="bound" required="false" default-value="0" />
    <property name="LMargin" display-name-key="マージン(左)" description-key="左のマージンを指定します" of-type="Whole.None" usage="bound" required="false" default-value="0" />
    <property name="RMargin" display-name-key="マージン(右)" description-key="右のマージンを指定します" of-type="Whole.None" usage="bound" required="false" default-value="0" />
    <resources>
      <code path="index.ts" order="1" />
    </resources>
  </control>
</manifest>

import { IInputs, IOutputs } from "./generated/ManifestTypes";

export class AutoScrollLabel implements ComponentFramework.StandardControl<IInputs, IOutputs> {
  private container: HTMLDivElement;
  private labelElement: HTMLDivElement;
  private scrollPos: number = 0;
  private scrollSpeed: number = 1;
  private animationFrameId: number | null = null;
  private delayTime: number = 5000; // デフォルト値（5秒）
  private fontfamily: string[] = ["Arial", "Open Sans", "Verdana", "Courier New", "Georgia"];

  constructor() {}

  public init(
    context: ComponentFramework.Context<IInputs>,
    notifyOutputChanged: () => void,
    state: ComponentFramework.Dictionary,
    container: HTMLDivElement
  ): void {
    // コンポーネントのコンテナを初期化
    this.container = container;

    // ラベル要素を作成
    this.labelElement = document.createElement("div");
    this.labelElement.style.whiteSpace = "nowrap";
    this.labelElement.style.overflow = "hidden";
    this.labelElement.style.display = "block";
    this.labelElement.style.boxSizing = "border-box";
    this.labelElement.style.height = "100%";
    this.labelElement.style.textAlign = "left";
    this.labelElement.style.border = "none";
    this.labelElement.style.borderWidth = "0px";

    // スタイル設定
    this.styleReset(context);

    // 初期テキスト
    this.labelElement.innerText = context.parameters.ScrollText.raw || "Scrolling Label";

    this.container.appendChild(this.labelElement);

    // ディレイタイムを取得（デフォルト値: 5000ms）
    this.delayTime = context.parameters.DelayTime.raw || 5000;

    // スクロールを開始
    this.startScrolling(this.delayTime);
  }

  public updateView(context: ComponentFramework.Context<IInputs>): void {
    // テキストの更新
    const newText = context.parameters.ScrollText.raw || "";
    // ディレイタイムを更新
    const newdelayTime = context.parameters.DelayTime.raw || 5000;

    // スタイル設定
    this.styleReset(context);

    if (newText !== this.labelElement.innerText || newdelayTime !== this.delayTime) {
      this.labelElement.innerText = newText;
      this.scrollPos = 0; // リセット

      // ディレイタイムを更新
      this.delayTime = newdelayTime;

      // 前回のスクロールを停止
      if (this.animationFrameId) {
        cancelAnimationFrame(this.animationFrameId);
      }

      // 再度スクロールを開始
      this.startScrolling(this.delayTime);
    }
  }

  public getOutputs(): IOutputs {
    return {};
  }

  public destroy(): void {
    // クリーンアップ
    if (this.animationFrameId) {
      cancelAnimationFrame(this.animationFrameId);
    }
  }

  private startScrolling(delay: number): void {
    const scroll = () => {
      if (this.labelElement.scrollWidth > this.labelElement.clientWidth) {
        this.scrollPos += this.scrollSpeed;

        // テキストが右端を通過した場合に初期位置に戻る
        if (this.scrollPos >= this.labelElement.scrollWidth) {
          this.scrollPos = 0;
          this.labelElement.scrollLeft = this.scrollPos;

          // ディレイを適用
          setTimeout(() => {
            this.animationFrameId = requestAnimationFrame(scroll);
          }, delay);

          return;
        }

        this.labelElement.scrollLeft = this.scrollPos;
      }

      this.animationFrameId = requestAnimationFrame(scroll);
    };

    scroll();
  }

  private styleReset(context: ComponentFramework.Context<IInputs>): void {
    const totalmargin = (context.parameters.LMargin.raw || 0) + (context.parameters.RMargin.raw || 0);

    this.labelElement.style.fontSize = (context.parameters.FontSize.raw || 16) + "px";
    this.labelElement.style.fontFamily = this.fontfamily[Number(context.parameters.Font.raw) || 1];

    this.labelElement.style.paddingLeft = (context.parameters.LPadding.raw || 0) + "px";
    this.labelElement.style.paddingRight = (context.parameters.RPadding.raw || 0) + "px";
    this.labelElement.style.paddingTop = (context.parameters.TPadding.raw || 0) + "px";
    this.labelElement.style.paddingBottom = (context.parameters.BPadding.raw || 0) + "px";

    this.labelElement.style.marginLeft = (context.parameters.LMargin.raw || 0) + "px";
    this.labelElement.style.marginRight = (context.parameters.RMargin.raw || 0) + "px";

    this.labelElement.style.width = `calc(100% - ${totalmargin}px)`;
  }
}