title: X-Face compatibleなアイコンを目指して
author: Amane Katagiri
summary: W*
date: 2017-12-12T04:15:00+09:00
category: tech
license: CC BY 4.0
og_image: images/xface/og-xface.png
rating: sfw
ai_summary: 電子メールやネットニュースのヘッダに48x48ピクセルの2値画像を付加する技術「X-Face」について解説した記事です。SylpheedやMewなどの対応クライアントの紹介に加え、bitmapコマンドやオンラインコンバータを用いたアイコンの作成方法、実際のヘッダ用テキストへの変換手順が詳述されています。古き良き技術をあえて現代のSNSアイコンなどに活用する楽しみ方を提案しています。
ai_keywords: X-Face, 電子メール, メールヘッダ, アイコン, 48x48, 2値画像, Sylpheed, XBM, ビットマップ, レトロ

[WORDIAN Advent Calendar 2017](https://adventar.org/calendars/2573)

こんにちは。12月12日です。

[TOC]

# X-Face（えっくすふぇいす）って何？

> Not to be confused with Xfce.
> """[X-Face](https://en.wikipedia.org/wiki/X-Face)"""

電子メールやネットニュースを使っていますか？　X-Faceはメールやネットニュースに`X-Face:`ヘッダとして付加されています。モダンな電子メールクライアントやニュースリーダでは、メッセージを開いた際にこのヘッダを解釈して48x48ピクセルの2値画像を表示します。

モダンなソフトウェアというのは、[Sylpheed](http://sylpheed.sraoss.jp/)や[Kmail](https://userbase.kde.org/KMail)、または[Mew](http://www.mew.org/)などのモダンなソフトウェアです（下画像はSylpheed）。Thunderbirdは対応するプラグインが消えてしまっており[^removedplugin]、もはやモダンな電子メールクライアントではないようです。

![SylpheedでX-Faceアイコンが表示されている様子](/images/xface/sylpheed.png){width=750 height=200}

なお、さらに新しい規格として、base64エンコードされたPNG画像を付加する`Face:`ヘッダも存在します[^face]。サイズはX-Face同様48x48に固定されてしまいますが、X-Faceとは違ってカラー画像を用いることができます。こちらもThunderbirdにはまともなプラグインが残っていません。

また、複数の`X-Face:`ヘッダを用いてカラー画像、48x48より大きな画像、アニメーションなどを表現する規格も存在しますが、モダンすぎてほとんどサポートされていません。nao.bird.to: Software Archive[^naobirdto]には動作するPerlスクリプトがあるようです。

[^naobirdto]: http://nao.bird.to/soft/index.html
[^removedplugin]: [ThunderbirdでX-Faceを表示して遊ぶ](https://forums.mozillazine.jp/viewtopic.php?f=29&t=8163), [MessageFaces](https://addons.mozilla.org/ja/thunderbird/addon/messagefaces/)
[^face]: [The Face Header](http://quimby.gnus.org/circus/face/)

# X-Face compatibleなアイコンを作る

モダンでクールなX-Faceに対応するためには、48x48の2値画像を作る必要があります。2値ビットマップを表現するにはXBM画像が便利です。

## アイコンを持っていない場合

簡単です。`bitmap -size 48x48`でドットを打ちましょう。

![ビットマップエディタで「あまね」と打っている様子](/images/xface/bitmap.png){width=750 height=369}

出来上がった`amane.xbm`はこんな感じになります。

```c
#define amane_width 48
#define amane_height 48
static unsigned char amane_bits[] = {
   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
   0x0c, 0x03, 0x00, 0x00, 0x00, 0x00, 0x98, 0x11, 0x00, 0x00, 0x00, 0x00,
   0xf0, 0x1f, 0x04, 0x00, 0x00, 0x00, 0x80, 0x00, 0x04, 0x20, 0x00, 0x00,
   0xc0, 0x80, 0x1f, 0x20, 0x00, 0x00, 0x40, 0x00, 0x04, 0x78, 0x00, 0x00,
   0xf0, 0x00, 0x04, 0x30, 0x0c, 0x00, 0xcc, 0x85, 0x1f, 0xd8, 0x1b, 0x00,
   0x44, 0x03, 0x04, 0x3c, 0x30, 0x00, 0xc4, 0x03, 0x04, 0x1e, 0x20, 0x00,
   0x7c, 0x02, 0x04, 0x13, 0x3e, 0x00, 0x40, 0x02, 0x0f, 0x10, 0x7a, 0x00,
   0x40, 0xc0, 0x3c, 0x10, 0x4e, 0x00, 0x40, 0x40, 0xc4, 0x10, 0x00, 0x00,
   0x00, 0x80, 0x07, 0x10, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
   /* snip */
   0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00};

```

## アイコンを持っている場合

より簡単です。[How to make X-Face](http://roguelife.org/x-face/make.xhtml)や[スナフキンのできるまで](http://roguelife.org/x-face/make-xface.html)などを参考に、X-Face compatible加工について学びましょう。元画像にもよりますが、手で打たなければならないドットの量は少なくなると思います。

1. 加工前の画像:
![水色の背景に「見たい！知りたい！原子力」という白抜きの文字](/images/xface/xface002.jpg){width=250 height=250}
2. グレースケールにした上で、48x48に縮小:
![上記の画像を48x48ピクセルに縮小し、グレースケールにしたもの](/images/xface/xface003.png){width=48 height=48}
3. いい感じにドットを打つ:
![上記の画像を白黒2値にしたもの](/images/xface/xface004.png){width=48 height=48}

なお、[Online X-Face Converter](http://www.dairiki.org/xface/)を用いれば、手での調整が効かない代わりに自動で48x48の2値画像に変換できます。さらに、変換した画像のX-Face表現も取得できるのでとても便利ですね。

# X-Face compatibleなアイコンを使う

出来上がったアイコンを自分で眺めて楽しむのもいいですが、ぜひ色々なところで使ってみましょう。

## `X-Face:`ヘッダとして使う

簡単です。先述した[Online X-Face Converter](http://www.dairiki.org/xface/)でX-Face形式に変換できます。もしサーバにアイコンをアップロードするのが不安なら、[Compface](http://www.linuxfromscratch.org/blfs/view/cvs/general/compface.html)に同梱されている`xbm2xface.pl`を用いてX-Face表現に変換できます。

![「見たい！知りたい！原子力」の48x48ピクセル白黒2値画像](/images/xface/xface004.png){width=48 height=48}

```text
X-Face: DE6CX2~b!6.CnZ15hL{G^c1rE}n2cHH6eKU'!cO$^0A&9I*I~1e&`NV3gb%ypxhVEP.I3Q*
 S**R0WR/IC<flQrWkTfeb'HoIfT/'6z08VC-T':;z%Sa,i;{YR,YQ`Lksj&`9?7&%EeXeL6v\2][YX
 h#{XN5@~|7?dKl8j_dv84S,d9^T\m>vSRyaxAwp&wYFqfRUHsC?U?Dak4"X@k$mq:/6ko4G
```

お使いのモダンな電子メールクライアントやニュースリーダに`X-Face:`ヘッダを設定しましょう。送信時に`X-Face:`ヘッダが付加されているのが確認できると思います。

## 画像として使う

より簡単です。お気に入りの画像編集ソフトウェアで適当なサイズに拡大しましょう。ピクセルがボケてしまうので補間機能を用いてはいけません。GIMPを使うか、ImageMagickで`convert -scale 480x icon.xbm icon.png`などとするのがおすすめです。変換後のサイズは48の倍数にすると良いでしょう。

![「見たい！知りたい！原子力」の48x48ピクセル白黒2値画像を240x240ピクセルに拡大したもの](/images/xface/xface005.png){width=240 height=240}

# おわりに

X-Face compatibleでモダンなアイコンをTwitterやASKfmやSarahahやPeingなどに設定すると、解像度が高くてカラフルなアイコンを使っている友達に一歩差をつけることができるといいですね。