概要
こんにちはアレクスです!
今回は「ボタン配置時の注意」というお話です。
詳しい解説は追記していくとしまして、
簡単に注意点を記載しておきます。
GUIには欠かせないボタンの落とし穴
WebデザインやWebアプリの流れから行くと、
自然にa要素を使ってしまうでしょうし、
jQueryなどのUI系のライブラリにも、動的に挿入される要素として
aを使うようにしている場合は良く有りますね。
しかし、ElectronでのGUI製作にaを使用してしまうと、
なんともアグリーな状態になってしまいます。
chromeで見ているWEBページ、このページでも良いですので、
アンカー要素をドラッグしてみてください。
アンカーテキストと代替テキスト、リンク先アドレスが表示されている、バルーンみたいなものをドラッグできます。
せっかく綺麗にGUI作っているのに台無しです・・・
いろいろ調べてみましたが、aを使っている以上、回避策はないようです。
-webkit-app-region-: no-drag;ももちろん効果ありません。
Electron製のネイティブアプリを幾つか調べてみようと、
Atom と Kobito のソースを見させていただきましたが、
a要素を使用している部分は見受けられませんでした。
※全部チェックできていないので、確実ではありません。
span, div, liなどの要素指定でonclickを設定するか、
buttonを使用しています。
個人的見解と結論
Electronでaタグは使用しない方が良い
また、更に言うとbuttonも極力使用したくないなと感じています。
要素にfocusした時に、outlineが表示されてしまい。
これもクールじゃないと思いますね。
今回開発中でどうしても使わないといけなかった部分は、
スタイルシートでoutline: 0を指定することで対処しています。
今回はご紹介だけ、後日追記か別投稿いたします。
Original Post
追記
2016/10/21 追記
この問題は、バージョンによってはprebuildで起動している時に限定されるようです。明確にどのバージョン以降かは確認できていません。