はじめてのodooカスタムモジュール - DockerとVisual Studio Codeを使った開発環境

# DockerとVisual Studio Codeを使って、odooの開発環境を構築し、odooカスタムモジュールを作成・インストールします。

**参考ページ：**

- [Docker Official Images](https://hub.docker.com/_/odoo)  
Odoo (formerly known as OpenERP) is a suite of open-source business apps.
- [Creating your first Odoo module using Docker and Visual Studio Code](https://medium.com/@dupski/creating-and-installing-your-first-odoo-module-using-docker-and-visual-studio-code-41ebdfd362e4)  
Russell Briggs  
Jun 29, 2020

https://medium.com/@dupski/creating-and-installing-your-first-odoo-module-using-docker-and-visual-studio-code-41ebdfd362e4

# はじめに

本記事では、次の３つについて、説明しています。

1. odooのDocker開発環境を作成し、実行します。
1. Visual Studio Code(以下、VSCode)をインストールし、Dockerにアクセスするための構成を設定します。
1. 開発環境でodooカスタムモジュールを新規に作成し、odooデータベースにインストールします。

## 前提条件
この記事の内容を検証するには、次のものが必要です。

 - Windows10 Home (64bit版, バージョン 20H2) 
 - [Git for Windowsのインストール](https://gitforwindows.org/) (git bashを使うため)
 - [Docker Desktopのインストール](https://www.docker.com/products/docker-desktop)  
   Docker Desktopのインストール後、「Linux カーネル更新プログラム」のインストールが必要な場合があります。
 - PostgreSQLデータベースサーバーへのアクセス環境  
git bashで次のコマンドを実行します。

``` odoodb.sh
docker run -d \
  -e POSTGRES_USER=odoo \
  -e POSTGRES_PASSWORD=odoo \
  -e POSTGRES_DB=postgres \
  -v postgres11-data:/var/lib/postgresql/data \
  -p 5432:5432 \
  --name db postgres:11

```

 - 素のodooデータベースを備えたDockerで実行されているodooのコピー  
   これには[junari/odoo](https://hub.docker.com/r/junari/odoo) Dockerイメージを使用することをお勧めします。これについては、次のステップ１で説明します。:)

# ステップ1：Docker開発環境を起動します

[junari/odoo](https://hub.docker.com/r/junari/odoo) Dockerイメージを使用する場合は、次のコマンドを使用してodoo開発環境を起動できます（作業を楽にするために、シェルスクリプトファイルとして保存しておくことをお勧めします！）

```odoojunari.sh
docker run --rm -it \
  --name=junari-odoo-dev \
  -v junari-odoo-data:/opt/odoo/data \
  -v junari-odoo-vscode:/opt/odoo/.vscode \
  -v junari-odoo-custom-addons:/opt/odoo/custom_addons \
  -v junari-odoo-home:/home/odoo \
  -p 8069:8069 \
  --env-file=odoo.env \
  junari/odoo \
  bash

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/5ada3d5c-e0f0-3a3d-c2dc-da9c7924d05f.png)


`odoo.env`ファイルを参照していますので、実行前にカレントディレクトリに次のファイルを作成してください。

``` odoo.env
DB_HOST=host.docker.internal
DB_PORT=5432
DB_USER=odoo
DB_PASSWORD=odoo
ODOO_EXTRA_ARGS= --db-filter=^%d$

```

ファイル追加後、再実行するとエラーが出ますので、`exec winpty bash`を事前に実行してから、再実行してください。

```
exec winpty bash
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/d0c5a776-4335-7f39-db10-1a0b80490ca2.png)


このコマンドが何をしているのかを、確認していきましょう。

1. `junari-odoo-dev`と名付けた新しい`junari/odoo`コンテナを起動します。
1. 次のようなDocker「`ボリューム`」（ミニ仮想ハードディスクのようなもの）に接続します。
1. `junari-odoo-data`ボリューム  
アップロードやセッションに関するodooファイルを保存します
1. `junari-odoo-vscode`ボリューム  
Visual Studio Codeのワークスペースファイルを保持します
1. `junari-odoo-custom-addons`ボリューム  
ここで、新しいodooカスタムモジュールを開発します
1. `junari-odoo-home`ボリューム  
odooユーザー（開発ユーザー）のホームディレクトリを指定します。  
VS Codeはここにいくつかのファイルを保存します。また、コードをGitHubにアップロードする場合は、**SSHキー**をこのフォルダーに配置する必要があります。
1. コンテナが実行されると、「`bash`」コマンドプロンプトが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/15efe3a7-1580-1098-c708-66ff0f104fe8.png)


# ステップ2：DockerコンテナーにアクセスするようにVSCodeを構成する

VSCodeをまだお持ちでない場合は、[こちらからダウンロード](https://code.visualstudio.com/download)してください。
VSCodeには、コンテナ（さらには、仮想マシンやWSLも）内にいるかのように開発できる優れた「リモート開発」機能があります。これは、VS Code Serverユーティリティをコンテナ内のホームディレクトリにアップロードすることで機能しています。このユーティリティを使用して、VSCodeユーザーインターフェイスからコンテナ内で直接コードを実行できます。うまく出来ていますよね。
DockerコンテナーでVSCodeリモート開発を使用するには、最初に「`Remote-Containers`」拡張機能をインストールしてください。「`Extentions`」ツールバーボタンをクリックし、「`remote`」をキーワードとして拡張機能を検索し、インストールします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/80ee16cb-6a12-583e-2667-2c1196196ea5.png)

これをインストールしたら、「`Remote Explorer`」ツールバーボタンをクリックします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/8428bcc3-e608-548b-52dd-57e41233e864.png)

odooコンテナが実行されている場合は、「`Others Containers`」リストに表示されます（「`Others Containers`」とは、まだVSCodeで開発用に使用されていないコンテナです）。

開発用のコンテナを開くには、名前の右側にある小さな四角をクリックすると（`Attach to Container`）、新しいVSCodeウィンドウが起動します。すると、VSCodeによって、サーバーユーティリティがコンテナのodooホームフォルダーに自動的にインストールされ、「`Welcome`」画面が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/f7ca9adf-657e-003d-a601-529ea81b43aa.png)

ソースコードにアクセスできるようにするには、VS Codeの左上にある「`Explorer`」ツールバーボタンをクリックして、「`Open Folder`」ボタンをクリックします。
すると、「`Open Folder`」ダイアログがポップアップ表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/9c2adb0f-f38c-98fc-5768-4fb54b3957c7.png)

`/home/odoo` を `/opt/odoo` に変更し、OKボタンをクリックすると、odooコードのルートフォルダーが開かれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/ba772c8c-915c-40ea-3732-723672328894.png)

