すずめのおやど制作メモ

「すずめのおやどの」のＰＣ／モバイル切替

「すずめのおやど」はPCサイトとモバイルサイトの二本立て。User Agentがデスクトップか、モバイルモードかによって振り分けている。この振り分けにjquery.Pc2Sp.jsと言うアプリを使うと、モバイルサイトからPCサイトを閲覧できる。
そのとき、この「モバイルサイトへ」のメニューが出る仕組みだ。つまり、両サイトを行ったり来たり出来る双方向である。仕組みとしては良いのだが、欠点はふたつのサイトを独立して作らねばならないこと。
一つのファイルで済ませる方法として、レスポンシブWebデザインと言うのがある。当サイトではTemplate-Partyのテンプレートをこれまで採用してきた。いろいろなデザインが用意されているので、ページの内容によって、使い分けられるがいい。この方式の問題点はモバイルモードになったスマホ等から、PCサイトを閲覧できない事と、ブラウザでどんどん拡大して行くと、レイアウトがある時から、モバイルモードになってしまうこと。東北大学ではこう言ったことを考慮してか、スマホでアクセスすると、「PCレイアウト」と言うのがでて来る。これだと、こういった問題は起きない。

こんなのが出来ないか

「すずめのおやど」方式からの発展形を考えた。デスクトップとモバイルのファイルは共通とし、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となっている。

レスポンシブWebデザインを変更

レスポンシブWebデザインのものをPCサイトとモバイルサイトに分けるのは簡単だ。PCサイトのCSSでは@media～に続く部分を全て削除すればいい。モバイルサイトのCSSはPCサイト部分のページサイズを変更したり、両サイドのリンクなど表示しない箇所をdisplay:none;にすればできる。それと、画像は/imagesとサイトルート相対パスで、cssとJavascriptは普通の相対パスでcss/style.css、js/jquery.Pc2Sp.jsと記述した。
これで、PCからモバイルサイトを見ても、レイアウトされたページで見る事ができる。例えばPCで「User-Agent Switcher for Chrome」などの拡張機能を使って、モバイルサイトを見た時でも、レイアウトされるようにページ幅を560pxにしてみた。

メニュー部の自動入れ替え

上部メニューの右端１個は次のコードで、切替えている。PCモードでアクセスしたときは「アウルネット」の文字。モバイルモードで一旦SPフォルダのファイルを読み込み、そこのメニューにある「PCサイト(…Safari以外）」をクリックして、PCモードに来た時は、「モバイルサイト」の表示になるようにした。３番目の「PCサイト」はモバイルサイトでのメニューと共通化のため置いた。１番目のメニューのclass="spnone"：はモバイルサイトのときは非表示
２番目の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; }

実際の動作

タブレットはKindle Fire HD、AndoroidはウォークマンのNW-F886、iOSはiPod Touch 6でチェックしてみた。インストールしているブラウザで動作しなかったのはiPod touch 6のSafariだけであった。Safariだけは「デスクトップ用サイトを表示」から、PCサイトを見るしかない。それで、メニューの所に「SafariはDeskTop表示」と書いて置いたが、Safariの機能を知らない人にとっては意味を成さないかも知れない。iPod touch 6のChromeは問題なく動作していたから、このシステムが動作するかしないかはOSに寄らずブラウザの仕様による事が分かった。

フォルダ構成