0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ファイルのアイコンを変更する道のり

Posted at

最初に

環境:ubuntu 20.04
やりたいこと:jsxにわかりやすいアイコンを付けたい(jsxにかかわらずアイコンが設定されてない拡張子にアイコンを付けたい)
参考サイト:https://blog.robertelder.org/custom-mime-type-ubuntu/

注意:MIMEをいじります。どこかに副作用がでても自己責任でお願いします(__)。

ファイルのアイコンが汎用的なやつになるのが嫌だった

Screenshot from 2022-05-01 19-06-35.png

jsxファイルはubuntuの標準アイコンには搭載されていないため、JSファイルと違って汎用的なアイコンで表示される。ただこれでは正直見にくい。。

ちなみにVScodeで開くときにはわかりやすいアイコンがついている。こんな感じでわかりやすいアイコンを付けたい

Screenshot from 2022-05-01 22-21-04.png

※ちなみにreactのロゴは「react ロゴ svg」と検索すれば出てくる。アイコンで使うにはsvgである必要があるので注意。

初手:一ファイルづつアイコンを変える方法

ファイルを右クリック → プロパティ を選択すると、下のような画面が表示される。そこでアイコンをクリックすると、好きな画像を選択することができる。

Screenshot from 2022-05-01 22-27-05.png

画像のセット後

Screenshot from 2022-05-01 19-05-57.png

おお!ちゃんと変わっている!。

でも、これを全部のファイルにやるのはありえないよね...

どこかに、拡張子に応じてアイコンを割り振っている設定ファイルがあるはずだ。次はそれを探す旅に出た

2の策:設定ファイルに追記する

設定ファイルを見つけた

サイトを点々と巡ったところ、ファイルタイプの設定が書かれているものは
/usr/share/mime/packages
にあることがわかった

某サイトを参考にcustom-mine-javascriptXML.xml
というファイルを作成した

sudo vim custom-mine-javascriptXML.xml

↓custom-mine-javascriptXML.xmlの中身

<?xml version="1.0" encoding="UTF-8"?>
<mime-info xmlns='http://www.freedesktop.org/standards/shared-mime-info'>
        <mime-type type="application/javascriptXML">
    <comment>jsx File</comment>
    <glob pattern="*.jsx"/>
  </mime-type>
</mime-info>

次にこの編集を読み込んでもらうために次のコマンドを叩く

sudo update-mime-database /usr/share/mime

これで新しいファイル形式を登録することに成功する。
ただ、アイコンをセットするにはもう一つ設定しなければならない

ファイルアイコンを管理している場所(全てではない)

次にお邪魔するのは
/usr/share/icons/hicolor/scalable/mimetypes
だ。

ここに、アイコンで使うsvgファイルがいくつか保管されている。全てではないので他にもっと適切な設置場所があるのかもしれないが、一応上手く言ったのでそのまま書く。

sudo cp ~/React-icon.svg application-javascriptXML.svg

注意するべきは、画像の名前を、先のxmlで書いた「type="application/javascriptXML"」と似せて、
「application-javascriptXML.svg」というファイル名にしていることだ。

とりあえずxml側の「/」は、画像名では「-」に変換する必要がある。
それ以外は同じ名前を与えて、末尾に「.svg」を付けた画像名にすれば、システムが両者の関連付けを把握するようだ。

更新するために以下のコマンドを叩く

sudo update-icon-caches /usr/share/icons/*

次にjsxのあるフォルダを見に行くと...

Screenshot from 2022-05-01 22-12-03.png

来ました。すべてのjsxにreactのロゴが写りました!

最後に注意

これ、プロパティを見ると、ファイルタイプがxmlで適当に名付けた application/javascriptXML になってるんですよね。

ファイルタイプって結構大事らしいので、どこかで副作用が起きないか心配ではあります。詳しい方がいたら警告していただきたいです。

Screenshot from 2022-05-01 22-57-15.png

また、これに伴い最初にファイルを開こうとすると、
「これを開けるアプリケーションがないです」と返される。右クリックでVScodeなどを選択すれば普通に開けるが。。。

問題が起これば追記していきます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?