Zenn
🛠️

HTML+JSで作る1kb以下の変態program

2025/03/07に公開
HTML
JavaScript
圧縮
tech

実用的なものから便利な役立たたず、不便利で役立つもの等紹介。制御文字含んでいるもの多数あり、という訳で正常に表示されない場合はbase64の文字列を復号してお使い下さい。

gzipとか

367 bytes
<svg onload='for(a=`reonfileecchktaminput id=	new opti<>deflateselt< type=(Blob([a])ompssiS.arrayBuffer().then(a=><	s>-raw<>gzip</>box	d>dode ="s[0]Respse.s().pipeThrough((d.ed?D:C)(s.s[s.edIndex].text)))e.hf=self.URL.cateObjtURL)))"><a	e download>`;t=/[-]/.exec(a);)with(a.split(t))a=join(shift());write(a)'>
base64
PHN2ZyBvbmxvYWQ9J2ZvcihhPWByZRJvbhFmaWxlEGVjD2NoD2sOdBJhbQxpbnB1dAsgaWQ9CW5ldyAIb3B0aREHPAc+ZGVmbGF0ZQZzZWwPdAU8CyB0eXBlPQQoCEJsb2IoW2FdKQNvbXASc3NpEVMMAi5hcnJheUJ1ZmZlcigpLnRoZW4oYT0+ATwFCXM+Bi1yYXcGPAc+Z3ppcDwvBT4EDmJveAlkPmQPb2RlBBAgEQs9IhBzWzBdAQhSZXNwEXNlAy5zDCgpLnBpcGVUaHJvdWdoKAgoZC4OZWQ/RA8COkMCKShzLgdzW3MuBWVkSW5kZXhdLnRleHQpKSkBZS5oEmY9c2VsZi5VUkwuYxJhdGVPYmoPdFVSTAMpKSkiPjxhCWUgZG93bmxvYWQ+CGA7dD0vWwEtEl0vLmV4ZWMoYSk7KXdpdGgoYS5zcGxpdCh0KSlhPWpvaW4oc2hpZnQoKSk7d3JpdGUoYSknPgo

これ何ぞ?

CompressionStreamとDecompressionStreamを利用したfile圧縮解凍装置。とても高速に動作します。

  • deflate-raw
    header無しのdeflate形式で圧縮
  • deflate
    deflate形式で圧縮
  • gzip
    gzip形式で圧縮
  • decode
    有効にすると解凍、無効にすると圧縮処理

PPM法 圧縮/解凍

853 bytes
<svg onload='for(T=`reZ--Y>>>XX0W.cVA)};NrrayMnew KfileJ=1Id=H++]G=0,F=vE;)dE[D=256,Ccheckinputif(; type=.s){LX24O[oG=U[cf,Hc=d.l=[],t+=fI+cVfor(=A=>{var }else{=65535A[aGm.innerText=.length	c of T)t=0;!]KUint8AM(l=f,r=t< iH]={s:b,c:0};ddE,v=d;L<<=8)R*Cg?B=B<<8|:;oj>kbox>decfJ on="Tg=k.ed,LFRI<<24*!g,aFbCh=g?:j.valueW,cI+h,,oFvTE,OUB,np,t,;pY;d)b=g||;Hc===b)-}f=T	;==R+||R<&&(R&-L)f=fX8||f,R=R/(t+f)Wgr=(B-LW)/RWr<t&&r<())bZak;b=c,t-=}!d)}L+=R*rd(dV+=2)X8)cVXIc=T=ETE;T!E;vE)GE[v	v?T:();Yc;)H];].lE}U=[]]I;T=T!T!g)O[0]=h;LZturn m.hZf=top.URLVZateObjectURL(KBlob([O)]))}}R*=l}setTimeout(n,a/A	,NbDYb;,cYD0n(NJs[0].aMBuffer().then(A=>T(A)))"><a iHm download>`;_=/[^ -BLO-U[-}]/.exec(T);)with(T.split(_))T=join(shift());write(T)'>
base64
PHN2ZyBvbmxvYWQ9J2ZvcihUPWByZVotLVk+Pj5YWDBXLmNWQSl9O05ycmF5TW5ldyBLZmlsZUo9MUlkPUgrK11HPTAsRj12RTspZEVbRD0yNTYsQ2NoZWNrH2lucHV0HmlmKB07HRwgdHlwZT0bLnMaKXsZTFgyNBhPW29HPRdVW2MWZixIYxU9ZC5sFD1bXSwTdCs9ZkkrY1YSZm9yKBE9QT0+exF2YXIgEH1lbHNlew89NjU1MzUOQVthRwxtLmlubmVyVGV4dD0LLmxlbmd0aAkRYyBvZiBUKQh0PTA7CB0hFhpdB0tVaW50OEFNKAZsPWYscj10BTweIGlIBF09e3M6YixjOjB9OwNkFBNkGkUsdj1kAjtMPDw9OClSKkNnP0I9Qjw8OHwMOhcYOwFvBGo+BGsbH2JveD5kZWMEZhtKIG9uHj0iVBBnPWsuH2VkLExGUkk8PDI0KiFnLGFGYkNoPWc/DDpqLnZhbHVlVyxjSStoLBUsb0Z2E1RFLE8TVRNCLG4QcA4sdCwFO3BZOxkdZCliPWd8fAw7SAcZEhxjGj09PWIpBS0VfRFmPVQJOxg9PVIrGHx8UjwOJiYoUg4mLUwpAWY9Zlg4fHxmLFI9Ui8odCtmKVccZxlyPShCLUxXKS9SVxxyPHQZByYmcjwoEikpYlphazsXYj1jGix0LT0VfQUPHSFkKQV9TCs9UipyHGQZHShkVis9MilYOCkIY1ZYSRxjPVQ9RRlURRQPETtUIUU7dkUaKRZHRVt2CQMRdhQ/VBQ6KAIpO1ljOwIpSBZdOxZdLmxFfVU9W10PCBYaXUk7VD1UGhwhVBkdIWcpEU9bMF09aDtMAVp0dXJuIAttLmhaZj10b3AuVVJMVlphdGVPYmplY3RVUkwoS0Jsb2IoWwZPKV0pKX19Uio9bH1zZXRUaW1lb3V0KG4sC2EvQQksTmJEWWIDETsCLGNZRDADbihOSnNbMF0uYU1CdWZmZXIoKS50aGVuKEE9PlQoBkEpKSkiPjxhIGlIbSBkb3dubG9hZD5gO189L1teIC1CTE8tVVstfV0vLmV4ZWMoVCk7KXdpdGgoVC5zcGxpdChfKSlUPWpvaW4oc2hpZnQoKSk7d3JpdGUoVCknPg

