【HTML】お手軽にQuineアートを作る

## 前書き

Chromeでソースと同じ文字列が表示されればよしとする。

## 先に結論

```html:mission-chan.html
                                     <script>s=`/*3kawqkqa8v3repjnjj             df     66       av       bsh         gr
  du          nq                 sucr7                            1cswd4t              2s       4n       9z         y2b
    cg         we         x5iplu                                     yxk37srktcup             4w       54       27nc
      61        fz    r0d                                                  ryx1  6xspv                        dp wx
        en          n0                                                         4a1md  p67                   y9 va              kh                nwk2imzdqk
 32       lv     0zn                                                                tq3  i82a             uo   s4           m0yttc04
   0j          qu                jk                                                    7ik  hk          ps    9e               un    oq
     qnk      wf                 wm                                                      gfh  at      ec     n5              2xb7y0x4vs         nb
        c1  9l       z0          br                                                        do  dx            5a             md ti  8p  cq        b3ol2dcfu5z
           qw        7i          s9                                                          6a  w5        qhjo            oi   tsw    wp
          8u         j1          vs                  m4                                       xx  vk     fu  53             sf6 8c    in
         wh          ey          yw         rk        ru                                       9z   iy       vl                                  0kdw095j9a
        c5           42           8r         ufssqo0  ps   27           at                      nr   7m      b4
       rm            yl            3k               quf6   ia  kc       mk                       33  or      ee                dvuc1jjs
       fi            jh    h9q     d2                 xq   tj  8lc       ui                       9y  s0     d0              xd 3f    zl        3b
       qe            i3  ovz        d6                ueh1wqkl0722m633j zlv7                      3p   0i    fe             fb  b5     r2        fnltei5dokk
      kt             bkv5          cauo                10  sd  na x8 pezwp7ym                     l0   sh    06             rh  86     ic
      ix          qutbv hlegi3tam2va   i5           p44b29jj   gy 8z r1 yr e4             jy      v8   u7    85               q3n     s6
      5w       bus   0r                 8yg5p2kvsbeg           4h zs po gv fv             yg    mbra    jp    r1                                     cr  yu  ct vi
      b7  e3sypxx5ayh8g                            hdbafwntft0jt2shk 4u ub 0b              4cp7d    mvr yl     y8                                    gn   z3 ud 57
     d0        zc                32 d5          42e  zzjt  yjnp bwnwlkc ce  f1              yh        wy u6    nr             w6  ot l7          hfdn96cgz 7p
     lb        tp    nwrb3ouh    es me         p7     9d   kts7   j0 07     pr              05        cw 5p    e0           864xzotluuw5eov         3k   vn 9t
      86       z7  ve8   cxt er   gh5         78      l2          hr  df9l  rc               4l       hy  wx    7a            rd  7e jf           ox     jy
      1q       9i gt p7  hzu  h1                       sd         04    q5  bv               nv       rj  g6    9z            5b  ni5px                  g7
       80       jd    6p     7 eq                        s1xhbrc9cvx         m6              r8       cz   5a    v3           tq                     hfhe
       rg        p2    6fkd0pr                                               ks              mf    j8t3    4i    z2           x3hikzpoefw
       1q         v2         m8                            cxqz9z            vn              gamg2ro       it    0d
       lf          3m  5ksb                                         ei il    w9              bf            wc    is
       4l          tm                vn                             7j v8    bm              h7            gg    rm            3w     zv
       rs          do                              cfdoie895          jd     3q             tmt           tds    5r            3n       vm
       d2          xq  21 uu          berk2f9ei60a          u1               h9             uyk       nh1u     8q            43xik4  ow
       z1           xj 7s s7            5i                   vi        jl    e9             j3  fy8ol       bgs               vw      gn
       w2            vf  ob             m5                    yj            72d            g1dfrd   ibh2uriq                  t7     n75kp6f
       pg             w0                 sh                   rh        2ubd fn            zo29eq   7m                        qc    p1  38
        jw             uwrj                kq                  gj   h828     ap            xvc dn     jp2z                     gk    zjue
        u3              uhb9cucxjr           yu daz9yix8fua42yp oxn0        iv0l         nhqu    np       tu4m
         hx             9c     ai1zyoxrtz6yrbonlhck0g97h7kevsz6wu          yk fe         a9        12j        03b
         9p           oc        0b               n8  m8hab  6y  cv        ws  3w       ey             7v         fi                 90atzys7
         vd         mu8          devkqgq0mklgw84em  6ec un   t7 zz      vqy   nk     ef                5x        7i               tc p7    2q
         ft       mot                               hm  pd    67       2r     az    qz                  qi       a3              pq  48     35
         o5    9d4             zu                   1l e1     w2k   e2b7      x9yo3qgj                  jw       bz              31  fa     yj
         8plvmc               hn  km               7q  m3    0rsodmog*         /d   oc     =d            oc       um               ent     .d
         oc                   um  en              tE   le  me  nt;do  c.           st      yl            e.       fo
                               ntF                am    il y= "m ono   sp         ac       e"             ;d       oc
           .s                                    ty      le. fo  ntS   ize      ="         10             px        ";             doc.inner
         HT                                     ML        =( St  ring  .f rom Ch          ar              Co        de            (3       2)
       .r       ep                              ea         t(37  )+ do   cu me            nt              .g         et           El       em
     en        ts       By      Ta              gN          ame  (" scr    ip             t"               )[         0]               .oute
   rH         TM        L)      .r             ep            lac e(   /</   g,            "&               "+           "l             t;
 ")          .r        ep       la             ce            (/ >/      g,"&"+            "g                t;           ")
            .r         ep       la             ce            (/                            \\                n/           g,           "<b
           r>         ")        .r            ep              la                           ce                 (/            \\s
          /g          ,"        &n            bs              p;                           ")                 ;`               ;eval(s.replace(/(\n|\s)/g,""));</script>
```

https://mogamoga1024.github.io/html-quine/mission-chan.html

![スクリーンショット 2023-05-24 033258.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649673/2fb12200-eeb6-18a4-856b-5b80bae230bf.png)

## 解説

```html
<script>
// Quineを出力するプログラムの文字列
// アートにする都合でぐちゃぐちゃに加工するがevalで実行するときに
// 改行と空白を空文字に置換するので問題ない。
s = `
/* ↓ アートの文字数を稼ぐためのコメント */
/*3ka...mog*/

/* アートにしたいので等倍フォントを使う */
doc = document.documentElement;
doc.style.fontFamily = "monospace";
doc.style.fontSize = "10px";

/* scriptタブの箇所の文字列を取得し、表示可能な形式にしてから表示させる */
doc.innerHTML = (String.fromCharCode(32).repeat(37)
                 + document.getElementsByTagName("script")[0].outerHTML)
                .replace(/</g,"&"+"lt;")
                .replace(/>/g,"&"+"gt;")
                .replace(/\\n/g,"<br>")
                .replace(/\\s/g,"&nbsp;");
`;

// 実行！
eval(s.replace(/(\n|\s)/g, ""));
</script>
```

## 追記（訂正）

正しくはこう。
追記だけしとく。

```diff_html
-               .replace(/\\s/g,"&nbsp;");
+               .replace(/\\s/g,"&" + "nbsp;");
```

## 関連

https://qiita.com/mogamoga1337/items/27a49e164c8a17bd4f87

https://qiita.com/mogamoga1337/items/df7d68a70214b87c5f8a

https://qiita.com/mogamoga1337/items/0b211a90f39149ae12dc