Webブラウザ（Chrome）

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

PWA

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

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

YouTubeでの表示例（出典: windows 10 - What is install youtube button on chrome? - Super User）

IDの生成

このセクションに含まれる情報は比較的貴重なものである可能性があります。

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

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

この2.の部分はソースコードに書いてあるplaygroundで試すこともできる。pythonで書くと以下のようになる（URLはコマンドライン引数として渡すことを想定）。

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)

参考: 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 の拡張機能を使うので支障があった）。

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

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

フォント名の変更

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

インストール

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

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

確認

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

余談

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

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

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

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

このセクションに含まれる情報は比較的貴重なものである可能性があります。

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

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

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

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

というわけで、Windows版のChromeでsrc:local()が効かないという場合は、フォント名を確認した上で、該当のフォントがC:\Windows\Fontsだけにインストールされていることを確認するのがよい。