ＩＴリテラシー研究会 in 廿日市: Web画面から指定時間後の自動リダイレクト方法

宮島からの干潟を望む

久しぶりに宮島を散策しました。宮島からみる干潟は，遠浅で瀬戸内海はどこまでも青く，心が癒されます。

今回，Googleアドセンスに審査申請してみました。その結果，見事に不合格でした。理由としてはポリシー違反とのことです。有用性の低いコンテンツでかつポリシー違反と言われても，抽象的で対応に苦悩するところです。

よっぽど有用で独自性のあるコンテンツでないと合格は難しいようです。世間一般でGoogleアドセンスは合格が難しいと言われるのがよくわかります。

とりあえず，当会のブログ程度では不合格になりますので，参考になさってください。

それはそれとして，当会の活動目的はＩＴリテラシーの研究ですから，ブログサイトの研究も題材として今後も続けてまいります。

さて，前回はブログ作成の過程で，Bloggerで使うファビコンの作成や設定方法について学習しました。ブログを作っているといろいろ修整したい個所が出てきます。

次は，パンくずリストを学習しようとしていますが，調査に時間を要しますので今回は備忘録として，Web画面の指定時間後の自動リダイレクトについて学習します。

当サイトは，Bloggerのカスタムドメインを利用したかったのですが，上手く機能しなかったので，当面，独自ドメインに来られた方をBloggerブログにご案内しようと思い立ったのがきっかけです。

それ以外にも，RaspberryPiプログラムで，プログラム終了時に他サイトに遷移する時に使ったり，結構役に立ちます。

それでは，学習を始めます。

さて，Web画面から自動的に他の画面にリンクする方法には，javascriptで行う方法とmetaタブで行う方法があります。

Javascriptで画面遷移する方法
metaタグで画面遷移する方法
時間待ちHTML例文について
まとめへ

Javascriptで画面遷移する方法

Webブラウザは，一般にJavaScriptを動かすことが出来ますので，次のようなスクリプトをコーディングします。

コード

<script>
  setTimeout(function () {
  window.location = 'https://XXX.XXXXX.XXX';
  }, 5000);
</script>

X印のところに，遷移すべきURLを記入します。5000とあるのはミリ秒単位ですから，例文では5秒後に自動的に遷移します。

都合の良い時間をここに記入します。

metaタグで画面遷移する方法

これは，javascriptに較べるともっと簡単で，以下のcodeを<head>~</head>内に貼ればいいです。

コード

<meta http-equiv="refresh" content="3;url=https://XXX.XXX.XXX"/>

content文に待機する秒数を指定します。X印のところに，遷移すべきURLを記入します。

例文では３秒に遷移します。

時間待ちHTML例文について

画面遷移用のHTML例文を以下に示します。利用される場合は，適当に修正してください。いろんなタグを入れてますが，そうしないとブラウザでエラーになるためです。

なお，時間待ちは，metaタグかjavascriptのどちらかを選べば良いです。時間待ちmetaタグの方をコメントアウトしています。

また，linkタグによるファビコン設定も同時にコメントアウトしていますので，適宜修正して下さい。

「meta property="og:~"」は，SNSへ情報を繋ぐためのmetaタグですが，これを入れておかないとSEO対策でエラーが出ますので入れています。

「XXX.XXX.XXX」に遷移するURLを記述してください。その他のXXXの個所や日本語の処を適宜修正してください。

コード

<!DOCTYPE HTML>
  <html lang="ja">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport"  content="width=device-width,initial-scale=1"/>
  <!-- コメントアウト START -->
  <!-- <link rel="icon" href="https://XXX.XXX.XXX/favicon.ico" type="image/x-icon"/> -->
  <!-- コメントアウト END -->
  <meta content="ここにHTML文の説明を記述する" name="description"/>
  <meta property="og:site_name" content="サイト名を記述する"/>
  <meta property="og:type" content="website"/>
  <title>XXXHTML文のタイトルを記載するXXX</title>
  <!-- コメントアウト START -->
  <!-- <meta http-equiv="refresh" content="3;url=https://XXX.XXX.XXX"/> -->
  <!-- コメントアウト END -->
  </head>
  
  <body align=center>
  <br /><br /><br />
  <h1>XXXXXXX画面にようこそ</h1>
  <br /><br /><br />
  <p>XXXに？秒後遷移します。</p>
  <br /><br />
  <p><a href="https://XXX.XXX.XXX">XXX画面XXX</a></p>
  <br /><br />
  <p>画面遷移しない場合は，上記ＵＲＬのクリックをお願いしますXXX</p>
  </body>

  <script>
  setTimeout(function () {
  window.location = 'https://XXX.XXX.XXX';
  }, 5000);
  </script>
  </html>

まとめ

簡単な時間待ちHTML文を学習しました。タグについての説明は，ここでは省略しますが，インターネット上に沢山の参考文献がありますので検索してください。

Webの世界は，日々変わりつつあります。これらに加えてCookieの使い方など，知らないことばかりですが，コツコツ積み上げていくしかないと思っています。

それでは，次回まで。