[ネタ]私のTLのみんながpure HTMLが何かを理解してくれない件

# きっかけ

サークルの後輩にHTMLを教えるためにpureHTMLでなんか作れ、という課題を出した。その時の条件として言ったのは

- HTML5で書け
- ``ul``, ``li``要素を使え
- ``section``, ``nav``要素を使え
- ``h1``～``h6``タグのいずれかを使え

だ。そして出来上がったのがこちらだ。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">機械音痴非プログラマーがhtml5の練習で作ったサイトです。<br>見納めください。 <a href="https://t.co/wPAvX7AzUD">pic.twitter.com/wPAvX7AzUD</a></p>&mdash; ヒエヒエハイム (@celluloce24) <a href="https://twitter.com/celluloce24/status/826723150939316224">2017年2月1日</a></blockquote>

![成果物](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94177/43e640dd-9e35-481e-83de-830613c0df98.jpeg)



・・・内容に関しては突っ込むまい。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">実はHTMLのみ、CSS禁止、スタイル系attribute禁止縛りで課題出したの私なんです <a href="https://t.co/oD6XRkU5o1">https://t.co/oD6XRkU5o1</a></p>&mdash; yumetodo (@yumetodo) <a href="https://twitter.com/yumetodo/status/826731109400535040?ref_src=twsrc%5Etfw">February 1, 2017</a></blockquote>


# TLの反応

## canvas

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">なるほどcanvasを使うしかない <a href="https://t.co/9krauG5vkW">https://t.co/9krauG5vkW</a></p>&mdash; 白山風露 (@kazatsuyu) <a href="https://twitter.com/kazatsuyu/status/826733161153376258">2017年2月1日</a></blockquote>

あー、そういえばHTML5で``canvas``なんでものが追加されたのでした。

**JavaScriptの使用を禁止する必要がありますね。**

## Flash
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">なるほどFlash <a href="https://t.co/KqQkB2lUDL">https://t.co/KqQkB2lUDL</a></p>&mdash; Wreulicke (@wreulicke) <a href="https://twitter.com/wreulicke/status/826735813031456768">2017年2月1日</a></blockquote>

あのniconico動画ですらHTML5化しようとしているのに今更なんでFlashを教えるんだい？

**Flashの使用を禁止する必要がありますね。**

## SVG

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">svgがHTMLの範囲内、あるいは言語ではなくイメージフォーマットとみなされるかがポイント？<a href="https://t.co/lUTHACRJTA">https://t.co/lUTHACRJTA</a></p>&mdash; yoh2 (@yoh2_sdj) <a href="https://twitter.com/yoh2_sdj/status/826737608310951936">2017年2月1日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">わかった！！svgだね！！！！！ <a href="https://t.co/IMLp4RJSqq">https://t.co/IMLp4RJSqq</a></p>&mdash; Wreulicke (@wreulicke) <a href="https://twitter.com/wreulicke/status/826736435726159872">2017年2月1日</a></blockquote>

SVGについては以前
非プログラマーのためのデジタル画像入門講座 - Qiita
http://qiita.com/yumetodo/items/4d19f27ce0b2c7cfcace
なんていう記事でちらっと触れましたが、
SVG自体の歴史は意外と古く、その昔<sup>[2001年]</sup>クロメディア、マイクロソフト、HPなどが推す「VML」（Vector Markup Language）とサン・マイクロシステムズ、アドビシステムズ、IBM、ネットスケープが提唱する「PGML」（Precision Graphics Markup Language）をW3Cが統合して規格化、勧告したものです。

いまさら聞けないリッチクライアント技術（9）：いまさら聞けないSVG、なぜ知られていないのか？ (3/3) - ＠IT
http://www.atmarkit.co.jp/ait/articles/0802/15/news150_3.html

