人名情報を正確に管理できる業務アプリ基盤 ～IPA文字情報基盤を活用して～

# odooでのFont-Family

IPA文字情報基盤で整備された**IPAmj明朝フォント**（`IPAmjMincho`）を活用し、業務アプリ基盤であるodooで日本語の人名情報をより正確に表示・管理できるようにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/1a5bc4ee-6826-fb81-1158-26458b72732b.png)

odooでは、すでに、多言語に対応した`Odoo Unicode Support Noto`フォントがデフォルトに設定されており、日本語も表示することが可能です。
`Odoo Unicode Support Noto`フォントは、`Font-Family`としてCSS(SCSS)で設定されていますが、その設定の前（先頭）に、`IPAmjMincho`を追加し、**IPAMj明朝フォント**が優先的に適用されるようにします。

# Assets Management
odooには、[Assets Management](https://www.odoo.com/documentation/14.0/developer/reference/javascript/javascript_reference.html#assets-management) がありますので、このメカニズムを使って、`Font-Family`の先頭に**IPAmj明朝フォント**(`IPAmjMincho`)を追加します。

## web.assets_backend

自動生成される`web.assets_backend.css`内の`Font-Family`で、`Odoo Unicode Support Noto`が指定されているのですが、その前（先頭）に`IPAmjMincho`が追加されるようにします。
結果的に、次のようなCSSファイルが生成されるように拡張します。

```
:
font-family: IPAmjMincho, "Odoo Unicode Support Noto", "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
:
```

**参考：**[Main bundles](https://www.odoo.com/documentation/14.0/developer/reference/javascript/javascript_reference.html#main-bundles)

## 自動生成の流れ
`Font-Family`を含む、web.assets_backend.cssは、次の流れで、自動生成されているようです。

1. `Odoo Unicode Support Noto`フォントを追加しているのは、`o-add-unicode-support-font`関数です。これは、`/web/static/src/scss/utils.scss`で定義されています。
1. `/web/static/src/scss/bootstrap_overridden.scss`で、`$font-family-sans-serif`変数の既定値が定義されます（`o-add-unicode-support-font`関数の呼び出し）。
1. `/web/views/webclient_templates.xml`の`<template id="_assets_backend_helpers"/>`で、`/web/static/src/scss/bootstrap_overridden.scss`への`<link/>`を定義しています。
1. `/web/views/webclient_templates.xml`の`<template id="assets_backend"/>`の先頭で、templateの`web._assets_backend_helpers`をt-callしています。
1. その後、`<template id="assets_backend"/>`内で、間接的に`$font-family-sans-serif`変数が参照されています。

## 拡張方法

自動生成の流れから、`$font-family-sans-serif`変数の既定値の設定後、参照される前に、その変数の先頭に`IPAmjMincho`を追加する方法で拡張します。
具体的には、templete id=`'web._assets_backend_helpers'`を拡張します。

### `IPAmjMincho`の追加
`join`関数を使って、`$font-family-sans-serif`変数の先頭に、`IPAmjMincho`を追加します。

```ipamjmincho.scss
$font-family-sans-serif: join(IPAmjMincho, $font-family-sans-serif, $separator: comma);
```

### Adding files in an asset bundle

[Adding files in an asset bundle](https://www.odoo.com/documentation/14.0/developer/reference/javascript/javascript_reference.html#adding-files-in-an-asset-bundle) を参考に、scssへのlinkを追加し、`web._assets_backend_helpers`を拡張します。

```template.xml
:
<template id="_assets_backend_helpers" inherit_id="web._assets_backend_helpers">
    <xpath expr="//link[last()]" position="after">
        <link rel="stylesheet" type="text/scss" href="/ipamjmincho/static/src/scss/ipamjmincho.scss"/>
    </xpath>
</template>
:
```

# 東京都葛飾区と奈良県葛城市
異体字(Unicode IVS/IVD)の例として、東京都葛飾区と奈良県葛城市について、確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/c673594d-784d-bfde-8ee1-01a589653175.png)

https://moji.or.jp/mojikiban/aboutivs/

|住所|MJ文字図形名|画像|Moji_Joho IVS|
|---|-----------|----|----------|
|東京都葛飾区|[MJ022336](https://moji.or.jp/mojikibansearch/info?MJ%E6%96%87%E5%AD%97%E5%9B%B3%E5%BD%A2%E5%90%8D=MJ022336)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/a1abcabb-1216-7c86-9e3b-bc7b43055778.png)|<845B,E0103>|
|奈良県葛城市|[MJ022335](https://moji.or.jp/mojikibansearch/info?MJ%E6%96%87%E5%AD%97%E5%9B%B3%E5%BD%A2%E5%90%8D=MJ022335)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/58882aee-56b2-b81b-c963-8e59ec5d4d0c.png)|<845B,E0102>|

# odooのcontacts

実際にodooのcontactsアプリで、地名を登録して確認しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/1ea486b6-6471-6c73-39a7-49f1fe522fcc.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/033c8ec9-51be-76e6-bfa2-6e7a79b6379d.png)

# まとめ

1. Assets Managementのしくみで、odooを拡張することができることを確認しました。
1. 実際には、`$font-family-sans-serif`変数の先頭に、`IPAmjMincho`を追加する方法で、"web._assets_backend_helpers"を拡張しました。
1. 東京都葛飾区と奈良県葛城市を例に、IPA文字情報基盤で整備された**IPAmj明朝フォント**（`IPAmjMincho`）をodooで利用できることを確認しました。

**ソースコード:** https://github.com/jp-96/odoo-fonts