https://labs.cybozu.co.jp/blog/akky/tags/html%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0/ Recent content in Htmlフォーム on akky@サイボウズラボ・ブログ Hugo ja Fri, 18 Oct 2019 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2019/10/rotary-dial-library/ Fri, 18 Oct 2019 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2019/10/rotary-dial-library/ <p><a href="https://labs.cybozu.co.jp/blog/akky/2019/10/rotary-dial-library/rotary-dial.gif"><img src="https://labs.cybozu.co.jp/blog/akky/2019/10/rotary-dial-library/rotary-dial.gif" width="450" height="494" alt="" loading="lazy" decoding="async"></a></p> <p>使いどころがわかりませんが、一定年齢以上の人だけ使い方がわかる、ダイヤル電話式の入力インタフェースをサイトに設置できるライブラリが<a href="https://github.com/victorqribeiro/dial">victorqribeiro/dial</a>です。</p> <p><a href="https://victorqribeiro.github.io/dial/index.html">デモサイト</a></p> <p><a href="https://victorqribeiro.github.io/dial/index.html"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2019/10/rotary-dial-library/rotary-dial-screenshot_hu_e3c092a3b1fd355.webp 480w, https://labs.cybozu.co.jp/blog/akky/2019/10/rotary-dial-library/rotary-dial-screenshot_hu_291dd60fce62feb.webp 550w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2019/10/rotary-dial-library/rotary-dial-screenshot.png" width="550" height="760" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>このダイヤルUIの使い方ですが、「黒の丸いところをクリックし、右側の三角のところまでドラッグすると丸が赤色に変わります。そこで手を離すと、その数字がテキストフォームに入力されます。」ということ。こりゃわからんわ!</p> <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"> <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/1OADXNGnJok?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" title="YouTube video"></iframe> </div> <p>via Hacker News</p>