(追記あり)Linux(Ubuntu,Linux Mint,Tarhpup,XenialPupなど)で絵文字を表示する ちゃんと表示されますか? -> 😀😁😂😃👮💓😍🇯🇵🏀🚑✈🚅📌💾🇦㊙🈸🉐🔑🔔🕓
ハートマークなどが豆腐になっていたので、一応絵文字が表示されるようにしてみようと思いました。
こっちもよさそうなのですが、もう一つの方を試してみることにしました。
勝手に日本語に翻訳されていて意味不明になっているので右側の言語設定で英語に戻してください。
Emoji One Color SVG-in-OpenType fontというのをインストールします。
私のマシンLinux MintでUbuntu系なので簡単にPPAでインストールすることにしました。
sudo apt-add-repository ppa:eosrei/fonts sudo apt-get update sudo apt-get install fonts-emojione-svginot
うまくインストールできれば、デモページで表示できるとのことです。
http://eosrei.github.io/emojione-color-font/full-demo.html
私の環境では白黒とカラーが混在した状況になってしまいました。
本当はこうなるはずでした。
引用元
とりあえず、表示はされるのでこれで良い事にします。
絵文字を入力するにはEmojiOne Pickerが便利だそうですが、ブラウザで簡単に使うことができるサービスがありました。
使いたい絵文字を選ぶとフォームに移されて、それをクリックすればクリップボードにコピーされます。
これをツイッターなどに貼り付けると入力できるということです。
😀😁😂😃👮💓😍🇯🇵🏀🚑✈🚅📌💾🇦㊙🈸🉐🔑🔔🕓
私の環境ではカラーで表示されています。・・・と思ったのですが、編集画面ではカラーで表示されますが、ブログ記事では顔文字が白黒です。
別のフォントが使われているみたいですね。
追記
どうやらDejaVu Sans自体に絵文字が含まれているらしくそのせいでDejaVu Sansにある絵文字はそちらが優先されて使われることで白黒とカラーの混在になるらしいです。
そこで~/.config/fontconfig/fonts.confに以下の設定を書き込んでみました。
(うまく設定が打ち消し線を使って表示させられなかったので削除しました。)
どちらが効いているのかわかりませんが、再起動したら絵文字がカラーで統一されました。
もし、これでもダメならDejaVu Sansをアンインストールしてみてください。
TakaoフォントやIPAフォントで代用できるはずですし、Bitstream Veraが入っていれば問題ないと思います。
さらに追記
やっぱりDejaVu Sansをインストールしたら元に戻ってしまいました。
どこの設定を変えればよいのかわかりません。
不思議なことに開発ツールで見るとすべてカラーなのです。
また、Firefoxの設定で規定のフォントをsans-serifからserifにするとやはりカラーになります。
さっぱりです。
力業でDejaVu Sansフォントのファイルを別のフォントファイルに書き換えることで避けることはできるかも知れません。
さらに追記
UserAgentを変えていたせいというか、これを標準に戻したら直ってしまいました。
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:44.0) Gecko/20100101 Firefox/44.0
としてページを表示させた場合、メイリオとかMSゴシックを表示しようとしているためにうまくいかなかったのではないかなと思っていますが、本当のところはわかりません。
DejaVu SansをどうにかするよりもメイリオやMSゴシックをTakaoゴシックなどに書き換える設定をするとUserAgentを変えてもうまく行くのかも知れません。
違いました。
~/.config/fontconfig/fonts.confに以下の設定を書き込みます。
<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
<match>
<test qual="any" name="family"><string>sans-serif</string></test>
<edit name="family" mode="assign" binding="strong">
<string>Emoji One Color</string>
<string>Bitstream Vera Sans</string>
</edit>
</match>
<match>
<test name="family"><string>serif</string></test>
<edit name="family" mode="assign" binding="strong">
<string>DejaVu Serif</string>
<string>Emoji One Color</string>
</edit>
</match>
<match>
<test name="family"><string>monospace</string></test>
<edit name="family" mode="assing" binding="strong">
<string>DejaVu Sans Mono</string>
<string>Emoji One Color</string>
</edit>
</match>
<match>
<test name="family"><string>Apple Color Emoji</string></test>
<edit name="family" mode="assign" binding="strong">
<string>Emoji One Color</string>
</edit>
</match>
</fontconfig>
このあと
sudo dpkg-reconfigure fontconfig sudo fc-cache -f -v
を実行します。
そのあと、ログアウトしてログインし直すと反映されます。
多分、この結論で正しいと思うのですが・・・
ちなみにAndroidのFirefoxでデモページを表示するとこんな感じです。
拡大縮小すると黒く表示されたり、問題なく表示されたりします。
私にはどうにもできないのでこれで完了します。
2017/08/30 追記
この記事を書いてからUbuntuをインストールし直して、改めてNotoColorEmojiをインストールしてみました。
上のサイトから"Noto Color Emoji"のZIPファイルをダウンロードします。
解凍したものからNotoColorEmoji.ttfを/usr/share/fontsディレクトリ以下の適当な場所にコピーします。
そして、以下のフォーラムのページを参考にして
How to render NotoColorEmoji on Linux · Issue #36 · googlei18n/noto-emoji · GitHub
管理者権限でエディタを起動し、以下を入力します。
<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
<match target="scan">
<test name="family">
<string>Noto Color Emoji</string>
</test>
<edit name="scalable" mode="assign">
<bool>true</bool>
</edit>
<edit name="pixelsize" mode="assign">
<double>18</double>
</edit>
</match>
<match>
<test name="family"><string>sans-serif</string></test>
<edit name="family" mode="prepend" binding="weak">
<string>Noto Color Emoji</string>
</edit>
</match>
<match>
<test name="family"><string>serif</string></test>
<edit name="family" mode="prepend" binding="weak">
<string>Noto Color Emoji</string>
</edit>
</match>
<match>
<test name="family"><string>Apple Color Emoji</string></test>
<edit name="family" mode="prepend" binding="strong">
<string>Noto Color Emoji</string>
</edit>
</match>
</fontconfig>
これを/etc/fonts/conf.d/01-notocoloremoji.confという名前で保存します。
名前は適当で良いですが、頭の数字は優先度と関係があるのでこのままにします。
保存できたら
sudo dpkg-reconfigure fontconfig
fc-cache -f -v
を実行します。
今の所、うまくいっているようです。
参考にしてみてください。
