ホーム > HP作成支援 > モバイル対応ホームページを作ろう!! > Step 7

モバイル対応ホームページを作ろう!!

【JavaScript を利用した方法】

 JavaScriptを利用して、スムーズにパソコンとモバイルを振り分けることができます。基本的にモバイルではJavaScriptに対応していないため、JavaScriptに対応したパソコンだけに表示する、パソコンだけを別ページに飛ばすなどで振り分けます。

この方法に共通した問題点としては、

 ・モバイルにとっては余分なデータを受信することになる
 ・モバイルがJavaScriptに対応した場合には正常に振り分けできなくなる

の2点が挙げられます。


パソコンだけにリンクを表示させる

「URL」のところにリンク先のURL、「パソコン」のところにリンクとして表示するテキストを入力します。

【サンプル】
<script language="JavaScript">
document.write('<a href="http://www.torworld.com/"></a>');
</script>



パソコンだけを別ページに飛ばす

<head>内
<body>内
 JavaScriptに対応しているパソコンだけを別ページに飛ばすことで、パソコンとモバイルを半自動的に振り分けることができます。実際には、いったんモバイル用のページが表示された後、瞬時に別ページ(パソコン用ページ)へ飛ぶことになります。

【サンプル】
<html>
<head>
<title> テストページ </title>
<script language="JavaScript">
<!---
function jump() { location.href = "http://www.torworld.com/"; }
--->
</script>
</head>
<body onLoad="jump()">
 ・
 ・
 ・
</body>
</html>

 サンプルでは、モバイル用のページを読み込んだ後、パソコンだけは「Tor World」のトップページに飛ぶようにしてあります。モバイルからもhttp://web.torworld.com/pc/homepage/7/sample.htmlへアクセスしてみてください。

 問題点として、パソコンでアクセスした人には、ジャンプした先がトップページに思えるため、リンクなどもそのページにしてしまうことが考えられます。この場合、モバイルではアクセスできないページにリンクされることになるため、かなり痛いことになります。パソコン用ページに注意書きをしておきましょう。


 また、<meta>タグを使っても同じように別ページに飛ばすことができます。現在のところ、<meta>タグもモバイルは未対応のはずなので、こちらを利用しても構わないと思います。

【サンプル】
<html>
<head>
<meta http-equiv="refresh" content="0;URL=http://www.torworld.com/">
</head>
<body>
 ・
 ・
 ・
</body>
</html>

 http://web.torworld.com/pc/homepage/7/sample2.htmlへアクセスしてみてください。



Presented by
- Tor World -