Webブラウザ（Chrome） - 版の履歴

Turgenev: Notion-MW

2025-04-02T07:15:27Z

Notion-MW

← 古い版		2025年4月2日 (水) 16:15時点における版
19行目:		19行目:
	こうして生成されたショートカットを見ると、（例えばWindowsなら）<code>"C:\Program Files\Google\Chrome\Application\chrome_proxy.exe" --profile-directory=Default --app-id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</code>のようなコマンドラインが設定されているのがわかるだろう。調べた結果、この<code>--app-id</code>というのは、以下のようなプロセスで生成されるようである。		こうして生成されたショートカットを見ると、（例えばWindowsなら）<code>"C:\Program Files\Google\Chrome\Application\chrome_proxy.exe" --profile-directory=Default --app-id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</code>のようなコマンドラインが設定されているのがわかるだろう。調べた結果、この<code>--app-id</code>というのは、以下のようなプロセスで生成されるようである。

	* アプリのURLを決定する。この際、manifestが指定されていれば、そこにある<code>start_url</code>が使われるようである（たとえばTwitterのを見ると、<code>"start_url":"https://twitter.com/?utm_source=homescreen&utm_medium=shortcut"</code>と書いてある）。また、トップページのときは末尾に<code>/</code>を付ける？（例: <code>https://chat.openai.com/</code>）これらに該当しない場合は普通にそのページのURLがそのまま使われる。		# アプリのURLを決定する。この際、manifestが指定されていれば、そこにある<code>start_url</code>が使われるようである（たとえばTwitterのを見ると、<code>"start_url":"https://twitter.com/?utm_source=homescreen&utm_medium=shortcut"</code>と書いてある）。また、トップページのときは末尾に<code>/</code>を付ける？（例: <code>https://chat.openai.com/</code>）これらに該当しない場合は普通にそのページのURLがそのまま使われる。
	* URLにSHA-256ハッシュを2度適用し、その前半部分（16進数で32桁）をa-pの16文字で表現する。		# URLにSHA-256ハッシュを2度適用し、その前半部分（16進数で32桁）をa-pの16文字で表現する。

	この2.の部分は[https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/web_applications/web_app_helpers_unittest.cc ソースコード]に書いてある[https://play.golang.org/p/VrIq_QKFjiV playground]で試すこともできる。pythonで書くと以下のようになる（URLはコマンドライン引数として渡すことを想定）。		この2.の部分は[https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/web_applications/web_app_helpers_unittest.cc ソースコード]に書いてある[https://play.golang.org/p/VrIq_QKFjiV playground]で試すこともできる。pythonで書くと以下のようになる（URLはコマンドライン引数として渡すことを想定）。

Turgenev: Notion-MW

2023-11-24T12:34:54Z

Notion-MW

← 古い版		2023年11月24日 (金) 21:34時点における版
24行目:		24行目:
	この2.の部分は[https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/web_applications/web_app_helpers_unittest.cc ソースコード]に書いてある[https://play.golang.org/p/VrIq_QKFjiV playground]で試すこともできる。pythonで書くと以下のようになる（URLはコマンドライン引数として渡すことを想定）。		この2.の部分は[https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/web_applications/web_app_helpers_unittest.cc ソースコード]に書いてある[https://play.golang.org/p/VrIq_QKFjiV playground]で試すこともできる。pythonで書くと以下のようになる（URLはコマンドライン引数として渡すことを想定）。

	<syntaxhighlight lang="python">		<syntaxhighlight lang="python">import hashlib

	~~python~~
	import hashlib

	m = hashlib.sha256()		m = hashlib.sha256()

Turgenev: Notion-MW

2023-11-24T12:04:23Z

Notion-MW

← 古い版		2023年11月24日 (金) 21:04時点における版
24行目:		24行目:
	この2.の部分は[https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/web_applications/web_app_helpers_unittest.cc ソースコード]に書いてある[https://play.golang.org/p/VrIq_QKFjiV playground]で試すこともできる。pythonで書くと以下のようになる（URLはコマンドライン引数として渡すことを想定）。		この2.の部分は[https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/web_applications/web_app_helpers_unittest.cc ソースコード]に書いてある[https://play.golang.org/p/VrIq_QKFjiV playground]で試すこともできる。pythonで書くと以下のようになる（URLはコマンドライン引数として渡すことを想定）。

	<syntaxhighlight lang="import hashlib">		<syntaxhighlight lang="python">

			python
			import hashlib

	m = hashlib.sha256()		m = hashlib.sha256()
	m.update(bytes("https://chat.openai.com/".encode('ascii')))		m.update(bytes("https://chat.openai.com/".encode('ascii')))

Turgenev: Notion-MW

2023-11-24T10:56:52Z

Notion-MW

← 古い版		2023年11月24日 (金) 19:56時点における版
24行目:		24行目:
	この2.の部分は[https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/web_applications/web_app_helpers_unittest.cc ソースコード]に書いてある[https://play.golang.org/p/VrIq_QKFjiV playground]で試すこともできる。pythonで書くと以下のようになる（URLはコマンドライン引数として渡すことを想定）。		この2.の部分は[https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/web_applications/web_app_helpers_unittest.cc ソースコード]に書いてある[https://play.golang.org/p/VrIq_QKFjiV playground]で試すこともできる。pythonで書くと以下のようになる（URLはコマンドライン引数として渡すことを想定）。

	<syntaxhighlight lang="~~python~~">~~import hashlib~~		<syntaxhighlight lang="import hashlib">

	m = hashlib.sha256()		m = hashlib.sha256()
	m.update(bytes("https://chat.openai.com/".encode('ascii')))		m.update(bytes("https://chat.openai.com/".encode('ascii')))

Turgenev: Notion-MW

2023-11-24T02:09:08Z

Notion-MW

← 古い版		2023年11月24日 (金) 11:09時点における版
24行目:		24行目:
	この2.の部分は[https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/web_applications/web_app_helpers_unittest.cc ソースコード]に書いてある[https://play.golang.org/p/VrIq_QKFjiV playground]で試すこともできる。pythonで書くと以下のようになる（URLはコマンドライン引数として渡すことを想定）。		この2.の部分は[https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/web_applications/web_app_helpers_unittest.cc ソースコード]に書いてある[https://play.golang.org/p/VrIq_QKFjiV playground]で試すこともできる。pythonで書くと以下のようになる（URLはコマンドライン引数として渡すことを想定）。

	<~~pre class~~="~~dummy_str_python~~">import hashlib		<syntaxhighlight lang="python">import hashlib

	m = hashlib.sha256()		m = hashlib.sha256()
	m.update(bytes(~~"~~https://chat.openai.com/~~"~~.encode('ascii')))		m.update(bytes("https://chat.openai.com/".encode('ascii')))
	m1 = hashlib.sha256()		m1 = hashlib.sha256()
	m1.update(m.digest())		m1.update(m.digest())

	EXTID = ''.join([chr(int(i, base=16) + ord('a')) for i in m1.hexdigest()][:32])		EXTID = ''.join([chr(int(i, base=16) + ord('a')) for i in m1.hexdigest()][:32])
	print(EXTID)</~~pre~~>		print(EXTID)</syntaxhighlight>
	* 参考: [https://stackoverflow.com/questions/26053434/how-is-the-chrome-extension-id-of-an-unpacked-extension-generated/26058672#26058672 How is the Chrome Extension ID of an unpacked extension generated? - Stack Overflow]		* 参考: [https://stackoverflow.com/questions/26053434/how-is-the-chrome-extension-id-of-an-unpacked-extension-generated/26058672#26058672 How is the Chrome Extension ID of an unpacked extension generated? - Stack Overflow]

Turgenev: Notion-MW

2023-11-23T13:16:36Z

Notion-MW

新規ページ

この記事では[[利用者:Turgenev|利用者:Turgenev]]が主に使用しているGoogle Chromeを中心に、Webブラウザに関するトピックを扱う。


== PWA ==

プログレッシブウェブアプリ（PWA）というのはWebアプリがプッシュ通知などの（本来は権限の問題で使うのが難しい）機能を使えるようにする仕組みである。Google Chromeでは、任意のページをPWAとして使用できる。このためには、メニューの「その他のツール」から「ショートカットを作成」を選べばよい。

また、PWAとして使用される際の設定などを明示的にmanifestとして指定しているページもあり、例えばTwitterならソースを見ると<code><link rel="manifest" href="/manifest.json" crossOrigin="use-credentials" /></code>などとタグが設置されていることがわかる。<code>manifest.json</code>の中身も見れる。このmanifest.jsonがある場合は（←多分）、Twitterのページを開くとアドレスバーに「アプリとしてインストール」的なボタンが表示される。これを押すと、先ほどの「ショートカットを作成」と（多分）全く同じ動作をする。

* YouTubeでの表示例（出典: [https://superuser.com/questions/1623874/what-is-install-youtube-button-on-chrome windows 10 - What is install youtube button on chrome? - Super User]）

<div class="res-img">https://i.stack.imgur.com/4t8Cu.png</div>


==== IDの生成 ====

{{Valuable}}

こうして生成されたショートカットを見ると、（例えばWindowsなら）<code>"C:\Program Files\Google\Chrome\Application\chrome_proxy.exe" --profile-directory=Default --app-id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</code>のようなコマンドラインが設定されているのがわかるだろう。調べた結果、この<code>--app-id</code>というのは、以下のようなプロセスで生成されるようである。

* アプリのURLを決定する。この際、manifestが指定されていれば、そこにある<code>start_url</code>が使われるようである（たとえばTwitterのを見ると、<code>"start_url":"https://twitter.com/?utm_source=homescreen&utm_medium=shortcut"</code>と書いてある）。また、トップページのときは末尾に<code>/</code>を付ける？（例: <code>https://chat.openai.com/</code>）これらに該当しない場合は普通にそのページのURLがそのまま使われる。
* URLにSHA-256ハッシュを2度適用し、その前半部分（16進数で32桁）をa-pの16文字で表現する。

この2.の部分は[https://source.chromium.org/chromium/chromium/src/+/main:chrome/browser/web_applications/web_app_helpers_unittest.cc ソースコード]に書いてある[https://play.golang.org/p/VrIq_QKFjiV playground]で試すこともできる。pythonで書くと以下のようになる（URLはコマンドライン引数として渡すことを想定）。

<pre class="dummy_str_python">import hashlib

m = hashlib.sha256()
m.update(bytes("https://chat.openai.com/".encode('ascii')))
m1 = hashlib.sha256()
m1.update(m.digest())

EXTID = ''.join([chr(int(i, base=16) + ord('a')) for i in m1.hexdigest()][:32])
print(EXTID)</pre>
* 参考: [https://stackoverflow.com/questions/26053434/how-is-the-chrome-extension-id-of-an-unpacked-extension-generated/26058672#26058672 How is the Chrome Extension ID of an unpacked extension generated? - Stack Overflow]

== フォント ==

=== pdfビューアのフォント ===

Chrome標準のpdfビューアは、フォントが埋め込まれていないpdfの表示に不適切なフォントを使用することがある。これを修正する方法を解説する。

==== フォント選択のしくみ ====

pdfのそれぞれの文字にはフォントが指定されているが、そのフォントがpdfに埋め込まれておらず、かつ閲覧するPC上にも存在しない場合、別のフォントで代用する必要がある。どのフォントで代用するかはソフトによって異なる。

理想的には、元のフォントと同じカテゴリ（「明朝」や「ゴシック」くらいのくくりで指定できる仕様がある）から選ぶとか、名前が似ているものを選ぶというのが望ましいが、Chromium系はそうなっておらず、名前順で最初にあるものを選ぶようである（正確には日本語フォントと認識されるフォントの中で最初のもの？）。無難な明朝やゴシックならまだいいが、「AR丸印篆B」なんかになってしまうと悲惨である。あるいは、自分はなったことがないが、そもそも日本語の文字が表示されないという場合もあるらしい。

有名なAcrobat Readerは比較的ちゃんとやってくれる（PDF-XChange Viewer、Foxit Readerあたりも問題なかった気がする）。あと同じブラウザでもFirefoxのほうが（pdfビューアーに限らず）フォントまわりはちゃんとしている印象。

==== 解決策 ====

解決策はいくつかあって、他サイトではデフォルトのpdfビューアーを使わないようにするものが多く紹介されている。必ずダウンロードする設定にしてAcrobat Readerで開くとか、pdfを閲覧できる他の拡張機能を入れるとかの類である。

ただ毎回ダウンロードするのは不便だし、拡張機能はURLが拡張機能のやつになってしまって元のがコピーしづらい（また個人的に論文pdfには[[Zotero|Zotero]] の拡張機能を使うので支障があった）。

そこで、ブラウザ側の設定はそのままで、名前順でもっと早いフォントを新たに追加するという方法が考えられる。

といっても巷にある名前順が早いフォントが好みのものかわからないので、既存のフォントの名前を変える方法を紹介する。

==== フォント名の変更 ====

[[フォント|フォント]]において、ttxを使ってフォント名を変更する方法を紹介している。

==== インストール ====

名前を変えたフォントができたらあとはインストールするだけだが、ここが実は重要で、普通のインストールではなく、「すべてのユーザーに対してインストール」をする必要がある。言い換えれば、フォントファイルがC:\Users\username\AppData\Local\Microsoft\Windows\FontsではなくC:\Windows\Fontsに入っている必要がある。

ダブルクリックで開く画面（「Windowsでコンピューターの世界が広がります。1234567890」のやつ）からは「すべてのユーザーに対してインストール」はできないので、右クリックメニューから選択すること。あるいはフォントファイルを直接C:\Windows\Fontsにコピーしてもよい。

==== 確認 ====

これで、選んだフォントでpdfがみられるようになっているはずである。各自、問題のあったファイルで試してみればよい。

==== 余談 ====

先ほどURLが変わるので微妙と評した拡張機能であるが、フォント云々とは関係なく、全てのpdfファイル（強制ダウンロードのリンクになっているものも含めて）をダウンロードせず開けること自体はなかなか便利である。

これをURLを変えずに実現できるものがないか探したところ、[https://chrome.google.com/webstore/detail/undisposition-racle-fork/bbppejejjfancffmhncgkhjdaikdgagc Undisposition [Racle fork]]という拡張機能があった。Google Driveなどでファイルを全くダウンロードできなくなるという副作用が[https://github.com/Racle/undisposition/issues/2 報告されていた]が、最近のアップデートでホワイトリスト機能が追加された。

ただ、動かないサイトもある気がするのと、拡張機能の性質上しょうがないとは思うのだが要求される権限が「すべてのウェブサイト上にある自分の全データの読み取りと変更」なので、効用の割にはリスクが…というのはあるかもしれない。


=== CSSにおけるローカルフォントの指定 ===

{{Valuable}}

こちらはよりadvancedな話題であるから簡潔に述べる。

CSSでローカルのフォントを使わせたいときは<code>@font-face</code>の<code>src: local()</code>を使って指定する。

まず、このときに使用する名前はnameテーブルの6番にあるPostScript名（これは先ほど<code>ttx -t name fontfile.ttf</code>で出力したxmlで見れる）を使わなければならないとされている。ただし手元で試した限り4番にあるような名前でも成功する場合があった。最も確実なのがPostScript名ということなのかもしれない。

で、Windows版のChromium系で使う場合に重要なのが、フォントファイルが先ほどのように「すべてのユーザーに対してインストール」されている必要があるということである。さらに、手元で試した限り、同じフォントが特定のユーザーに対してインストールされている（C:\Users\username\AppData\Local\Microsoft\Windows\Fontsにある）と正しく動かないようであるということがわかった。

というわけで、Windows版のChromeでsrc:local()が効かないという場合は、フォント名を確認した上で、該当のフォントがC:\Windows\Fontsだけにインストールされていることを確認するのがよい。
[[Category:IT]][[Category:Windows]]{{#seo:|title={{FULLPAGENAME}} - Turgenev's Wiki}}