最初に必ず書くこと

見出し右端の記号は?

Web Page
Booskanium's Tips.
忘れっぽい落書き人のメモ

無条件で書くようにしています。「/js/__van_i_used.js」にまとめて書いてありますので参照してください。

IEを使わないエコ作戦

ここの落書き人はIEを意識してコーディングするのはやめました。Polyfill、Ponyfill、Transpileを使えばという話もありますが、それで完全に動作するかというテストが加わり、面倒になって辞めました。
落書き人の個人サイトは、以下のJavaScriptを最初に仕込んでIEを撥ね付けています。
この副作用で「/js/__van_i_used.js」の中にES2015以降の構文が書くとエラーになり、以下が実行されないことです。

//IEを使わないエコ作戦(*^_^*)
if (document.uniqueID) {
	alert('このサイトでは「IE」には読解できないモダンな構文を利用しています。\
		\n \nIEを使い続けることは、新しい体験の機会を逸っしています。\
		\n \nIEはセキュリティ的に危なっかしい機能が実装されたままです。\
		\n \nインターネット閲覧にはモダンブラウザを使うことを強くお勧めいたします。\
		\n \n■IEを使わないエコ&ITエンジニア救済■\n・政府・自治体・企業のIE依存予算の根拠を無くしてエコ予算へ。\n・理不尽なIE対応要求からエンジニアを救済してください。');
	window.location.href = '/gotomoden.html';
}

Can I use

訪問しているブラウザの機能チェックです。そろそろIEに対する判定は除外しようかな。

//機能調査
var __ua = (function(){
	return {
		ltIE6:typeof window.addEventListener == "undefined" && typeof document.documentElement.style.maxHeight == "undefined",
		ltIE7:typeof window.addEventListener == "undefined" && typeof document.querySelectorAll == "undefined",
		ltIE8:typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined",
		ltIE9:document.uniqueID && typeof window.matchMedia == "undefined",
		gtIE10:document.uniqueID && window.matchMedia,
		Trident:document.uniqueID,
		isMSIE:/*@cc_on!@*/false,
		isMSIE11:(document.documentMode === 11),
		Edge:(navigator.userAgent.indexOf("Edge") != -1),
		Gecko:'MozAppearance' in document.documentElement.style,
		Presto:window.opera,
		Blink:window.chrome,
		Webkit:typeof window.chrome == "undefined" && 'WebkitAppearance' in document.documentElement.style,
		Touch:typeof document.ontouchstart != "undefined",
		Mobile:(typeof window.orientation != "undefined") || (navigator.userAgent.indexOf("Windows Phone") != -1),
		ltAd4_4:typeof window.orientation != "undefined" && typeof(EventSource) == "undefined",
		Pointer:window.navigator.pointerEnabled,
		MSPoniter:window.navigator.msPointerEnabled,
		hasTapEvent: false,
		browser:(
			(function() {
				if(navigator.userAgent.indexOf('Edge') != -1) {
					return 'Edge';
				} else if(navigator.userAgent.indexOf('Vivaldi') != -1) {
					return 'Vivaldi';		//現在のVivaldiはChrome偽装しているので判定不能
				} else if(navigator.userAgent.indexOf('Chrome') != -1) {
					try {
						this.dmyAudio = new Audio();
						delete this.dmyAudio;
						return 'Chrome';
					}
					catch (e) {
						//Chrome偽装したVivaldi
						return 'Vivaldi';
					}
				} else if(navigator.userAgent.indexOf('Safari') != -1) {
					return 'Safari';
				} else if(navigator.userAgent.indexOf('Waterfox') != -1) {
					return 'Waterfox';
				} else if(navigator.userAgent.indexOf('Firefox') != -1) {
					return 'Firefox';
				} else {
					return 'unknown';
				}
			}())
		)
	}
})();
//タッチイベント実装検査 スワイプなどが使えるかなどの判断で使う
window.addEventListener('load', function(){
	let iframe = document.createElement('iframe');
	document.body.appendChild(iframe);
	__ua.hasTapEvent = ('ontouchstart' in iframe.contentWindow);
	iframe.remove();
}, false);

URLの引数, ハッシュフラグメントの取得

URL引数やURLハッシュフラグメントを取得しておくと何かと便利です。

//URL引数, URLハッシュを取得
var __url =  {
	//URL引数を取得
	args : (function() {
		//URL引数取得
		var a =  new Object();
		a.deb = false;
		let params = location.search.substring(1).split('&');
		for (var i = 0; i < params.length; i++) {
			let keyval = params[i].split('=');
			if (keyval.length < 2) {
				if (keyval[0] == 'deb') {
					a.deb = true;	//デバックモード指定
				} else {
					a[keyval[0]] = ''; 	//値無し引数
				}
			} else {
				a[keyval[0]] = keyval[1];
			}
		}
		return a;
	})(),
	//URLハッシュを取得
	hash : location.hash
}

利用例:

if ('data' in __url.args) {		//引数dataが指定されていたら
	data = __url.args.data;		//引数dataの値を参照
}