au Ponta ポータルの絞り込みブックマークレット

au Ponta ポータルのポイント履歴を絞り込みするブックマークレットを作ってみました。
PCのSafariとChromeで確認しました。
[https://www.point-portal.auone.jp/point/history](https://www.point-portal.auone.jp/point/history)

## 実行画面
![スクリーンショット 2023-08-06 14.49.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52320/1a8c15d6-a32a-94fe-7890-6736c513787f.png)
![スクリーンショット 2023-08-06 14.49.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52320/fe7122dc-2c09-7df3-f59b-d20cedbcd42d.png)

## ブックマークレット
```javascript:絞り込み機能追加ブックマークレット
javascript: (function() {
	function setDetailList() {
		var pBlocks = document.getElementsByClassName("block");
		for (i = 0; i < pBlocks.length; i++) {
			var eDetails = pBlocks.item(i).getElementsByClassName("list-detail");
			if (0 < eDetails.length) {
				var detail = eDetails.item(0).innerText
					.replace(/(（[^（）]*)（[^（）]*）/g,"$1").replace(/（[^）]*）/g," ");
				if (detailList.value == "1") {
					pBlocks.item(i).hidden = !detail.startsWith("Ｐｏｎｔａ");
				} else if (detailList.value == "2") {
					pBlocks.item(i).hidden = detail.startsWith("Ｐｏｎｔａ");
				} else {
					pBlocks.item(i).hidden = !(detailList.value == "" || detailList.value == detail);
				}
			}
		}
	}
	
	function appendOption(text, value) {
		var eOption = document.createElement("option");
		eOption.text = text;
		eOption.value = value ?? "";
		detailList.appendChild(eOption);
	}
	
	function updateSelect() {
		detailList.onchange = setDetailList;
		detailList.innerHTML = "";
		appendOption("");
		
		var details = new Map();
		var detailsAu = new Map();
		var details2 = new Map();
		var pBlocks = document.getElementsByClassName("block");
		var pointPt = 0, pointAu = 0, point2 = 0;
		for (i = 0; i < pBlocks.length; i++) {
			var pDetails = pBlocks.item(i).getElementsByClassName("list-detail");
			var ePoints = pBlocks.item(i).getElementsByClassName("font-point-black tracking-wider");
			if (0 < pDetails.length && 0 < ePoints.length) {
				var detail = pDetails.item(0).innerText
					.replace(/(（[^（）]*)（[^（）]*）/g,"$1").replace(/（[^）]*）/g," ");
				var pont = Number(ePoints.item(0).innerText.trim().replace(/[P,]/g,""));
				if (0 <= pDetails.item(0).className.indexOf("detail1")) {
					if (detail.startsWith("Ｐｏｎｔａ")) {
						details.set(detail, (details.get(detail) ?? 0) + pont);
						if (0 < pont) {
							pointPt += pont;
						}
					} else {			
						detailsAu.set(detail, (detailsAu.get(detail) ?? 0) + pont);
						if (0 < pont) {
							pointAu += pont;
						}
					}
				} else if (0 <= pDetails.item(0).className.indexOf("detail2")) {
					details2.set(detail, (details2.get(detail) ?? 0) + pont);
					if (0 < pont) {
						point2 += pont;
					}
				}
			}
		}
		appendOption("-----Ponta(+" + pointPt + "P)", "1");
		details.forEach(function(value, key){
			appendOption(key + "(" + value + "P)", key);
		});
		appendOption("-----Ponta(au)(+" + pointAu + "P)", "2");
		detailsAu.forEach(function(value, key){
			appendOption(key + "(" + value + "P)", key);
		});
		appendOption("-----マーケット限定(+" + point2 + "P)");
		details2.forEach(function(value, key){
			appendOption(key + "(" + value + "P)", key);
		});
	}
	
	if (!document.getElementById("detailList")) {
		var eSelect = document.createElement('select');
		eSelect.id = "detailList";
		var eTabs = document.getElementsByClassName("tab-list");
		eTabs.item(0).after(eSelect);
	}
	if (!document.getElementById("updateBtn")) {
		var eButton = document.createElement('button');
		eButton.id = "updateBtn";
		eButton.innerHTML = "更新";
		detailList.after(eButton);
	}
	updateBtn.onclick = updateSelect;
	updateSelect();
})();
```

#### エンコードしたブックマークレット
`
javascript:(function(){function%20setDetailList(){var%20pBlocks=document.getElementsByClassName("block");for(i=0;i<pBlocks.length;i++){var%20eDetails=pBlocks.item(i).getElementsByClassName("list-detail");if(0<eDetails.length){var%20detail=eDetails.item(0).innerText.replace(/(（[^（）]*)（[^（）]*）/g,"$1").replace(/（[^）]*）/g,"");if(detailList.value=="1"){pBlocks.item(i).hidden=!detail.startsWith("Ｐｏｎｔａ");}else%20if(detailList.value=="2"){pBlocks.item(i).hidden=detail.startsWith("Ｐｏｎｔａ");}else{pBlocks.item(i).hidden=!(detailList.value==""||detailList.value==detail);}}}}function%20appendOption(text,value){var%20eOption=document.createElement("option");eOption.text=text;eOption.value=value??"";detailList.appendChild(eOption);}function%20updateSelect(){detailList.onchange=setDetailList;detailList.innerHTML="";appendOption("");var%20details=new%20Map();var%20detailsAu=new%20Map();var%20details2=new%20Map();var%20pBlocks=document.getElementsByClassName("block");var%20pointPt=0,pointAu=0,point2=0;for(i=0;i<pBlocks.length;i++){var%20pDetails=pBlocks.item(i).getElementsByClassName("list-detail");var%20ePoints=pBlocks.item(i).getElementsByClassName("font-point-black%20tracking-wider");if(0<pDetails.length&&0<ePoints.length){var%20detail=pDetails.item(0).innerText.replace(/(（[^（）]*)（[^（）]*）/g,"$1").replace(/（[^）]*）/g,"");var%20pont=Number(ePoints.item(0).innerText.trim().replace(/[P,]/g,""));if(0<=pDetails.item(0).className.indexOf("detail1")){if(detail.startsWith("Ｐｏｎｔａ")){details.set(detail,(details.get(detail)??0)+pont);if(0<pont){pointPt+=pont;}}else{%20%20%20detailsAu.set(detail,(detailsAu.get(detail)??0)+pont);if(0<pont){pointAu+=pont;}}}else%20if(0<=pDetails.item(0).className.indexOf("detail2")){details2.set(detail,(details2.get(detail)??0)+pont);if(0<pont){point2+=pont;}}}}appendOption("-----Ponta(+"+pointPt+"P)","1");details.forEach(function(value,key){appendOption(key+"("+value+"P)",key);});appendOption("-----Ponta(au)(+"+pointAu+"P)","2");detailsAu.forEach(function(value,key){appendOption(key+"("+value+"P)",key);});appendOption("-----マーケット限定(+"+point2+"P)");details2.forEach(function(value,key){appendOption(key+"("+value+"P)",key);});}if(!document.getElementById("detailList")){var%20eSelect=document.createElement('select');eSelect.id="detailList";var%20eTabs=document.getElementsByClassName("tab-list");eTabs.item(0).after(eSelect);}if(!document.getElementById("updateBtn")){var%20eButton=document.createElement('button');eButton.id="updateBtn";eButton.innerHTML="更新";detailList.after(eButton);}updateBtn.onclick=updateSelect;updateSelect();})();
`

## 使い方

**1)ブックマークレットをブックマークに追加します**

**2)1のブックマークを開きます**
絞り込みリストボックスが追加されます

**3)絞り込みたいリスト項目を選択します**
選択した項目以外が非表示になります

**4)月を変更した場合は更新ボタンでリストを更新しますリ**