Movable Typeのコンテンツタイプのデータ管理画面に「公開日を現在日時に変更する」ボタンを設置する【MTAppjQuery】

コード

コードはこちらです。

if (mtappVars.screen_id == 'edit-content-type-data' && mtappVars.type == 'content_data') {

	document.addEventListener("DOMContentLoaded", function() {
		// 関数を定義
		function set_current_time() {
			const now = new Date();
			const date = now.toISOString().split('T')[0]; // YYYY-MM-DD形式
			const time = now.toTimeString().split(' ')[0]; // HH:MM:SS形式

			// フォームの値を設定
			const dateField = document.getElementById("created-on");
			const timeField = document.getElementById("created-on-time");

			if (dateField) {
				dateField.value = date;
			}
			if (timeField) {
				timeField.value = time;
			}
		}

		// 新しいリンク要素を作成
		const newLink = document.createElement("a");
		newLink.href = "#";
		newLink.onclick = function() {
			set_current_time();
			return false;
		};
		newLink.title = "現在時刻をセット";
		newLink.className = "btn btn-default btn-sm mt-3 ml-6";
		newLink.textContent = "現在時刻をセット";

		// `id="authored_on-field"` の `div` を取得し、リンクを追加
		const div = document.getElementById("authored_on-field");
		if (div) {
			div.appendChild(newLink);
		}
	});

}	

このコードはMicrosoft Copilotで作成したので、ほとんど自分が作成していません（汗）。プロンプトは以下のとおり。

JavaScriptにてdivでid="authored_on-field" の中で最後に <a href="#" onclick="set_current_time(); return false;" title="現在時刻をセット" class="btn btn-default btn-sm mt-3 ml-6">現在時刻をセット</a> を追加したい。
リンクを押したら、 id="created-on"のformのvalueにYYYY-MM-DDの形で年月日を、id="created-on-time"のformのvalueにHH:MM:SSの形で時分秒をセットするようにしてください。スクリプトを作成してください。

ボタンのclassとかは画面に合うように設定しました。そこら辺は人間の出番ですね。

できあがった様子はこちら。

スクリプトをしばらく見てて「イマドキだとaタグで作るのはNGなのは？ buttonタグで作るべきかな」と思ってMicrosoft Copilotに「aタグではなくbuttonタグに変更してください」と依頼しました。

書き換えてもらったスクリプトがこちら。

if (mtappVars.screen_id == 'edit-content-type-data' && mtappVars.type == 'content_data') {
	document.addEventListener("DOMContentLoaded", function() {
		// 関数を定義
		function set_current_time() {
			const now = new Date();
			const date = now.toISOString().split('T')[0]; // YYYY-MM-DD形式
			const time = now.toTimeString().split(' ')[0]; // HH:MM:SS形式

			// フォームの値を設定
			const dateField = document.getElementById("created-on");
			const timeField = document.getElementById("created-on-time");

			if (dateField) {
				dateField.value = date;
			}
			if (timeField) {
				timeField.value = time;
			}
		}

		// 新しいボタン要素を作成
		const newButton = document.createElement("button");
		newButton.type = "button";
		newButton.onclick = function() {
			set_current_time();
			return false;
		};
		newButton.title = "現在時刻をセット";
		newButton.className = "btn btn-default btn-sm mt-3 ml-6";
		newButton.textContent = "現在時刻をセット";

		// `id="authored_on-field"` の `div` を取得し、ボタンを追加
		const div = document.getElementById("authored_on-field");
		if (div) {
			div.appendChild(newButton);
		}
	});
}	

これで完成です。見た目は同じです。

「if (mtappVars.screen_id == 'edit-content-type-data' && mtappVars.type == 'content_data') 」でコンテンツデータ限定にしていますが、記事やページでも使いたかったら、この部分を書き換えると良いと思います。

それでは、よいMovable Typeライフを。