ＰＣ／モバイルの切替
「すずめのおやど」はPCサイトとモバイルサイトの二本立て。User Agentがデスクトップモードか、モバイルモードかによって振り分けている。この振り分けにjquery.Pc2Sp.jsと言うアプリを使うと、モバイルサイトからPCサイトを閲覧できる。
そのとき、この「モバイルサイトへ」のメニューが出る仕組みだ。つまり、両サイトを行ったり来たり出来る双方向である。仕組みとしては良いのだが、欠点はふたつのサイトを独立して作らねばならないこと。
一つのファイルで済ませる方法として、レスポンシブWebデザインと言うのがある。当サイトではTemplate-Partyのテンプレートをこれまで採用してきた。いろいろなデザインが用意されているので、ページの内容によって、使い分けられるのがいい。この方式の問題点はモバイルモードになったスマホ等から、PCサイトを閲覧できない事と、ブラウザでどんどん拡大して行くと、レイアウトがある時から、モバイルモードになってしまうこと。東北大学ではこう言ったことを考慮してか、スマホでアクセスすると、「PCレイアウト」と言うのがでて来る。これだと、こういった問題は起きない。（2015年12月10日）
こんなのが出来ないか
「すずめのおやど」方式からの発展形を考えた。デスクトップとモバイルのファイルは共通とし、jquery.Pc2Sp.jsで振り分ける。デスクトップに出て来る「モバイルサイトへ」は空いたスペースにではなく、前にあったものに置き換える方式にしたい。
モバイルサイトの画像はデスクトップサイトと共通に使いたい。となると、モバイルサイトはhtmlファイルとCSSフォルダとjsフォルダだけで済む。
ローカルサーバーXAMPPの導入
画像を共通化するためにサイトルート相対パスを使うことに決めた。でも、このままではローカルでのチェックが出来ない。そこで、本当に久しぶりにローカルサーバーを導入することにした。調べていくと、XAMPPがいいようだ。取りあえず、モバイル型のXAMPPをsetup_xampp.batからインストールした。
ここでつまずいたのは、ローカルのファイル置き場をXAMPPにお知らせする方法。調べて行くと、httpd.confでやれば良いことが分かった。
xampp-control.exeを起動し、次のように変更した。
DocumentRoot "/xampp"
＜Directory "/xampp"＞
これで、/xamppフォルダにindex.htmlを置き、ブラウザにlocalhostを入れると、indexファイルが表示するようになった。
なお、XAMPPのインストール先はC:\MobileApps\xamppとした。
フォルダ構成
XAMPPで設定したように、Cドライブの頭にxamppフォルダをおき、その中にcss,images,jsそしてモバイルサイトのspを置いた。
そしてspサイトにはcss,jsのフォルダ。imagesフォルダの画像はPCとモバイルを共通としたので、画像へのリンクはサイトルート相対パスで書いた。htmlファイルも共通なので、cssとjsへのリンクはサイトルート相対パスと普通の相対パスの二本立てで、ファイルが共通であっても矛盾のないようにした。
同じjavascriptを使う場合、ファイル名は共通にして相対パスで書き、スクリプトの中身を変えた。また、一方のサイトだけしか使わない所はdisplay:noneで逃げた。
レスポンシブWebデザインを変更
レスポンシブWebデザインのものをPCサイトとモバイルサイトに分けるのは簡単だ。PCサイトのCSSでは@media～に続く部分を全て削除すればいい。モバイルサイトのCSSはPCサイト部分のページサイズを変更したり、両サイドのリンクなど表示しない箇所をdisplay:none;にすればできる。それと、画像は/imagesとサイトルート相対パスで、cssは普通の相対パスcss/style.cssで、javascriptは必要に応じて、２種類のパスで記述した。
これで、PCからモバイルサイトを見ても、レイアウトされたページで見る事ができる。例えばPCで「User-Agent Switcher for Chrome」などの拡張機能を使って、モバイルサイトを見た時でも、レイアウトされるようにページ幅を560pxにしてみた。
メニュー部の自動入れ替え
上部メニューの右端１個は次のコードで、切替えている。PCモードでアクセスしたときは「アウルネット」の文字。モバイルモードで一旦SPフォルダのファイルを読み込み、そこのメニューにある「PCサイト」をクリックして、PCモードになった時は、「モバイルサイト」の表示になるようにした。３番目の「PCサイト」はモバイルサイトでのメニューと共通化のため置いた。
１番目のメニューのclass="spnone"：モバイルサイトは表示で、PCは非表示。
２番目のclass="pcnone"：PCサイトでは非表示で、モバイルサイトでは表示となる。
３番目が問題。この形は「すずめのおやど」の「モバイルサイトへ」に相当する。他の場所だと簡単なのだが、上のメニューバーに持って来たかった。ここで思いついたのが、上の「アウルネット」と重ねること。これはpositionでabsoluteにして、位置合わせをするとレイアウトに影響なく実現できた。具体的にはメニューの８番目に疑似セレクタを使って、
nav#menubar ul li:nth-child(8) {
position:absolute;
left:831px;
top:1px;
width: 166px;
}
とやるとうまく行った。それには親のulにrelativeが必要なので次のようにした。
nav#menubar ul {
position:relative;
}
navigator.userAgent
この自動振り分け方式はsafariで問題が出た。つまりモバイルサイトからPCサイトへ行こうとメニューをクリックしてもしても、safariでは動作しない。そこで、safariが標準ブラウザであるiPhone、iPodからアクセスがあった時のみ、「PCサイト: Safariはデバイスの"デスクトップ用サイトを表示" 選択」で対応してもらう表示を入れた。最初、Safariをnavigator.userAgentで、認識しようと試みたが、他のブラウザでも"Safari"と出てうまく行かなかった。
実際の動作
タブレットはKindle Fire HD、AndoroidはウォークマンのNW-F886、iOSはiPod Touch 6でチェックしてみた。インストールしているブラウザで動作しなかったのはiPod touch 6のSafariだけであった。Safariだけはデバイスの「デスクトップ用サイトを表示」から、PCサイトを見るしかない。iPod touch 6のChromeは問題なく動作していたから、このシステムが動作するか、しないかはOSによらずブラウザの仕様による事が分かった。
関西は滋賀の貸別荘
