このページは Cloud Translation API によって翻訳されました。

ミニアプリのプログラミングの原則をサンプルプロジェクトに適用する

Thomas Steiner

アプリのドメイン

ミニアプリのプログラミング方法を紹介するためウェブアプリに応用するにあたって、小さくても完成度の高いアプリのアイデアが必要でした。高強度インターバルトレーニング（HIIT）短時間の激しい嫌気性運動と少ない回復時間を交互に繰り返す心血管運動戦略です。多くの HIIT トレーニングでは HIIT タイマーを使用します。たとえば、こちらの 30 分間のオンラインセッションをご覧ください。 YouTube チャンネルの The Body Coach TV から。

緑色の高強度タイマーを使用した HIIT トレーニングのオンラインセッション。 — </ph> 有効期間。

赤色の低強度タイマーが表示された HIIT トレーニングのオンラインセッション。 — </ph> 安静期間。

HIIT タイムのサンプルアプリ

この章では、このような HIIT タイマーアプリケーションの基本的な例を「HIIT 時間」ユーザーが各種のタイマーを定義、管理できます常に高強度と低強度の間隔で構成されており、そのうちの 1 つを選択してトレーニングセッションに使用しますナビゲーションバー、タブバー、次の 3 つのページを備えたレスポンシブアプリです。

ワークアウト: ワークアウト中のアクティブなページ。ユーザーがタイマーの 1 つを選択できる。セット数、有効期間、休憩期間の 3 つの進捗状況リングを備えています。
タイマー: 既存のタイマーを管理できます。新しいタイマーを作成することも可能です。
設定: 効果音や音声出力のオンとオフを切り替えたり、言語とテーマを選択したりできます。

次のスクリーンショットは、このアプリケーションの印象を示しています。

縦表示の HIIT Time サンプルアプリ。 — </ph> HIIT タイム「ワークアウト」タブを縦表示にします

横表示の HIIT Time サンプルアプリ。 — </ph> HIIT タイム「ワークアウト」クリックします。

タイマーを管理する HIIT Time サンプルアプリ。 — </ph> HIIT 時間タイマーの管理。

アプリの構造

前述のように、アプリはナビゲーションバー、タブバー、グリッド配置の 3 つのページで構成されます。ナビゲーションバーとタブバーは iframe として実現され、その間に <div> コンテナが 3 つ配置されます。。 about:blank を指す最後の iframe は、動的に作成されたアプリ内ページ用で、既存のページを変更するために必要です。新規作成することもできます。私はこのパターンをマルチページ、シングルページアプリ（MPSPA）と呼んでいます。

アプリの HTML 構造を示す Chrome DevTools ビュー。6 つの iframe（ナビゲーションバーに 1 つ、タブバーに 1 つ、アプリの各ページにグループ化された 3 つの iframe と動的ページ用の最後のプレースホルダ iframe がある）が表示されています。 — </ph> アプリは 6 つの iframe で構成されています。

コンポーネントベースの lit-html マークアップ

各ページの構造は lit-html スキャフォールドとして実現されます。実行時に動的に評価されます lit-html の背景には、効率的で表現力が高く、拡張可能な JavaScript 用の HTML テンプレートライブラリです。 HTML ファイルで直接使用することで、メンタルプログラミングモデルは直接出力指向になります。プログラマーは、最終的な出力がどのようなものになるかのテンプレートを作成します。そして lit-html が、データに基づいてそのギャップを動的に埋め、イベントリスナーを接続します。このアプリでは、Shoelace の <sl-progress-ring> などのサードパーティのカスタム要素や、<human-duration> という自己実装型のカスタム要素を利用しています。カスタム要素には宣言型 API（進行状況リングの percentage 属性など）があるため、下記のリストに示すように、lit-html とうまく連携します。

<div>
  <button class="start" @click="${eventHandlers.start}" type="button">
    ${strings.START}
  </button>
  <button class="pause" @click="${eventHandlers.pause}" type="button">
    ${strings.PAUSE}
  </button>
  <button class="reset" @click="${eventHandlers.reset}" type="button">
    ${strings.RESET}
  </button>
</div>

<div class="progress-rings">
  <sl-progress-ring
    class="sets"
    percentage="${Math.floor(data.sets/data.activeTimer.sets*100)}"
  >
    <div class="progress-ring-caption">
      <span>${strings.SETS}</span>
      <span>${data.sets}</span>
    </div>
  </sl-progress-ring>
</div>

3 つのボタンと進行状況を示すリング。 — 上記のマークアップに対応するページのレンダリングセクション。

プログラミングモデル

各ページに対応する Page クラスがあり、実装を提供することで lit-html マークアップをライフで埋めます。各ページのデータを指定するだけですこのクラスは、onShow()、onHide()、onLoad()、onUnload() などのライフサイクルメソッドもサポートしています。ページからデータストアにアクセスして、オプションで永続的なページごとの状態とグローバルな状態を共有できます。すべての文字列は一元管理されるため、国際化機能が組み込まれています。アプリは iframe の表示 / 非表示を切り替えたり、動的に作成されたページの場合は、プレースホルダの iframe の src 属性を変更します。以下の例は、動的に作成されたページを閉じるコードを示しています。

import Page from '../page.js';

const page = new Page({
  eventHandlers: {
    back: (e) => {
      e.preventDefault();
      window.top.history.back();
    },
  },
});

iframe として実現されるアプリ内ページ。 — iframe から iframe へナビゲーションを行います。

スタイル設定

ページのスタイル設定は、専用の CSS ファイル内でページごとに行われます。つまり、通常は要素名で要素を直接指定できますが、他のページと競合しないからですグローバルスタイルは各ページに追加されるので、font-family や box-sizing などの一元的な設定は、繰り返し宣言する必要はありません。ここでは、テーマとダークモードのオプションも定義されます。以下のリストは、さまざまなフォーム要素をレイアウトする設定ページのルールを示しています。表示されます。

main {
  max-width: 600px;
}

form {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5rem;
  margin-block-end: 1rem;
}

label {
  text-align: end;
  grid-column: 1 / 2;
}

input,
select {
  grid-column: 2 / 3;
}

グリッドレイアウトのフォームが表示されている HIIT Time アプリの設定ページ。 — すべてのページは、それぞれ独自の世界観を誇ります。スタイル設定は要素名で直接行われます。

画面の wake lock

ワークアウト中は、画面がオフになりません。 HIIT タイムに対応しているブラウザでは、HIIT 時刻は画面の wake lock によってこのことを実現できます。以下のスニペットは、その方法を示しています。

if ('wakeLock' in navigator) {
  const requestWakeLock = async () => {
    try {
      page.shared.wakeLock = await navigator.wakeLock.request('screen');
      page.shared.wakeLock.addEventListener('release', () => {
        // Nothing.
      });
    } catch (err) {
      console.error(`${err.name}, ${err.message}`);
    }
  };
  // Request a screen wake lock…
  await requestWakeLock();
  // …and re-request it when the page becomes visible.
  document.addEventListener('visibilitychange', async () => {
    if (
      page.shared.wakeLock !== null &&
      document.visibilityState === 'visible'
    ) {
      await requestWakeLock();
    }
  });
}

アプリケーションのテスト

HIIT 時間のアプリケーションは GitHub で入手できます。新しいウィンドウでデモを試すことができます。モバイルデバイスをシミュレートする iframe の埋め込み URL です

謝辞

この記事をレビューしたユーザー: Joe Medley Kayce Basques Milica Mihajlija 氏 Alan Kent、と Keith Gu です。