故宮博物院をランダムに見るJavaScript

＜style＞body{position:absolute;right:0;white-space:nowrap;margin:0;overflow:hidden;background:black}.tile{display:inline-block;background-repeat:no-repeat}＜/style＞＜body＞＜/body＞＜script＞let last=location.hash?location.hash.slice(1).split(',').map(Number):null,xmlUrls=[],isMoving=false,isLoading=false;const works=[199,201,202,203,204,210,211,212,213,214,215,216,217,218,219,229,230,231,232,233,234,235,236,237,244,246,263,264,265,266,277,279,280,281,291,296,303,304,305,306,307,308,309,310,311,312,313,325,327,328,329,331,333,337,339,340,341,358,374,375,387,388,389,391,395,396,404,409,410,411,481,482,484,523,524,525,526,670,673,681,682,684,876,891,892,893,894,895,896,897,898,906,912,917,918,919,953,954,960,961,970,971,972,5,6,7,8,21,22,23,24,25,30,31,32,33,41,42,43,64,65,73,74,75,76,83,84,85,86,95,96,309,310,311,312,313,383,384,385,386,389,390,400,401,402,403,404,405,471,472,473,474,475,547,590,591,593,594,599,600,612,614,615,618,619,620,824,832,833,843,844,852,853,881,917,117,250,251,252,253,254,255,256,325,326,327,328,446,447,479,481,482,536,537,546,547,548,556,557,600,608,609,614,626,627,628,641,642,646,666,667,727,728,729,984,985,6,7,8,45,62,92,93,95,115,116,119,120,126,136,137,138,144,145,187,188,198,200,207,225,226,231,232,234,235,236,237,238,242,243,244,247,253,255,256,257,258,261,262,263,264,266,267,277,283,285,286,287,288,292,293,295,298,299,300,301,312,314,317,320,324,392,394,395,396,408,416,423,424,426,427,429,431,452,453,454,455,456,457,460,461,463,464,470,479,507,508,510,512,515,517,524,532,534,535,539,771,777,779,785,788,789,790,791,798,799,800,809,908,909,911,912,913,914,917,918,919,970,971,94,95,96,99,132,133,134,135,365,366,367,368,369,370,400,401,402,403,404,405,406,407,831,833,834,835,848,849,851,852,853,854,855,856,945,955,199,201,494,495,496,528,529,530,534,535,536,537,573,574,575,576,577,578,152,153,154,155,270,553,554,562,567,573,574,575,829,834,852],rows=[],body=document.body,bodyPos={"right":0,"top":0},mousePos={"right":0,"top":0},tPos={"work":last?last[0]:0,"page":last?last[1]:0,"right":last?last[2]:0,"top":last?last[3]:0},tSize={"right":256,"top":256},blobUrls={},getImg=imgUrl=＞{blobUrls[imgUrl]='?';fetch(imgUrl).then(r=＞{if(!r.ok)throw new Error;return r.blob()}).then(data=＞{blobUrls[imgUrl]=URL.createObjectURL(data);printTiles()}).catch(()=＞setTimeout(getImg,2000,imgUrl))},printTiles=()=＞{let html='';const hRow=rows[tPos.right+1],xNum=tPos.right+Math.ceil(body.clientWidth/256)+1,yNum=tPos.top+Math.ceil(body.clientHeight/256)+1;for(let j=tPos.top;j＜=yNum;j++){const height=hRow?j%hRow.y?(j+1)%hRow.y?hRow.tSize:hRow.endHeight:hRow.tSize-1:256;for(let i=xNum;i＞=tPos.right;i--)if(rows[i]){const imgUrl=rows[i].url+j%rows[i].y+rows[i].ext;if(!blobUrls[imgUrl])getImg(imgUrl);html+='＜div class="tile" style="width:'+rows[i].width+'px;height:'+height+'px;background-image:url(\''+blobUrls[imgUrl]+'\')"＞＜/div＞';if(i==tPos.right&&j==tPos.top){tSize.right=rows[i].width;tSize.top=height;location.hash=rows[i].index+j%rows[i].y}}else if(!isLoading){isLoading=true;xmlUrls[0]?getRows():getXmlUrls()}html+='＜br＞'}body.innerHTML=html},getXmlUrls=()=＞{if(last)last=null;else{tPos.work=Math.random()*works.length|0;tPos.page=0}fetch('https://www.dpm.org.cn/collection/handwriting/2'+(tPos.work＜175?2:3)+(tPos.work＜103?8:tPos.work＜175?9:tPos.work＜216?0:tPos.work＜339?1:tPos.work＜375?2:tPos.work＜392?3:4)+('00'+works[tPos.work]).slice(-3)+'.html').then(r=＞r.text()).then(data=＞{let urls=[...data.matchAll(/custom_tilegenerator="(.*?)"/g)].map(e=＞e[1].replace('http:','https:').replace('/dyx.html?path=',''));if([19,22,39,44,161,163,202,206,207,222,239,244,257].includes(tPos.work)){const sortedUrls=[];for(let i=0;i＜urls.length-1;i++)sortedUrls[3-i%4+(i/4|0)*4]=urls[i+1];urls=sortedUrls}urls=[...new Set(urls)].filter(e=＞e);if([16,147].includes(tPos.work))urls.sort();if([383].includes(tPos.work))[urls[0],urls[1]]=[urls[1],urls[0]];xmlUrls=xmlUrls.concat(urls.slice(tPos.page));getRows()})},getRows=()=＞{const url=xmlUrls.shift();fetch(url).then(r=＞r.text()).then(data=＞{const a=data.split('"'),width=a[47]?a[47]:a[15],height=a[47]?a[45]:a[17],tSize=a[47]?510:256,x=Math.ceil(width/tSize)-1;for(let i=x;i＞=0;i--)rows.push({"index":tPos.work+","+tPos.page+","+(x-i)+",","url":(a[47]?a[37]:url.replace('.xml','_files/'))+Math.ceil(Math.log(Math.max(width,height))/Math.LN2)+"/"+i+"_","ext":a[47]?'.png':'.jpg',"tSize":tSize,"y":Math.ceil(height/tSize),"width":i?x-i?tSize:(width-1)%tSize+3:tSize-1,"endHeight":(height-1)%tSize+3});tPos.page++;isLoading=false;printTiles()})};onmousedown=e=＞isMoving=isMoving?false:true;onmousemove=e=＞{mousePos.right=(e.clientX-body.clientWidth/2)/30;mousePos.top=(body.clientHeight/2-e.clientY)/30};onresize=printTiles;setInterval(()=＞{if(isMoving)for(const i in bodyPos){bodyPos[i]+=mousePos[i];if(bodyPos[i]＞0&&tPos[i]){tPos[i]--;printTiles();bodyPos[i]-=tSize[i]}else if(bodyPos[i]＜-tSize[i]){tPos[i]++;bodyPos[i]+=tSize[i];printTiles()}body.style[i]=Math.round(bodyPos[i])}},1000/60);printTiles()＜/script＞