これで、準備が整いました。


# ステップ3：odooモジュールを新規に作成する

このステップでは、「空の」odooモジュールを作成し、odooデータベースにインストールする準備をします。

`custom_addons`フォルダを開き、その中に新規に`contact_widgets`フォルダを追加作成します。
さらにそのフォルダの中に、2つの空のファイル、`__manifest__.py`と`__init__.py`を作成します。

`__manifest__.py`ファイルを開き、次のとおりに、編集し、保存します。

```__manifest__.py
{
    'name': 'Contact Widgets Module',
    'version': '13.0.0',
    'summary': 'Test Module',
    'author': 'My Company Ltd',
    'website': 'https://www.mycompany.com',
    'depends': [
        'contact',
    ],
    'data': [
    ],
    'installable': True,
    'application': True,
    'auto_install': False,
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/7e98fa36-9ce6-792d-5f37-3d0f91bc5c0e.png)

**はじめてのodooモジュール**を作成できました。さらに進めていきましょう。


#ステップ4:VSCode Python拡張機能をインストールし、odooを起動します。

新しいodoo開発コンテナを初めて使用するときは、そのコンテナ中にPython拡張機能をインストールする必要があります。これを行うには、コンテナーに接続されているVSCodeウィンドウ内から、`Extentions`ツールバーボタンを押し、`Python`をキーワードに検索して、「`Install in Container junari/odoo (/junari-odoo-dev)`」ボタンを押下します。「ウィンドウのリロード」を求められたら、それを実行してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/e3e5072a-090e-f59c-e8ff-2a8e1195e734.png)

次に行わなければいけないことは、正しいPythonインタープリターを選択することです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/9dcf9b48-dde9-b803-c9ec-a7ffa556fe57.png)

Pythonファイルをクリックすると、これを行うように求められますが、そうでない場合は、VSCodeステータスバーを確認して、Python通知をクリックしてください。
※ 執筆現在、`Python 3.6.9 64bit`を選択しました。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/391703bf-976a-3896-b898-d734e1576b1a.png)

次に、VSCodeにodooの起動方法を指示する「`Launch Configuration`」を作成する必要があります。
これを行うには、「`Run and Debug`」ツールバーボタンをクリックし、「`create a launch.json file`」リンクをクリックして、「`Python`」、「`Python File`」の順に選択します。これにより、ワークスペースの`.vscode`フォルダーに新しい`launch.json`ファイルが作成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/16f98ba4-aa2b-90d1-01be-818e17de84f2.png)


`launch.json`の内容を次のように置き換え、保存します。

```launch.json
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information visit:
    // https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Odoo",
            "type": "python",
            "request": "launch",
            "cwd": "${workspaceRoot}",
            "program": "${workspaceRoot}/odoo/odoo-bin",
            "args": [
                "--db_host=${env:DB_HOST}",
                "--db_port=${env:DB_PORT}",
                "--db_user=${env:DB_USER}",
                "--db_password=${env:DB_PASSWORD}",
                "--database=odoo13",
                "--limit-time-real=100000"
            ],
            "console": "integratedTerminal"
        }
    ]
}

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/de2d1e6d-16a5-e620-b5d7-9d14aefb0141.png)