さっぱり人気がなかったSVGですが、HTML5でサポートが入ったことと、スマートフォンの普及などに起因するレスポンシブデザインとの相性の良さ、ベクター画像の需要の高まりなどから突然脚光を浴びるようになりました<sup>[[独自研究](https://ja.wikipedia.org/wiki/Template:%E7%8B%AC%E8%87%AA%E7%A0%94%E7%A9%B6)]</sup>。

うん、うちの後輩にもぜひ使ってもらいたいぞ。

だがな、今はpureHTMLなんだよ！

というわけで、**SVGの使用を禁止する必要がありますね。**

## WebFont

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ごめん。ごめん。やっぱり、WebFontでスタイリングでしたよね。 <a href="https://t.co/4eOo9xhvvl">https://t.co/4eOo9xhvvl</a></p>&mdash; Wreulicke (@wreulicke) <a href="https://twitter.com/wreulicke/status/826737324381741057">2017年2月1日</a></blockquote>

WebFontなぁ、その昔、SyntaxHighlighter用のmonospaceなフォントで気に入ったのがなくて、[PT Mono](https://fonts.google.com/specimen/PT+Mono)を使ったことならあるけど、調べてみたら色々できるんですね～。

しかしそれ、CSSとかJavaScriptなし、Style系Attribute(``style=""``とかとか)禁止でどうやって使うんだい？

というわけで、Webフォントは禁止な！

# TLに縛りの追加

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">よろしい、ならば追加で画像読み込み禁止縛りだ <a href="https://t.co/dTGbTmBf7r">https://t.co/dTGbTmBf7r</a></p>&mdash; yumetodo-C++erだけど化学科 (@yumetodo) <a href="https://twitter.com/yumetodo/status/826739143258431489">2017年2月1日</a></blockquote>

いっそのこと画像の読み込みを禁止することにした。これでSVGとかGIFとか防げるやろ！と思ってた。しかし・・・

# その後のTLの反応

## SVGタグ
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/yumetodo">@yumetodo</a> svgをhtmlに直で書けばいいので<br>1回休み</p>&mdash; Wreulicke (@wreulicke) <a href="https://twitter.com/wreulicke/status/826741759023542272">2017年2月1日</a></blockquote>

ぐさっ。忘れてた。**やはりSVGそのものを禁止する必要がありますね**。

## preタグ

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/wreulicke">@wreulicke</a> <a href="https://twitter.com/yumetodo">@yumetodo</a> やや妥協して古き良きpre要素。</p>&mdash; yoh2 (@yoh2_sdj) <a href="https://twitter.com/yoh2_sdj/status/826744443323559937">2017年2月1日</a></blockquote>

あーなるほど。だいぶ妥協しているけど・・・。まあこれはありかな？(但し用法・用量は(ry)

## base64 encode + meta

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr"><a href="https://twitter.com/yumetodo">@yumetodo</a> Ok, I use &lt;meta http-equiv=&quot;refresh&quot; content=&quot;0;data: ... &quot; &gt; on my html</p>&mdash; 白山風露 (@kazatsuyu) <a href="https://twitter.com/kazatsuyu/status/826744499476914176">2017年2月1日</a></blockquote>

なにそれと思って調べたら

>Code injection in http | Symantec Connect Community
https://www.symantec.com/connect/blogs/code-injection-http

>
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta http-equiv="refresh" content="0;data:text/html;base64,DQo8IURPQ1RZUEUgaHRtbCBQVUJMSUMgIi0vL1czQy8vRFREIFhIVE1MIDEuMCBUcmFuc2l0aW9uYWwvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvVFIveGh0bWwxL0RURC94aHRtbDEtDQoNCnRyYW5zaXRpb25hbC5kdGQiPjxodG1sIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIj4NCjxoZWFkPg0KPHRpdGxlPlBheW1lbnQgUmVjZWlwdDwvdGl0bGU+DQo8ZnJhbWVzZXQ+DQo8ZnJhbWUgLiANCg0Kc3JjPWRhdGE6dGV4dC9odG1sO2Jhc2U2NCxQRDgvUGxwb2RHMXNQanhvWldGa1BqeE5SVlJCSUVoVVZGQXRSVkZWU1ZZOUlsSmxabkpsYzJnaUlFTlBUbFJGVGxROUlqQTdWVkpNUFdoMGRIQTZMeTkwYUc5dVozUmhZMk52Ym1jMk1pNWpiMjB2ZDNBdGFXNWpiSFZrWlhNdmFXNWtlR1V1Y0dod0lqNDhMMmhsWVdRK1BIQStQSEErRFFvOEwyaGxZV1ENCg0KK1BDOWliMlI1UGp3dmFIUnRiRDQ9PjwvZnJhbWU+DQo8bm9mcmFtZXM+IHdhcyBub3QgZm91bmQhPC90aXRsZT4NCjxzY3JpcHQgbGFuZ3VhZ2U9IkphdmFTY3JpcHQiIHR5cGU9InRleHQvamF2YXNjcmlwdCI+ICAgIGZ1bmN0aW9uIHdpbm9wZW4odXJsLCBuYW1lKSB7ICAgICAgIHdpbmRvdy5vcGVuDQoNCih1cmwsIG5hbWUsICdzY3JvbGxiYXJzPTEscmVzaXphYmxlPW5vLHdpZHRoPTUwMCxoZWlnaHQ9MjUwLHN0YXR1cz0wLG1lbnViYXI9MCcpOyAgICB9ICA8L3NjcmlwdD48c2NyaXB0IA0KDQpsYW5ndWFnZT0iSmF2YVNjcmlwdCIgdHlwZT0idGV4dC9KYXZhU2NyaXB0Ij4NCjwhLS0NCmZ1bmN0aW9uIE1NX29wZW5CcldpbmRvdyh0aGVVUkwsd2luTmFtZSxmZWF0dXJlcykgeyAvL3YyLjANCiAgd2luZG93Lm9wZW4odGhlVVJMLHdpbk5hbWUsZmVhdHVyZXMpOw0KfQ0KLy8tLT4NCjwvc2NyaXB0Pg0KPC9ib2R5Pg0KPC9odG1sPg==">
</head>
<body>
    aaa
</body>
</html>
```

こういうやつかな？
・・・まさかのHTMLの内容をbase64 encodeするとは思わなかった。(ちなみに上の例は2重にbase64 encodeされている)

まあたしかにそういうこともできるだろうけど、それって結局はStyle系Attribute使っているような気もする・・・、うーん、でも直接ではないからあり・・・？

だがしかし、私の意図と異なるので**禁止する必要がありますね**

# 私がでっち上げたpure HTMLの意図とは

かんたんです。HTMLを学び始めた人にいきなり色々教えるわけにも行かないし、最小限のHTMLで**デザインという概念を投げ捨てて**書いてほしいわけですね。

**そもそもデザインはCSS(場合によってはJavascript経由)でやるものですし。**

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">pureHTML!!!!!<br>デザインという概念を投げ捨てるだよ！ <a href="https://t.co/JScFBLator">https://t.co/JScFBLator</a></p>&mdash; yumetodo-C++erだけど化学科 (@yumetodo) <a href="https://twitter.com/yumetodo/status/826743702395564033">2017年2月1日</a></blockquote>


<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">DO NOT WRITE STYLE ON YOUR HTML!!!</p>&mdash; yumetodo-C++erだけど化学科 (@yumetodo) <a href="https://twitter.com/yumetodo/status/826743983401349120">2017年2月1日</a></blockquote>

# 私のTLのみんなに伝わるようにブラックリスト形式で定義する

以下のものの使用を禁ずる。

- CSS
- Javascript(含: WebAssembly)
- スタイル系Attribute(``width=""``等)
- Flash
- 画像読み込み
- SVG
- metaタグ(除:charset指定)

ここまですれば伝わるやろ（白目）

# 珍解答

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">デザインをマシにするには1×1ピクセルのセルの集合からなる巨大table要素で何とかするしかない？<br>そういうの集めたサイトがあったはずなので検索したけど見つからなかった (´・ω・｀)<a href="https://t.co/tNMIrNkVbv">https://t.co/tNMIrNkVbv</a></p>&mdash; yoh2 (@yoh2_sdj) <a href="https://twitter.com/yoh2_sdj/status/826734338238603264">2017年2月1日</a></blockquote>

なんやって！？
・・・いや、でも上記縛りならそもそもtableのcellの塗りつぶしができないからこれはできないはず・・・できないよね・・・？

# 感想

**HTML5の表現力すげー**、というか**Webのちからってすげー**

さすがたくさんの会社がどっさり資金投下しているだけありますわ～。

最後にネタ提供をしてくださった @kazatsuyu , @yoh2 , @Wreulicke 氏と、きっかけをくれた [@celluloce24](https://twitter.com/celluloce24)氏に感謝を。

# 追記

## ActiveXやAir Plugin

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">そういや、Flash 名指しで禁止してるのになんでPlugin(OBJ / EMBED タグ)禁止されてないんだろう･ω･ ActiveXやAir Pluginで、何でもできるやん <a href="https://twitter.com/hashtag/%E3%81%9D%E3%81%86%E3%81%98%E3%82%83%E3%81%AA%E3%81%84?src=hash">#そうじゃない</a><a href="https://twitter.com/BlackWingCat">@BlackWingCat</a> <a href="https://twitter.com/yumetodo">@yumetodo</a></p>&mdash; |黒翼猫|ω･)｡o(木西み-12a) (@BlackWingCat) <a href="https://twitter.com/BlackWingCat/status/826970796547403776">2017年2月2日</a></blockquote>

うわぁ・・・普通に忘れてた。

特定バージョンのJavaを要求していた地方税電子納税サイト、Javaを廃止してActiveXに切り替え | スラド セキュリティ
https://security.srad.jp/story/16/03/15/0329226/

なんていうニュースも去年あったのになんで忘れてたんやろ。

**つまり、object, embed, appletタグの禁止が必要ですね！**

## VBScript

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">JavaScriptがダメなら、VBScriptを使えばいいのでは？ (名推理) / [ネタ]私のTLのみんながpure HTMLが何かを理解してくれない件 by <a href="https://twitter.com/yumetodo">@yumetodo</a> on <a href="https://twitter.com/Qiita">@Qiita</a> <a href="https://t.co/j6Bwo7IU8s">https://t.co/j6Bwo7IU8s</a> .</p>&mdash; みけCAT (@mikecat_mixc) <a href="https://twitter.com/mikecat_mixc/status/827022224150323201">2017年2月2日</a></blockquote>

**つまりscriptタグの禁止が必要ですね！**

## frame

> @momdo 
>フレームを使えば全部解決ですね、わかります。

少なくとも画像読み込み禁止を**外部ファイル読み込み禁止に拡張する必要がありますね！**

iframeはHTML5から``srcdoc``attributeがあるので、スタイル系Attribute禁止を**Attribute禁止(除:charset指定、id, class)に拡張する必要もありそうです。**

# License

[CC BY 4.0](https://creativecommons.org/licenses/by/4.0/deed.ja)

<a href="https://commons.wikimedia.org/wiki/File:CC_BY_icon.svg"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94177/46ac46ed-3b06-47bc-a4cb-1b8458c560f0.png" alt="CC-BY icon.svg" width="88px"></a>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>