Heppoko Binbo Yarou no Newbie Nikki

旧題: へっぽこびんぼう野郎のnewbie日記 #vZkt8fc6J

Mac Chromeでやる夫関連のサイトを読む(MacでAAをきれいに表示する)

はじめに

技術者向けの解説はページ下部にあります。めんどくさくて全部読みたくない技術者の方は下部だけ読んでも大丈夫です。

読むのに必要な前提知識

読者は インストール・ダウンロード・Webサイト などの初歩の用語を知っていることを前提としています。

かなり専門用語を使わないように努力しているつもりですが、詳細に伝えるにあたって専門的な言葉がときどき出ています。ご了承ください。

なんでAAがずれて読めないの(´・ω・`)?

AAがきちんと表示されるためには、

MS Pゴシック

か、それに準ずるフォント(Textarなど)が使っているMacにインストールされている必要があります。

基本的には MS Pゴシック というフォントがインストールされていれば大丈夫だと思います。

フォントというのは、『文字をどのように表現するか』をまとめたルールのことで、いろんな種類のフォントがあります。たとえ同じ文字でもフォントが異なると文字の表現方法が変わるので、文字の見え方が異なります。

フォントが違うと、たとえば同じ (`・ω・´) というデータでも、

フォントの種類 見え方
デフォルト (`・ω・´)
MS Pゴシック (`・ω・´)
Quicksand (`・ω・´)
Bahianita (`・ω・´)

のように、見え方が変わります。

MS Pゴシック というフォントが正しくインストールされていない場合は、コンピュータが

「MS Pゴシックとかいうやつ無いから、無いときに使うやつ(デフォルト)使うわ」

と判定して、デフォルトを使います。

なので、正しくインストールされていない場合は、この表の『デフォルトの見え方』と『MS Pゴシックの見え方』は同じはずです。

なぜ他のフォントではなく MS Pゴシック にしなければいけないかというと、 MS Pゴシック というフォントは、遠い昔、Windowsで使われていたフォントであり、『このフォントを使ってみんな2chを見ている』という前提のもとAAが作られていたからです。

Macには、残念ながら MS Pゴシック がインストールされていません。そのため、別のフォントが使われて、ずれて見えます。

MacMS Pゴシック が入っていない様子

macOS Sierra に組み込まれているフォント - Apple サポート

MS Pゴシックの入手方法について

MS Pゴシックは、マイクロソフトMicroSoft)が作ったものなので、当然ながら著作権が発生しています(なのでMacに入ってないのですが)

MS Pゴシックのフォント自体はたくさんインターネット上に転がっているのですが、基本的に違法アップロードの類のものだと思うので、こちらから入手しないほうがいいと思います。

Windowsを持っていれば、MS Pゴシックのフォントファイルが入っているので、そのファイルをMacに持ってきてクリックするとインストールできます。

よくわからなかったらググってください。

