-
Notifications
You must be signed in to change notification settings - Fork 157
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
IE11/Edgeで最低限閲覧可能な見た目にする #477
Comments
画像付きの詳細な報告ありがとうございます。これにはHTMLとCSSとJSそれぞれの問題がありますので、僕が把握している範囲のことを順を追って書きたいと思います。 HTMLcpprefjpのhtmlは、以前より編集者各位のご尽力のおかげで、文書構造としてはかなり適切な形になっています。このため、GoogleのクローラなどJSが無効化されているrobotsが来ても正しくパースできています。 僕の方でhtmlに行った変更は、(cssを.cssファイルに移動するなど)古いコードを削除するものです。この時に、html5shiv.js (IE8以下でHTML5/CSS3を使えるようにするパッチ)など事実上廃止されていた物の読み込み処理は削除しました。これがIE11に影響を与えている可能性はあります。 w3mなどのテキストブラウザでそこそこ見れるのは、この文書構造の正しさのおかげです。以前のサイドバーで静的に生成されていたサイドバー用のhtmlも、構造が正しいです。ただ、このサイドバーはサイズが肥大化するなど様々な問題を抱えており (参考) 、フロントエンドのデザイン修正を抜きにしても対応する必要はありました。 htmlについては大幅な変更が必要無いので、僕としてもこれから大規模な変更をする予定はありません。 CSScpprefjpのCSSは、元々はbootstrapベースに様々な要素を追加したものでした。bootstrapのレイアウトは全て kunaiのCSS実装では、floatの代わりにCSS3のflexboxを(全面的に)使っています。flexbox自体は2014年くらいから広く使われ始めた技術なので、これ自体は極端に先鋭的なものというほどでもないかなと思っています。 https://caniuse.com/#feat=flexbox flexboxは、IEでは最終版の IE 11 でも実装にバグがありすぎて実質使えません。以前のデザインに戻すことは可能ですが、サイドバーのことを考えると float を使ってゼロから書き直す必要があります。僕の技術力の問題で僕は float でサイトを構築することができないので、誰かが対応してくれた場合は IE 11 を検出して切り替えるコードは3行くらいで書けます。 ブラウザの印刷機能で印刷をする時に正しく表示されるようにするのは新規の機能になるので、余裕ができたらやりたいなと思っています。 JScpprefjp の中で特別なJavaScriptコードは2箇所あります。クイックジャンプの検索窓とサイドバーです。DOM生成にはjQueryを使っているのでモバイルでもレガシーでも基本的に動くと思います。言語自体はES2017ですが、最終的にES2015にトランスパイルされてデプロイされているので、ブラウザで解釈できます。 float で全てを実装し直した css をどなたかが書いて頂けるのであれば、僕はIE11向けのフォールバック処理をすぐに実装する用意はできています。 ※「IE11のシェアが何%だから〜」という数字の話を抜きにしても、僕はIE11への対応自体の必要性は感じています。 ※いまのサイドバーのJavaScriptの実行が重すぎる問題は、数日以内に対応してデプロイします。 |
※大掛かりな修正を入れずとも、IE11向けの特殊なHTMLコメントを埋め込むことでcssを全て以前のものに切り替える処理を実装することは出来ます。ただし、その場合にそれがどういう風に見えているかを僕が継続的に検証することが出来ないので、フロントエンド方面でフルタイムで協力して頂ける方がどうしても必要です。 追記:条件付きコメントはIE10で削除されたらしいので、上記の内容は現在では正しくないです。対応するためには、IE11を検出する専用のJavaScriptコードを新しく書く必要があります |
@usagi cpprefjp/kunai#31 で見た目が多少マシになったと思うのですが、ローカルのIE11で確認して頂けますか? |
@yumetodo あ、これです。この画像の2枚目の情報が知りたかった。
https://msdn.microsoft.com/ja-jp/library/hh673531(v=vs.85).aspx
|
ref: cpprefjp/kunai@bd89f41#r149858589
↑GitHubの内部参照のURLの自動変換先が間違ってるのでリンクにしてないです(これはGitHubのサポートに報告しておきました) |
そりゃそうとこのkunai-vender.js:24,336959から飛んできてるエラーはなんだろう・・・ M.OPTS_DEFAULT={klass:{search_button:["fa","fa-fw","fa-binoculars"]},google_url:new URL("https://www.google.co.jp/search"),force_new_window:!1} 該当箇所はおそらくこれなんですが・・・ |
@yumetodo 該当箇所がそれかどうかは僕にも確信が無いですが、(IE11で)JavaScriptが全部死んでいるのはかなりスコープが広い問題なので、一概にどうとは言えないですね。 |
わかった var u = new URL("https://www.google.co.jp/search"); が
て言ってくる。 |
おかしいなぁ、mdn見る限りサポートしてるはずなんだが・・・ と思ったら日本語版のmdnが嘘ついていやがる・・・ 英語版には
って書いてあった |
@yumetodo ですから、僕が上のコメントで書いたように、IE11でJavaScriptが動かないのはもっとスコープが広い問題で、1つ1つの動作を修正していっても完全対応には果てしない道のりがあります。 僕は、現行のcpprefjpがIE11でも最低限まともに見れるようになることを期待していて(つまりusagiさんの要望と全く同じ)、そのため cpprefjp/kunai#31 を実装しました。これは純粋にCSSの問題で、JavaScriptはここには関係ありません。 IE11でJavaScriptが全部死んでいるのは、CSSではなく https://babeljs.io/ の問題です。つまりkunaiが使っているbabelのオプションをいじってtransform-runtimeの出力結果を直すことで問題は解決します。しかし、表示に使っているCSSが全面的にFlexboxを使っているため、JavaScriptが動くようになったとしても正しく表示できる可能性はゼロです。 つまり、現実問題としてIE11をサポートしていない以上、JavaScriptのエラーの詳細を追求する必要はないです。エラーが出ても最低限表示できるようになればそれで良いです。 |
refs #476 |
なんでEdgeまで・・・? |
EdgeだとFlexboxの実装がまともなので、たぶん技術的に対応できます。 そのため、もし、IE11で最低限の見た目にする過程でIE11/EdgeにおけるJSのエラーが一掃できれば、Edgeへの対応が速攻で完了する可能性が高いです。IE11のレガシーのための対処にかかった作業が、そのままEdgeへの対応に活かせます。 ※厳密には別々の問題なのですが、Issueをこれ以上分割しなくてもいいんじゃないかなと思いました |
了解です とりあえず ・・・と思ったら修正入りだしてた・・・ |
URL は全部Polyfill化したのでURL周りのエラーは全部殺しました! |
URL周りがどうにかなった影響でIEでもすこしましになりました
が出ています |
@saki7 現在 |
@saki7 そう思ってこっちでもbabelとWebpackの設定読み返してるんですがががが |
まあ確かになぁ、という思い。やっぱpolyfillからは逃げられなかったよ
うーん、やっぱり少量とは言えglobal汚染するのは精神的に病みそうなのでpolyfillをglobal汚染しない形で読み込んで手動で置換します・・・ |
|
僕の説明が甘かったです。途中からJavaScript周りのIE11の話をEdgeの話だと誤解していたので、説明不足に気づくのが遅れました。 IE11への対応方針まず僕の方針として、IE11はサポートしません。これはこのIssueの一番最初のコメントで書きました。 ポリシーとしての理由は、IE11は既にベンダーの開発自体が終了しているからです。 技術的な理由は、kunaiとcrsearchの内部のCSSが完全にFlexboxで書かれているため、仮にJavaScriptのコードのエラーを全て解消しても、見た目が正しく表示される可能性がゼロだからです。 そういう大前提があって、僕は「誰かがIE11向けにfloatレイアウトでCSSを全部書きなおしてくれるならそれにフォールバックする処理は追加する」と書きました。これは今でもそう思っています。僕が使っていた“対応”という言葉は、誰かが書いてくれるなら僕は切り替える処理だけは書くということです。つまり、僕の書くコード(css, js両方)でIE11がサポートされる可能性はゼロです。 ここで一旦このIssueの本題に戻りますが、本題はあくまで「最低限閲覧可能な見た目にする」ということです。要するに、今のcpprefjpの本番環境をChromeで開いてそのままJavaScriptをオフにした時の表示が僕が最低限閲覧可能と考えている見た目です。usagiさんの報告時点では、IE11での見た目がChromeのJSオフ時の見た目とあまりにも乖離していたため、最低限の対応はするというつもりで色々な修正を今まで入れてきました。 Edgeへの対応方針僕はEdgeには対応する気はあります。現行のブラウザだからです。ただ、僕はWindowsの検証環境を持っていないため現実的にはEdge向けのコードは一切書けません。ただ、誰かがEdge向けの対応処理を実装してくれる場合は、それを全面的にサポートするつもりですし、それは100%取り込むことを約束します。 kunaiにおけるpolyfillの導入方針前提として、polyfillは使いません。kunaiの実装方針としてkunaiが無効化されてもページが動くということがベースになっており(READMEを参照)、グローバル汚染のpolyfillをした時点で責任が持てないからです。 現実にはMathJaxやGoogleアナリティクスなどのコードが現時点でも完全に独立して読み込まれているため、polyfillの結果そこで何が起こるかは本当に不定なので、仮に問題が何も起こらなかったとしてもpolyfillはしません。 それならローカルオブジェクトにcore-jsのpolyfillを保持して使えば良いと思うかもしれません。それをやった場合、僕が今まで書いた問題が全て一発で解決するのは事実です。しかし、あらゆるコードを全てそのローカルオブジェクト経由で呼び出す必要が出てくるので、これはkunaiの開発者として生理的に無理です。 URLはpolyfillしたのでは?という疑問厳密にはあれはpolyfillではないです。普通のCommonJSのライブラリなので、グローバルオブジェクトは触りません。もともと、URLはECMAScriptというよりWeb APIの一部で、仕様レベルで何も固まっていないこと(をあとから知った)から外部ライブラリを使うように切り替えました。 yumetodo さんの調査内容についてyumetodo さんの調査内容は掲題の 「IE11で最低限の見た目にする」という点に加えて「Edgeに対応する」という2点でかなり重要度が高いので無駄になることは絶対にありません。 ここの前者(IE11)は、いま説明したような状況なのでそこそこ見れるようになればその時点で調査とワークアラウンドは打ち切ってください。 後者(Edge)は、babelで変換不可能なレベルで実験的な提案段階の機能をどうやって置き換えればpolyfillせずに気持ちよく書き直せるかという点を僕は今考えています。それを考える上で、不具合が起きている部分は開発方針としてワークアラウンドしても良いと思っています。 ここですが、実はkunaiでここに該当するものはもう無いんじゃないかと思っています。たぶんURLがこれに該当してたんですが、URL以外で純粋にEdgeで動かないものが無ければもうたぶん無いです(あったらすいません)。 |
Edgeについては polyfillについては
yumetodo/crsearch@e73ae43 IE11について 祝!JSが最低限動くようになった |
@yumetodo ですから、IE11はサポートしません!!サポートしちゃダメです。動いたから良いという話ではありません!!(泣)
IE11をサポートしない理由は散々書きました!!長文で申し訳ないですがもう一度読んでください。 polyfillに関してもグローバルを汚染しないpolyfillなら使って良いという話ではありません。
僕は既に以下のように書いています:
yumetodoさんのIE11向けの現状のcore-jsワークアラウンドは、今はこのレベル(1ファイルあたり2〜3箇所)で済んでいますが、 例えば
cpprefjpは基本的にボランティアです。なので、フロントエンドでは、フロントエンド周りのコードは最悪メンテ出来る人が全員死亡してもどうにかできるようにしています。そのために神経質なほど方針を設定しています。 今まで話したこと以外にも、僕はkunaiの技術選択はすごく慎重にやっています。以下はこのIssueの本筋とは全く関係が無いのでポエム程度に捉えていただきたいのですが、デザインチームとして書いておきます。 例えば、TypeScriptを使っていないのはTypeScriptはそもそもJavaScriptではなくて別の言語だからで、ESNextで書いているのはECMAScriptの次期規格だからです。これだったらフロントエンドに特化していない人でも「better JavaScript」として書けるはずです。つまり、メンテの障壁が天と地ほどの差があります。TypeScriptが3年後生き残ってるかどうか僕は個人的にかなり怪しいと思っていますが、ECMAScriptなら絶対にその心配が無いです。 例えば、ReactやMithrilを使わずにDOM構築をjQueryで完結させているのは、いくつか理由があります。
こういう繋がりで考えると、IE11のためにローカルpolyfillを入れていくのはあまりにもデメリットが多すぎます。Edge対応のためにどうしてもpolyfillを入れるならそれはまだ分かります。そこの部分は明確に違います。 |
上記の理由により、今出ているPRのなかでEdgeの対応に必要不可欠な物が無いのであればマージはしません。 |
僕はEdgeでここのコードが動かない理由は1つしか思いつきません。global symbol registryのバグです。これが原因でない場合は、1行1行console.logしてデバッグするしかないです。 これがIE11のことを指しているのであれば、IE11ではそもそもsymbol自体のサポートが無いので諦めてください。 もう1つ考えられる原因としては、 |
babel-runtimeの仕様上、メソッドの追加にはどういう形であれpolyfillの追加が避けられません(promiseのようなクラス追加のみならbabel-runtimeで完結する) polyfillに関しては諦めて受け入れる必要があります。メンテ可能性を考えればローカルオブジェクトなんてナンセンスで(CIの掛けようすらない)kunaiより大きな枠で(site_generator?全部のJSライブラリを管理しているところ)global汚染を受け入れてpolyfillするべきというのが私の意見です。kunai内でglobal汚染するのはまずいと思いますが、外側でどのみちmathjaxなりkunaiなり(本当はjQueryもkunaiの外にあるべき)JSライブラリの管理をせねばならんのですから、そこでpolyfillも管理するのは不自然ではないし、デザインチーム以外がメンテできないというのは当たらないのではないでしょうか? IEサポートのpull requestについては一旦取り下げますが、IE11は開発は終了してもご存知の通りサポートは継続しており、またシェアも無視できない規模を保っています。サイドバーの中身がすっからからんというのは明らかに見た目上差し支えあるのではないでしょうか? Mithrilの件ですが、あれはjQuery職人芸もmithril使うのもメンテ可能性は大して変わらないだろうから書きやすい方でいいのではという意図での提案でした。 |
その場合はWebpackのビルドが通らないですね、最初それで小一時間くらい悩んでました。ついでにいうとシンボリックリンクが含まれているrepoの扱いはWindowsだと事前準備が必須でした(グループポリシー、
私の技量ではこれ以上追うのは難しいです。私に協力できそうなのは、global symbol registry周りのテストケースを @saki7 さんに書いていただいて私が実行するくらいです、お役に立てなさそうで申し訳ない。 |
はい。正しいです。しかし、kunaiのコードでそのような先進的すぎるインスタンスメソッドを使っている箇所は無いというのが僕の認識です。人間らしいコードを書くために最低限必要な新し目のESのインスタンスメソッドは、現実としてChrome/Firefox/Edgeにはだいたい実装済みなので、問題になっていません。
グローバル汚染をする場所は関係ありません。kunaiでグローバル汚染しようが、site_generatorの範疇で1つ独立したpolyfill用のjsを作ってグローバル汚染しようが同じです。どこでグローバル汚染をしても、その影響先はページ内で読み込んでいる全てのjsファイルに及びます。「polyfillを管理する」ということ自体がナンセンスです。 cpprefjpはSPA(シングルページアプリケーション)では無いので、誰かが気軽に好きなjsファイルをプラグインとしてhtmlに1行追加してもそれを動くことを保証する必要があります。たとえば、今後、合意形成の結果、何かしらのjsのウィジェット(ツイートボタンとか?)をcpprefjpに追加することになったとします。その時にグローバルなpolyfillをやっていると、「同等な機能をkunai側で追加してください」としか言えなくなります。これは明らかに問題があり、許容できません。 「polyfilによる汚染で現実に問題が起こることは無いんだから、やればいい」と思うかもしれません(僕自身も最初はそう思っていました)が、現実に問題が起こった有名な例はあります。 https://blog.jxck.io/entries/2017-02-17/polyfill-implementation-guideline.html 「jQueryもkunaiの外にあるべき」というのは、単純に指摘としてあたりません。これは、C++でいうなら「Boostライブラリはアプリの外の標準のインクルードディレクトリの物を使うべき」という指摘と全く同じです。これは許容できません。
「cpprefjpの執筆者の大多数がその環境を使っていて執筆に支障が出る」という話であれば無視できないと思いますが、そういうことでは無いと思っています。「IE11はまだサポートが続いている」という点を挙げるのであれば、サポート終了の2025年10月までkunaiでもサポートするということになると思いますが、これを含んだ要望ですか? ちなみに、 cpprefjp/kunai#16 という要望は上がっています。これをバックエンドで実装した結果最低限のナビゲーションがhtml内に静的に埋め込まれれば、それをデフォルトでサイドバーの中のプレースホルダーとして扱うことも可能なので、そこに最低限の何かしらのリンクは出ると思います。なので、これが実装されれば「すっからかん」という状態からは脱却できます。 Windowsにおけるシンボリックリンクが含まれているgitリポジトリの扱いは個人設定の範疇なので、特に対応はしません。 global symbol registryの件は、どこが死んでいるのかエスパーをすることは出来ますが、あくまでエスパーです。Windows環境が無いので。そのため、テストケースを書くとかは出来ません。
はい。URL周りをはじめとした調査ありがとうございます。アサインからは外しておきます。 |
本筋からは外れますが、デザインチームとして1つ見過ごせない点があったので補足します。
jQueryを使っているのはcpprefjpで高度なUIが必要無いからで、この詳細は #477 (comment) で書きました。 つまり、jQueryはほとんどDOM構築のためだけに使っています。僕自身は、DOM構築に特化したモダンなライブラリがあるならそっちを使いたいという気持ちがあります。そのため、 @yumetodo さんからMithrilの提案を頂いた時は、実際に全てのコードをMithrilで書き直して試しています ( cpprefjp/crsearch#2 (comment) ) 「jQuery職人芸」というのは @yumetodo さんは単に深い意図はなくこういう表現をされているのだと思いますが、この表現はあまりにも見る人に嫌な印象(cpprefjpがレガシーなjQueryの書き方をしているという印象)を与えるので、僕としてはこれは違うということはここで書いておきます。 例えば、 jQueryの中でも、 jQueryを使うのとMithrilを使うのでメンテ可能性は大して変わらないというのは、僕は絶対にそうは思いません。天と地くらいの差があると思っています。 |
私はcpprefjpのアクセス解析をできる立場にないのでIE11にどれくらいの需要があるかはわかりませんが、10~15%程度はアクセスがあるのではないかと推測しています(Qiitaの自分の記事のアクセス解析などから推測)。IEのシェアはサポートが終了しないとなかなか落ちなかったのがこれまでだと認識しています。そういう観点から開発上の大きな障害にならない限りにおいて、IE11はサポート終了までkunai含めたcpprefjp全体でサポートされるべきだと私は思っています(要望)。 余談でかつ話がそれますが、IEと同じく開発上の障害になりつつあるAndroid・iOSのブラウザをどうするべきなんでしょうね・・・。iOSはようやくiOS9のユーザーが減ってきてるのでまだいいとしてAndroid 4.xおよび5.xのユーザーも合わせて多分3%くらいいると推測しているんですが・・・。 |
cpprefjpにおけるIEのシェアの実際の割合は、広く公開されている日本の統計のIEの割合とほとんど同じです。 polyfillは「開発上の大きな障害」になるので、僕はサポートしません。 その他のレガシーブラウザやレガシーモバイル環境については、解決する必要性があると感じるのでしたら、別のIssueを cpprefjp/kunai に立ててください。 |
そういう意図はなかったのですがそれは失礼しました。 |
提案
背景
参考1 IE11
参考2 w3m
CC: @saki7
The text was updated successfully, but these errors were encountered: