【iDempiere Lab】アイコンフォントを日本語にして遊んでみる

オープンソースのERP iDempiereには、画面のアイコンを「画像」と「アイコンフォント」を切り替える事ができます。JPiereでは、初期設定は「画像」になっていますが、もちろん「アイコンフォント」もちゃんと使えるようになっています。

そこで「アイコンフォント」を使って、アイコン自体を日本語にするという、ちょっとした"遊び"をしてみたいと思います。

アイコンフォントに切り替えたJPiereの画面
アイコンフォントに切り替えたJPiereの画面

アイコンフォントへの切り替え方法

システムコンフィグ設定:ZK_THEME_USE_FONT_ICON_FOR_IMAGE

システムコンフィグ設定ウィンドウで、「ZK_THEME_USE_FONT_ICON_FOR_IMAGE」を「Y」に設定して下さい。

システムコンフィグ設定
システムコンフィグ設定

これでいったんログアウトして、ログインしなおせば、アイコンフォントに切り替わります。上と下の画像を見比べて頂けると、アイコンが変わっているのがわかると思います。

アイコンフォントを日本語にしてみる

アイコンフォントは、フォントなので、日本語でも表示できるのではないかと思い、試してみました。

試してみたところ思っていた通り出来ましたね!手順は次の通りです。

font-icons.css.dspの日本語化

アイコンフォントの設定は、font-icons.css.dspファイルにありますので、そのファイルを日本語化します。

フォントなので、大きさやBoldの指定もできます。

 

CSSの修正

CSSがアイコン用になっているので、日本語の文字に対応できるように、特にボタンの幅を調整する必要があります。

◆toolbar-button

◆.toolbar-button .z-toolbarbutton-content

子タブのアイコンも試してみます。

◆.adwindow-detailpane-toolbar .z-toolbarbutton

試してみた所感

想定通り出来たので面白かったのですが、日本語の文字だと"幅"を調整するのが面倒だなと思いました。文字数を統一できればかなり楽にはなるかと思いますが、文字数を限定して意味がわかりずらくなると本末転倒ですしね…。

そして、iDempiereのシステム的に同じアイコンフォントが割り当たったいる箇所が複数あったりしますので、そのような場合表示する場所によって、日本語表示とアイコンフォントを切り替えたいような場合は、CSSだけでなくプログラムの修正も必要に箇所があるだろうと思います。

本当にきれいにアイコンフォントを日本語化対応しようすると、結構面倒だろうと想像します。

ま~わざわざアイコンフォントにしている所を、今回のような使い方をしてしまっては、アイコンフォントの意味が無いので、今回試していること自体がナンセンスかなと思いますが、お遊びという事で・・・^^;

関連するコンテンツ