List of Ipa - text.Baldanders.info
tag:text.Baldanders.info,2016-02-25:/tags
2016-02-25T16:45:01+09:00
帰ってきた「しっぽのさきっちょ」
https://text.baldanders.info/images/avatar.jpg
https://text.baldanders.info/images/avatar.jpg
icat4json 公開
tag:text.Baldanders.info,2016-02-25:/remark/2016/02/icat4json/
2016-02-25T07:45:01+00:00
2019-07-01T13:48:09+00:00
IPA が提供する “icat for JSON” にアクセスする Go 言語用のパッケージを公開した。
Spiegel
https://baldanders.info/profile/
<p>IPA が提供する “<a href="https://www.ipa.go.jp/security/vuln/icat.html" title="サイバーセキュリティ注意喚起サービス「icat for JSON」:IPA 独立行政法人 情報処理推進機構">icat for JSON</a>” にアクセスする <a href="https://golang.org/" title="The Go Programming Language">Go 言語</a>用のパッケージを公開した。</p>
<ul>
<li><a href="https://github.com/spiegel-im-spiegel/icat4json" title="spiegel-im-spiegel/icat4json: icat for JSON with Golang">github.com/spiegel-im-spiegel/icat4json</a></li>
</ul>
<p>以下のような感じで使える。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="kn">package</span> <span class="nx">main</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl"> <span class="s">"fmt"</span>
</span></span><span class="line"><span class="cl"> <span class="s">"log"</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"> <span class="s">"github.com/spiegel-im-spiegel/icat4json"</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">json</span><span class="p">,</span> <span class="nx">err</span> <span class="o">:=</span> <span class="nx">icat4json</span><span class="p">.</span><span class="nf">Get</span><span class="p">(</span><span class="nx">icat4json</span><span class="p">.</span><span class="nx">ToolICATW</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="nx">err</span> <span class="o">!=</span> <span class="kc">nil</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">log</span><span class="p">.</span><span class="nf">Fatal</span><span class="p">(</span><span class="nx">err</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="nx">data</span><span class="p">,</span> <span class="nx">err</span> <span class="o">:=</span> <span class="nx">json</span><span class="p">.</span><span class="nf">Decode</span><span class="p">()</span>
</span></span><span class="line"><span class="cl"> <span class="k">if</span> <span class="nx">err</span> <span class="o">!=</span> <span class="kc">nil</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">log</span><span class="p">.</span><span class="nf">Fatal</span><span class="p">(</span><span class="nx">err</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="nx">fmt</span><span class="p">.</span><span class="nf">Printf</span><span class="p">(</span><span class="s">"Title: %v\n"</span><span class="p">,</span> <span class="nx">data</span><span class="p">.</span><span class="nx">Title</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"> <span class="nx">fmt</span><span class="p">.</span><span class="nf">Printf</span><span class="p">(</span><span class="s">" URL: %v\n"</span><span class="p">,</span> <span class="nx">data</span><span class="p">.</span><span class="nx">Link</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"> <span class="nx">fmt</span><span class="p">.</span><span class="nf">Printf</span><span class="p">(</span><span class="s">" Date: %v\n"</span><span class="p">,</span> <span class="nx">data</span><span class="p">.</span><span class="nx">Date</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"> <span class="nx">fmt</span><span class="p">.</span><span class="nf">Print</span><span class="p">(</span><span class="s">"Items:\n"</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"> <span class="k">for</span> <span class="nx">_</span><span class="p">,</span> <span class="nx">item</span> <span class="o">:=</span> <span class="k">range</span> <span class="nx">data</span><span class="p">.</span><span class="nx">Itemdata</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">fmt</span><span class="p">.</span><span class="nf">Printf</span><span class="p">(</span><span class="s">"\t%v: %v (%v)\n"</span><span class="p">,</span> <span class="nx">item</span><span class="p">.</span><span class="nx">Date</span><span class="p">,</span> <span class="nx">item</span><span class="p">.</span><span class="nx">Title</span><span class="p">,</span> <span class="nx">item</span><span class="p">.</span><span class="nx">Link</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">$ go run sample.go
</span></span><span class="line"><span class="cl">Title: IPAセキュリティセンター:重要なセキュリティ情報
</span></span><span class="line"><span class="cl"> URL: https://www.ipa.go.jp/security/vuln/icat.html
</span></span><span class="line"><span class="cl"> Date: 2016-02-10 11:58:22 +0900 JST
</span></span><span class="line"><span class="cl">Items:
</span></span><span class="line"><span class="cl"> 2016-02-10 12:00:00 +0900 JST: Microsoft 製品の脆弱性対策について(2016年02月) (http://www.ipa.go.jp/security/ciadr/vul/20160210-ms.html)
</span></span><span class="line"><span class="cl"> 2016-02-10 12:00:00 +0900 JST: Adobe Flash Player の脆弱性対策について(APSB16-04)(CVE-2016-0985等) (http://www.ipa.go.jp/security/ciadr/vul/20160210-adobeflashplayer.html)
</span></span><span class="line"><span class="cl"> 2016-01-20 12:00:00 +0900 JST: Oracle Java の脆弱性対策について(CVE-2016-0494等) (http://www.ipa.go.jp/security/ciadr/vul/20160120-jre.html)
</span></span><span class="line"><span class="cl"> 2016-01-13 12:00:00 +0900 JST: Microsoft 製品の脆弱性対策について(2016年01月) (http://www.ipa.go.jp/security/ciadr/vul/20160113-ms.html)
</span></span><span class="line"><span class="cl"> 2016-01-13 12:00:00 +0900 JST: Adobe Reader および Acrobat の脆弱性対策について(APSB16-02)(CVE-2016-0932等) (http://www.ipa.go.jp/security/ciadr/vul/20160113-adobereader.html)
</span></span><span class="line"><span class="cl"> 2016-01-06 16:40:00 +0900 JST: 【注意喚起】インターネットに接続する複合機等のオフィス機器の再点検を! (http://www.ipa.go.jp/security/ciadr/vul/20160106-printer.html)
</span></span><span class="line"><span class="cl"> 2016-01-05 14:00:00 +0900 JST: 「DXライブラリ」におけるバッファオーバーフローの脆弱性対策について(JVN#49476817) (http://www.ipa.go.jp/security/ciadr/vul/20160105-jvn.html)
</span></span></code></pre></div><p>“<a href="https://www.ipa.go.jp/security/vuln/icat.html" title="サイバーセキュリティ注意喚起サービス「icat for JSON」:IPA 独立行政法人 情報処理推進機構">icat for JSON</a>” という名前なのに IPA は API の仕様を公開していない。
そこで JavaScript コードの中身を見てみた。</p>
<ul>
<li><a href="http://qiita.com/spiegel-im-spiegel/items/4acefe47d3dda688a03e">icat for JSON について - Qiita</a></li>
</ul>
<p><a href="https://github.com/spiegel-im-spiegel/icat4json" title="spiegel-im-spiegel/icat4json: icat for JSON with Golang"><code>icat4json</code></a> パッケージでは “<a href="https://www.ipa.go.jp/security/vuln/icat.html" title="サイバーセキュリティ注意喚起サービス「icat for JSON」:IPA 独立行政法人 情報処理推進機構">icat for JSON</a>” から取得した JSON データを以下の構造体にデコードする。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="c1">//Item - itemdata from icat
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">type</span> <span class="nx">Item</span> <span class="kd">struct</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">Title</span> <span class="kt">string</span> <span class="s">`json:"item_title"`</span>
</span></span><span class="line"><span class="cl"> <span class="nx">Link</span> <span class="kt">string</span> <span class="s">`json:"item_link"`</span>
</span></span><span class="line"><span class="cl"> <span class="nx">Date</span> <span class="nx">time</span><span class="p">.</span><span class="nx">Time</span> <span class="s">`json:"item_date"`</span>
</span></span><span class="line"><span class="cl"> <span class="nx">Identifier</span> <span class="p">[]</span><span class="kt">string</span> <span class="s">`json:"item_identifier"`</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1">//ICAT - data from icat
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="kd">type</span> <span class="nx">ICAT</span> <span class="kd">struct</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nx">Itemdata</span> <span class="p">[]</span><span class="nx">Item</span> <span class="s">`json:"itemdata"`</span>
</span></span><span class="line"><span class="cl"> <span class="nx">Title</span> <span class="kt">string</span> <span class="s">`json:"docTitle"`</span>
</span></span><span class="line"><span class="cl"> <span class="nx">Fix</span> <span class="kt">string</span> <span class="s">`json:"docTitleFix"`</span>
</span></span><span class="line"><span class="cl"> <span class="nx">Link</span> <span class="kt">string</span> <span class="s">`json:"docLink"`</span>
</span></span><span class="line"><span class="cl"> <span class="nx">Date</span> <span class="nx">time</span><span class="p">.</span><span class="nx">Time</span> <span class="s">`json:"docDate"`</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p>JavaScript コードを見ると <code>item_identifier</code> 項目は使ってない模様。
<code>docTitleFix</code> 項目は中身が <code>null</code> かどうかしかチェックしてなくて<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>, <code>null</code> 以外だと <code>htmlentities()</code> 関数を通さずに素のまま表示するという恐ろしいことをしている(普通こういうのって boolean 値を使うんじゃないのか?)。
これらの項目は無視でもいいだろう。
本当は IPA が仕様を公開してくれると有難いんだけどねぇ。</p>
<p>脆弱性情報をクライアントサイドで取るのなら “<a href="https://www.ipa.go.jp/security/vuln/icat.html" title="サイバーセキュリティ注意喚起サービス「icat for JSON」:IPA 独立行政法人 情報処理推進機構">icat for JSON</a>” ではなく Twitter の @<a href="https://twitter.com/ICATalerts/">ICATalerts</a> アカウントのタイム・ラインをチェックするほうがオススメ。
JSON データを使うのならサーバサイドでやるべきだよね。
<a href="https://github.com/spiegel-im-spiegel/icat4json" title="spiegel-im-spiegel/icat4json: icat for JSON with Golang"><code>icat4json</code></a> パッケージはドメイン・レイヤのエンティティとして使われることを意識している。</p>
<figure style='margin:0 auto;text-align:center;'><a href="./icat4json.svg"><img src="./icat4json.svg" srcset="./icat4json.svg 640w" sizes="(min-width:600px) 500px, 80vw" alt="icat4json entity" loading="lazy"></a><figcaption><div><a href="./icat4json.svg">icat4json entity</a></div></figcaption>
</figure>
<p>私はたまたま <a href="https://golang.org/" title="The Go Programming Language">Go 言語</a>を勉強中なので <a href="https://golang.org/" title="The Go Programming Language">Go 言語</a>のパッケージとして実装したけど,本当なら Java とか Ruby とか node.js とかサーバサイドの実装があるといいよね。
IPA も jQuery じゃなくて,そういうので実装すればいいのに。</p>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>ところで <a href="https://golang.org/" title="The Go Programming Language">Go 言語</a>における <a href="http://golang.org/ref/spec#String_types">string</a> の実体は <code>[]byte</code> だが nil 状態はない。 <a href="https://github.com/spiegel-im-spiegel/icat4json" title="spiegel-im-spiegel/icat4json: icat for JSON with Golang"><code>icat4json</code></a> パッケージでは <code>docTitleFix</code> 項目が <code>null</code> の場合は空文字列に展開される。 JSON の <code>null</code> 状態を区別したいのであれば <a href="https://github.com/guregu/null" title="guregu/null: reasonable handling of nullable values"><code>github.com/guregu/null</code></a> パッケージ等を使う手もある。ちなみに <a href="https://github.com/guregu/null" title="guregu/null: reasonable handling of nullable values"><code>github.com/guregu/null</code></a> パッケージの型の実体は <a href="https://golang.org/pkg/database/sql/" title="sql - The Go Programming Language"><code>database/sql</code></a> の <code>NullString</code> 型等である。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>
JVN が CVSSv3 による脆弱性評価を開始
tag:text.Baldanders.info,2015-12-02:/remark/2015/cvss-v3-metrics-in-jvn/
2015-12-02T10:18:01+00:00
2020-01-26T08:21:08+00:00
当面(2017年度末まで)は CVSSv2 と CVSSv3 の併記で運用するらしい。
Spiegel
https://baldanders.info/profile/
<h2>JVN が CVSSv3 による脆弱性評価を開始</h2>
<ul>
<li><a href="http://www.ipa.go.jp/security/vuln/SeverityLevel3.html">共通脆弱性評価システムCVSS v3 (新バージョン)での評価の開始について:IPA 独立行政法人 情報処理推進機構</a></li>
<li><a href="https://www.jpcert.or.jp/press/2015/20151201-CVSSv3.html">JVN が共通脆弱性評価システム CVSS v3 による脆弱性評価を開始</a></li>
</ul>
<p>当面(2017年度末まで)は CVSSv2 と CVSSv3 の併記で運用するらしい。</p>
<p>たとえば</p>
<ul>
<li><a href="http://jvn.jp/vu/JVNVU97647301/">JVNVU#97647301: RSI Video Technologies の Videofied Frontel がセキュアでない独自プロトコルを使用する問題</a></li>
</ul>
<p>では</p>
<p><strong>CVSSv2 基本評価値 5.0 (<code>AV:N/AC:L/Au:N/C:P/I:N/A:N</code>)</strong></p>
<table>
<thead>
<tr>
<th style="text-align:right">基本評価基準</th>
<th style="text-align:left">評価値</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:right">攻撃元区分(AV)</td>
<td style="text-align:left">ネットワーク(N)</td>
</tr>
<tr>
<td style="text-align:right">攻撃条件の複雑さ(AC)</td>
<td style="text-align:left">低 (L)</td>
</tr>
<tr>
<td style="text-align:right">攻撃前の認証要否(Au)</td>
<td style="text-align:left">不要(N)</td>
</tr>
<tr>
<td style="text-align:right">情報漏えいの可能性(機密性への影響, C)</td>
<td style="text-align:left">部分的(P)</td>
</tr>
<tr>
<td style="text-align:right">情報改ざんの可能性(完全性への影響, I)</td>
<td style="text-align:left">なし(N)</td>
</tr>
<tr>
<td style="text-align:right">業務停止の可能性(可用性への影響, A)</td>
<td style="text-align:left">なし(N)</td>
</tr>
</tbody>
</table>
<p><strong>CVSSv3 基本評価値 7.5 (<code>CVSS:3.0/AV:N/AC:L/PR:N/UI:N/S:U/C:H/I:N/A:N</code>)</strong></p>
<table>
<thead>
<tr>
<th style="text-align:right">基本評価基準</th>
<th style="text-align:left">評価値</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:right">攻撃元区分(AV)</td>
<td style="text-align:left">ネットワーク(N)</td>
</tr>
<tr>
<td style="text-align:right">攻撃条件の複雑さ(AC)</td>
<td style="text-align:left">低 (L)</td>
</tr>
<tr>
<td style="text-align:right">必要な特権レベル(PR)</td>
<td style="text-align:left">不要(N)</td>
</tr>
<tr>
<td style="text-align:right">ユーザ関与レベル(UI)</td>
<td style="text-align:left">不要(N)</td>
</tr>
<tr>
<td style="text-align:right">スコープ(S)</td>
<td style="text-align:left">変更なし (U)</td>
</tr>
<tr>
<td style="text-align:right">情報漏えいの可能性(機密性への影響, C)</td>
<td style="text-align:left">高(H)</td>
</tr>
<tr>
<td style="text-align:right">情報改ざんの可能性(完全性への影響, I)</td>
<td style="text-align:left">なし(N)</td>
</tr>
<tr>
<td style="text-align:right">業務停止の可能性(可用性への影響, A)</td>
<td style="text-align:left">なし(N)</td>
</tr>
</tbody>
</table>
<p>という感じで CVSSv2 と CVSSv3 では評価の観点も最終的な評価点も異なることがわかると思う<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>。</p>
<p>余談だが CERT/CC では</p>
<ul>
<li><a href="http://www.kb.cert.org/vuls/id/792004">Vulnerability Note VU#792004 - RSI Video Technologies Videofied security system Frontel software uses an insecure custom protocol</a></li>
</ul>
<p><strong>CVSSv2 基本評価値 9.4 (<code>AV:N/AC:L/Au:N/C:C/I:C/A:N</code>)</strong></p>
<table>
<thead>
<tr>
<th style="text-align:right">基本評価基準</th>
<th style="text-align:left">評価値</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:right">攻撃元区分(AV)</td>
<td style="text-align:left">ネットワーク(N)</td>
</tr>
<tr>
<td style="text-align:right">攻撃条件の複雑さ(AC)</td>
<td style="text-align:left">低 (L)</td>
</tr>
<tr>
<td style="text-align:right">攻撃前の認証要否(Au)</td>
<td style="text-align:left">不要(N)</td>
</tr>
<tr>
<td style="text-align:right">情報漏えいの可能性(機密性への影響, C)</td>
<td style="text-align:left">全面的(C)</td>
</tr>
<tr>
<td style="text-align:right">情報改ざんの可能性(完全性への影響, I)</td>
<td style="text-align:left">全面的(C)</td>
</tr>
<tr>
<td style="text-align:right">業務停止の可能性(可用性への影響, A)</td>
<td style="text-align:left">なし(N)</td>
</tr>
</tbody>
</table>
<p>と完全性への影響が高いと評価している<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup>。</p>
<h2>CVSSv3 の変更点</h2>
<p>CVSSv2 から CVSSv3 への変更点は以下の通り。
(なおこれは,以前書いた「<a href="https://baldanders.info/blog/000864/">CVSS に関するメモ 3</a>」の再掲載である)</p>
<p>バージョン2からの大きな違いは深刻度をコンポーネント単位で評価できるようになったことだろう。
以前は攻撃対象となるシステムやホストマシンが対象だったので,更に細かい評価ができるようになったと言える。</p>
<p>これに合わせて「スコープ(Scope)」という評価軸が追加された。
厳密には「管理権限の範囲(Authorization Scope)」。
脆弱性のあるコンポーネントが他のコンポーネントに影響をおよぼす場合に,「他のコンポーネント」が管理権限の範囲の内側か外側かで深刻度が異なる。
脆弱性が管理権限の範囲の外側に影響を及ぼす具体例としてはクロスサイトスクリプティング(XSS)脆弱性などが挙げられるだろう。</p>
<p>基本評価基準(Base Metrics)で新たに追加された評価項目としては</p>
<ul>
<li>必要な特権レベル(Privileges Required)</li>
<li>ユーザ関与レベル(User Interaction)</li>
<li>スコープ(Scope)</li>
</ul>
<p>がある。
一方,バージョン2にあった「攻撃前の認証要否(Authentication)」項目は廃止され,「必要な特権レベル」に含まれる形になった。</p>
<p>一番大きく変わったのは環境評価基準(Environmental Metrics)だろう。
環境評価基準では対策後の状況を再評価し,評価が低いものについては再度対策を行えるようになっている。
CVSS を使ってセキュリティ対策のプロセスをきちんと回せるようになったわけだ。</p>
<p>再評価の観点は以下のとおり。</p>
<ul>
<li>緩和策後の攻撃元区分(Modified Attack Vector)</li>
<li>緩和策後の攻撃条件の複雑さ(Modified Attack Complexity)</li>
<li>緩和策後の必要な特権レベル(Modified Privileges Required)</li>
<li>緩和策後のユーザ関与レベル(Modified User Interaction)</li>
<li>緩和策後のスコープ(Modified Scope)</li>
<li>緩和策後の機密性への影響(Modified Confidentiality Impact)</li>
<li>緩和策後の完全性への影響(Modified Integrity Impact)</li>
<li>緩和策後の可用性への影響(Modified Availability Impact)</li>
</ul>
<p>つか基本評価基準(Base Metrics)の評価観点で再評価するって感じかな。</p>
<p>最近の「セキュリティ対策」がこれまでと異なっているのは,目の前の脆弱性に対処すれば「完了」とはならない点である。
(私は今までもずうっと言ってきているけど)セキュリティは「ハザード(hazard)」ではなく「リスク(risk)」で考えなければならない。
リスクをゼロにするには無限のリソース(人的資源やもっと端的にお金)が必要だが,私たちの持っているリソースは無限ではない。
つまりリスクをゼロにすることはできないのだ。
したがって,業務プロセスの中で改善を行いながら,最適解を探っていくしかない。</p>
<p>「セキュリティ対策」をコストと考えるなら果てしなく不毛な話であるが,「セキュリティ対策」を投資と考え,きちんと PDCA サイクルを回していくならば,それほど不毛ではないはずである。</p>
<h2>関連リンク</h2>
<ul>
<li><a href="https://www.first.org/cvss/v3.0/specification-document">CVSS v3.0 Specification Document</a></li>
<li><a href="http://www.ipa.go.jp/security/vuln/CVSSv3.html">共通脆弱性評価システムCVSS v3概説:IPA 独立行政法人 情報処理推進機構</a></li>
<li><a href="http://qiita.com/spiegel-im-spiegel/items/d6fe10d3df92b9d8556b">CVSSv3 用の node.js モジュールを作ってみた - Qiita</a> : 記事では「基本評価基準のみ実装」と書いているが,一応フルセット実装している
<ul>
<li><a href="https://github.com/spiegel-im-spiegel/cvss3">spiegel-im-spiegel/cvss3</a> : node.js 0.12 で動作確認。 4.x や 5.x で動作するかどうかは分からない</li>
</ul>
</li>
<li><a href="http://qiita.com/spiegel-im-spiegel/items/f2db3759b957206d4521">node.js の CVSS v3 モジュールを使ってデモページを作ってみた - Qiita</a>
<ul>
<li><a href="https://baldanders.info/spiegel/archive/cvss/cvss3.html">Demo for CVSS v3</a></li>
</ul>
</li>
<li><a href="https://github.com/spiegel-im-spiegel/go-cvss">spiegel-im-spiegel/go-cvss: Common Vulnerability Scoring System (CVSS) Version 3</a></li>
</ul>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>CVSSv3 では基本評価値が 7.0 以上で「重要」レベル,9.0 以上で「緊急」レベルとしている。基本評価値が 7.0 以上あるならすぐに対策に向けたアクションを起こすべきだろう。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:2">
<p>仮に完全性への影響が高いと考えると先ほどの CVSSv3 は <code>CVSS:3.0/AV:N/AC:L/PR:N/UI:N/S:U/C:H/I:H/A:N</code> で,評価は 9.1 となる。なお,この脆弱性についてはベンダ企業から修正版がリリースされている。 <a href="#fnref:2" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>
Web フォントに関する覚え書き
tag:text.Baldanders.info,2015-10-21:/remark/2015/web-font-family/
2015-10-21T12:41:45+00:00
2020-03-21T16:26:20+00:00
このサイトの Web フォントまわりを整理したので,覚え書きとして残しておく。
Spiegel
https://baldanders.info/profile/
<p>このサイトの Web フォントまわりを整理したので,覚え書きとして残しておく。</p>
<div class="box"><p><strong>【2019-12-29 追記】</strong>
現在の <a href="https://www.google.com/fonts/">Google Fonts</a> は日本語を含む各国語に正式対応している。</p>
<ul>
<li><a href="https://text.baldanders.info/remark/2019/12/japanese-fonts-by-google-cdn/">Google Fonts が日本語に対応してた</a></li>
</ul>
<p>なのでこの記事はもう有用ではないが「こんな時代もあったよね」って感じで残しておく。</p>
</div>
<h2>Google Noto Fonts</h2>
<p>このサイトの Web フォントを Google Noto Fonts で統一した<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>。</p>
<p>Google Noto Fonts は以下のサイトで取得できる。</p>
<ul>
<li><a href="https://www.google.com/fonts/">Google Fonts</a></li>
</ul>
<p>このサイトでは様々なフォントが選べるが “Noto” をキーワードに以下のフォントを選択する。</p>
<ul>
<li>Noto Sans : Normal 400, Bold 700</li>
<li>Noto Serif : Normal 400, Bold 700</li>
</ul>
<p>またサブセットとして Latin を選択する。
これで,以下に示す書式で CSS ファイルを HTML の <code>head</code> 要素内に指定すればよい<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup>。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">'//fonts.googleapis.com/css?family=Noto+Sans:400,700|Noto+Serif:400,700'</span> <span class="na">rel</span><span class="o">=</span><span class="s">'stylesheet'</span> <span class="na">type</span><span class="o">=</span><span class="s">'text/css'</span><span class="p">></span>
</span></span></code></pre></div><p>Bold が不要であればもっと軽くできる<sup id="fnref:3"><a href="#fn:3" class="footnote-ref" role="doc-noteref">3</a></sup>。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">'//fonts.googleapis.com/css?family=Noto+Sans|Noto+Serif'</span> <span class="na">rel</span><span class="o">=</span><span class="s">'stylesheet'</span> <span class="na">type</span><span class="o">=</span><span class="s">'text/css'</span><span class="p">></span>
</span></span></code></pre></div><p>CSS でフォントを指定する際は <code>"Noto Sans"</code> や <code>"Noto Serif"</code> で指定する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">body</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span> <span class="s1">'Noto Serif'</span><span class="p">,</span> <span class="kc">serif</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-weight</span><span class="p">:</span> <span class="mi">400</span><span class="p">;</span> <span class="c">/* normal */</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-variant</span><span class="p">:</span> <span class="kc">normal</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-style</span><span class="p">:</span> <span class="kc">normal</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="kc">medium</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">line-height</span><span class="p">:</span> <span class="mf">1.4</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="nt">h1</span><span class="o">,</span> <span class="nt">h2</span><span class="o">,</span> <span class="nt">h3</span><span class="o">,</span> <span class="nt">h4</span><span class="o">,</span> <span class="nt">h5</span><span class="o">,</span> <span class="nt">h6</span><span class="o">,</span> <span class="nt">address</span><span class="o">,</span> <span class="nt">table</span> <span class="nt">th</span><span class="o">,</span> <span class="nt">dl</span> <span class="o">></span> <span class="nt">dt</span><span class="o">,</span> <span class="nt">em</span><span class="o">,</span> <span class="nt">strong</span><span class="o">,</span> <span class="nt">cite</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span> <span class="s1">'Noto Sans'</span><span class="p">,</span> <span class="kc">sans-serif</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-weight</span><span class="p">:</span> <span class="mi">400</span><span class="p">;</span> <span class="c">/* normal */</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-variant</span><span class="p">:</span> <span class="kc">inherit</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-style</span><span class="p">:</span> <span class="kc">inherit</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="kc">inherit</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><h3>Noto Sans Japanese</h3>
<p>2014年, Noto Sans に Noto Sans CJK が加わった。</p>
<ul>
<li><a href="https://www.google.com/get/noto/help/cjk/">Noto Sans CJK – Google Noto Fonts</a></li>
<li><a href="http://googledevjp.blogspot.jp/2014/07/noto.html">オープンソースの美しい Noto フォントファミリーに日本語、中国語、韓国語が加わりました。 - Google Developer Japan Blog</a></li>
</ul>
<p>Noto Sans CJK を Web フォントとして使用するなら以下のサイトが参考になる。</p>
<ul>
<li><a href="https://www.google.com/fonts/earlyaccess">Google Fonts : Early Access</a></li>
</ul>
<p>日本語であれば “Noto Sans JP を導入すればよい<sup id="fnref:4"><a href="#fn:4" class="footnote-ref" role="doc-noteref">4</a></sup>。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">'//fonts.googleapis.com/earlyaccess/notosansjp.css'</span> <span class="na">rel</span><span class="o">=</span><span class="s">'stylesheet'</span> <span class="na">type</span><span class="o">=</span><span class="s">'text/css'</span><span class="p">></span>
</span></span></code></pre></div><p>フォント名は <code>"Noto Sans JP"</code> で指定する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">body</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span> <span class="s1">'Noto Serif'</span><span class="p">,</span> <span class="kc">serif</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-weight</span><span class="p">:</span> <span class="mi">400</span><span class="p">;</span> <span class="c">/* normal */</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-variant</span><span class="p">:</span> <span class="kc">normal</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-style</span><span class="p">:</span> <span class="kc">normal</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="kc">medium</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">line-height</span><span class="p">:</span> <span class="mf">1.4</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="nt">h1</span><span class="o">,</span> <span class="nt">h2</span><span class="o">,</span> <span class="nt">h3</span><span class="o">,</span> <span class="nt">h4</span><span class="o">,</span> <span class="nt">h5</span><span class="o">,</span> <span class="nt">h6</span><span class="o">,</span> <span class="nt">address</span><span class="o">,</span> <span class="nt">table</span> <span class="nt">th</span><span class="o">,</span> <span class="nt">dl</span> <span class="o">></span> <span class="nt">dt</span><span class="o">,</span> <span class="nt">em</span><span class="o">,</span> <span class="nt">strong</span><span class="o">,</span> <span class="nt">cite</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span> <span class="s1">'Noto Sans'</span><span class="p">,</span> <span class="s1">'Noto Sans JP'</span><span class="p">,</span> <span class="kc">sans-serif</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-weight</span><span class="p">:</span> <span class="mi">400</span><span class="p">;</span> <span class="c">/* normal */</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-variant</span><span class="p">:</span> <span class="kc">inherit</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-style</span><span class="p">:</span> <span class="kc">inherit</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="kc">inherit</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p>Noto Sans JP では JIS X 0208 の文字集合を収録しているため, JIS X 0213 第3第4水準漢字はサポートされていない模様。
これらの漢字が必要な場合は Noto Sans CJK の日本語フルセットが必要となる。</p>
<h3>Inconsolata</h3>
<p>プログラム・コードの表示用に Inconsolata を導入する。
Inconsolata は <a href="https://www.google.com/fonts/">Google Fonts</a> を使って導入可能。
最終的に Google Fonts の書式は以下のようになる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">'//fonts.googleapis.com/css?family=Noto+Serif|Noto+Sans|Inconsolata:400,700'</span> <span class="na">rel</span><span class="o">=</span><span class="s">'stylesheet'</span> <span class="na">type</span><span class="o">=</span><span class="s">'text/css'</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">'//fonts.googleapis.com/earlyaccess/notosansjapanese.css'</span> <span class="na">rel</span><span class="o">=</span><span class="s">'stylesheet'</span> <span class="na">type</span><span class="o">=</span><span class="s">'text/css'</span><span class="p">></span>
</span></span></code></pre></div><p>また CSS の記述は以下のようになる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">body</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span> <span class="s1">'Noto Serif'</span><span class="p">,</span> <span class="kc">serif</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-weight</span><span class="p">:</span> <span class="mi">400</span><span class="p">;</span> <span class="c">/* normal */</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-variant</span><span class="p">:</span> <span class="kc">normal</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-style</span><span class="p">:</span> <span class="kc">normal</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="kc">medium</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">line-height</span><span class="p">:</span> <span class="mf">1.4</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="nt">h1</span><span class="o">,</span> <span class="nt">h2</span><span class="o">,</span> <span class="nt">h3</span><span class="o">,</span> <span class="nt">h4</span><span class="o">,</span> <span class="nt">h5</span><span class="o">,</span> <span class="nt">h6</span><span class="o">,</span> <span class="nt">address</span><span class="o">,</span> <span class="nt">table</span> <span class="nt">th</span><span class="o">,</span> <span class="nt">dl</span> <span class="o">></span> <span class="nt">dt</span><span class="o">,</span> <span class="nt">em</span><span class="o">,</span> <span class="nt">strong</span><span class="o">,</span> <span class="nt">cite</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span> <span class="s1">'Noto Sans'</span><span class="p">,</span> <span class="s1">'Noto Sans JP'</span><span class="p">,</span> <span class="kc">sans-serif</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-weight</span><span class="p">:</span> <span class="mi">400</span><span class="p">;</span> <span class="c">/* normal */</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-variant</span><span class="p">:</span> <span class="kc">inherit</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-style</span><span class="p">:</span> <span class="kc">inherit</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="kc">inherit</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="nt">pre</span><span class="o">,</span> <span class="nt">tt</span><span class="o">,</span> <span class="nt">code</span><span class="o">,</span> <span class="nt">var</span><span class="o">,</span> <span class="nt">kbd</span><span class="o">,</span> <span class="nt">samp</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span> <span class="s1">'Inconsolata'</span><span class="p">,</span> <span class="s1">'Noto Sans JP'</span><span class="p">,</span> <span class="kc">monospace</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-weight</span><span class="p">:</span> <span class="mi">400</span><span class="p">;</span> <span class="c">/* normal */</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-variant</span><span class="p">:</span> <span class="kc">inherit</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-style</span><span class="p">:</span> <span class="kc">inherit</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="kc">inherit</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><h3>Noto Serif Japanese が欲しい!</h3>
<p>残念ながら,現時点では Noto Serif の日本語フォントは存在しない。
有料で明朝体 Web フォントを提供してくれるサービスはあるが,デザイン重視のサイトならともかく,うちのようにただ文字が多いだけのサイトでは「お金を払ってまでねぇ」という感じ。
そこで,いくつかオープンなフォントを探してみる。</p>
<h4>IPA 明朝</h4>
<ul>
<li><a href="http://ipafont.ipa.go.jp/">IPAexフォント/IPAフォント | IPAフォントのダウンロードサイトです</a></li>
</ul>
<p>オープンなフォントといえば IPA フォントだよね。
<a href="http://www.opensource.jp/osd/osd-japanese.html">OSD (Open Source Definition)</a> に準拠した<a href="http://ipafont.ipa.go.jp/ipa_font_license_v1-html">ライセンス</a>で提供されているため扱いやすい<sup id="fnref:5"><a href="#fn:5" class="footnote-ref" role="doc-noteref">5</a></sup>。</p>
<p>ただし IPA フォントは PDF 文書のようなものには向いてるけど, Web フォントには向いていない。
理由は以下の2つ。</p>
<ul>
<li>全体的に線が細く表示環境によっては文字がかすれてしまう。 ウェイトが1種類しかないのもマイナスポイント</li>
<li>JIS X 0213 の文字集合を全て収録しているのはいいが,データサイズが大きくなってしまう。第1第2水準漢字のみのサブセットがあればいいのに</li>
</ul>
<h4>あおぞら明朝</h4>
<ul>
<li><a href="http://blueskis.wktk.so/AozoraMincho/" title="ホーム | あおぞら明朝フォント">あおぞら明朝フォント</a></li>
</ul>
<p>IPA 明朝(厳密には IPA P明朝)からの fork で,7ウェイトをサポートしているのが特徴。
ライセンスも <a href="http://ipafont.ipa.go.jp/ipa_font_license_v1-html">IPA フォントライセンス</a>を継承している。
欠点は以下のとおり。</p>
<ul>
<li>ベースがプロポーショナル・フォントなので見た目が詰まった感じになってしまう</li>
<li>IPA フォントと同じく JIS X 0213 の文字集合を全て収録しているのはいいが,データサイズが大きくなってしまう</li>
</ul>
<h4>やさしさアンチック</h4>
<ul>
<li><a href="http://www.fontna.com/blog/1122/">フリーフォントやさしさアンチック(漫画用書体・セリフフォント)のダウンロード | フォントな。無料日本語フリーフォント</a></li>
</ul>
<p>アンチック体あるいは「アンチゴチ」と呼ばれる書体で,漢字はゴシック体,かな文字等は明朝体で表現されるのが特徴。
IPA フォントおよび <a href="https://mplus-fonts.osdn.jp/mplus-outline-fonts/">M+ フォント</a>がベースになっているため,ライセンスもこれらに準拠する形になっている。</p>
<p>見出しや短文に向いている。
長文はちょっとしんどいか。
第1第2水準漢字までをサポートしており,サイズ的にも手頃といえる。</p>
<h3>もう WOFF でいいじゃない</h3>
<p>複製・再配布が自由なフォントであれば WOFF (Web Open Font Format) に変換<sup id="fnref:6"><a href="#fn:6" class="footnote-ref" role="doc-noteref">6</a></sup> して Web フォントとして利用可能。
WOFF への変換には,以下のツールが使える。</p>
<ul>
<li><a href="http://opentype.jp/woffconv.htm">WOFFコンバータ</a> (<a href="http://opentype.jp/">武蔵システム</a>)</li>
</ul>
<p>作成した WOFF ファイルを使って CSS 内に <code>@font-face</code> を定義する。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">@</span><span class="k">font-face</span><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">font-family</span><span class="o">:</span> <span class="s1">'aozora-m'</span><span class="o">;</span>
</span></span><span class="line"><span class="cl"> <span class="nt">src</span><span class="o">:</span> <span class="nt">local</span><span class="o">(</span><span class="s1">'AozoraMinchoMedium'</span><span class="o">),</span> <span class="nt">url</span><span class="o">(</span><span class="s1">'/fonts/AozoraMinchoMedium.woff'</span><span class="o">)</span> <span class="nt">format</span><span class="o">(</span><span class="s1">'woff'</span><span class="o">);</span>
</span></span><span class="line"><span class="cl"> <span class="nt">font-weight</span><span class="o">:</span> <span class="nt">400</span><span class="o">;</span>
</span></span><span class="line"><span class="cl"> <span class="nt">font-style</span><span class="o">:</span> <span class="nt">normal</span><span class="o">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p>これで定義したフォント名 <code>"aozora-m"</code> を使って CSS に記述することができる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">body</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span> <span class="s1">'Noto Serif'</span><span class="p">,</span> <span class="s2">"aozora-m"</span><span class="p">,</span> <span class="kc">serif</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-weight</span><span class="p">:</span> <span class="mi">400</span><span class="p">;</span> <span class="c">/* normal */</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-variant</span><span class="p">:</span> <span class="kc">normal</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-style</span><span class="p">:</span> <span class="kc">normal</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="kc">medium</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"> <span class="k">line-height</span><span class="p">:</span> <span class="mf">1.4</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span></code></pre></div><p>Web フォントの形式はいくつかあるが,少なくとも Modern browser であれば WOFF をサポートしている。
IE のことは忘れましょう(笑)</p>
<h2>その他の Web フォント</h2>
<p>Google Noto Fonts 以外で利用しているフォントを列挙しておく。</p>
<h3>Font Awesome</h3>
<p><a href="https://fontawesome.com/">Font Awesome</a> は 5 系がリリースされ, SVG と JavaScript によるアイコン表示と制御がサポートされた。
詳しくは以下の記事を参照のこと。</p>
<ul>
<li><a href="https://text.baldanders.info/remark/2017/12/font-awesome-5-released/">Font Awesome 5 がリリースされた</a></li>
</ul>
<h3>Creative Commons Icon Font</h3>
<ul>
<li><a href="http://cc-icons.github.io/">Creative Commons Icon Font</a></li>
<li><a href="https://github.com/cc-icons/cc-icons">cc-icons/cc-icons</a></li>
</ul>
<p>なお <a href="https://fontawesome.com/">Font Awesome</a> では 5.0.11 以降から CC Licenses のアイコンは対応している。</p>
<ul>
<li><a href="https://text.baldanders.info/release/2018/05/creative-commons-icons-by-font-awesome/">Font Awesome 5.0.11 で Creative Commons アイコンに完全対応した</a></li>
</ul>
<p>ブラボー!</p>
<h2>関連(するかもしれない)記事</h2>
<ul>
<li><a href="https://text.baldanders.info/remark/2017/09/getting-started-mathjax-1/">ちょこっと MathJax</a> : MathJax で数式用の Web フォントを使用可能</li>
<li><a href="https://text.baldanders.info/remark/2016/10/japanese-serif-fonts-by-google-cdn/">Web フォントに関する覚え書き(明朝体編)</a></li>
</ul>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>“Noto” は “No-Tofu” の意味らしい。昔はフォント・セットに該当文字がない場合に表示される「□」を「トーフ(豆腐)」と呼んでいた。つまり Noto Fonts は世界中のすべての文字を統一デザインで網羅するという壮大なプロジェクトである。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:2">
<p><a href="https://www.google.com/fonts/">Google Fonts</a> サイトでは <code>@import</code> 文を使った書式や JavaScript による読み込みコードも例示されている。 <a href="#fnref:2" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:3">
<p>Modern browser では Bold や Italic がなくとも機械的に合成される(Italic は斜体(slant)で代用)。当然ながら綺麗ではない。 Bold や Italic を多用しないのであれば Web フォントから外す手はある。 <a href="#fnref:3" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:4">
<p>Noto Sans JP は Noto Sans Japanese から 350 のウェイトを削除しているらしい。アホなブラウザが 350 という値をうまくハンドリングできないからだそうな。まぁ文章の中で使うだけなら多くても 400 と 700 のふたつがあれば充分なのでこれで問題ないし,ダウンロードサイズが小さくなるのも魅力である。 <a href="#fnref:4" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:5">
<p>「<a href="http://www.gnu.org/licenses/license-list.ja.html">さまざまなライセンスとそれらについての解説 - GNUプロジェクト</a>」では <a href="http://www.gnu.org/licenses/license-list.ja.html#IPAFONT">IPA フォントライセンスは GPL とは両立しない</a>とある。派生作品ではオリジナルの名前を含めてはいけない,という制限があるため。 <a href="#fnref:5" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:6">
<p>機械的変換であれば翻案ではなく「逐語的コピー」とみなせる。 <a href="#fnref:6" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>