ADR-0059: 公開するスライドのページ送りを下の帯に置き、JavaScript が有効なときに全画面の表示とスワイプでの操作を足す¶

Status¶

承認

Context¶

公開するスライドのページ送りの画面の形と、全画面の表示とスワイプでの操作を最初の公開に入れるかを決める必要がある。

ページ送りは、リンクと CSS の :target で作る。JavaScript を無効にしても、前後に送れる。JavaScript が有効なときは、矢印キーでも送れる。全画面の表示と、スワイプでの操作は、決めていない。記事には、スライドのページを iframe で埋め込む。
- ADR-0042: 公開するスライドは、ビルドのときに静的な HTML にして /slides/<slug> に置き、記事には iframe で埋め込む
サイトの画面は、要素の位置と配置を動かさない。動きを減らす設定では、全ての動きを止める。
- ADR-0028: 操作できる要素と重なる面の角を 2px で丸め、重なる面にずらした影を付け、罫を引く動きを筆の線にする
運営者は、登壇の資料を、このサイトで作る。
- 出典: fukuemon.dev PRD
ブラウザは、touch-action で許した方向のタッチの操作を、自分で処理する。許していない方向の動きは、ページのイベントに渡す。
- 出典: touch-action（MDN）
iframe の中のページは、iframe に allowfullscreen があるときだけ、全画面にできる。
- 出典: Element: requestFullscreen()（MDN）
WCAG 2.2 の達成基準 2.5.1 は、軌跡に依る操作に、1 点を押すだけの代わりの操作を求める。
- 出典: Understanding SC 2.5.1: Pointer Gestures

Decision¶

1. ページ送りの帯¶

スライドの下に、高さ 48px の帯を置く。
帯の中央に、「前へ」のリンク、今のスライドの番号、「次へ」のリンクを、この順に並べる。

番号は、3 / 12 の形で出す。読み上げには、「12 枚中 3 枚目」と渡す。
1 枚目のスライドの「前へ」と、最後のスライドの「次へ」は、押せないリンクにして、薄い文字で出す。位置は動かさない。
スライドの上には、何も重ねない。

理由は、帯がスライドの中身を隠さないこと、「前へ」と「次へ」のリンクが近いこと、端のスライドでもリンクの位置が変わらないことである。

2. 全画面の表示¶

帯の右端に、「全画面」のボタンを置く。

ボタンは、JavaScript が有効で、ブラウザがページの全画面に対応しているとき（document.fullscreenEnabled が true）だけ出す。
全画面の間も、帯を出す。ボタンの文は、「全画面を終える」に変える。
全画面は、ボタンと、Esc のキーで終える。
記事の iframe に、allowfullscreen を付ける。

理由は、運営者が、公開したスライドを全画面にして、発表に使えることである。

3. スワイプでの操作¶

JavaScript が有効なときに、スライドの上の、タッチの左右のスワイプで、前後に送る。
左へのスワイプで次のスライドに、右へのスワイプで前のスライドに送る。

スライドの領域の touch-action を pan-y pinch-zoom にする。縦の動きと、2 本の指での拡大は、ブラウザが処理する。記事の中では、スライドの上で縦に動かすと、記事がスクロールする。
指を離したときに、次の全てを満たす動きだけを、スワイプと判定する。
- 入力がタッチで、指が 1 本である。
- 横の移動が 48px 以上で、縦の移動の 2 倍以上である。
- ブラウザが、タッチの操作を処理し始めていない（pointercancel が来ていない）。
- ページを拡大していない。
- 文字を選んでいない。
指の動きに合わせて、スライドを動かさない。判定した後に、スライドを切り替える。
スワイプは、帯のリンクを押したのと同じ処理で送る。

理由は、タッチの端末の訪問者が、小さいリンクを押さずに送れることである。

4. キーボードと読み上げ¶

スワイプと全画面は、どちらも、キーボードと読み上げで同じことができる。

