こんにちは！ あますた(@amaguristar)です。

昨年、西浅草にハンバーグ＆ステーキとカレーのお店をオープン(下記にお店のページリンク貼っておきます)。そちらのサイトの更新をしていて中々こっちの更新が出来ず。

「あれ？また飽きたの？？」

と思う方も多いはず。

「そんな事ないよー！」

と、声を大にして言いたくとも現状未更新。これでは説得力が無いのもまた事実。

そんな時、お店のサイトの構成で「このページを開いたらオートで違う場所を開くようにしたいな・・・・。」って案件があり実装。

一応、メモしておこうと今回です。

　

いわゆる自動移動（リダイレクト）の仕方

ちょっと簡単にまずは現状の説明から。

まず「Wazn(わずん)」のページ構成を簡単に説明すると、情報が蓄積される(いわゆる配信していくページ)は大きく２つ。

• お知らせ
• ブログ

の２種類。そのほかはいわゆるメニューや地図等中々変わらないページ。

ブログを更新すると「更新しましたよ」的なメッセージもお知らせに載せて紹介。確認するには、お知らせをクリックしてさらにブログへのリンクもクリックと言う流れでになってました。

つまり「お知らせを開く」→「お知らせ内のブログのリンクをクリック」という一手間余計な状態。たまになら良いのでしょうが、チリも積もればなんとやら。手間はなるべく減らしたい。

「お知らせ開く」→「ブログを表示」

というシンプルな物にしたい！ってのが今回の趣旨。

どうするのが良いのか？？

方法は簡単で「リダイレクト機能を使う」だけ。

リダイレクトとは？

Web上での「リダイレクト」とは、あるURLから別のURLに移動させる(転送させる)こと。良くあるのがサイトのURLが変わったので新しいURLに飛ばすこと。

良くありません？　「このページはhttp://○○○ へ移転しました。３秒後に自動で移動します。」的な文言。まさにこれです。

方法は３種類

• meta タグを使う
• JavaScriptを使う
• .htaccessファイルを使う

今回は一番簡単な meta タグを使う方法で実装します。

とはいえ、めちゃくちゃ簡単。

ホームページの＜head＞〜＜/head＞タグ内に下の＜meta ＞タグを追加するだけ

<meta http-equiv="refresh" content="0;https://○○○〜">

ざっくり説明すると、content=”０；https://○○○〜”の部分が重要。

０はページが開いてから移動するまでにかかる時間。今回は０なので開いた瞬間移動開始。ここを３に変えると３秒後に移動開始って意味。移動先は；の後のURL。

ここで注意しないといけないのは１つだけ。content要素内はセミコロン（；）で区切るところ。間違ってcontent=”０”；”https://○○○〜”って「”」で区切るとバグります。

あと良くやりがちなのが「半角」と「全角」の入力間違い。大丈夫だと思いますが実際に書くときは全て『半角』じゃ無いと動きません。

あとはなんらかの原因で指定した秒数が経っても移動しない時の為にリンク先を載せておくのも忘れずに。