前にも書きましたがSeesaaブログのテンプレートが新デザインに移行された2017年前後から最近まで、パソコンにほぼほぼ触っていませんでした。

持っているSeesaaブログは旧デザインシステムに移行し損なったままの、新デザインシステム難民なのです。

旧デザインシステムだけどレスポンシブだしスマホ版のカスタマイズは制約多い。

それだったらスマホアクセスは強制的にデスクトップ版にリダイレクトしてしまえ、というのが今回のトピックです。

デスクトップ版に誘導すべきユーザー

新デザインシステムが導入されたときに旧デザインシステムから移行できたユーザーの方々はスマホ版のテンプレートをそのまま使っていてもよいと思います。広告はそんなに多くないですし。

• アフィリエイターである
• 旧デザインシステムのブログアドレスは変えたくない
• 使っているテンプレートはレスポンシブ
• モバイルテンプレートは広告が多くて嫌

などなど。

広告が気にならないならそのままで良いですし、長年放置したブログで Google のインデックスが消えてなくなってるような場合は、いっそのことアカウント作って新デザインシステムでブログを引っ越した方が良いかもしれません。

自分のアフィリエイト広告を気にしてたり、デスクトップ版とモバイル版の両方を管理するのはやっぱり面倒だというユーザーの方々向けです。

Seesaaブログ スーパー超シンプルテンプレート
完全レスポンシブ、SEO強化済みアドセンス向けテンプレート。

誘導するいくつかのパターン

ここで紹介するバージョンは有無も言わせずシレっとデスクトップ版にリダイレクトするパターンです。

ただあまりユーザーフレンドリーじゃないし、Cookieを操作するのでプライバシー上あまりよくないですね。

なので他のパターンとしてモーダルで了解を得るスクリプトも実装できています。初めて訪問したサイトで画面下からニョキっと出てくるあのパターンです。

デスクトップ版に強制リダイレクト

本題です。

旧デザインシステムの「デザイン」から「スマートフォン」ー「コンテンツ」と進みます。

フッターに[自由形式]を追加して下記のコードを貼り付けます。

