純規の暇人趣味ブログ

首を突っ込んで足を洗う

AjaxでMojangサーバの状態を取得する

      2016/02/20    HimaJyun

少し前に、「PHPでMojangサーバの状態を取得する」と言う記事を投稿した気がします。
ですが、この記事で紹介しているPHPスクリプト、もちろん、キャッシュが古いと無意味です。

そして、哀しい事に、僕のマイクラ鯖にはアクセスが殆どなく
誰かのアクセスがあった際には既にキャッシュが古いので、なおさら無意味です。

なので、今回はAjax(jQuery)を使って、非同期で実装してみました。
もちろん、非同期なのでページの表示速度に影響しません。

Ajaxでjsonの処理

その前に、今回ご紹介するJavaScriptはjQueryを使用します。
きょうび、様々なサイトで利用されて居るので気にしなくても良いとは思いますが、
jQueryを使わない硬派なサイトでは使えないのでご注意を、

「jQuery?ナニソレ?」な、あなた、おめでとうございます!!
今日、この記事を読んだ事で、あなたは「jQuery(ジェイクエリー)」と言う、
魔理沙のマスタースパーク並に強力な魔法を手に入れる事が可能です。

jQueryをご存知のみなさんはぜひ、このクソネタをスキップして下さい。
(少し長いので(- -;

ささ、迷う必要はありませんよ、HTMLの<head>~</head>の中に以下の1行をINしちゃってください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

え?スキームが欠けてんぞ?
あなたはこんなにも便利な事を知らないのですか!?

これは「Protocol-relative URL
日本語に直訳すると「プロトコル相対URL」、ですが、「ネットワークパス参照」と言うらしいです。(最近知った)
こうしておくと、ご自身のサイトのプロトコルに合わせて外部に要求を送ります。

つまり、自身のサイトが「http://」だと、「http://example.com/」
自身のサイトが「https://」だと、「https://example.com/」に要求を送ります。
こうしておくと、httpサイトをhttpsに移行する際にソースの変更が不要になりますよ

ちなみに、IE8ちゃんと、妹のIE7ちゃんはドジっ娘なので、この方法だと2回読み込まれるバグがある模様ですが
第一にjQuery2.x系はIE8以下に対応してないので関係ありませんね?

と、言うか、IE8までしか使えないのは、サポート切れのXP以前のOSなので無視して良いでしょう。
VistaはIE9にアプデ出来ます、サポ切れOSを使うのが悪いのです。

え?あなたのサイトは未だにIE8のサポートを行っているのですか!?
その場合はこちらをどうぞ!!(当然ながら、http://かhttps://はご自身のサイトに合わせて下さいね。)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

さて、jQueryは前提条件なのでしっかり説明……してしまったら長くなってしまいました。

Mojangサーバの状態を取得

例によって、
http://status.mojang.com/check
から、ステータス情報の含まれたjsonを取得します。

毎回説明するのもどうかと思いますが、
中身は以下の様になっており、サーバの状態は色で表されています。

[{"minecraft.net":"green"},{"session.minecraft.net":"green"},
{"account.mojang.com":"green"},{"auth.mojang.com":"green"},
{"skins.minecraft.net":"green"},{"authserver.mojang.com":"green"},
{"sessionserver.mojang.com":"green"},{"api.mojang.com":"green"},
{"textures.minecraft.net":"green"}]

正常であれば「green
一応稼働していれば「yellow
完全にあぼんであれば「red

これを、Ajaxを用いて取得し、JavaScriptで振り分けて、HTMLに内容を入れていくのです。
ごちゃごちゃと説明するのもあれですので、以下がそのコードです。

<script>
<!--
var key,leng;
var i = 0;

$.ajax({
	type: 'GET',
	url: 'http://status.mojang.com/check',
	dataType: 'json',
	cache: false,
})
.done(function( data ) {

for (leng = data.length; i < data.length; i ++) {
	for (key in data[i]){
		switch (data[i][key]){
			case 'green':
				//サーバが正常稼働していた際の処理
				break;
			case 'red':
				//サーバがダウンしていた際の処理
				break;
			case 'yellow':
				//サーバが一応稼働していた場合の処理
				break;
			default:
				//それ以外
				break;
		}
	}
}

})
.fail(function( data ) {
	//jsonを取得出来なかった場合の処理
});
// -->
</script>

実に簡単ですね、万人を問わず、説明は不要でしょう。
このコードに、ご自身の好きな処理を組み込んでWebサイトに掲載して下さい。
JavaScriptの読み込みは</body>の直前が良いかと思われます。

もし、前回の様にテーブルにしたい場合は以下をご覧あれ

テーブルにして使う

これがその、テーブルにするコードです。
テーブル操作に予想以上に手こずりましたよ

<script>
<!--
var key,leng;
var i = 0;
var table = document.getElementById("mjst");
function in_the_table(server,str){
	var rows = table.insertRow(-1);
	var th = document.createElement( 'th' );
	th.innerHTML = server;
	rows.appendChild( th );
	var td = rows.insertCell(-1);
	td.innerHTML = str;
}

$.ajax({
	type: 'GET',
	url: 'http://status.mojang.com/check',
	dataType: 'json',
	cache: false,
})
.done(function( data ) {

for (leng = data.length; i < data.length; i ++) {
	for (key in data[i]){
		switch (data[i][key]){
			case 'green':
				in_the_table(key,'<span style="color:#009900">正常</span>');
				break;
			case 'red':
				in_the_table(key,'<span style="color:red">ダウン中</span>');
				break;
			case 'yellow':
				in_the_table(key,'<span style="color:#ff9900">稼働中</span>');
				break;
			default:
				in_the_table(key,'<span style="color:red">不明</span>');
				break;
		}
	}
}

})
.fail(function( data ) {
	in_the_table('<span style="color:red">エラー</span>','ステータスが取得出来ません。');
});
// -->
</script>

このコードを</body>の直前で読み込んでください。

そして、あなたのWebサイト上でMojangのステータスを表示させたい部分に

<table border=1 id="mjst"></table>

を追加して下さい。

これで、あなたのWebサイト上に素敵な素敵なMojangのサーバ情報が表示されますよ!!
前回の悲惨なPHPコードよりベジットの戦闘力分くらいマシです。

こっちの方が読み込みも早いし、鯖にも余計なデータを入れなくて良いし
無駄な負荷も掛かりません!!

みなさんのマイクラ鯖の紹介ページをより素敵にしたいのであれば、ぜひご活用ください。

 - Web制作 ,