iOS13でCSSでスクロールバー拡張できる::-webkit-scrollbarが使えなくなったよう

Facebook にシェア
Pocket

Webkit系ブラウザの拡張で、スクロールバーをカスタマイズするCSSの疑似要素に、「::-webkit-scrollbar」というのがあります。
参考:::-webkit-scrollbar – CSS: Cascading Style Sheets | MDN
参考:CSSでスクロールバーをカスタマイズ – Qiita

iPadやiPhoneなど、標準ではスクロールできる要素でも、デフォルトだとスクロールバーがでないので、「::-webkit-scrollbar」の機能を利用してスクロールバーを表示させるということを行っていました。例えば、下記のような感じです。

サンプル:Webkit Scrollbar

これを、iOS13にアップする前の端末で見てみると下記のようになります。

青と緑のスクロールバーが表示されてるのが分かると思います。しかし、iOS13にアップデートすると、このスクロールバーのスタイルが無くなってしまいました。

もちろん、スクロール自体はできます(スクロールしている最中は、デフォルトのスクロールバーのスタイルのスクロールが表示されます)。

独自拡張だから無くなっても不思議ではないけど、なぜ無くしたのだろう。

VueCLI3でinline-blockの隙間が無くなってしまう場合の対処法

Facebook にシェア
Pocket

HTMLでinline-blockの要素を改行で連続して並べると、横並びで間に隙間ができますよね(参考:inline-blockを指定した要素に隙間が空く理由 | WEBデザインの教科書)。

今やってるプロジェクトでは、デザイン会社にHTMLを作ってもらい、それをこちらでVue.jsにあてはめて処理を追加するということをやっているのですが、デザイン会社から提供してくれたHTMLでは隙間が空いているのに、VueCLI3でビルドした結果では隙間が空いていないという現象が発生しました。

具体的にいうと、下記のようなHTMLがあるとき、

普通にHTMLで書くと下記のようにボタンとボタンの間に隙間があきます。

ですが、VueCLI3で結果を見てみると、隙間が空かなくなってしまいます。

原因を調べてみると、VueCLI3での結果ではinputタグ同士にスペースや改行がないHTMLとなってしまっていることが分かりました。

最初、iniline-blockの隙間に頼らないスタイル指定にしてほしいとお願いしようかと思ったのですが、調べてみると設定で切り替えることで解決できることが分かりました。
webpack – Spaces are gone in HTML after upgrading to vue-cli 3 – Stack Overflow

どうやら、vue.config.jsに下記のchainWebpackの記述を追加すればいいようです。

どうやらこれは、VueCLI3が利用しているVue LoaderというVue Componentをビルドするためのプラグインの設定を書き換える記述のようです。VueCLI3が隠喩しているので今まで気にしてなかったのですが、Vue Loaderも理解してないのでこういうところでハマってしまいますね。

上記のページによると、VueCLI2まではpreserveWhitespaceというHTMLタグ間にスペースをつけるかどうかの設定がtrueだったそうなのですが、VueCLI3ではfalseとなったそうです(ちなみに、Vue Loader自体はデフォルトはtrueだそうです:オプションリファレンス · vue-loader)。

というわけで上記設定をいれることにより、無事にHTMLタグ間にスペースが入り、ボタンの間にも隙間ができました。

めでたしめでたし。

かと思いきや、別の連続したボタンの箇所で、デザイン会社のHTMLでは親divタグにすっぽり収まっている箇所が、VueCLI3の生成結果ではうまく収まらず、何がおかしいんだと必死で元のHTMLとVueCLIの生成したHTMLをChromeの開発者ツールで見比べました。HTML構造は全く同じで、適用されているスタイルも全く同じ……。

しばらく悩んで理由が分かりました。デザイン会社に作成していただいたHTMLでは、スペースも改行もされずにボタンタグが横に並んであり、自分はそれじゃ見栄えが悪いからと改行してしまっていました……。その結果、VueCLI3の生成結果では隙間が空いてしまい、うまく収まらずに改行が発生してしまっていました……。

やっぱり、iniline-blockの隙間に頼らないスタイル指定にしてほしいとお願いしたほうがよかったかな……(というより、本当なんで、改行やスペースが間にある連続したinline-blockの要素は隙間ができる仕様にしたんだ……)。

2019/11/14追記:
VueCLI4だとまた書き方が違うようです。

:active疑似クラスは右クリックでも適用する?しない?

Facebook にシェア
Pocket

今やってるプロジェクトでは、ボタンやら画像やらがあるウェブアプリを作っているのですが、先日お客さんから右クリックしてもコンテキストメニューがでないようにしてほしいとお願いされました。

ようは、画像を簡単に保存できないようにしてほしいとのことなのですが、そんなの簡単に解除できるのだけどと思いながら、下記のスクリプトを追加して右クリックしてもコンテキストメニューがでないように修正しました(参考:JavaScriptによる右クリックの禁止・禁止を解除する方法 – Qiita)。

簡単な変更ですが、設定したからには簡単な動作確認はしないといけません。ブラウザを開いて画像の他、適当な箇所を右クリックしてコンテキストメニューがでないかどうかChromeで確認しました。その時に、「あれ?」と思った箇所が一つ。

上記のアプリは、「+1」というボタンをクリックすると丈夫の数字をカウントアップするようにしてあるのですが、この「+1」のボタンにはactive疑似クラスを付けてクリック時にスタイルを変えるようにしています。そうすると、カウントアップは左クリックでしか行わないのに、スタイル自体は右クリックをしたときもactive疑似クラスのスタイルが適用されてしまいました。IEでもEdgeでも試したのですが、同じように右クリックでも適用されました。

