https://labs.cybozu.co.jp/blog/akky/tags/ascii-art/ Recent content in Ascii-Art on akky@サイボウズラボ・ブログ Hugo ja Fri, 13 Sep 2019 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2019/09/laptop-css-adds-laptop-frame-on-images/ Fri, 13 Sep 2019 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2019/09/laptop-css-adds-laptop-frame-on-images/ <p><a href="https://jjkaufman.github.io/laptop.css/index.html">laptop.css</a>は、画像の周りにアスキーアートのラップトップ枠をつけてくれるという単機能のCSSスタイルシートです。<a href="https://github.com/jjkaufman/laptop.css">オープンソース</a>です。</p> <p><a href="http://developer.cybozu.co.jp/akky/2018/03/googling-the-error-message/"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2019/09/laptop-css-adds-laptop-frame-on-images/googling-the-error-message_hu_23630b3a51928647.webp 480w, https://labs.cybozu.co.jp/blog/akky/2019/09/laptop-css-adds-laptop-frame-on-images/googling-the-error-message_hu_9ea865b4f7ed2fa3.webp 768w, https://labs.cybozu.co.jp/blog/akky/2019/09/laptop-css-adds-laptop-frame-on-images/googling-the-error-message_hu_2c39a377df52bb04.webp 915w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2019/09/laptop-css-adds-laptop-frame-on-images/googling-the-error-message.jpg" width="915" height="1200" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>3種類のサイズのラップトップが用意されています。</p> <p><a href="http://developer.cybozu.co.jp/akky/2019/07/buttsss-the-best-butt-illustration-site/"><img src="https://labs.cybozu.co.jp/blog/akky/2019/09/laptop-css-adds-laptop-frame-on-images/UX-Designer-Butt.gif" width="512" height="512" alt="" loading="lazy" decoding="async"></a></p> <p>どういう時に有用なライブラリなのか、今一つわかりませんが。</p> <p><a href="http://developer.cybozu.co.jp/akky/2019/07/waifu-vending-machine/"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2019/09/laptop-css-adds-laptop-frame-on-images/waifulabs-selling-goods_hu_d70e1bd449894e14.webp 480w, https://labs.cybozu.co.jp/blog/akky/2019/09/laptop-css-adds-laptop-frame-on-images/waifulabs-selling-goods_hu_a24d2ad4d6895d15.webp 768w, https://labs.cybozu.co.jp/blog/akky/2019/09/laptop-css-adds-laptop-frame-on-images/waifulabs-selling-goods_hu_53470123ee8cfb71.webp 1385w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2019/09/laptop-css-adds-laptop-frame-on-images/waifulabs-selling-goods.png" width="1385" height="864" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>縦横比に注意して画像を用意しないといけないみたいですね。そして、画像につけたリンクが無効になってしまった。</p> <p>(rss フィード経由の方は元ページを開いて見てください)</p> <p>via Hacker News</p> https://labs.cybozu.co.jp/blog/akky/2014/12/ascii-cam-makes-realtime-ascii-art/ Tue, 02 Dec 2014 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2014/12/ascii-cam-makes-realtime-ascii-art/ <p><a href="http://escobar5.github.io/asciicam/">ASCII Cam</a> は、ブラウザ上でwebカメラの入力をアスキーアートに変換するサービスです。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2014/12/ascii-cam-makes-realtime-ascii-art/ascii-cam-top.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2014/12/ascii-cam-makes-realtime-ascii-art/ascii-cam-top_hu_a163df5d908e2d0a.webp 480w, https://labs.cybozu.co.jp/blog/akky/2014/12/ascii-cam-makes-realtime-ascii-art/ascii-cam-top_hu_2593425817dec88.webp 768w, https://labs.cybozu.co.jp/blog/akky/2014/12/ascii-cam-makes-realtime-ascii-art/ascii-cam-top_hu_1b67ac74480cb3fa.webp 1000w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2014/12/ascii-cam-makes-realtime-ascii-art/ascii-cam-top.png" width="1000" height="937" alt="ascii-cam-top" loading="lazy" decoding="async"> </picture></a></p> <p>Start cam を押すと、初回はカメラへのアクセスをしても良いかというのがブラウザから訊かれます。許可をするとウェブカムの映像がASCII文字だけで表示されます。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2014/12/ascii-cam-makes-realtime-ascii-art/asciicam.gif"><img src="https://labs.cybozu.co.jp/blog/akky/2014/12/ascii-cam-makes-realtime-ascii-art/asciicam.gif" width="496" height="600" alt="asciicam" loading="lazy" decoding="async"></a></p> <p>ソースコードもGithubで公開されています。</p>