<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
	<channel>
		<title>チェックボックス on akky@サイボウズラボ・ブログ</title>
		<link>https://labs.cybozu.co.jp/blog/akky/tags/%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9/</link>
		<description>Recent content in チェックボックス on akky@サイボウズラボ・ブログ</description>
		<generator>Hugo</generator>
		<language>ja</language>
		
		
		
		
			<lastBuildDate>Tue, 12 Oct 2021 00:00:00 +0000</lastBuildDate>
		
			<atom:link href="https://labs.cybozu.co.jp/blog/akky/tags/%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9/index.xml" rel="self" type="application/rss+xml" />
			<item>
				<title>Checkboxland - HTMLのチェックボックスですべてを作れるライブラリ</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2021/10/checkboxland-all-checkbox-webdesign/</link>
				<pubDate>Tue, 12 Oct 2021 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2021/10/checkboxland-all-checkbox-webdesign/</guid>
				<description>&lt;p&gt;&lt;a href=&#34;https://www.bryanbraun.com/checkboxland/&#34;&gt;Checkboxland&lt;/a&gt; は、HTML のチェックボックス要素を活用してしまくるための JavaScriptライブラリです。&lt;/p&gt;&#xA;&lt;p&gt;HTML のチェックボックス要素と言えばこれ↓ ですが、&lt;/p&gt;&#xA;&lt;blockquote&gt;&#xA;&lt;/blockquote&gt;&#xA;&lt;p&gt;このチェックボックスを使って様々な表現を実行できます。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://labs.cybozu.co.jp/blog/akky/2021/10/checkboxland-all-checkbox-webdesign/checkboxland-top.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2021/10/checkboxland-all-checkbox-webdesign/checkboxland-top_hu_ee354db0ac712421.webp 480w, https://labs.cybozu.co.jp/blog/akky/2021/10/checkboxland-all-checkbox-webdesign/checkboxland-top_hu_cdc237437b1e56d2.webp 768w, https://labs.cybozu.co.jp/blog/akky/2021/10/checkboxland-all-checkbox-webdesign/checkboxland-top_hu_9107444809916869.webp 807w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2021/10/checkboxland-all-checkbox-webdesign/checkboxland-top.png&#34; width=&#34;807&#34; height=&#34;887&#34; alt=&#34;&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34;&gt;&#xA;&lt;/picture&gt;&lt;/a&gt;&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://www.bryanbraun.com/checkboxland/#demos&#34;&gt;デモ&lt;/a&gt;では、文字が横に流れるマーキー、デジタル時計、アニメーション、QRコード表示、ライフゲーム、動画再生(!)、など様々な表現が、すべてチェックボックスだけで実現されています。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://labs.cybozu.co.jp/blog/akky/2021/10/checkboxland-all-checkbox-webdesign/checkboxland-clock.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2021/10/checkboxland-all-checkbox-webdesign/checkboxland-clock_hu_29d0a40a13cc62d5.webp 480w, https://labs.cybozu.co.jp/blog/akky/2021/10/checkboxland-all-checkbox-webdesign/checkboxland-clock_hu_7348d9d63161aad3.webp 542w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2021/10/checkboxland-all-checkbox-webdesign/checkboxland-clock.png&#34; width=&#34;542&#34; height=&#34;196&#34; alt=&#34;&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34;&gt;&#xA;&lt;/picture&gt;&lt;/a&gt;&lt;/p&gt;&#xA;&lt;p&gt;API documentによれば、チェックボックスを縦横に並べたグリッド上でグリッド上の各座標を調べたり書き換えたりする&lt;a href=&#34;https://www.bryanbraun.com/checkboxland/#low-level-api&#34;&gt;低レイヤAPI&lt;/a&gt;と、文字を大きく描く、スクロールさせる、画像や動画を描写させるなどの&lt;a href=&#34;https://www.bryanbraun.com/checkboxland/#extended-api&#34;&gt;拡張API&lt;/a&gt;が用意されています。プラグイン機構も用意されているので、自分で Checkboxland に新たな機能を追加することも可能です。&lt;/p&gt;&#xA;&lt;blockquote class=&#34;twitter-tweet&#34;&gt;&lt;p lang=&#34;en&#34; dir=&#34;ltr&#34;&gt;It&amp;#39;s Friday night so of course I&amp;#39;m eating cookie dough and making a QR code out of html checkboxes that always tells you the current time.&lt;a href=&#34;https://t.co/ZNjG0SWAce&#34;&gt;https://t.co/ZNjG0SWAce&lt;/a&gt; &lt;a href=&#34;https://t.co/Fywf7FZFpu&#34;&gt;pic.twitter.com/Fywf7FZFpu&lt;/a&gt;&lt;/p&gt;&amp;mdash; Bryan Braun (@BryanEBraun) &lt;a href=&#34;https://x.com/BryanEBraun/status/1264014217063149569?ref_src=twsrc%5Etfw&#34;&gt;May 23, 2020&lt;/a&gt;&lt;/blockquote&gt;&#xA;&lt;script async src=&#34;https://platform.x.com/widgets.js&#34; charset=&#34;utf-8&#34;&gt;&lt;/script&gt;&#xA;&#xA;&#xA;&lt;p&gt;多数の要素を表示しようとするとページが重くなるのはチェックボックスであっても(当然)同じで、チェックボックスの数が1500個を超えるとチェックボックスの更新速度が問題となることから、32x32 や 64x16 といったサイズ以下のグリッドを推奨するそうです。&lt;/p&gt;&#xA;&lt;blockquote class=&#34;twitter-tweet&#34;&gt;&lt;p lang=&#34;en&#34; dir=&#34;ltr&#34;&gt;I made a webcam filter out of html checkboxes.&lt;br&gt;&lt;br&gt;Try it out here: &lt;a href=&#34;https://t.co/1lBHfEgmhw&#34;&gt;https://t.co/1lBHfEgmhw&lt;/a&gt; &lt;a href=&#34;https://t.co/tZrFOg3PWl&#34;&gt;pic.twitter.com/tZrFOg3PWl&lt;/a&gt;&lt;/p&gt;</description>
			</item>
	</channel>
</rss>
