jsで位置情報を取得する

<div id="result"></div>

<script>
if(navigator.geolocation)
{
	navigator.geolocation.getCurrentPosition(

		function(position){

			var data = position.coords;

		var lat = data.latitude;
		var lng = data.longitude;
		var alt = data.altitude;
		var accLatlng = data.accuracy;
		var accAlt = data.altitudeAccuracy;
		var heading = data.heading;
		var speed = data.speed;

		document.getElementById('result').innerHTML = '<dl><dt>緯度</dt><dd>' + lat + '</dd><dt>経度</dt><dd>' + lng + '</dd><dt>高度</dt><dd>' + alt + '</dd><dt>緯度、経度の精度</dt><dd>' + accLatlng + '</dd><dt>高度の精度</dt><dd>' + accAlt + '</dd><dt>方角</dt><dd>' + heading + '</dd><dt>速度</dt><dd>' + speed + '</dd></dl>' ;

		var latlng = new google.maps.LatLng(lat, lng);

		var map = new google.maps.Map(document.getElementById('map-canvas'), {
			zoom: 15,
			center: latlng,
		});
			new google.maps.Marker({
				map: map,
				position: latlng,
			});
		},
		
		function(error)
		{
			var errorInfo = [
				"原因不明のエラーが発生しました。",
				"位置情報の取得が許可されませんでした。",
				"電波状況などで位置情報が取得できませんでした。",
				"位置情報の取得に時間がかかりすぎてタイムアウトしました。"
			];

			var errorNo = error.code;

			var errorMessage = "[エラー番号: " + errorNo + "]\n" + errorInfo[ errorNo ];

			alert(errorMessage);
			document.getElementById("result").innerHTML = errorMessage;

		},
		{
			"enableHighAccuracy": false,
			"timeout": 8000,
			"maximumAge": 2000,
		}

		);

}

else
{
	var errorMessage = "お使いの端末は、Geolocation APIに対応していません。";

	alert(errorMessage);

	document.getElementById('result').innerHTML = errorMessage;
}

</script>

なに!? vagrantだから?

Vue.jsを触ってみよう

CDNで読み込みます。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="demo">
	<p>{{message}}</p>
	<input v-model="message">
</div>

<script>
	var demo = new Vue({
		el: "#demo",
		data: {
			message: "hello Vue.js!"
		}
	})
</script>

Ajaxのような動きをする。
CDNのvue.jsの中を見てみる。
https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js

XMLHttpRequestがないのでAjaxではないのか。。これだけではちょっとわかりません。

v-modelは双方向データバインディング
v-ifはifでレンダリング
v-onはv-on:click=”doSomething”など、イベントリスナ
v-forはfor文

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="demo">
	<li v-for="item in items">
		{{item.message}}
	</li>
</div>

<script>
	var demo = new Vue({
		el: "#demo",
		data: {
			items: [
				{message: 'Foo'},
				{message: 'Bar'}
			]
		}
	})
</script>

なるほど。書きやすそうな印象はありますね。

print()メソッドで印刷する

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <link rel="stylesheet" href="">
</head>
<body>
<input type="button" value="印刷する" onclick="window.print();" />
	<div id="content1">
		<p>サッカーW杯ロシア大会には、総額約120億ドル(約1兆6000億円)の選手たちが集結する。3人のトップ選手、ネイマール、メッシ、C・ロナウドの価値は、ランキング下位のチームの市場価値を上回った。</p>
	</div>
</body>
</html>

印刷ボタンを押すと、、

なるほど

document.referrer

document.referrerでどう入るか?
hpscript.comにipのディレクトリを作って、aタグを設置する。

js

a.push(['acquisition',document.referrer]);

document.referrerだと、プロトコルから入る。

リファラーを定義

<script>
Object.defineProperty(document,"referrer",
{value:"https://www.google.com/"});
console.log(document.referrer);
</script>
<a href="http://192.168.33.10:8000/wwwroot/view.php">リンク</a>

例えば、google, yahooで「機械学習」と検索すると、検索結果のURLは以下のようになる。

https://www.google.co.jp/search?q=%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92&oq=%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92&aqs=chrome..69i57j69i61l3j0l2.3764j0j7&sourceid=chrome&ie=UTF-8

https://search.yahoo.co.jp/search;_ylt=A2RA0Dp_2OVaYhIAmnaJBtF7?p=%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92&search.x=1&fr=top_ga1_sa&tid=top_ga1_sa&ei=UTF-8&aq=-1&oq=%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92&at=&aa=&ai=s2uf6ZtEQS6rZIfyd2LYHA&ts=4050

マルチドメインの場合は
-https://wwww.hoge
-https://hoge
-http://www.hoge
-http://hoge

その他検討事項
-メールの場合
-直リンク
-サブドメインがある場合

ユーザーのosを取得する

<script src="platformjs/platform.js"></script>
<script type="text/javascript">
    document.write(platform.name + "<br>");
    document.write(platform.version + "<br>");
    document.write(platform.os + "<br>");
</script>

うーん、gaだと、windowsまでだが、osのバージョンまで出てしまう。。。

consoleでみると、jsonのfamilyで入っているので、

