Skip to content
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.

Sign up for GitHub

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

Jump to bottom

ヘルプの「Windows 10 でのファイル拡張子関連付け」「Grep」「Grep置換」の画像がやたら大きくて見づらい問題に対処 #1328

Merged
merged 4 commits into from
Jul 4, 2020
Merged

ヘルプの「Windows 10 でのファイル拡張子関連付け」「Grep」「Grep置換」の画像がやたら大きくて見づらい問題に対処 #1328

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8ddcb88
「Windows 10 でのファイル拡張子関連付け」「Grep」「Grep置換」の画像がやたら大きくて見づらい問題に対処
beru Jun 28, 2020
63b22f8
「Windows 10 でのファイル拡張子関連付け」ページの画像が大きく表示される問題に対処
beru Jun 28, 2020
5432a98
ヘルプ更新
beru Jul 3, 2020
af16b9e
レビュー指摘対応
beru Jul 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion help/sakura/res/HLP000067.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<noscript>[<a href="HLP000001.html">目次</a>]<br></noscript>
<h2>Grep</h2>

<img src="images/Grep.png"><br>
<img src="images/Grep.png" style='width:50em;'><br>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • HTMLの属性値を囲う引用符には &apos; ではなく &quot; を使用すべきです。
  • 画像幅の単位は cssピクセル を利用すべきだと思います。
    • em は要素に指定されたフォントの幅を基準にした単位なので、フォントを変えるとズレたりするのでめんどくさいです。文字サイズの変更に追随させたい特殊な状況を除いては、画像サイズにフォント幅を基準とする単位を利用すべきじゃないと思います。
    • 親要素に対する相対サイズ(パーセント)で指定してもよいと思います。

Copy link
Contributor Author

@beru beru Jun 28, 2020 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • HTMLの属性値を囲う引用符には &apos; ではなく &quot; を使用すべきです。

HTMLの規格としては属性をシングルクォートで囲うのでも問題無いと思うんですけど、他の記述に合わせるとなるとダブルクォートで囲った方が良いかもしれないですね。

  • 画像幅の単位は cssピクセル を利用すべきだと思います。

    • em は要素に指定されたフォントの幅を基準にした単位なので、フォントを変えるとズレたりするのでめんどくさいです。文字サイズの変更に追随させたい特殊な状況を除いては、画像サイズにフォント幅を基準とする単位を利用すべきじゃないと思います。
    • 親要素に対する相対サイズ(パーセント)で指定してもよいと思います。

Chrome等のウェブブラウザで表示する場合はOSのディスプレイ設定の表示スケールのパーセントに応じて拡大して表示されます。ピクセルという絶対単位で指定しているのに本来はおかしな話ですが、そうでもしないと高DPI環境でウェブブラウザを使った時に色々なサイトで画像が小さく表示されてしまうのでそういう挙動にしているんだと思います。

ヘルプファイル(*.chm) のビューワーはウェブブラウザとは挙動が違っていて、OSのディスプレイ設定の表示スケールに関係なく画像が等倍サイズで表示されます。つまりピクセル単位で指定すると、表示環境のDPIによって画像のサイズが異なって表示される問題がそのまま残ります。つまり画像のサイズを指定していない現状と同じ問題が残ります。

じゃあどの単位を使うべきなのか？という疑問が浮かびますが、試しにパーセントで指定すると親要素に対する相対サイズで表示されます。ヘルプのウィンドウのサイズを変えるとそれに応じて画像のサイズが変わります。これはちょっと使っていて不思議な感じですね。自分はこの挙動は良くないと思うのでパーセントを単位に使うのは反対です。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CSSで手軽に対応しましょう！って提案には賛成します。

CSSで対応しないで画像を #1325 で @arigayas さんや @k-takata さんが作ってくれたものに差し替える対応でも良い気もしてきました。

高DPI環境で chm ファイルを表示すると（DPIが100%の環境でキャプチャした）画像が小さく表示されてしまう問題がありますが、それってhh.exe (HTMLヘルプ実行プログラム) の問題であって最近のウェブブラウザで表示すると拡大して表示されるのでそこまで気にはなりません。

Microsoftはもうレガシーな hh.exe を更新してくれない事を考えると、それにまともに向き合うのもなんか徒労に感じてきました。あと高DPI環境でHTMLヘルプを表示すると、ページ上の画像が小さく表示される問題以外にGUI部分のアイコンが小さく表示されてしまったりして微妙に使いづらいです。