今まで長いことCSSを書いてきて、もちろんactive疑似クラスも何回も使ってきたのですが、右クリックでも適用されるということを今になって初めて気づきました……。

そんな仕様だったのかと思い、試しにMDNを見ると下記のような記述が。

複数ボタンのマウスを使うシステムでは、 CSS 3 は :active 擬似クラスは第1ボタン、つまり右手用のマウスではふつう一番左のボタンにのみ適用しなければならないと定義しています。

あれ? MDNには「一番左のボタンにのみ適用しなければならないと定義」と書いてあります(いやいや、そんなはずはない。右クリックしても適用されたぞ)。

いろいろ調べてみると、stackoverflowに下記の投稿が。
css “:active” with right click, inconsistencies with browser implementation – Stack Overflow

英語は苦手なのでGoogle翻訳して読んだのですが、やっぱりChromeやIEはCSS3の仕様に則っていないそうです。Firefoxは仕様にのっとっているらしく、確かにFirefoxで右クリックしてもactive疑似クラスのスタイルは適用されませんでした。ただし、CSS2.1の仕様では、左のボタンのみとは書かれてなかったので、右クリックでも適用されるのは間違ってなかったそうです。

ちなみに、今やってるプロジェクトでは、右クリックしてもスタイルが変更してしまうのはダメだろうということで、JavaScriptでクリックした時にクラスを追加してスタイルを変更するという処理を入れることになりました……(泣)。

vue-cliでビルドした本番環境を、ルート以外で動かす

Facebook にシェア
Pocket

先日の記事、Vue.jsでmousedownとtouchstartのイベントを扱う | while(isプログラマ)で作成したプログラムなんですが、ビルドしたうえでvuejsフォルダをサーバに作ってアップして公開しようと思ったらうまく動きませんでした。

原因は単純に外部ファイルの指定が、「」とルートからの指定となっているため。開発環境はともかく、本番環境はこれだと困るということもあります。

そういう場合、プロジェクトのルートフォルダに、「vue.config.js」というファイルを作成して、下記のように設定。

これは、本番環境では/vuejs/を基点としたファイル構成にし、開発環境ではルートを基点とするファイル構成ととらえるという指定です(参考:Configuration Reference | Vue CLI)。こういうことでビルド時に外部ファイルの参照が、「」となり、うまく動かすことができました。

前回作成したプログラム:MousedownとTouchstart

Vue.jsでmousedownとtouchstartのイベントを扱う

Facebook にシェア
Pocket

(Vue.jsと書いたけど、そんなにVue.jsは関係ない)

業務でVue.jsを用いてウェブアプリを作っているのですが、そのアプリのうち、あるボタンをクリック(タップ)ではなく、触ったとき、つまりマウスのボタンを押し下げた時やタッチデバイスに触れた時にイベントが発生してほしいという要望を受けました。

それを聞いた瞬間、「Pointer Events」が使えると思いました。過去にここのブログでも紹介しています(現時点でIEのみ実装されてるPointer Eventsが超便利 | while(isプログラマ))。過去にはIEでしか実装されてなかったそろそろ他のブラウザでも実装されてるのではないかと思い、ためしにpointerdownで実装してみました(参考:pointerdown – Event reference | MDN)。試しにChromeで動かしてみると、想定通りに動きました! やったー!

と思ったのもつかの間、「できました!」と上司に伝えたところ、「iPhoneで動かないんだけど」とのこと。なんと、PointerEventsはSafariには実装されてませんでした(泣)。
参考:Pointer events:Can I use… Support tables for HTML5, CSS3, etc

仕方がないので、mousedownとtouchstartで書き直すことに。まあ、一つ記述が増えるだけだしいいか。多分、マウスボタンを押すとmousedown、タッチパネルでタッチするとtouchstartのイベントが発生するだろうしと思って、下記のような感じで書きました(イベント内にはconsole.logの記述しかしてませんが、実際には通信処理を行う記述でした)。

うんうん。確かに、マウスでもタッチパネルでも反応しますし、押すとボタンの色も変わってくれます。これでいいかと思って上司に報告。しちゃダメでした。「二回発生しているように思うんだけど」と……。いやいやそんな馬鹿な。実はタッチしたときに2か所で反応しちゃってるだけじゃないの? なんて思いましたが、試しにChromeのDeveloper Toolのエミュレータで見てみるとtouchstartもmousedownのイベントも発生しました(しかも、mousedownのイベントが発生しない時もある)。

調べてみると、確かにタッチデバイスでもマウスイベントが起こるものらしい。preventDefault()でデフォルトイベントをキャンセルするとmousedownは発生しないらしい(参考:TouchEvent と MouseEvent の両方をサポートする – ウェブデベロッパーガイド | MDN)。仕方がないので、Vue.jsのpreventイベント修飾子を使って実装することに。

この実装で何回か試してみて確かにイベントが一回しか実行されないようになりました。これで一安心。と思ったのもつかの間。「Androidだと押した感じがしないのだけど」と。いやいや、active疑似クラスでボタンの色は変えてるし……。と思って自分のAndroidで試してみるとタップしてもボタンの色が変わりませんでした……。preventDefault()を行うことで、active疑似クラスのスタイル指定が反応されなくなってしまったのでした。仕方がないので、自分でアクティブ化用のクラスを追加し、ポインターがはずれるとクラスを外すことに。

早く、PointerEventsが使えるようになってくれないだろうか。

2019/02/24追記:サーバにもアップしました。
MousedownとTouchstart