<script src="platformjs/platform.js"></script>
<script type="text/javascript">
    // document.write(platform.name + "<br>");
    // document.write(platform.version + "<br>");
    document.write(platform.os['family'] + "<br>");
</script>

芸が細かいな。。

$.getScript("../platformjs/platform.js", function(){
  a.push(['browser',platform.name]);
  a.push(['os',platform.os['family']]);
});

ほい!

最後は謎の”service provider”
geoip_isp_by_nameは動かない。。

プロバイダ:インターネットへの接続サービスを提供する事業者。
->ゲートウェイ?

どうやらgethostbyaddr($ip);っぽいですな。

jqueryでjsの中でplatform.jsを読み込む

na.jsはjqueryを読み込んでいるので、GETリクエストでplatform.jsを読み込みコールバック関数で実行

$.getScript("../platformjs/platform.js", function(){
  a.push(['browser',platform.name]);
});

chromeを取得できてますね。

ieだと、ブラウザ情報がIEになってます。

mongoDBにも、”browser” : “IE”で入ってます! OKOK!

{ "_id" : ObjectId("5ae48224e13823435337fd94"), "date" : "2018-04-28 23:16:04", "ip" : "192.168.33.1", "cookie" : "y28mw6ppl3", "visit" : "New User", "referrer" : "", "session" : "y28mw6ppl3", "page" : "/wwwroot/view.php", "browser" : "IE", "continent" : "Asia", "contry" : "Japan", "city" : "Komagatani" }

そのままの勢いでviewも作ります。
良し!Nice!

次はOS

platform.jsでbrowser情報を取得する

platform.js
https://github.com/bestiejs/platform.js

作った方
John-David Dalton
JavaScript tinkerer, bug fixer, & benchmark runner • Creator of Lodash • Former Chakra Perf PM • Current Web Platform DX PM @Microsoft

出たー、@Microsoft!
またかよ、このパターン。。。

それはさておき、git cloneします。

[vagrant@localhost cookie]$ git clone https://github.com/bestiejs/platform.js.git
Cloning into 'platform.js'...
remote: Counting objects: 2138, done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 2138 (delta 2), reused 1 (delta 1), pack-reused 2135
Receiving objects: 100% (2138/2138), 3.69 MiB | 880.00 KiB/s, done.
Resolving deltas: 100% (1276/1276), done.
Checking connectivity... done.

入りました。

早速使ってみます。

<script src="platformjs/platform.js"></script>
<script type="text/javascript">
    document.write(platform.name + "<br>");
    document.write(platform.version + "<br>");
</script>

これこれ、求めてたの!

IEで見てみると、

素晴らしい!

ついでに、platform.jsの中身もざっと見てみます。このへんで、labelingしてます。

/* Detectable browser names (order is important). */
    var name = getName([
      'Adobe AIR',
      'Arora',
      'Avant Browser',
      'Breach',
      'Camino',
      'Electron',
      'Epiphany',
      'Fennec',
      'Flock',
      'Galeon',
      'GreenBrowser',
      'iCab',
      'Iceweasel',
      'K-Meleon',
      'Konqueror',
      'Lunascape',
      'Maxthon',
      { 'label': 'Microsoft Edge', 'pattern': 'Edge' },
      'Midori',
      'Nook Browser',
      'PaleMoon',
      'PhantomJS',
      'Raven',
      'Rekonq',
      'RockMelt',
      { 'label': 'Samsung Internet', 'pattern': 'SamsungBrowser' },
      'SeaMonkey',
      { 'label': 'Silk', 'pattern': '(?:Cloud9|Silk-Accelerated)' },
      'Sleipnir',
      'SlimBrowser',
      { 'label': 'SRWare Iron', 'pattern': 'Iron' },
      'Sunrise',
      'Swiftfox',
      'Waterfox',
      'WebPositive',
      'Opera Mini',
      { 'label': 'Opera Mini', 'pattern': 'OPiOS' },
      'Opera',
      { 'label': 'Opera', 'pattern': 'OPR' },
      'Chrome',
      { 'label': 'Chrome Mobile', 'pattern': '(?:CriOS|CrMo)' },
      { 'label': 'Firefox', 'pattern': '(?:Firefox|Minefield)' },
      { 'label': 'Firefox for iOS', 'pattern': 'FxiOS' },
      { 'label': 'IE', 'pattern': 'IEMobile' },
      { 'label': 'IE', 'pattern': 'MSIE' },
      'Safari'
    ]);

line79-81に以下のように書かれています。
// Platform tokens are defined at:
// http://msdn.microsoft.com/en-us/library/ms537503(VS.85).aspx
// http://web.archive.org/web/20081122053950/http://msdn.microsoft.com/en-us/library/ms537503(VS.85).aspx

これまた凄いな、ホントに。
http://msdn.microsoft.com/en-us/library/ms537503(VS.85).aspx

jsでbrowser情報を取得する

<script type="text/javascript">
    document.write(navigator.appCodeName + "<br>");
    document.write(navigator.appName + "<br>");
    document.write(navigator.appVersion + "<br>");
    document.write(navigator.platform + "<br>");
    document.write(navigator.userAgent + "<br>");
</script>

chromeで見てるから、chromeと出力させたいんだが、何故mozilla、Netscapeなんだ????
仕組みが分からん。