Electron と Ruby でネイティブアプリを作る方法 – 2 ボタンの配置時の落とし穴

概要

こんにちはアレクスです!

今回は「ボタン配置時の注意」というお話です。

詳しい解説は追記していくとしまして、
簡単に注意点を記載しておきます。

GUIには欠かせないボタンの落とし穴

WebデザインやWebアプリの流れから行くと、
自然に、a要素を使ってしまうでしょうし、
JqueryなどのUI系のライブラリにも、ダイナミックインサートエレメントとして
aを使うようにしている場合は良く有りますね。

しかし、ElectronでのGUI製作にaを使用してしまうと、
なんともアグリーな状態になってしまいます。

chromeで見ているWEBページ、このページでも良いですので、
アンカー要素をドラッグしてみてください。

アンカーテキストと代替テキスト、リンク先アドレスが表示されている、バルーンみたいなものをドラッグできます。

😮

せっかく綺麗にGUI作っているのに台無しです・・・

いろいろ調べてみましたが、aを使っている以上、回避策はないようです。
-webkit-app-region-: no-drag;ももちろん効果ありません。

Electron製のネイティブアプリを幾つか調べてみようと、
AtomKobito のソースを見させていただきましたが、
a要素を使用している部分は見受けられませんでした。
※全部チェックできていないので、確実ではありません。

span, div, liなどの要素指定でonclickを設定するか、
buttonを使用しています。

個人的見解と結論

Electronでaタグは使用しない方が良い

また、更に言うとbuttonも極力使用したくないなと感じています。

要素にfocusした時に、outlineが表示されてしまい。
これもクールじゃないと思います。

今回開発中でどうしても使わないといけなかった部分は、
スタイルシートでoutline: 0を指定することで対処しています。

今回はご紹介だけ、後日追記が別投稿いたします。

投稿者:

Alex.js

プログラマーのアレックスです。 日本人の母と、アメリカ人の父の間に生まれました。 出身は、ITの聖地シリコンバレーのあるサンタクララです。 Hi. I'm Alex.J.Smith. It's Japanease American born in Santa Clara CA.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です