Skip to content

Instantly share code, notes, and snippets.

@RyoSugimoto
Last active August 29, 2015 14:22
Show Gist options
  • Save RyoSugimoto/41de98dffe2f28d9508c to your computer and use it in GitHub Desktop.
Save RyoSugimoto/41de98dffe2f28d9508c to your computer and use it in GitHub Desktop.
ユーザーエージェントに応じてリダイレクトさせるJSライブラリ。

UARedirector.js

アクセスしてきた端末が指定したユーザーエージェントに当てはまるときに、指定したURLにリダイレクトさせるためのJavaScriptです。
jQueryなどのフレームワークに頼らずに、スタンドアローンで動作します。

基本的な使い方

まず、HTML文書内で「ua_redirector.js」を読み込ませます。

<script src="js/ua_redirector.js"></script>

UARidirecorオブジェクトのインスタンスを、パラメータを設定して作成し、redirectメソッドを実行します。

<script>
var myRedirect = UARedirector({
	cond: 'mobile',
	url: 'http://www.example.com/mobile/'
});

myRedirect.redirect();
</script>

上のコードでは、**このページにアクセスしてきた端末がスマートフォンであれば、http://www.example.com/mobile/にリダイレクトする、**という動作になります。

このように、インスタンスを作成する際に、condにアクセスしてくる端末の種類(pc / tablet / mobile)を、urlにリダイレクト先のURLをそれぞれ指定します。

ユーザーエージェントを固定(偽装)する

たとえば、スマートフォンからPCサイトにアクセスしたいユーザーのために、スマートフォン向けのページにPC向けサイトに切り替えるためのリンクを設置することがあります。

しかし、一旦PCサイトに切り替えた後、再び同じURLを訪れたり同じサイトの別のページにアクセスした際に、スマートフォン向けサイトに戻ってしまっては不便です。

そんなときのために、UARedirector.jsには、一定時間、UAを任意のものに固定(偽装)しておく機能があります。

<a href="../index.html" id="switch-to-pc">PCサイトを表示する</a>

<script>
// ※このコードは、「jQuery」を事前に読み込んでいることを前提としたものです。
$('#switch-to-pc').on('click', function () {
	myRedirect.fixUA('pc');
	// どの端末でアクセスしても、PCからアクセスしてきたように振る舞うようにする。
});
</script>

パラメータ一覧

プロパティ名 型 / 初期値 意味
cond string | boolean / 'mobile' リダイレクトさせる条件を指定します。'pc'、'mobile'、'tablet'のいずれかを設定しますが、独自の条件を指定したい場合は、真偽値または真偽値を返す関数や式を設定することもできます。
url string / '' リダイレクト先のURLを指定します。絶対パスでも相対パスでも構いません。
history boolean / false リダイレクト前のURLを、ブラウザの履歴に残すかどうかを設定します。内部的には、リダイレクトがreplaceメソッドによるものかhrefプロパティの置き換えによるものかを切り替えているだけです。
cookieName string / 'ua-redirector-ua' fixUAメソッドなどを使用する場合に必要なクッキーの名前です。
cookieExpires number / 1 クッキーの有効日数です。
cookiePath string / '/' クッキーが有効なディレクトリです。
cookieDomain string / '' クッキーが有効なドメインです。

メソッド一覧

</tbody>
メソッド名 引数 説明

動作チェック済み環境

Windows

  • Google Chrome - 最新
  • Firefox - 最新
  • Internet Explorer - 11, 10, 9, 8, 7

Mac

Android

  • Android 4.0.3 - ブラウザ

iOS

  • 8.3 - Safari

※Androidのバージョンによっては、タブレットとモバイルの区別がつかず、タブレットでアクセスしてもモバイル向けサイトにリダイレクトすることがありますが、これは仕様で、Android端末の画面サイズ・解像度が多岐にわたるためです。対応する場合は、スクリプトを拡張するか、condプロパティに独自の条件(boolean型)を設定してください。

