amyu返信TweetPocketWebkit系ブラウザの拡張で、スクロールバーをカスタマイズするCSSの疑似要素に、「::-webkit-scrollbar」というのがあります。QiitaiPadやiPhoneなど、標準ではスクロールできる要素でも、デフォルトだとスクロールバーがでないので、「::-webkit-scrollbar」の機能を利用してスクロールバーを表示させるということを行っていました。下記のような感じです。Scrollbarこれを、iOS13にアップする前の端末で見てみると下記のようになります。青と緑のスクロールバーが表示されてるのが分かると思います。iOS13にアップデートすると、このスクロールバーのスタイルが無くなってしまいました。スクロール自体はできます(スクロールしている最中は、デフォルトのスクロールバーのスタイルのスクロールが表示されます)。独自拡張だから無くなっても不思議ではないけど、なぜ無くしたのだろう。下記のような処理です。{alert('APIの呼び出しに失敗しました');}Ajaxの書き方が古いとか言われそうですが、xhr.openの第3引数でfalseを指定すると、非同期ではなく、同期処理になります。することで、ポップアップブロックしていても今までならですが、iOS端末でiOS13(もしくはiPadOS13)にアップデートすると、同期処理のAjaxでもwindow.openが機能しなくなってしまいました(泣)。ちなみに、window.openの返り値はwindowオブジェクトではなく、nullになります。nullならポップアップを許可してくださいとメッセージをだすことができそうです。一つの対策として、Ajaxを呼ぶ前に空のページでwindow.openを呼んでおくという方法があるようです。{alert('APIの呼び出しに失敗しました');}これでうまくいけそうですね。一つ欠点としては、Ajaxで判断してエラーなどがあった場合も新しいウィンドウが開いてしまいますが、その場合は、「w.close()」で閉じればいいだけです。amyu返信TweetPocketimgタグのsrc属性を書き換えて画像を置き換えたい時ってありますよね。下記は青単色の画像と海の画像をラジオボタンで切り替えるサンプルコードです。Date.now();}サンプル:imgタグのsrc属性置き換え(その1)このサンプル、青単色の画像は1.52KBなのにたいし、海の画像は3.91MBです。3G」に変えて試してみてください)。見てのとおり、ラジオボタンとimgタグのsrc属性は海の画像のURLになっているのに、画像自体は青単色のままです。海の画像自体は読み込まれてから海の画像に切り替わります。これでも問題ないかもしれませんが、中には選択している画像(表記の画像)の種類と表示している画像が釣り合っていない状態があると問題があることもあるでしょう。少なくとも、現在自分が関わってるプロジェクトではそうです。読み込んでいる間はどうすればいいかというと、一つの策として、何も表示しないとすることが考えられると思います。そのように対応したのが下記です。Date.now();}サンプル:imgタグのsrc属性置き換え(その2)ようは、ラジオボタンを選択したら、imgタグのsrc属性自体は空にし、JavaScriptで作成したImageオブジェクトにラジオボタンで選択した画像のURLを指定します。そのImageオブジェクトに、loadイベント、つまり画像が読み込めた時のイベントを指定して、読み込めたらimgタグのsrc属性を置き換えるというような感じです。実際はもう少し、キャッシュなども考慮した処理をいれているのですが、選択した画像の種類と実際に表示している画像が異なってはいけないことがあれば、参考にしてみてください。WEBデザインの教科書)。今やってるプロジェクトでは、デザイン会社にHTMLを作ってもらい、それをこちらでVue.jsにあてはめて処理を追加するということをやっているのですが、デザイン会社から提供してくれたHTMLでは隙間が空いているのに、VueCLI3でビルドした結果では隙間が空いていないという現象が発生しました。value="ボタン3">普通にHTMLで書くと下記のようにボタンとボタンの間に隙間があきます。VueCLI3で結果を見てみると、隙間が空かなくなってしまいます。原因を調べてみると、VueCLI3での結果ではinputタグ同士にスペースや改行がないHTMLとなってしまっていることが分かりました。最初、iniline-blockの隙間に頼らないスタイル指定にしてほしいとお願いしようかと思ったのですが、調べてみると設定で切り替えることで解決できることが分かりました。Overflowどうやら、vue.config.jsに下記のchainWebpackの記述を追加すればいいようです。Componentをビルドするためのプラグインの設定を書き換える記述のようです。Loaderも理解してないのでこういうところでハマってしまいますね。vue-loader)。いうわけで上記設定をいれることにより、無事にHTMLタグ間にスペースが入り、ボタンの間にも隙間ができました。思いきや、別の連続したボタンの箇所で、デザイン会社のHTMLでは親divタグにすっぽり収まっている箇所が、VueCLI3の生成結果ではうまく収まらず、何がおかしいんだと必死で元のHTMLとVueCLIの生成したHTMLをChromeの開発者ツールで見比べました。HTML構造は全く同じで、適用されているスタイルも全く同じ......。悩んで理由が分かりました。デザイン会社に作成していただいたHTMLでは、スペースも改行もされずにボタンタグが横に並んであり、自分はそれじゃ見栄えが悪いからと改行してしまっていました......。その結果、VueCLI3の生成結果では隙間が空いてしまい、うまく収まらずに改行が発生してしまっていました......。iniline-blockの隙間に頼らないスタイル指定にしてほしいとお願いしたほうがよかったかな......(というより、本当なんで、改行やスペースが間にある連続したinline-blockの要素は隙間ができる仕様にしたんだ......)。2019/11/14追記:VueCLI4だとまた書き方が違うようです。amyu返信TweetPocket今やってるプロジェクトでは、ボタンやら画像やらがあるウェブアプリを作っているのですが、先日お客さんから右クリックしてもコンテキストメニューがでないようにしてほしいとお願いされました。false;}簡単な変更ですが、設定したからには簡単な動作確認はしないといけません。ブラウザを開いて画像の他、適当な箇所を右クリックしてコンテキストメニューがでないかどうかChromeで確認しました。その時に、「あれ?」と思った箇所が一つ。上記のアプリは、「+1」というボタンをクリックすると丈夫の数字をカウントアップするようにしてあるのですが、この「+1」のボタンにはactive疑似クラスを付けてクリック時にスタイルを変えるようにしています。すると、カウントアップは左クリックでしか行わないのに、スタイル自体は右クリックをしたときもactive疑似クラスのスタイルが適用されてしまいました。IEでもEdgeでも試したのですが、同じように右クリックでも適用されました。今まで長いことCSSを書いてきて、もちろんactive疑似クラスも何回も使ってきたのですが、右クリックでも適用されるということを今になって初めて気づきました......。そんな仕様だったのかと思い、試しにMDNを見ると下記のような記述が。擬似クラスは第1ボタン、つまり右手用のマウスではふつう一番左のボタンにのみ適用しなければならないと定義しています。MDNには「一番左のボタンにのみ適用しなければならないと定義」と書いてあります(いやいや、そんなはずはない。右クリックしても適用されたぞ)。調べてみると、stackoverflowに下記の投稿が。Overflow英語は苦手なのでGoogle翻訳して読んだのですが、やっぱりChromeやIEはCSS3の仕様に則っていないそうです。Firefoxは仕様にのっとっているらしく、確かにFirefoxで右クリックしてもactive疑似クラスのスタイルは適用されませんでした。CSS2.1の仕様では、左のボタンのみとは書かれてなかったので、右クリックでも適用されるのは間違ってなかったそうです。ちなみに、今やってるプロジェクトでは、右クリックしてもスタイルが変更してしまうのはダメだろうということで、JavaScriptでクリックした時にクラスを追加してスタイルを変更するという処理を入れることになりました......(泣)。世界一のアニメーション企業の今まで語られなかったお金の話(ブクログレビュー)当サイトは以下のサービス、ツールによって運営されています。