田舎暮らしのウェブ屋ブログ

ホームページのハウツー・グルメレポ・書評 etc・・・

スマートフォンサイトとPCサイトの切り替え:サイトの振り分け方法(1)javascript

PCサイトとSPサイトの切り替え

スマートフォンの案件で、私が一番頭を悩ますのが実はパソコンサイトとスマートフォンサイトの切り替えです。
パソコンサイト(以下PCサイト)とスマートフォンサイト(以下SPサイト)の目的や充実度、ユーザビリティ、SEO、作業の手間、現状サイトの状態など色々考慮した結果、ネット上で見つけた二つの方法が良かったのでご紹介します。
今回はto-R様で配布されている Pc2Sp.js です。

配布サイト

以下のページでライブラリのダウンロードできます。

PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」
Pc2Sp.js

メリットとデメリット

メリット

  • 個々のページでPCサイトとSPサイトの切り替え対応ができるので、ユーザビリティやSEOの面で優れている
    例) PCサイト:htte://miraiynet.com/spexample.html ⇔ SPサイト:htte://miraiynet.com/sp/spexample.html
    対応するページで振り分け可能。
  • PCとSPで、ファイル名や構成が違うサイトでも使用できる。
    振り分けするページとしないページと分けることができる。
    など、自由度が高い。
  • スマートフォンでPCサイトを見た場合SPサイトに自動的に切り替えられる。
    SPサイトの「PCサイト切り替えボタン」をおすと、以降はどのページにいってもPCサイトが表示され、PCサイトの「SPサイト切り替えボタン」を押すとSPサイト切り替え機能が復活するので、利用者がPCとSPの切り替えを選びやすい。

デメリット

  • 振替が必要なPCサイト、SPサイト全ページにjsやリンクのソースの設置が必要なので、.htaccessの方法より手間がかかる。
  • 利用者がjavascriptをoffにしている場合は利用できない。

設置の補足と、使用してみた感想

配布ページの方法通りにすれば簡単に設置できますが、まったくの初心者さんのために補足すると、<head></head>内のjQueryとjquery.Pc2Sp.jsの読み込みは、PCサイトと同じようにSPサイトの方にも必要です

切り替えのリンクは、cssを自分で作成して、ボタン風にしたり普通のリンクにしたりできます。

PCサイトがすでにある場合は、js等を入れないといけないので手間はかかりますが、設置も簡単ですし、ユーザービリティもいいし、PCとSPで完全にターゲットや目的を分けていなくて、PCサイトもスマートフォンで見てもらう必要がある場合は、このライブラリはおすすめです。

一つだけほんの少し作業に支障がでることがありました。
ローカルのブラウザで動作確認をしようとすると、Pc2Sp.jsの切り替えが働いてしまって、ページが表示されないのです。
これは、ローカル内のPc2Sp.js内を消して回避しましょう。(リンクははずせないので)
サーバーにPc2Sp.jsがあればいいわけですから。

関連記事

コメント

コメントはまだありません。

コメントの投稿

お名前

メールアドレス

URL

トラックバック: http://miraiyanet.com/myblog/pcsp130608.html/trackback

ページトップへ