Html on akky@サイボウズラボ・ブログ

#HEXWORDS - 16進カラーコードで「意味のある単語」をまとめたサイト

Fri, 10 Jun 2022 00:00:00 +0000

HTML/CSS の色指定などで使われる16進コード、0から9とA,B,C,D,E,F までの16文字を使って16進数でRGBの三原色の割合を示すものです。3桁(#3C3)や6桁(#BD2031)で使われます。

#3C3

#BD2031

16文字の中にアルファベットが6文字入っているので、数値によっては英単語のように見えるものもあります。(たとえば #DECAFE)

これに、0から9までの数字を似た形のアルファベットに見立てて英文を読みにくくし、仲間うちだけで通じるようにするリートスピーク(leetspeek) を組み合わせると、6桁の色コードの中に英単語として読めてしまうものの数がぐっと増えてきます。

この英単語として読めてしまうような16進コードを集めたのが#HEXWORDSというサイト。

#HEXWORDS トップ

サイトには検索機能もあり、使いたい色コードを入れて、その色に近いもので英単語っぽいものを列挙してくれます。

#HEXWORD の検索例

Hacker Newsのスレッドでは、「認識できる英単語と、その16進コードが表示する色の間に関係があるものがあるのでは?」という問いかけが出て、何人もの人がそれっぽいコードを発見・披露しています。

#C0A575 (COASTS, 海岸 - 砂っぽい色?)

#5A6E57 (SAGEST, セージの葉 - 葉っぱの色)

#CABB1E (CABBIE, キャブ - イエローキャブタクシーの色)

このサイトは英単語を列挙していますが、ローマ字で日本語として意味を成すものも探せば日本語版を作ることもできそうですね。

Webサイトのソースコード中に含まれる色のコード、一般的には意識することもないと思います。

なのでこのサイトの実用性はそれほどないでしょうけれど、何か平凡なwebページの中に隠れた情報を埋め込んでおき、色コードを登場順に読んでいくと文章が浮かび上がって情報を伝える、みたいなお遊びをするときに役立つかもしれません。

via Hacker News

1万6000個のチェックボックス要素で作られたDoom

Tue, 19 Oct 2021 00:00:00 +0000

HTMLのチェックボックス「だけ」をひたすら活用できるライブラリ Checkboxland を先週紹介しましたが、さっそくすごい応用サービスが登場しました。

Doom といえば、非力なレトロPC や関数電卓から、ATM やデジカメ、プリンターの液晶などCPUのあるところならどこでも移植されてきたゲームですが、今回は Checkboxland を使って、すべてチェックボックスで作られた Doom が遊べるようになっています。

ページ上部にあるように、カーソルキーの移動と Ctrlキーの射撃で遊べるのですが、青白の二色で解像度も160x100と低いため、敵が出てくるなど込み入った表示になると正直何が起こってるのか判別は難しくなります。Doom ファンならこれでもわかるのかもしれませんが。

左上には元の Doom 画面も表示されているので、どうにもならないときはそちらを見るしかないでしょう。

ブラウザ上で動く Doom は「WebAssembly で FizzBuzz から Doom までを作る」プロジェクトで作られているものを呼び出し、これが非表示の canvas 要素に描いたゲーム画面を MediaStream 経由でCheckboxland の動画描画機能に渡しています。

via DOOM Rendered via Checkboxes via reddit

Checkboxland - HTMLのチェックボックスですべてを作れるライブラリ

Tue, 12 Oct 2021 00:00:00 +0000

Checkboxland は、HTML のチェックボックス要素を活用してしまくるための JavaScriptライブラリです。

HTML のチェックボックス要素と言えばこれ↓ ですが、

このチェックボックスを使って様々な表現を実行できます。

デモでは、文字が横に流れるマーキー、デジタル時計、アニメーション、QRコード表示、ライフゲーム、動画再生(!)、など様々な表現が、すべてチェックボックスだけで実現されています。

API documentによれば、チェックボックスを縦横に並べたグリッド上でグリッド上の各座標を調べたり書き換えたりする低レイヤAPIと、文字を大きく描く、スクロールさせる、画像や動画を描写させるなどの拡張APIが用意されています。プラグイン機構も用意されているので、自分で Checkboxland に新たな機能を追加することも可能です。

It's Friday night so of course I'm eating cookie dough and making a QR code out of html checkboxes that always tells you the current time.https://t.co/ZNjG0SWAce pic.twitter.com/Fywf7FZFpu
— Bryan Braun (@BryanEBraun) May 23, 2020

多数の要素を表示しようとするとページが重くなるのはチェックボックスであっても(当然)同じで、チェックボックスの数が1500個を超えるとチェックボックスの更新速度が問題となることから、32x32 や 64x16 といったサイズ以下のグリッドを推奨するそうです。

I made a webcam filter out of html checkboxes.

Try it out here: https://t.co/1lBHfEgmhw pic.twitter.com/tZrFOg3PWl

Listly - ウェブページからデータを抽出してExcelファイルにしてくれるサービス

Mon, 17 Apr 2017 00:00:00 +0000

Listly は、ウェブページのスクレイピングをお手軽にしてくれるサービスです。

フォームに抽出したいサイトのURLを入れて、Listyボタンを押すと、

ページ内の構造から、リストを抽出してくれます。抽出に使ったCSSセレクタを表示してくれてるので、これをコピーして使うもよし、“Excel"ボタンを押すと、エクセルファイルでダウンロードもできます。

何回も繰り返すような作業ならプログラム化すると思いますが、一度しかやらないとわかっている抽出作業などでは、特に便利なのではないでしょうか。

また、未実装ですが"Scraper"というボタンを見ると、繰り返し抽出を行うためのブックマークレットか何かを生成してくれる予定があるようです。APIも開発中とか。

同様のものにImport.ioというサービスが先行であり、機能的にも強力なのですが、こちらは月$199 からの有料サービスとなっています。Listly もユーザーが増えればいずれはお金を取りそうではありますが、今のところは登録等なく利用できます。

via Hacker News

ウェブページ制作のたいへんさを見せるページ

Tue, 07 Apr 2015 00:00:00 +0000

英語圏の巨大掲示板redditの一ページを新規にデザインしたとしたらどれぐらい手間か、というのをブラウザ上で見せてくれるページです。

画面右側にCSSとHTMLの枠が表示され、そこにコードが追加されていくにつれて、ページ上にredditのデザインが少しずつ出来上がっていきます。右上のスライダーで作業速度を速めることもできますが、それでもなかなか出来上がりません。

redditは、どちらかといえばシンプルなデザインとされるサイトですが、それでも、これだけの画面を表示するためにどれぐらいのソースコードが必要か、一度もサイトを作ったことが無い人は、もっと短くできるのではと思っているかもしれません。

このようなサイトを見せることで、ウェブ制作の裏側を知らない人にも少したいへんさを伝えられるかもしれませんね。このデモでは上から順にスラスラとコードを書いていってるので、実際のウェブ開発では手戻りや調整でさらにずっと大変なんですよ、と。

このデモで生成される掲示板のやりとり自身が指しているように、Jake Albaughさんの脈打つハートを作る様子を再現するコードを見て、それに触発されて作られたということです。

同じコードを参考に、CSSで描くダースベイダーをデモ化したページも作られています。

via TheNextWeb