図の中の[jQueryRedirect]のパーツがそれです。

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script> $(document).ready(function(){ const isMobile = ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') === -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0); const urlParams = new URLSearchParams(window.location.search); const hasFromSp = urlParams.has('from_sp'); // URLに 'from_sp' パラメータがあるか確認 const hasForcePCCookie = document.cookie.indexOf('force_pc=1') !== -1; // 以下の3つの条件が全て満たされた場合のみ強制リダイレクトを実行する // 1. モバイル端末からのアクセスである // 2. PC版表示強制クッキー (force_pc=1) が設定されていない // 3. URLに 'from_sp' パラメータがない（＝このスクリプトによるリダイレクトがまだ行われていない） if (isMobile && !hasForcePCCookie && !hasFromSp) { document.cookie = 'force_pc=1; max-age=157680000; path=/'; // PC版表示を強制するクッキーを設定 document.cookie = 'force_sp=0; max-age=157680000; path=/'; // モバイル版表示を強制するクッキーを無効化 if (navigator.cookieEnabled) { // 強制リダイレクトを実行 // 現在のURLに 'from_sp' パラメータを追加してリダイレクトします。 // これにより、リダイレクト後のページ読み込み時には 'hasFromSp' が true になり、 // 上記のif文の条件を満たさなくなるため、無限ループを防ぐことができます。 setTimeout(function(){ let newUrl = window.location.href; // URLにクエリパラメータが既に存在するかで分岐 if (newUrl.indexOf('?') === -1) { newUrl += '?from_sp'; } else { newUrl += '&from_sp'; } window.location.href = newUrl; }, 100); // 100ms の短い遅延を設定し、クッキーが確実に設定されるようにします } } // 上記の条件に合致しない場合（例：既にPC版クッキーが設定されている、またはリダイレクト済みの場合）は // このスクリプトは何も処理を行いません。 }); </script>

デスクトップ版への強制リダイレクトのフローは以下の通り。

スクリプトを実行する前提として、

１．モバイル端末からのアクセスをUser-Agentで確認、
２．モバイル端末にデスクトップ版でアクセスするcookieがない、
３．「https://ブログアドレス?from_sp」のURLでアクセスされたのではない、

の３点をチェックします。要はスマホから初めてアクセスされた、かつ cookie が削除されているか期限切れであることを確認しています。

ちなみに?from_spはほぼ人為的でない限り付加されません。検索エンジンには ?from_spのパラメータは Canonical で弾かれるのでインデックスされませんから。

条件が満たされるとまず、次回以降デスクトップ版テンプレートにアクセスするように cookie の書き込みを実行します。

cookieを書き換えたらデスクトップ版に強制リダイレクトします。

カスタマイズと検証

Seesaaブログのスマホ版はカスタマイズの制約も多いし、cookieをいじくるので検証も正直面倒くさいです。

カスタマイズ

スマートフォン版のコンテンツで何らかのJavaScriptを実行しているのが確実なら先頭行にあるjQueryライブラリは不要です。わからなければそのままで。

コメントも不要なんで削除してください。まあリダイレクトしちゃうし、モバイル版テンプレートはパソコンでSDKとか入れないと見えませんから、そのままコピペでも。

リダイレクトの遅延は検証した結果、短いに越したことはないというのが結論。

１０秒とか５秒とか試したけど、モバイル版の広告と干渉するのか正常に稼働しませんでした。

なのでベストエフォートで遅延100msです。スマホ版のスクリプト実行を制御することができないので、リダイレクトの実行が早いかSeesaa広告が早いかのぶっちゃけ運任せです。

実はこのスクリプトより先に cookie を受け入れるモーダル表示バージョンを作っていたんだけど何故か無限ループ。

デスクトップ版テンプレートにはいろいろなコードを書いているんでコードが干渉してたり、ましてや暗号化していたりしているのでわかんなくなっちゃったんです、自分のブログの仕組みが。

なので無理くり強制リダイレクトバージョンをまず採用しています。

検証

もしかするとモバイル端末で初めてこのブログを訪問された方はリダイレクトされてデスクトップ版のレスポンシブテンプレートを見ているはずです。

少なくとも興味を持って読んでいただいているSeesaaユーザーの方であれば見分けがつくかと。

それで検証なんですがスマホで使っているブラウザの cookieをいったん削除しないと。それが結構手間です。

ブラウザの「設定」画面などに「プライバシーとセキュリティ」（Chromeの場合）的なメニューから「閲覧履歴データを削除」などで cookie を削除してください。

いちど検証してしまうと cookie を書き換えるので検証ごとにやります。

毎回cookie削除が面倒なら Chrome アドオンの lighthouseで確認する方法もありかと思います。

リダイレクトは100%は成功しない

デスクトップ版で開くcookieを持っていない初回はスマートフォン版テンプレートで開きます。

直後、遅延最短のスクリプトが実行されるのですが、タイミングによってはスマホ版のオーバーレイ広告（画面いっぱい黒い半透過レイヤーのポップアップ広告）のスクリプトに妨げられて実行が止まります。

その場合でも記事リンクなどいずれかのリンクがクリックされればデスクトップ版にリダイレクトされるはずです。なんか動きがちょっと変だったな程度の不信感の手前で済むはずです、たぶん。

自己責任で

新デザインシステムでも動作は確認済みです。

当時、新しいアカウントで新デザインシステムのブログも検証用に１つだけ作って持っていたので、それで検証しました。

新デザインのスマートフォン版はSeesaa広告の量が少なくてスマートですよね。

だからといってブログのアドレスを変えてまでも新デザインシステムに移植するのは面倒くさい。

そういう意味では新旧デザインどちらもデスクトップ版へのリダイレクトは有効かもしれません。

但しリダイレクトするのはSEO的にはデメリットもあると思うので導入は自己責任でお願いします。