月別2021年05月 一覧

よく見るスイッチ型のcheckboxを作る

今回はよく見るスイッチ型のチェックボックスを作ります。凹んだような穴の中にボールが入っていてチェックすると中のボールが右に動いたり左に動いたりするあれで。git hubにあげたform collectionのチェックボックスにもあります。 git hubにあげたのはReact + styled-componentsなのでReact使わない方のためにvanilla jsで解説します。コードの全体像はcode sandboxで公開しています。 htmlを見てもわかりますがhtml要素だけ見ても少し複雑です。何度か過去にも解説したようにinput要素そのものは使わずにdiv要素を使ってゼロからこのス

Read more

Electronでドロップアイコンを作る。(Win版)

jsとhtmlとcssでアプリが作れるElectronによるドロップアイコンを作る、のwindows版です。アイコンにファイルをドロップしてアプリケーションにファイルの情報を渡すシステムを使用した具体的な完成されたアプリケーションはこちらの記事をご参照ください。 macの場合はwill-finish-launchingイベントとopen-fileイベントでアイコンにファイルがドラッグされるのを待ってドラッグされたらコールバックでドラッグされたファイルを受け取りました。しかしこれらのイベント、ドキュメントを見るとわかるのですがopen-fileイベントはmac OSのみでwindowsではpro

Read more

フォームデザインを色々集めたサイト作った

Adobe CEPとか作ってるとフォームの実装が多いと思います。テキストボックスとかラジオボックス等。自分でいろいろ実装して使いまわす事なんかも多いのでフォーム関係の実装を一つのサイト(というかGit hub)に自分用に集めました。勿論たかがCEPです。ほとんどの人が自分自身でこういったフォームを作る必要性はあまり無いとえます。top coat、Adobe spectrumもしくはデフォルトの状態でも問題無いかもしれません。それでも自分でやりたいという方にも向けてGitHub、GitHubPageでサイトを公開しました。ただ今回React+styled-componentsで構築しているので普

Read more