これで、VSCodeの「実行」領域に「Odoo」オプションが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/9b8351ab-762b-79da-ac00-29a04d6a00f8.png)

緑色の「`Start Debugging`」ボタンを押すと、odooが起動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/d5b06736-a5ad-3db3-f6dc-f7705f45bb55.png)


# ステップ5:カスタムモジュールをインストールします！

これですべてが実行されます。ブラウザで http://localhost:8069/ を起動し、odooデータベースにログインします(admin/admin)。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/787ef098-fcf9-a2d5-02d9-607ae08683e4.png)

Appsモジュールを見ると、新しいウィジェットアプリが表示されていないことがわかるでしょう。これは、odooに新しいモジュールと更新されたモジュールをスキャンさせる必要があるためです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/d5b2f1aa-601c-3ea7-12c1-298b02c92eb8.png)

そのスキャンを行うには、開発者モードを有効にする必要があります。これを行うには次の2つの方法があります。

1. 【通常の方法】Setting -> General Settings に移動し、`Activate the developer mode`リンクをクリックします。  
※初期状態ではGeneral Settingsがありません。例えば「`Discuss`」などのアプリをインストールすると表示されます。
1. 【簡単な方法】`?debug=1`をブラウザのアドレスバーに追加してEnterキーを押すだけです。    
http://localhost:8069/?debug=1

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/ec1f3447-d02b-7d53-6e78-d440d0f3fbfb.png)


これで開発者モードが有効になりました。Odooの「`Apps`」領域に、「`Update Apps List`」メニュー項目が表示されます。これを押下すると表示される画面の「`Update`」ボタンを押下し、利用可能なアプリのリストを更新します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/815da7ba-bbd6-d496-05df-9c86cea83159.png)

すべてがうまくいっていれば、検索するとピッカピカの新しいモジュールが表示されるはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/80bedd17-1969-9e2b-7548-a6f99cbabcf3.png)

「`Install`」ボタンを押してインストールし、成功をかみしめてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252891/c06356f5-ec54-f0ec-d3c7-5745318a6898.png)

おっとー、「`contact`」モジュールが見つからないですって！？

```__manifest__.py
{
    'name': 'Contact Widgets Module',
    :
    :
    'depends': [
        'contacts',
    ],
    :
    :
}
```

# おわりに

本記事では、DockerとVSCodeを使った開発環境を構築し、odooカスタムモジュールを作成し、インストールしました。

- Git、Docker、PostgresSQL実行環境を準備しました。
- junari/odoo Dockerイメージを使用して、dockerコンテナを起動しました。
- VSCodeをインストールし、dockerコンテナにアクセスできるようにしました。
- odooカスタムモジュールを新規に作成しましたq。
- Python拡張機能をつかって、odooを起動しました。
- odooカスタムモジュールをインストールしました。