ページを消すとき、一緒に消えるもの

実績とスキルの個別ページを、トップページの中へ統合しました。

作業自体は「セクションにidを付けて、ページを2枚消す」だけです。消すほうに、決めることが集まっていました。

同じ内容が、2つのURLにあった#

トップページには、もともと実績・スキル・プロフィールのセクションがあります。そのうえで /projects と /skills という個別ページも持っていました。

個別ページを持つ価値は、そこにしかない情報があるかで決まります。実績が20件あって絞り込みや並べ替えが要るなら、独立したページに意味があります。

しかし実績は数件で、当面増える見込みもありません。結果として、ほぼ同じ内容が2か所にある状態でした。

消すと、一緒に消えるもの#

ここが本題です。ページを削除すると、そのURLは404になります。失われるのは中身だけではありません。

URLは外から指される名前です。中を整理した都合で、外からの参照を無効にしてよい理由にはなりません。

そこで、旧URLを新しい位置へ転送する設定を入れました。

/projects  →  /#projects
/skills    →  /#skills

これで評価は転送先へ引き継がれ、古いリンクを踏んだ人も目的の場所に着きます。

恒久か、一時的か#

転送には「もう戻らない」と「一時的に別の場所を見せている」の2種類があります。今回は戻す予定が無いので恒久を選びました。

sitemapからは外した#

細かい点ですが、転送するURLを一覧に載せたままにしませんでした。

sitemapは「このURLを登録してほしい」という一覧です。そこに転送するURLを書くと、「登録してほしい」と「そこへ行くな」を同時に伝えることになります。矛盾した指示は、送らないほうが良いはずです。

統合したら、リンクが動かなくなった#

ここで問題が出ました。トップページ以外から「実績」を押しても、目的の場所へ行きません。

原因は、ページの移動の仕方でした。

同じページの中     → ブラウザが自分でスクロールする
別のページから来た → 画面を読み込み直さず中身だけ差し替える
                     ＝ ブラウザは「移動した」と思っていない
                     ＝ URLの # を見て動いてくれない

加えて、移動した直後は画面の先頭に戻されます。何もしないと「トップページの一番上に着いただけ」という結果になります。

そこで、移動後にURLの # を読んで、その位置までスクロールさせる処理を足しました。飛び先がまだ描画されていない場合に備えて、1回だけ待って再試行しています。

着地の位置も直した#

もうひとつ。アンカーで飛んだ先が、貼り付いたヘッダーの裏に隠れていました。

飛び先の位置を計算するとき、ブラウザはヘッダーの存在を考慮しません。要素の上端を画面の上端に合わせるだけです。

飛んだときだけ余白を確保する指定があるので、ヘッダーの高さぶんを足しました。

今回の学び#

まず、個別ページを持つ価値は、そこにしかない情報があるかで決まること。ページ数が多いこと自体には価値がありません。同じ内容が複数の場所にあると、評価も注意も分散します。

次に、URLは外から指される名前なので、中の都合で無効にしないこと。これはアンカーIDのときと同じ話でした。指す側は、指される側の事情を知りません。消すなら、行き先を用意してから消します。

そして、恒久的な指定は、取り消しにくいこと。恒久転送はブラウザに記憶されるので、あとから変えても届かない相手が出ます。迷いがあるうちは一時的にしておく判断があります。

最後に、仕組みを変えたら、ブラウザ任せだった部分を確認すること。画面を読み込み直さない作りにした時点で、いくつかの仕事がこちら側に移っています。移ったことに気づかないまま「昔から動くもの」として扱うと、静かに動かなくなります。