;(function (window, document, undefined) {
var defaults = {
cond: 'mobile',
url: '#',
history: false,
cookieName: 'ua-redirector-ua',
cookieExpires: 1,
cookiePath: '/',
cookieDomain: ''
};
var extend = function (defaults, options) {
var extended = {};
var prop;
for (prop in defaults) {
if (Object.prototype.hasOwnProperty.call(defaults, prop)) {
extended[prop] = defaults[prop];
}
}
for (prop in options) {
if (Object.prototype.hasOwnProperty.call(options, prop)) {
extended[prop] = options[prop];
}
}
return extended;
};
var getUA = function () {
var u = window.navigator.userAgent.toLowerCase();
var ua = {
tablet:
(u.indexOf("windows") != -1 && u.indexOf("touch") != -1) ||
u.indexOf("ipad") != -1 ||
(u.indexOf("android") != -1 && u.indexOf("mobile") == -1) ||
(u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1) ||
u.indexOf("kindle") != -1 || u.indexOf("silk") != -1 ||
u.indexOf("playbook") != -1,
mobile:
(u.indexOf("windows") != -1 && u.indexOf("phone") != -1) ||
u.indexOf("iphone") != -1 ||
u.indexOf("ipod") != -1 ||
(u.indexOf("android") != -1 && u.indexOf("mobile") != -1) ||
(u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1) ||
u.indexOf("blackberry") != -1,
pc: true
};
if (ua.tablet || ua.mobile) {
ua.pc = false;
}
return ua;
};
var CookieUtil = {
'get': function (name) {
var start = document.cookie.indexOf(name + '='),
l = start + name.length + 1;
if ((!start) && (name != document.cookie.substring(0, name.length))) {
return null;
}
if (start == -1) {
return null;
}
var end = document.cookie.indexOf(';', l);
if (end == -1) {
end = document.cookie.length;
}
return decodeURIComponent(document.cookie.substring(l, end));
},
'set': function (name, value, expires, path, domain, secure) {
var today = new Date();
today.setTime(today.getTime());
if (expires) {
expires = expires * 1000 * 60 * 60 * 24;
}
var expiresDate = new Date(today.getTime() + (expires));
document.cookie = name + '=' + escape(value) +
((expires) ? ';expires=' + expiresDate.toGMTString() : '') +
((path) ? ';path=' + path : '') +
((domain) ? ';domain=' + domain : '') +
((secure) ? ';secure' : '');
},
reset: function (name, path, domain) {
if (this.get(name)) {
document.cookie = name + '=' +
((path) ? ';path=' + path : '') +
((domain) ? ';domain=' + domain : '') +
';expires=Thu, 01-Jan-1970 00:00:01 GMT';
}
}
};
var redirect = function (options) {
if (options.history) {
window.location.href = options.url;
} else {
window.location.replace(options.url);
}
};
var UARedirector = function (options) {
if (!(this instanceof UARedirector)) {
return new UARedirector(options);
}
this.options = extend(defaults, options);
this.ua = {
tablet: false,
mobile: false,
pc: false
};
if (!!(CookieUtil.get(this.options.cookieName))) {
// fixUA()でUAが強制されている場合、UAを偽装する。
this.ua[CookieUtil.get(this.options.cookieName)] = true;
} else {
// UAを取得する。
this.ua = getUA();
}
};
// Public Methods
// リダイレクトする。
UARedirector.prototype.redirect = function () {
if (typeof this.options.cond === 'string' && this.ua[this.options.cond]) {
redirect(this.options);
} else if (typeof this.options.cond !== 'string' && !!(this.options.cond)) {
redirect(this.options);
}
};
// UAを固定化する。
UARedirector.prototype.fixUA = function (ua) {
CookieUtil.set(this.options.cookieName, ua, this.options.cookieExpires, this.options.cookiePath, this.options.cookieDomain);
};
// 固定化したUAを解除する。
UARedirector.prototype.resetUA = function () {
CookieUtil.reset(this.options.cookieName, this.options.cookiePath);
};
window.UARedirector = UARedirector;
}(window, document));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment