imgが横幅を超える場合に横スクロールを可能にする#119
Conversation
nekko1119
force-pushed
the
make-img-scrollable
branch
from
9cc9502 to
10ba73b
Compare
|
https://cpprefjp.github.io/reference/random/discrete_distribution.html のように画像が複数あるページでdevelopper toolでjqueryを読み込んで当該コードを走らせて念の為検証しましたがスクロールできることを確認しました。 懸念点をあえてあげるなら長大なページにおける
|
| this.log.debug(`found ${Badge.sanitize($('main[role="main"] div[itemtype="http://schema.org/Article"] .content-body span.cpp'))} badges`) | ||
|
|
||
| // 横幅を超える画像を横スクロール可能にするためにスクロール用のdivで囲む | ||
| $('div[itemprop="articleBody"]').find('img').wrap('<div class="scrollable">') |
There was a problem hiding this comment.
これって最初からセレクターでimgタグまで絞り込んだほうが高速になったりしないですかね？(感覚論ですみません)
| $('div[itemprop="articleBody"]').find('img').wrap('<div class="scrollable">') | |
| $('div[itemprop="articleBody"] img').wrap('<div class="scrollable">') |
There was a problem hiding this comment.
最近の JavaScript 事情はよく知らないですけれど、jQuery ではなくネイティブの document.querySelectorAll や document.evaluate を使った方が速いのでは。jQuery のソースを検索してみました (querySelectorAll, querySelector, evaluate) が、別に最近のブラウザに合わせて querySelector などを使った実装にしている訳でもない (?) みたいですし。
後 jQuery 3.2.1 が使われているみたいですけれど、もう5年前のバージョンになるみたいですね。 あ、3.2.1 は @yumetodo さんが読み込ませた jQuery で、実際に使われているのは 3.5.1 なのですね。
追記: 後、kunai はホスト側で動いている? だとしたら、上のコメントは全く的外れなこと書いてるかもしれないのでお見捨て置きください。静的コンテンツの生成に使っているだけだったとしたら、効率とか余り考えなくて良さそうですし。
There was a problem hiding this comment.
kunaiはユーザー側のブラウザ上で動きます
jqueryのコードは後で調査してみますね
There was a problem hiding this comment.
kunaiはユーザー側のブラウザ上で動きます
なるほど。ありがとうございます。だとすると、疑問が…。この PR による DOM 修正は動的に行う必要のあるものなのでしょうか。静的に HTML を生成する段階で修正するべきの気がします。。
There was a problem hiding this comment.
はい、静的に生成できるのであればそちらが好ましいと思います。
markdownをhtmlに変換している処理は
https://github.com/cpprefjp/site_generator/blob/master/run.py#L82-L92
あたりになると思うのですが、どのように設定すればimgをdivでラップできるのかわかりませんでした…
自分だと時間がかかるか詰まってしまうかしてしまいそうなため、どなたかにお願いする形になってしまいそうです…
There was a problem hiding this comment.
Markdown -> HTMLの変換ライブラリも依存しすぎるとリプレースが大変なのは確かなので、変換後のHTMLにさらに変換をかけるレイヤーはあってもいい気がしますね。今後がラクになるので。
There was a problem hiding this comment.
このPRはそんなに大きくないですし、困っているようであればとりあえずマージしてしまって、別な仕組みを入れる際にrevertするのでもよいと思います。
There was a problem hiding this comment.
画像はそれほど使わないので速度はそこまで重要ではない気がしますが、 @nekko1119 さんどうでしょう。
There was a problem hiding this comment.
長らく放置されてしまいましたが、マージに向けて動きたいです。
私の当初指摘はマージするための阻害要因にはならない認識です。
@faithandbrave
|
マージに当たり、conflictだけは解決の必要がありますね・・・ |
|
@faithandbrave conflict解決しましたので確認をお願いします |
|
ありがとうございます。マージしました。 |
4 participants
モバイルなどで閲覧したとき、画像が表示横幅を超える場合にはみ出した右側部分をページ内では見られませんでした。
(画像を別タブで開けば見ることはできました)
そのため画像が横幅を超える時は横スクロール可能としました。見栄えのためスクロールバーは非表示にしたのでページの見た目は従来と変わらない想定です。
修正後のスクリーンショットです。PCのChrome,Firefox表示とChromeのdevtoolのiPhone12Proは確認しました。
上記以外のブラウザや実機のモバイルでの確認はしていません。
Chrome
Firefox
