読者です 読者をやめる 読者になる 読者になる

あれこれ備忘録@はてなブログ

勉強したことやニュースや出来事を備忘録として書いていきます

(追記あり)Linuxで絵文字を表示する ちゃんと表示されますか? -> 😀😁😂😃👮💓😍🇯🇵🏀🚑✈🚅📌💾🇦㊙🈸🉐🔑🔔🕓

ハートマークなどが豆腐になっていたので、一応絵文字が表示されるようにしてみようと思いました。

qiita.com

こっちもよさそうなのですが、もう一つの方を試してみることにしました。

websetnet.com

勝手に日本語に翻訳されていて意味不明になっているので右側の言語設定で英語に戻してください。

Emoji One Color SVG-in-OpenType fontというのをインストールします。

私のマシンLinux MintUbuntu系なので簡単に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

私の環境では白黒とカラーが混在した状況になってしまいました。

f:id:t_massann:20160604000104j:plain

本当はこうなるはずでした。

f:id:t_massann:20160604001527p:plain

引用元

github.com

とりあえず、表示はされるのでこれで良い事にします。

絵文字を入力するにはEmojiOne Pickerが便利だそうですが、ブラウザで簡単に使うことができるサービスがありました。

syncer.jp

使いたい絵文字を選ぶとフォームに移されて、それをクリックすればクリップボードにコピーされます。

これをツイッターなどに貼り付けると入力できるということです。

😀😁😂😃👮💓😍🇯🇵🏀🚑✈🚅📌💾🇦㊙🈸🉐🔑🔔🕓

私の環境ではカラーで表示されています。・・・と思ったのですが、編集画面ではカラーで表示されますが、ブログ記事では顔文字が白黒です。

別のフォントが使われているみたいですね。

追記

どうやらDejaVu Sans自体に絵文字が含まれているらしくそのせいでDejaVu Sansにある絵文字はそちらが優先されて使われることで白黒とカラーの混在になるらしいです。

github.com

そこで~/.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

を実行します。

そのあと、ログアウトしてログインし直すと反映されます。

多分、この結論で正しいと思うのですが・・・

ちなみにAndroidFirefoxでデモページを表示するとこんな感じです。

f:id:t_massann:20160605171449p:plain

拡大縮小すると黒く表示されたり、問題なく表示されたりします。

私にはどうにもできないのでこれで完了します。

広告を非表示にする