HLSPA（フルスパ）

• 速く、なめらかリンクにマウスを乗せた時などに、次のページを先に読み込みます。準備できた内容へ切り替えることで、ページを移る時の待ち時間を減らします。
• 検索やシェアは、ふつうのサイトのままそれぞれのURLを直接開けるHTMLのページとして用意します。検索向けの情報やシェアした時の表示も、ページごとに整えます。
• いまのサイトを生かせるか、確かめる既存のページを生かし、移動をなめらかにできるか調べます。URLの構成やフォームなどの動きによって調整が必要なため、導入範囲はサイトを確認して決めます。
• 小さく、壊れにくい本体のJavaScriptは、圧縮した転送量で約5KB。なめらかな切り替えを使えない場合には通常のページ移動を使う設計です。

画面の上の丸い音ボタンで音楽をつけて、ほかのページへ移ってみてください。音楽が止まらないのは、ページを丸ごと読み直していない証拠です。

• 音楽やヘッダーは、そのまま入れ替わるのはページの中身だけ。外側にある音楽やヘッダーは残ります。
• 戻る・進むも、ふだんどおりブラウザの戻るボタンで、前のページの同じ場所に戻ります。

ReactなどでつくるSPAは、ページを読み直さずに画面を切り替える作り方で、アプリのような画面に向いています。画面は、JavaScriptが組み立てます。

フルスパは、どのページも、はじめからそのままのHTMLです。JavaScriptがするのは、ページを移る時のつなぎだけ。フル（full）は、どのページもフルのHTMLだから、です。

PHPが出力するHTMLにも取り入れられます。導入時には、URLの形や既存の動きに合わせて調整します。ページの内容に加え、移動後のフォーカスや読み上げも確かめます。

会社やお店のサイトのように、ページを読んでもらうサイトに向いています。音楽や動きを、ページをまたいで続けたい時にも。

画面の中で大きく状態が変わる、アプリのような画面には、SPAが向いています。どちらがいいかは、サイトの使われ方で選びます。

ページを読み直さずにHTMLを差し替える考え方は、PJAX、Turbo、htmxなど、前からあります。スタンプは、HTMLを先にきちんと作るやり方に合わせて、小さく作りました。

いまのホームページに足せるか、新しくつくる時に入れるか。サイトを見ながら、一緒に考えます。