その後調べてみたところ、img タグの srcset 属性を使う事でデバイスのDPIに合わせて別々の画像を読み込むように指定出来る事が分かりました。きっと最近のウェブサイトのコンテンツを作っている人達はこれを活用してるんだと思います。

Copy link
Contributor Author

@beru beru Jun 28, 2020 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@k-takata さんが #1325 (comment) に添付してくれた画像を使うように変更しました。これでHTMLヘルプの「Windows 10 でのファイル拡張子関連付け」ページを表示した際に画像がやたら大きくて見づらい問題は解消されます。

あと img タグの srcset 属性も使用してみました。高DPI環境でChromeブラウザなどでそのページを表示したときには、元々使っていた画像が表示されます。解像度が大きい画像ですがブラウザ側で引き延ばされて表示はされないので見づらく無いです。高DPIではない環境、つまりディスプレイ設定の表示スケールが 100% の動作環境で表示すると、今回追加した100%でキャプチャした小さい画像が使われる為に見やすく表示されます。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

HLP000067.html と HLP000362.html にも同様の対処をした方が良いですね。最近のペースだと #1323 の問題への対処がすぐに完了するとは思えないので、こちらで表示スケール 100% のスクリーンショットを取って使う事にします。

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cssで指定するpxは cssピクセル だから、表示環境のdpiに応じてサイズが変わるのは cssの仕様 と言ってます。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

WWW創世記の経緯により、シングルクォートで囲う記述や引用符を省略する記述も「許容」ではあると思います。
専門家じゃない人にホームページを作ってもらうためにあいまいな記述を許容しとく必要があったからです。
で、ぼくらって専門家じゃないんでしたっけ？ということで指摘をした感じです。

そんなに強くこだわる気はありませんけど。

私が無知なのかもしれませんが、シングルクォートで囲むよりダブルクォートで囲む方が推奨されるというのは初めて聞きました。

https://dev.w3.org/html5/html-author/Overview.src.html
なお規格には下記のように書かれてました。

There are four slightly different syntaxes that may be used for attributes in HTML: empty, unquoted, single-quoted and double-quoted. All four syntaxes may be used in the HTML syntax, depending on what is needed for each specific attribute. However, in the XHTML syntax, attribute values must always be quoted using either single or double quotes.

検索してもシングルクォートで囲む書き方が推奨されないという情報はまだ見つけることは出来てません。

なお自分はマークアップの専門家ではないです。またwebの技術には詳しくないです。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cssで指定する px は論理単位で cssピクセル という論理単位です。
デバイスピクセルが実際の1ドットを表すのに対し、cssピクセル は 72dpi 相当の幅・高さを表します。

cssピクセルっていう用語について知らなかったです。勉強になりました。
デバイスピクセル比で引き伸ばされて表示されるのも規格で規定されてそうですね。

Copy link
Contributor Author

@beru beru Jun 29, 2020 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

HTML Help WorkShopが本来対応するHTML規格は HTML3.2 らしいです。

https://weblog.west-wind.com/posts/2012/feb/15/make-your-chm-help-files-show-html5-and-css3-content#Web-Browser-Control----perpetually-stuck-in-IE-7-Mode

によるとIE7モード固定の動作みたいです。レジストリ設定でIEのバージョン指定が出来るらしいですが、まぁ微妙ですね。

IE後継のEdgeもChromeに合わせてBlink使うようになったし、もう時代遅れのHTMLヘルプはやめてブラウザで見るように出来たら良いなぁ…。

本物のブラウザではなくブラウザコンポーネントを使った表示なので、ヘルプビューアでは指定したcssが正しく認識されない可能性はあると思います。ただし、修正前の画像のcss指定は style="zoom:1.0" だったようなので、原寸表示された原因はソレかも知れません。

実際にソレが原因なのか確認を取った上でのコメントではなくて推測の発言だと思うので残念です。

実際に高DPI環境で確認しないで想像上での意見であれば的を外しちゃいます。

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

デバイスピクセル比で引き伸ばされて表示されるのも規格で規定されてそうですね。

調べてみたところ、それっぽい事が書かれていました。

https://drafts.csswg.org/css-values-3/#reference-pixel

Note: This definition of the pixel unit and the physical units differs from previous versions of CSS. In particular, in previous versions of CSS the pixel unit and the physical units were not related by a fixed ratio: the physical units were always tied to their physical measurements while the pixel unit would vary to most closely match the reference pixel. (This change was made because too much existing content relies on the assumption of 96dpi, and breaking that assumption broke the content.)

