Qiitaアイコンを表示する  | HUGOで個人Webサイトを作る(2)

# 個人Webサイト

先日勢いでHUGOのCoderテーマで作成した個人Webサイトを一つずつ良くしていきます。
https://amuyikam.work

[前回](https://qiita.com/amuyikam/items/a323436ed694f0718c6c)はhome画面のプロフィール画像を変更しました。
今のhome画面はこんな感じです。

<img width="785" alt="スクリーンショット 2019-04-04 午後7.35.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/266939/7c10bcfa-8284-43ea-86e4-7db34037c97e.png">

TwitterとGithubのアイコンしか並んでいないのが寂しい気がしますので、今回はこの横にQiitaのアイコンを並べます。

# 環境

[hugo-coder](https://github.com/luizdepra/hugo-coder/)
commit 903cfa04432002f855035fbf793be71bac370b9f

```bash
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.14.2
BuildVersion:	18C54
$ go version
go version go1.11.2 darwin/amd64
$ hugo version
Hugo Static Site Generator v0.54.0/extended darwin/amd64 BuildDate: unknown
```


# Qiitaアイコンを表示する

それでは始めましょう。

## config.tomlにQiitaの記述を追加

GithubとTwitterの設定箇所はconfig.tomlにあり、urlを自分のプロフィールページのURLに変更したり、表示順序を入れ替えたり出来ます。
そこで無邪気にCoderテーマのデフォルトconfig.tomlを参考にしてそれっぽくQiitaを足してみましたが、画面上は何も変わりませんでした。

```toml:config.toml
[[params.social]]
    name = "Twitter"
    icon = "fab fa-twitter fa-2x"
    weight = 2
    url = "https://twitter.com/amuyikam/"
[[params.social]]
    name = "Qiita"
    icon = "fab fa-qiita fa-2x"
    weight = 3
    url = "https://qiita.com/amuyikam"
```

## HTMLの確認

該当部分は `themes/hugo-coder/layouts/partials/home.html`にあります。
HUGOのテンプレートエンジンの文法はまだ覚束ないのですが、先程設定したconfig.comlのparams.socialに記述した情報でループを回してパラメータを埋めていっている空気を感じます。とすると、ここは変更する必要はなさそうです。

```html:themes/hugo-coder/layouts/partials/home.html
    {{ with .Site.Params.social }}
    <ul>
      {{ range sort .}}
        {{ if .icon }}
          <li>
            <a href="{{ .url }}" aria-label="{{ .name }}">
              <i class="{{ .icon }}" aria-hidden="true"></i\
>
            </a>
          </li>
	{{ else }}
          <li>
            <a href="{{ .url }}" aria-label="{{ .name }}">{{ .name }}</a>
          </li>
	{{ end }}
      {{ end }}
    </ul>
    {{ end }}
```

上記テンプレートがレンダリングされた部分を見てみるとQiitaもhtmlに書き出されていることがわかります。html要素には正常になっているけれど、表示されていないという状態のようです。
`class="fab fa-qiita fa-2x"`が怪しいですね。

```html:index.html
          <li>
            <a href="https://twitter.com/amuyikam/" aria-label="Twitter">
              <i class="fab fa-twitter fa-2x" aria-hidden="true"></i>
            </a>
          </li>



          <li>
            <a href="https://qiita.com/amuyikam" aria-label="Qiita">
              <i class="fab fa-qiita fa-2x" aria-hidden="true"></i>
            </a>
          </li>
```

## `fab fa-twitter fa-2x`って何?

[Font Awesome](https://fontawesome.com/)というCSSで利用できるアイコン集があり、そのライブラリで定義されているclassのようです。
Font Awesomeは使い方がとても簡単で良い感じのアイコンが大量に用意されていてさらにその検索が使いやすい、とても有難いライブラリですね。すごい。

### 使い方

まずはheadの中に1行追加しますがhugo-coderで既に利用しているので、この読み込みは不要ですね。

```html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
```

[この画面](https://fontawesome.com/icons?d=gallery)で利用したいアイコンを検索します。
その後アイコンの個別ページで`<i class="fab fa-twitter"></i>`部分をクリックするとhtmlがコピーされます。後は表示したい箇所にそれを貼り付けると完了です。

<img width="508" alt="スクリーンショット 2019-04-04 午後11.06.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/266939/486cb1e3-f880-e317-47e7-015997eee4ed.png">

検索時のsuggestionとかhtmlが用意されていてクリックでコピーとか、細かいところですが体験が良いのでフロント作る時は参考にしたい。


## fa-qiitaが表示されない

2019/4現在でFont Awesomeに5000以上アイコンがあるのですが、Qiitaのアイコンは含まれていないためです。
検索しても出てきません。

<img width="743" alt="スクリーンショット 2019-04-04 午後11.11.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/266939/458c4f70-de8e-c19f-e086-97dee3aba177.png">

Githubのissueで管理されているNew Icon Requestsにもありません。悲しい。 -> ひとまず[Request上げておきました](https://github.com/FortAwesome/Font-Awesome/issues/14857)

この時点でQiitaアイコンを使うためには2つ選択肢があります。

1. Font AwesomeにNew Icon Requestを送る
2. 自分でFont Awesome相当のCSSを作成する

Font Awesomeに登録されることでQiitaアイコンを誰もが使えるようになるのでNew Icon Requestを送る方が良いのですが、いつ採用されるか、そもそも採用されるかどうかもわからないため、ここではRequestを送りつつ自作することにします。

## Font Awesome風カスタムアイコンの作成

<img width="454" alt="スクリーンショット 2019-04-07 午後11.32.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/266939/f704e6f5-4ecd-b057-38d2-0f83ddf28cba.png">

隣のTwitterアイコンを見ると、`.fa-twitter:before`の中で画像を指定しています。
これを参考にして `.fa-qiita:before`を定義してやると良さそうです。

ただし、`fa-`の名前空間はFont Awesomeが利用しています。独自のclassでその名前空間を利用するのは混乱の元となるため、クラス名を`icon-qiita`に変更しておきます。
(`fa-qiita`のままでも構いません。好み次第かなと思います。)

```toml:config.toml
[[params.social]]
    name = "Qiita"
    icon = "fab icon-qiita fa-2x"
    weight = 3
    url = "https://qiita.com/amuyikam"
```

ここから、アイコンの表示までは次のステップが必要です。

1. カスタムCSSを定義する
2. カスタムCSSが読み込まれるよう設定する
3. アイコン画像が読み込まれるよう配置する

### カスタムCSSを定義する

[こちらの記事](https://saruwakakun.com/html-css/reference/change-before-after)を参考にして、qiitaアイコンを表示するクラスを定義します。

```css
.icon-qiita:before {
    content: "";
    background-image: url("/images/qiita.png");
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    vertical-align: middle;
}
```

### カスタムCSSを読み込ませる

hugo-coderテーマでは、以下のコードでconfig.tomlの`params.custom_css`で設定したcssファイルを読みに行くように書かれています。

```html:themes/hugo-coder/layouts/_default/baseof.html:
    {{ range .Site.Params.custom_css }}
      <link rel="stylesheet" href="{{ . | relURL }}">
    {{ end }}
```

テーマのデフォルトのconfig.tomlを見ると、既に`css/custom.css`を読むよう設定されていたため、このままこれを利用します。

```toml:config.toml
[params]
    custom_css = ["css/custom.css"]
```

CSSは静的ファイルなので、`static`の下に置くと良さそうです。
先程のカスタムCSSを`static/css/custom.css`に置いてhtmlから読み込まれるようにします。

```console

$ cat static/css/custom.css 
.icon-qiita:before {
    content: "";
    background-image: url("/images/qiita.png");
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    vertical-align: middle;
}
```

### アイコン画像を配置する

最後に、画像を配置します。
Qiitaの画像は[Qiita ブランドガイドライン](https://help.qiita.com/ja/articles/others-brand-guideline)からダウンロードできます。この中から`qiita-favicon.png`を`static/images/qiita.png`に配置します。

```console
$ cp ~/Downloads/Qiita/png/qiita-favicon.png ./static/images/qiita.png 
```

## 動作確認

これでQiitaアイコンが表示されるはずです。
`hugo server`で開発用サーバを立ち上げてブラウザで確認してみましょう。

<img width="795" alt="スクリーンショット 2019-04-08 午前0.01.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/266939/a2fbf431-7035-183b-60ba-38d4031b8f19.png">

予定通り、QiitaアイコンをTwitterアイコンの横に並べることができました。🎉🎉🎉
ここまでの変更をGithubにpushして、netlifyが反映してくれているのを確認したら完了です。

## Qiitaアイコンの使用について

[ブランドガイドライン](https://help.qiita.com/ja/articles/others-brand-guideline)にあるように、Qiitaのブランドロゴ等を利用する際には指定事項、禁止事項を守る必要があります。
hugo-coderテーマのデザインではアイコンをモノクロでまとめてあるのですが、ブランドガイドラインの禁止事項により、 **アイコンの色を変更することはできません。**
同じように、ロゴ画像はpngよりもsvgファイルの方が良いのですが、禁止事項でとにかくロゴをいじるのが許可されていないためpngのままとしました。

# まとめ

- hugo-coderのhome画面にQiitaアイコンを追加しました
- 実装はFont Awesome
- Font Awesomeに無いアイコンも並べられます

この方法で色々なSaaSのアイコンを並べることができます。楽しい。
どうせ白黒アイコンで統一できないならTwitterの方も色付きにしようかな。

# 参考

https://saruwakakun.com/html-css/reference/change-before-after