ページ送りは、帯の「前へ」「次へ」のリンクで行う。リンクには、Tab のキーでフォーカスを移せ、Enter のキーで送る。
JavaScript が有効なときは、リンクで送った後に、新しく出た帯の、同じ向きのリンクにフォーカスを移す。Enter のキーを続けて押して、送り続けられる。
JavaScript が有効なときは、左右の矢印、PageUp、PageDown のキーで前後に送り、Home と End のキーで最初と最後のスライドに送る。
全画面のボタンには、Tab のキーでフォーカスを移せ、Enter と Space のキーで押す。
読み上げのソフトのスワイプは、読み上げのソフトが処理する。ページ送りは、帯のリンクで行う。スワイプの案内の文は、画面に出さない。

理由は、スワイプとキーを足しても、リンクを押す操作が、どの環境でも残ることである。

承認の条件¶

実機の iOS の Safari と、Android の Chrome で、次を確認している。
- 記事の中のスライドの上で縦に動かすと、記事がスクロールし、スライドが送られない。
- 左右のスワイプで、スライドが 1 枚だけ送られる。
- 画面の端から始めるブラウザの「戻る」の操作で、スライドが送られない。
iPhone の Safari で、全画面のボタンが出るか出ないかを確認し、出るときは全画面にできることを確認している。

Verification¶

端末は Apple M2、ブラウザは Playwright 1.65.0 の Chromium 158、WebKit 27.2、Firefox 159（headless）、配信は localhost である。

下の帯の中央にリンクと番号を並べた形で、JavaScript を無効にして、1 枚目から 2 枚目、3 枚目、2 枚目へ送れた（3 つのブラウザ）。
全画面の表示と、スワイプでの操作は、作っていない。48px と 2 倍の値は、測っていない。

Considered Options¶

ページ送りの位置の選択肢は次のとおり。

選択肢	強み	弱み
採用: 下の帯の中央に、リンクと番号を並べる	スライドに何も重ねない。2 つのリンクが近い。端のスライドでも、リンクの位置が同じ	帯の分だけ、iframe の高さが増える
帯の左端に「前へ」、右端に「次へ」を置く	シリーズの前後の記事のリンクと、並べ方がそろう	広い画面で、2 つのリンクが離れる
スライドの左右の端に、矢印を重ねる	帯が要らない	スライドの中身に重なる。hover で出す形は、タッチの端末で使えない

全画面とスワイプの選択肢は次のとおり。

選択肢	強み	弱み
採用: 全画面とスワイプの両方を入れる	運営者が、公開したスライドを発表に使える。タッチの端末で送れる	スワイプの判定を作り、実機で確認する。ブラウザの「戻る」の操作と重なるかは、未確認
全画面だけを入れる	足す JavaScript が少ない。スワイプの判定を作らない	タッチの端末では、帯のリンクを押して送る
どちらも入れない	作るものが最も少ない	運営者が発表に使うときに、ブラウザの全画面の表示に頼る。タッチの端末では、帯のリンクを押して送る
スワイプの間、指の動きに合わせてスライドを動かす	送れることが、動きで分かる	位置を動かさない規則に合わない。縦のスクロールと見分ける前に、スライドが動く

Consequences¶

Positive¶

訪問者は、JavaScript を無効にしても、帯のリンクで前後に送れる。
運営者は、公開したスライドを、全画面にして発表に使える。
タッチの端末の訪問者は、左右のスワイプで送れる。記事の中では、スライドの上からでも、記事を縦にスクロールできる。
スワイプと全画面に対応しない環境でも、リンクとキーで、同じ操作ができる。

Negative¶

公開するスライドのページに、<script> が 1 つ入る。
スワイプの判定の値（48px、2 倍）は、実機で測って決め直す。
スライドの上では、横のスクロールと、1 本の指での拡大した画面の移動を、ブラウザが処理しない。
スライドを送るたびに、ブラウザの履歴が 1 つ増える。記事の中で送った後に「戻る」を押すと、前のスライドに戻る。
全画面のボタンは、ページの全画面に対応しないブラウザでは出ない。