既存コンテンツとの兼ね合いを考えて、CSSピクセル単位を実デバイスのピクセルにはしない事に決めたようです。

https://hacks.mozilla.org/2013/09/css-length-explained/

上のURLはFirefox開発元のMozillaの人が書いた解説ですがそこでも同様の説明が有りました。

日本語のページだと下記のページで分かりやすく解説されてました。

https://d-fount.com/about-resolution/#outline_4_2

http://site.oukasei.com/?p=2332

https://www.atmarkit.co.jp/ait/articles/1308/29/news004.html

なおHTML5規格が出てからは img タグの srcset 属性等で対処が可能な事が分かったので、このPRではそれを使いました。高DPI環境でHTMLヘルプを表示すると画像の見え方がブラウザと違う件についての対処は諦めます。


ディスクにある複数のファイルから、指定した文字列を検索することができます。<br>
指定したフォルダの下層のフォルダを全て検索することもできます。<br>
Expand Down
2 changes: 1 addition & 1 deletion help/sakura/res/HLP000362.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<noscript>[<a href="HLP000001.html">目次</a>]<br></noscript>
<h2>Grep置換</h2>

<img src="images/GrepReplace.png"><br>
<img src="images/GrepReplace.png" style="width:50em;"><br>

ディスクにある複数のファイルから、指定した文字列を検索・置換することができます。(sakura:2.2.0.0以降)<br>
指定したフォルダの下層のフォルダを全て置換することもできます。<br>
Expand Down
18 changes: 9 additions & 9 deletions help/sakura/res/HLP000374.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,31 +25,31 @@ <h3>関連付け作業</h3>

1. スタートボタンをクリック または Windowsキーを押す<br>
2. <strong>設定</strong>ボタンをクリック<br>
<div class=li200><img src="images/FileAssoc-1-StartMenu.png" style="zoom:1.0;" /><br></div>
<div class=li200><img src="images/FileAssoc-1-StartMenu.png" style="width: 3em;" /><br></div>

3. <strong>アプリ</strong>をクリック<br>
<div class=li200><img src="images/FileAssoc-2-Setting.png" style="zoom:1.0;" /><br></div>
<div class=li200><img src="images/FileAssoc-2-Setting.png" style="width: 50em;" /><br></div>

4. <strong>規定のアプリ</strong>をクリック<br>
<div class=li200><img src="images/FileAssoc-3-Application.png" style="zoom:1.0;" /><br></div>
<div class=li200><img src="images/FileAssoc-3-Application.png" style="width: 50em;" /><br></div>

5. 以下の画面で下までスクロールする<br>
<div class=li200><img src="images/FileAssoc-4-DefaultApp.png" style="zoom:1.0;" /><br></div>
<div class=li200><img src="images/FileAssoc-4-DefaultApp.png" style="width: 50em;" /><br></div>

6. <strong>ファイルの種類ごとに既定のアプリを選ぶ</strong>をクリック<br>
<div class=li200><img src="images/FileAssoc-5-ChooseDefaultApp.png" style="zoom:1.0;" /><br></div>
<div class=li200><img src="images/FileAssoc-5-ChooseDefaultApp.png" style="width: 50em;" /><br></div>

7. 以下の画面で下までスクロールする<br>
<div class=li200><img src="images/FileAssoc-6-ChooseDefaultApp.png" style="zoom:1.0;" /><br></div>
<div class=li200><img src="images/FileAssoc-6-ChooseDefaultApp.png" style="width: 50em;" /><br></div>

8. <strong>.txt</strong> の右の<strong>メモ帳</strong>をクリック<br>
<div class=li200><img src="images/FileAssoc-7-ChooseDefaultAppTxt.png" style="zoom:1.0;" /><br></div>
<div class=li200><img src="images/FileAssoc-7-ChooseDefaultAppTxt.png" style="width: 50em;" /><br></div>

9. <strong>サクラエディタ</strong>をクリック<br>
<div class=li200><img src="images/FileAssoc-8-ChooseDefaultAppTxt.png" style="zoom:1.0;" /><br></div>
<div class=li200><img src="images/FileAssoc-8-ChooseDefaultAppTxt.png" style="width: 50em;" /><br></div>

10. 以下の画面になり、関連付けが完了<br>
<div class=li200><img src="images/FileAssoc-9-ChooseTxt-Sakura.png" style="zoom:1.0;" /><br></div>
<div class=li200><img src="images/FileAssoc-9-ChooseTxt-Sakura.png" style="width: 50em;" /><br></div>


</BODY></HTML>