ACTでEorzeaClockを導入する方法

2020 4/30

2020.03.16 2020.04.30

EorzeaClockの導入方法をまとめました。

EorzeaClockとは？

Aromatibusさんが作られたデザインです。
ACTのオーバーレイを通じてゲーム画面上に秒単位で時間を表示してくれます。

GitHub

Aromatibus/EorzeaClockContribute to Aromatibus/EorzeaClock development by creating an account on GitHub.

GitHubで弊サイトをご紹介して頂きました、有難うございます。

EorzeaClockの導入方法

STEP

ACTの「OverlayPlugin.dll」タブで「追加」から「Preset」をCustom、「種類」をMiniParseで任意の名前を付けて保存します。

STEP

「オーバーレイを表示する」と「オーバーレイを有効にする」に✓、
「表示するURL」に　https://aromatibus.github.io/EorzeaClock/
「オーバーレイの表示をリロード」を押します。

STEP

左上に出てくると思います。
ドラッグで任意の所に動かせて、ダブルクリックでサイズを15段階変えられます。

最大値になったら音が鳴ってお知らせしてくれて、とても親切です。

シングルクリックで下記のように色や形式を変えられます。

導入は以上です。

EorzeaClockの設定方法（フォントの変え方）

フォントを変えたい場合は、index.htmlの中身を変更します。

STEP

EorzeaClockのファイルをDLして解凍後、任意の所に設置します。

STEP

index.htmlファイルをメモ帳などで開いてfont-familyプロパティの指定を変更すればOKです。

今回は下記のようにフォントを変えてみました。

		font-family: "Roboto";

どんなフォントが指定できてどんな見た目になるかはこちらのサイトが参考になるかもしれません。

EorzeaClockの設定方法（表示順の変え方）

表示順を変えたい場合は、index.htmlの中身を変更します。
例えばゲーム内と同じET→LT→STとなるようにします。

変更後

STEP

EorzeaClockのファイルをDLして解凍後、任意の所に設置します。

STEP

index.htmlファイルをメモ帳などで開いてDisplay Format以下を変更します。

修正前です。フォーマットを崩さずET/LT/ST単位で順番を変えます。


// Display Format
//		console.log("Flag S" + DispSize + " : F" + DispForm + " : C" + DispColor);
		clock.style.fontSize = DispSize + "px";
		setColor(DispColor);
		switch (DispForm) {
			case 1:
				clock.innerHTML = "LT " + localHours + ":" + localMinute + ":" + localSeconds + " / ET " + eorzeaHours + ":" + eorzeaMinute + ":" + eorzeaSeconds;
				break;
			case 2:
				clock.innerHTML = "ST " + utcHours + ":" + utcMinute + ":" + utcSeconds + " / ET " + eorzeaHours + ":" + eorzeaMinute + ":" + eorzeaSeconds;
				break;
			case 3:
				clock.innerHTML = "LT " + localHours + ":" + localMinute + ":" + localSeconds + " / ST " + utcHours + ":" + utcMinute + ":" + utcSeconds + " / ET " + eorzeaHours + ":" + eorzeaMinute + ":" + eorzeaSeconds;
				break;
			case 4:
				clock.innerHTML = "LT " + localYear + "/" + localMonth + "/" + localDay + " (" + localWeek + ") " + localHours + ":" + localMinute + ":" + localSeconds + " / ET " + eorzeaHours + ":" + eorzeaMinute + ":" + eorzeaSeconds;
				break;
			default:
				DispForm = 1;
				localStorage.setItem("DispForm", DispForm);
				break;
		}
	}

修正後です。以下のものをコピペしても問題無いと思います。

// Display Format
//		console.log("Flag S" + DispSize + " : F" + DispForm + " : C" + DispColor);
		clock.style.fontSize = DispSize + "px";
		setColor(DispColor);
		switch (DispForm) {
			case 1:
				clock.innerHTML = "ET " + eorzeaHours + ":" + eorzeaMinute + ":" + eorzeaSeconds + " / LT " + localHours + ":" + localMinute + ":" + localSeconds;
				break;
			case 2:
				clock.innerHTML = "ET " + eorzeaHours + ":" + eorzeaMinute + ":" + eorzeaSeconds + " / ST " + utcHours + ":" + utcMinute + ":" + utcSeconds;
				break;
			case 3:
				clock.innerHTML = "ET " + eorzeaHours + ":" + eorzeaMinute + ":" + eorzeaSeconds + " / LT " + localHours + ":" + localMinute + ":" + localSeconds + " / ST " + utcHours + ":" + utcMinute + ":" + utcSeconds;
				break;
			case 4:
				clock.innerHTML = "ET " + eorzeaHours + ":" + eorzeaMinute + ":" + eorzeaSeconds + " / LT " + localYear + "/" + localMonth + "/" + localDay + " (" + localWeek + ") " + localHours + ":" + localMinute + ":" + localSeconds;
				break;
			default:
				DispForm = 1;
				localStorage.setItem("DispForm", DispForm);
				break;
		}
	}

内容はこんな感じです。