説明的解説

Prediction by partial matching、部分一致予測、などと呼ばれる手法でfileを圧縮します(かなり手抜き)。圧縮力は概ねgzipを凌ぎますが、動作速度は遥かに劣ります。文書系file(txt、js、cpp、css、html等)に真価を発揮。本家

  • o
    過去何文字分で予測するか指定。2～3程度が丁度良い(内部的にはその値+2)。巨大file相手には4以上もありか? 省略すると0。大きい程低速
  • dec
    有効にすると解凍処理、無効なら圧縮処理

LZMA decoder

989 bytes
<input type=file oninput='for(f=`rray
p+~br(Zk=Y-=X--W+=V||(T=1S<<QSQeP=0,NfoZM;M;K1)J1J,I++]Hf[G],F256E;d<E;)D1,C);f(ie=c,>a?,j=t16+Fa*d)),dc=l=o[pH==v,v=b,b=W;):Z3*Fa)?((u,aNc)=>Gu[a]else{new Uint8A
(	,n=nQ8|s[iHdVd+>>>return )MDl),h24ThQ=8={var d=FYc)?J?Z8,J26J+85IkV2,a=7files[0].a
BuffeZ).then(d.href=top.URL.createObjectURL(new Blob([		u)))]))f,d/9,fTS024d*(hIc>n0?(h=V2048-d5,0):(hXnXXd5,Jc},rCaKau+cd^P},s=u,t,v,q=d%9,l,n,mP/5,gP%5,p=dNANb,o=[Fh=gW*E,iSCYiKhGh]=[]Ki<18;A=A*E+s[kW]M;p<A;d=p&m-J1{Y0Fa))234j):t,t=v):ee):(Y!5&&(a=79:IkTG98:11G87:10,tZr,6,6>k?k-2Q6:192b>3){u=bCb,b=(2|b&JQWuS4>c)l=b-c;Ml=0;4<uh=Cn-h3CnXh&W-cbVdQ++uS}M;u>e;bVcQe++)=6]+lb<0)o}}M;ko[eH}l=G(l8-q|(p&g)Qq)]S;7>a;Mo[]DYe7&CeQ=C=l-E*~k),c^k}d-E;aX4a:103:6}o}`;_=/[^ -BLORU[-~]/.exec(f);)with(f.split(_))f=join(shift());eval(f)'><a id=d download>DL
base64
PGlucHV0IHR5cGU9ZmlsZSBvbmlucHV0PSdmb3IoZj1gcnJheQpwK35if3IoWms9WS09WC0tVys9Vnx8KFQ9MVM8PFFTUWVQPTAsTmZvWk07TTtLMSlKMUosSSsrXUhmW0ddLEYyNTZFO2Q8RTspRDEsQyk7H2YoHmkeHWU9HGMsGz5hPxosaj10GTE2KxhGYSoYZCkpFyxkFmM9FWw9b1twSD0UPXYsdj1iLGI9E1c7KRI6WhszFioYEUZhKT8oECh1LGFOYyk9Pg8eRw51W2FdDGVsc2V7C25ldyBVaW50OEEKKAksbj1uUTh8c1tpSB8IZFZkKwc+Pj4GcmV0dXJuIAUpTUQHHmwWKQQsaAYyNFRoUT04CAM9D3t2YXIgZD0CRlkeYyk/HhtKPxhaGzgsShEyNkorOBE1SWtWMixhPTcaAWZpbGVzWzBdLmEKQnVmZmVaKS50aGVuKA9kLmhyZWY9dG9wLlVSTC5jcmVhdGVPYmplY3RVUkwobmV3IEJsb2IoWwkeCXUpKSldKSkfZgIMLBxkLzksZgIMVAxTMDI0HxVkKihoBkkVYz5uBjA/KGg9GwxWMjA0OC1kBjUsMCk6KGhYG25YGwxYZAY1LEoDBWN9LHICQxxhS2ESBx51FitjHwVkXlB9LHM9dSx0LHYscT1kJTkZLGwsbixtUC81LGdQJTUscD1kTkFOYixvPVtGaD0YZ1cqRSxpU0NZaUtoEkdoXT1bXUtpPDE4O0E9QSpFK3Nba1ddCE07cDxBO2Q9cCZtLUodDjEXex0OHFkwRmEpKQ4yEA4zEA40EBxqGSk6HHQsdD12KTplE2UpOihZIQ41FyYmKGE9Nxo5OklrVBVHOQE4OjExHwsVRzgBNzoxMBksdBNaciw2LDY+az9rLTJRNjoxOTIfHWI+Myl7HXU9YgZDFWIsYj0oMnxiJkpRV3UWUzQ+YylsPRhiLWM7C01sPTA7NDx1EmgGPUMVbi1oBjNDblhoJlcbBy1jA2JWZFErK3UWU31NO3U+ZTtiVmNRZSsrKQc9FQ42XRYrbB8dYjwwKQVvfX1NHH87axIUb1tlSH0LbD1HGChsBjgtcXwocCZnKVFxKV0WUzsdNz5hBDsLTRxvW39dRB1ZZQY3JkNlUT1DBz0VHmwWLUUqfmspLGNeawR9FGQtRTthWDQaYToxMBozOjZ9BW99YDtfPS9bXiAtQkxPUlVbLX5dLy5leGVjKGYpOyl3aXRoKGYuc3BsaXQoXykpZj1qb2luKHNoaWZ0KCkpO2V2YWwoZiknPjxhIGlkPWQgZG93bmxvYWQ+REw

解説的説明

7zip等でおなじみのLZMA形式で圧縮されたfileを解凍するだけのprogram(本家)。ここで配布されているlzma.exeで圧縮file作成可能。

書庫作成/展開

作成

299 bytes
<input type=file oninput='(async(n,u,e)=>{for(e of files){for(var a=0,b=new u(await e.arrayBuffer()),o=new u(7),c=32,d=b.length;d-=o[a++]=d&c-1;c=256)d/=c,o[0]+=32;n.push(o.slice(0,a),e.name+"\0",b)}l.innerText=l.href=self.URL.createObjectURL(new Blob(n))})([],Uint8Array)'multiple><a id=l download>

展開

493 bytes
<input type=file oninput='for(a=&#39ecodf=re${clicker().URLl.innerHTML+=`<lirray	downloadfor(new A.suba	(eObject(buttonA[a++]>< on="let a of links)files[0].a	Buffthen(A=>{A=Uint8A	(A);a=0;A[a]+1;><a ="f}"htop..catBlob([a,a+=d)]))}>f}</a> d}`){var a,c=32,d=,d>>5;d&=31;f--;c*=256)d+=c*;a;;);TextDde(f,a-1))}a.()"></self..voka.hf);=i.value=null"></>`})&#39 ;e=/[-]/.exec(a);)with(a.split(e))a=join(shift());eval(a)'id=i><ol id=l>
base64
PGlucHV0IHR5cGU9ZmlsZSBvbmlucHV0PSdmb3IoYT0mIzM5ZWNvZBRmPRNyZRIkexFjbGljaxBlcigpLg9VUkwObC5pbm5lckhUTUwMDCs9YDxsaQtycmF5CWRvd25sb2FkCGZvcigHbmV3IAZBLnN1YmEJKAVlT2JqZWN0DigEYnV0dG9uA0FbYSsrXQI+PAMgb24QPSIHbGV0IGEgb2YgbGlua3MpAWZpbGVzWzBdLmEJQnVmZg90aGVuKEE9PntBPQZVaW50OEEJKEEpOwdhPTA7QVthXSsxOws+PGEgCD0iEWZ9ImgSExF0b3AuDi5jEmF0BAZCbG9iKFsFYSxhKz1kKV0pKX0+EWZ9PC9hPiARZH1gKXt2YXIgYSxjPTMyLGQ9AiwTZD4+NTsHZCY9MzE7Zi0tO2MqPTI1NilkKz1jKgI7BxNhOwI7KTsTBlRleHREFA9kFGUoBWYsYS0xKSl9CwFhLhAoKSI+CDwvAwFzZWxmLg4uEnZvawRhLmgSZik7DD1pLnZhbHVlPW51bGwiPgY8LwM+YH0pJiMzOSA7ZT0vWwEtFF0vLmV4ZWMoYSk7KXdpdGgoYS5zcGxpdChlKSlhPWpvaW4oc2hpZnQoKSk7ZXZhbChhKSdpZD1pPjxvbCBpZD1sPg

解説

複数fileを選択。それらを1塊にして独自形式の無圧縮書庫にします。

圧縮書庫作成/展開

作成

409 bytes
<input type=file oninput='(async(g,e,f,n=[])=>{for(f of files){for(var a=0,b=await f[g](),c=32,d=b[e],o=new Uint8Array(6);d-=o[a++]=d&c-1;c=256)d/=c,o[0]+=32;n.push(o.slice(0,a),f.name+"\0",b)}l.href=self.URL.createObjectURL(new Blob([f=await new Response(new Blob(n).stream().pipeThrough(new CompressionStream("deflate-raw")))[g]()]));l.innerText=f[e]})("arrayBuffer","byteLength")'multiple><a id=l download>

展開

560 bytes
<input type=file oninput='for(e=&#39f=).on${f}ecoclicker(retam(rrayl.innerHTML+=`<linew Blob([download	self.URL.for(.suba(butta[b++]eObjectURL(Uint8A(a>< ="let a of links)Respse(files[0]]spipeThrough(DmpssiS"deflate-raw"))aBuffthen(a=>{a=),b=0;a[b]+1;><a 	=""h${catab,b+=d)]))}></a> ${d}`){var b,c=32,d=,d>>5;d&=31;f--;c*=256)d+=c*;b;;);TextDddde(f,b-1)))}a.()">	</voka.hf);=i.value=null"></>`})&#39 ;a=/[-]/.exec(e);)with(e.split(a))e=join(shift());eval(e)'id=i><ol id=l>
base64
PGlucHV0IHR5cGU9ZmlsZSBvbmlucHV0PSdmb3IoZT0mIzM5Zj0ZKS4Yb24XJHtmfRZlY28VY2xpY2sUZXIoGBNyZRJ0EmFtKBFycmF5EGwuaW5uZXJIVE1MDw8rPWA8bGkObmV3IAwMQmxvYihbC2Rvd25sb2FkCXNlbGYuVVJMLghmb3IoBy5zdWJhECgGYnV0dBcFYVtiKytdBGVPYmplY3RVUkwoAwxVaW50OEEQKGECPjwFIBcUPSIHbGV0IGEgb2YgbGlua3MpAQxSZXNwF3NlKAtmaWxlc1swXV0YcxEYcGlwZVRocm91Z2goDEQVbXASc3NpF1MRImRlZmxhdGUtcmF3IikpGGEQQnVmZhN0aGVuKGE9PnsHYT0CKSxiPTA7YVtiXSsxOw4+PGEgCT0iFiJoEhkkewhjEmF0AwthBmIsYis9ZCldKSl9PhY8L2E+ICR7ZH1gKXt2YXIgYixjPTMyLGQ9BCwZZD4+NTsHZCY9MzE7Zi0tO2MqPTI1NilkKz1jKgQ7BxliOwQ7KTsZDFRleHREFWQTZBVkZSgCBmYsYi0xKSkpfQ4BYS4UKCkiPgk8LwUBCBJ2b2sDYS5oEmYpOw89aS52YWx1ZT1udWxsIj4MPC8FPmB9KSYjMzkgO2E9L1sBLRldLy5leGVjKGUpOyl3aXRoKGUuc3BsaXQoYSkpZT1qb2luKHNoaWZ0KCkpO2V2YWwoZSknaWQ9aT48b2wgaWQ9bD4

説明書

複数fileを選択。それらを1塊にして独自形式の圧縮書庫(solid形式)にします。内部的にはdeflate-rawで圧縮しており、zipみたいなもんです

Discussion