MS Pゴシックをインストールしたのに、AAがずれるサイトがあるんだけど( ・`ω・´)?

ずれないサイト

ほとんどのAAを置いているサイトは「このサイトではMS Pゴシックを使ってね!」というように、サイト上で指定されています。

たとえば↓のサイトでは、サイト側でMS Pゴシック使ってねと指定してあります。こういうサイトはズレないはずです。

やる夫 Wiki | FANDOM powered by Wikia

f:id:haruharu1:20190704130744p:plain

↓こんな感じで指定されています。「フォントは、MonaがあればMona,なければIPAMonaPGothic, IPAMonaPGothicがなければ'MS Pゴシック'を使って」という意味で指定されているようです。(ちょっとなんか指定の仕方がおかしい部分がありますが…)

f:id:haruharu1:20190704130928p:plain

このフォントとかを指定するやつをCSSと言ったりします。

ずれるサイト

ただし↓のサイトでは、ずれます。

サイト上で特にフォントの指定がないので、お使いのブラウザのデフォルトのフォント(既定のフォント)を使用することになります。

f:id:haruharu1:20190704131252p:plain

そういうサイトは、サイト管理者がフォントを指定していないので、こちらでフォントを勝手に指定してあげることにします。

フォントなどを指定できるものを CSS と言ったりするのですが、この『フォントなどを指定できるCSSとかいうやつ』を外部から追加するChrome拡張機能があります。Stylishというやつです。

chrome.google.com

Stylishを使っていい感じに設定するとこんな感じになります。(これでもまだずれてる?シラネ)

f:id:haruharu1:20190704132158p:plain

Stylishの使い方

StylishChromeにインストールすると、Chromeの右上らへんに↓のような感じでインストールされた旨が表示されます。クリックしてください。

f:id:haruharu1:20190704132257p:plain

ここで Create New Style を選んで、新しくCSSを追加します。(↓参照)

f:id:haruharu1:20190704133211p:plain

するとこんな感じ(↓)の画面が出ます。

f:id:haruharu1:20190704133355p:plain

ここに↓のように記入していきます。

f:id:haruharu1:20190704141358p:plain

この緑丸の部分のところで、このStyleの名前をつけてください(別に名前はなんでもいいです)。Enable(利用可能)にチェックボックスが入っていないと利用可能にならないので注意してください。

赤丸の部分には

* {
    font-family: 'MS PGothic', 'MS Pゴシック','MSPゴシック','MSPゴシック','MS Pゴシック' !important;
    line-height:18px !important;
    font-size: 16px !important;
}

というふうに書きます。コピペで大丈夫です。

このページ全体の文字について、MS Pゴシックとか、フォントサイズとか文字の高さとかを指定しています。 !importantとつけているのは、サイト管理者がテキトーな指定をしていても強制的に変更させるためです。(ただし、サイト管理者がより強く強制的に指定している場合は、おそらくこれが効かないので、そういうサイトでは効きません。その際の変更はもうちょっと専門知識が必要になります。)

青丸の部分には「どこのサイトでこのCSSを影響させたいか」を記述していきます。「すべてのサイトでMS Pゴシックを使う」というのはMacユーザーなら嫌なはずなので、変えたほうがいいと思います。

AAを使っているサイトにだけ適用できるように、お好みに設定していきましょう。URLs starting with(訳: ~から始まるURL)http://bhdaa.sakura.ne.jp などと入力すると良いです。追加したい場合は Add を押します。

そんな感じで入力します。

入力が終わったら「Save」してください。

知らなくてもいいけど知っておくといいかも知識

Stylishは、専門的にはCSSをページの最後に追加してくれるツールです(DOMの最後にstyle[CSSを記述するためのHTMLのタグ]を追加しているだけ)

f:id:haruharu1:20190704132431p:plain

まとめ

  • 大前提として、すべての「AAズレ」は「フォントが違う」という部分に起因します。
  • フォントが違うのは「そもそもあなたのPCにフォントがインストールされてない」「サイト管理者がフォントを指定していない」「サイト管理者の設定がクレイジー」のどれかによって生じます。これはWindowsでもMacでも変わりません。
  • 基本的には「インストール+Stylishの変更」で90%以上のAAサイトが問題なく見れるようになるはずです。

厳密には、フォントの違いだけでなく↓のような設定も必要です。

font-size:16px;
line-height:18px;

技術者用

  • AAはMS Pゴシックを使うことを前提として作られてます。
  • なのでMacMS Pゴシックをインストールしてください。これでほぼ直ります。
  • サイト管理者が指定していないサイトにのみCSSを指定してください。指定にはStylishというChrome拡張機能がオススメです。

↓指定方法はこれです。テキトーなのでお好みでアレンジしてください。

* {
    font-family: 'MS PGothic', 'MS Pゴシック','MSPゴシック','MSPゴシック','MS Pゴシック' !important;
    line-height:18px !important;
    font-size: 16px !important;
}

  • おわり