スマートフォン用サイトを別作成するには
スマートフォン専用サイトを別に作成する際に必要な事項について説明します。
はじめに
2019年1月21日現在における、過去30日間のメインサイト www.wanichan.com の閲覧者の約3割がスマートフォンからです。夜間や週末、とりわけ年末年始等の連休においては、気軽にチェックできるスマートフォンの割合が高くなっています。スマートフォンからPC用サイトを見ると全体的に縮小されて操作しづらい部分もあったりします。しかし、言い換えれば、6割がPCから、ということになります。
Windowsでの内訳は以下の通り。Windows 10とWindows 7が大半で、8.1が少々といったところです。なお、Windows VistaやXPはほぼなくなりました。
私は2013年9月ごろから、スマートフォン用サイト、wanichan.net の構築作業を本格的に取り掛かりました。
にわかに取得した wanichan.net ドメインの使い道をどうするか、と当時ずっと考えていて、その結論として試験的にスマートフォン用サイトを作ってみよう、ということで、一応技術コンテンツのみ取り扱うことにしました。
当時のメインサイトはXHTML 1.0 Transitional でIE6にも対応していたのですが、DOCTYPEを変えるといろいろと不都合が出るのではないかという懸念があり、4000ページ以上を全部変換するのもかなりきつい作業になると思ったのが別サイトの立ち上げの理由だったりします。
作業手順
2013年9月から2014年1月上旬までは、スマートフォンとPCとのすみわけがなされ、スマホからGoogle検索すると、スマホ用URLに代替されました。ただし、PCからはスマホ用記事が抽出されません。
両方管理するのは面倒ですが、以下の作業を完了することで実装できました。
- スマホ用サイトに、PC用サイトへのカノニカルURLを指定
- PC用サイトに、Googleに対応するスマホ用URL（代替URL）を指定
- スマホからPC用サイトにアクセスしたときに、スマホ用の該当ページへのリダイレクトメッセージを表示
- スマホ用とPC用のそれぞれ自由に行き来するようにリンクする
1. スマホ用サイトに、PC用サイトへのカノニカルURLを指定
この記述がないと、重複コンテンツとしてみなされて不利になります。<head>の次の行に本家の記事のURLを必ず指定します。
<link rel="canonical" href="http://www.wanichan.com/web/expression/web4/">
ダイナミックWebテンプレートを利用する場合は、編集可能な領域名 doctitle 内に代入します。ただし、できるだけ上の行に配置してください。
<head> <meta charset="utf-8"> <!-- #BeginEditable "doctitle" --> <link rel="canonical" href="http://www.wanichan.com/web/expression/web4/"> <title>Expression Webを使ってみよう：Expression Web 4</title> <meta content="Expression Web 4の使用方法を解説します。" name="description" /> <meta content="Expression Web 4" name="keywords" /> <!-- #EndEditable -->
2. PC用サイトに、Googleに対応するスマホ用URL（代替URL）を指定
href属性に、対応するスマホ用URLを個別指定していきます。ただし、正確に指定する必要があります。ダイナミックWebテンプレートが適用されたWebページの場合は、編集可能な領域名 doctitle エリア内に記述します。
<link rel="alternate" href="http://wanichan.net/web/expression/web4/" media="only screen and (max-width: 640px)"/>
3. スマホからPC用サイトにアクセスしたときに、スマホ用の該当ページへのリダイレクトメッセージを表示
スマホ用サイト（wanichan.net）およびPC用サイト（wanichan.com）の他のページからの訪問、もしくはiPhoneやAndroidからの場合に以下のメッセージを表示するように指定して、location.href 値にスマホ用の該当ページを指定します。ダイナミックWebテンプレートが適用されたWebページの場合は、編集可能な領域名 doctitle エリア内に記述します。
<script type="text/javascript">
if (document.referrer.indexOf('wanichan.net') == -1 && document.referrer.indexOf('wanichan.com') == -1 && ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0)) {
if(confirm('スマートフォン用サイトを表示しますか？')) {
location.href = 'http://wanichan.net/web/expression/web4/';
}
}
</script>
4. スマホ用とPC用のそれぞれ自由に行き来するようにリンクする
中には、スマホからPC用サイトを見たい人もいると思います。またはその逆も考えられます。自由に行き来できるようにナビゲーションリンクを設置しておくとよいでしょう。編集可能な領域を別に追加しておき、それぞれ指定していきます。ここでは、編集可能な領域名 view にしています。
