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

Last updated at 2025-05-08Posted at 2017-02-02

きっかけ

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

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

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

機械音痴非プログラマーがhtml5の練習で作ったサイトです。
見納めください。 pic.twitter.com/wPAvX7AzUD
— ヒエヒエハイム (@celluloce24) 2017年2月1日

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

実はHTMLのみ、CSS禁止、スタイル系attribute禁止縛りで課題出したの私なんです https://t.co/oD6XRkU5o1
— yumetodo (@yumetodo) February 1, 2017

TLの反応

canvas

なるほどcanvasを使うしかない https://t.co/9krauG5vkW
— 白山風露 (@kazatsuyu) 2017年2月1日

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

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

Flash

なるほどFlash https://t.co/KqQkB2lUDL
— Wreulicke (@wreulicke) 2017年2月1日

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

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

SVG

svgがHTMLの範囲内、あるいは言語ではなくイメージフォーマットとみなされるかがポイント？https://t.co/lUTHACRJTA
— yoh2 (@yoh2_sdj) 2017年2月1日

わかった！！svgだね！！！！！ https://t.co/IMLp4RJSqq
— Wreulicke (@wreulicke) 2017年2月1日

SVGについては以前
非プログラマーのためのデジタル画像入門講座 - Qiita
http://qiita.com/yumetodo/items/4d19f27ce0b2c7cfcace
なんていう記事でちらっと触れましたが、
SVG自体の歴史は意外と古く、その昔^[2001年]クロメディア、マイクロソフト、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でサポートが入ったことと、スマートフォンの普及などに起因するレスポンシブデザインとの相性の良さ、ベクター画像の需要の高まりなどから突然脚光を浴びるようになりました^{[独自研究]}。

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

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

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

WebFont

ごめん。ごめん。やっぱり、WebFontでスタイリングでしたよね。 https://t.co/4eOo9xhvvl
— Wreulicke (@wreulicke) 2017年2月1日

WebFontなぁ、その昔、SyntaxHighlighter用のmonospaceなフォントで気に入ったのがなくて、PT Monoを使ったことならあるけど、調べてみたら色々できるんですね～。

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

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

TLに縛りの追加

よろしい、ならば追加で画像読み込み禁止縛りだ https://t.co/dTGbTmBf7r
— yumetodo-C++erだけど化学科 (@yumetodo) 2017年2月1日

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

その後のTLの反応

SVGタグ

@yumetodo svgをhtmlに直で書けばいいので
1回休み
— Wreulicke (@wreulicke) 2017年2月1日

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

preタグ

@wreulicke @yumetodo やや妥協して古き良きpre要素。
— yoh2 (@yoh2_sdj) 2017年2月1日

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

base64 encode + meta

@yumetodo Ok, I use <meta http-equiv="refresh" content="0;data: ... " > on my html
— 白山風露 (@kazatsuyu) 2017年2月1日

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

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

<!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経由)でやるものですし。

pureHTML!!!!!
デザインという概念を投げ捨てるだよ！ https://t.co/JScFBLator
— yumetodo-C++erだけど化学科 (@yumetodo) 2017年2月1日

DO NOT WRITE STYLE ON YOUR HTML!!!
— yumetodo-C++erだけど化学科 (@yumetodo) 2017年2月1日

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

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

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

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

珍解答

デザインをマシにするには1×1ピクセルのセルの集合からなる巨大table要素で何とかするしかない？
そういうの集めたサイトがあったはずなので検索したけど見つからなかった (´・ω・｀)https://t.co/tNMIrNkVbv
— yoh2 (@yoh2_sdj) 2017年2月1日

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

感想

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

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

最後にネタ提供をしてくださった @kazatsuyu , @yoh2 , @Wreulicke 氏と、きっかけをくれた @celluloce24氏に感謝を。

追記

ActiveXやAir Plugin

そういや、Flash 名指しで禁止してるのになんでPlugin(OBJ / EMBED タグ)禁止されてないんだろう･ω･ ActiveXやAir Pluginで、何でもできるやん #そうじゃない @BlackWingCat @yumetodo
— |黒翼猫|ω･)｡o(木西み-12a) (@BlackWingCat) 2017年2月2日

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

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

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

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

VBScript

JavaScriptがダメなら、VBScriptを使えばいいのでは？ (名推理) / [ネタ]私のTLのみんながpure HTMLが何かを理解してくれない件 by @yumetodo on @Qiita https://t.co/j6Bwo7IU8s .
— みけCAT (@mikecat_mixc) 2017年2月2日

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