PhpStorm+Docker+Win10(Pro)でのNextcloudアドオン開発のはじめかた


# はじめに
* [Nextcloud Meetup Tokyo #01](https://nextcloudjp.connpass.com/event/91014/)が開催されるとのことで、記念にNextcloudアドオン開発の始め方を公開します。
	* 現時点で席の空きがあるようなので、お時間のある人は是非いらしてください:beer: （ビアバッシュあるみたい）
* 環境は、PhpStorm + Docker + Win10 です。
* 因みに、Win10に `Docker for Windows` をインストールするということは、Hyper-Vになるので、すなわちVirtualBoxは使えなくなります。この件は、社内でも議論になっていて、既存の環境を捨ててローカルの開発環境をオールDockerで行くという強い意気込みが必要かもしれません。
* ownCloudじゃなくて、Nextcloudって？という方は、[こちら](https://qiita.com/ynott/items/4d54b1210981cd292123)を。


# 概要

* 以下の構成で、apps配下にカスタムアプリを配置するといったNextcloudアドオン開発始めるまでの手順です。

    ```
    /nextcloud-docker-develop
     ├─docker-nextcloud        <-- docker-composeベースディレクトリ
     │  ├─apps                 <-- カスタマイズアプリ配置ディレクトリ
     │  ├─conf                 <-- カスタムconfファイル配置ディレクトリ
     │  └─docker-compose.yml 
     ├─server-src              <-- nextcloudのcoreソース
     ├─.gitignore
     ├─.gitmodules
     └─README.md
    ```



# 事前準備

* [こちら](https://qiita.com/Ogaaaan/items/99fe54f052ca450889f7)を参考に `Windows10にDocker for Windows` を入れます。
    * 以下は、今回利用したバージョンです。

    ```
    PS C:\> docker --version
    Docker version 18.03.1-ce, build 9ee9f40
    ```

* PHPで開発するので、[PHPStorm](https://www.jetbrains.com/phpstorm/)必須です。入れます。
	* 以下は、今回利用したバージョンです。

    ```
    Version: 2018.1.2
    Build: 181.4668.78
    ```

# 環境構築

## Dockerの設定

1. Dockerの設定画面は、タスクトレイのDockerアイコンを右クリック -> Settings から表示できます。
1. PhpStormからのDockerコマンドは、 `tcp://localhost:2375` でリッスンするため、以下の `Expose daemon on tcp://localhost:2375 without TLS` を On にします。
![Docker Settings](https://qiita-image-store.s3.amazonaws.com/0/39596/149f3df7-c1a8-db42-1e55-2b71ad7045e3.png "貼り付けた画像_2018_05_07_23_37.png")

1. PhpStormのワークスペース（ソースの配置場所）のドライブに対して共有設定を行います。私の場合は、EドライブにワークスペースがあるのでEドライブにチェックを入れました。
![2018-05-07_23h42_13.png](https://qiita-image-store.s3.amazonaws.com/0/39596/1b129cf2-f731-f817-d856-41db23291cdc.png "2018-05-07_23h42_13.png")


## PhpStormの設定

1. PowerShellにて本記事用に用意した[gitリポジトリ](https://github.com/ukitiyan/nextcloud-docker-develop)からソース群をCloneします。submoduleで構成されているので `--recursive` を付与してください。

    ```
    > cd E:
    > git clone --recursive git@github.com:ukitiyan/nextcloud-docker-develop.git
    > cd nextcloud-docker-develop
    ```

1. 以下のようなディレクトリ構成でCloneされていることを確認してください。

    ```
    /nextcloud-docker-develop
	 ├─docker-nextcloud        <-- docker-composeベースディレクトリ
	 │  ├─apps                 <-- カスタマイズアプリ配置ディレクトリ
	 │  ├─conf                 <-- カスタムconfファイル配置ディレクトリ
	 │  └─docker-compose.yml 
	 ├─server-src              <-- nextcloudのcoreソース
	 ├─.gitignore
	 ├─.gitmodules
	 └─README.md
    ```

1. 上記 `nextcloud-docker-develop` をワークスペースとして、PhpStormを起動します。
    * 本記事では、 `E:¥nextcloud-docker-develop` をワークスペースとしています。 
1. ツールバーの `File` -> `Settings` -> `Build, Execution, Deployment` -> `Docker` から、APIが疎通（Connection succeefull）していることを確認してください。確認したら `OK` クリックで抜けてください。
![2018-04-23_15h50_42.png](https://qiita-image-store.s3.amazonaws.com/0/39596/21487232-e828-7bc1-e2a7-9bc6f61f6468.png "2018-04-23_15h50_42.png")
1. ツールバーの `Run` -> `Edit Configurations..` からダイアログを表示し `+` -> `Docker` -> `Docker-compose` を選択してください。
![2018-04-23_15h52_55.png](https://qiita-image-store.s3.amazonaws.com/0/39596/d52fbb50-82db-2cd3-e888-73f5d8327da4.png "2018-04-23_15h52_55.png")
1. 表示された画面に以下を入力し、 `OK` クリックで抜けてください。
![2018-04-23_16h20_14.png](https://qiita-image-store.s3.amazonaws.com/0/39596/296a464b-0fe0-bfee-8267-24b1c3a421cc.png "2018-04-23_16h20_14.png")
    * Name: Nextcloud
    * Compose file(s): .\docker-nextcloud\docker-compose.yml;

1. ツールバーに `Nextcloud` のRunボタンが表示されるので、クリックします。（ ツールバーの `Run` -> `Run 'Nextcloud'` でもOKです ）
![2018-06-19_01h15_11.png](https://qiita-image-store.s3.amazonaws.com/0/39596/7b8a413a-3340-a991-ca85-0ef4e0d0aaa6.png "2018-06-19_01h15_11.png")
1. コンソールに `'Compose: docker-nextcloud/docker-compose.yml' has been deployed successfully.` と表示されたらブラウザで http://localhost:8080 にアクセスし、以下のトップ画面が表示されるか確認してください。
![2018-06-19_01h26_33.png](https://qiita-image-store.s3.amazonaws.com/0/39596/b7c4e64a-fe2d-0758-ca83-40d6aa7a73c6.png "2018-06-19_01h26_33.png")

## Nextcloudの初期設定

1. 引き続き、Nextcloudの初期設定を行います。事前に [docker-compose.yml](https://github.com/ukitiyan/nextcloud-docker-develop/blob/master/docker-nextcloud/docker-compose.yml) を確認しておきましょう。

	```docker-compose.yml
	version: '2'

	volumes:
	  nextcloud:
	  db:

	services:
	  db:
	    image: mariadb
	    restart: always
	    volumes:
	      - db:/var/lib/mysql
	    environment:
	      - MYSQL_ROOT_PASSWORD=nextcloud
	      - MYSQL_PASSWORD=nextcloud
	      - MYSQL_DATABASE=nextcloud
	      - MYSQL_USER=nextcloud
	    command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci

	  app:
	    image: nextcloud:fpm
	    links:
	      - db
	    volumes:
	      - nextcloud:/var/www/html
	      - ./apps:/var/www/html/custom_apps:rw
	    restart: always

	  web:
	    image: nginx
	    ports:
	      - 8080:80
	    links:
	      - app
	    volumes:
	      - ./conf/nginx.conf:/etc/nginx/nginx.conf:ro
	    volumes_from:
	      - app
	    restart: always
	```
    * db, app, webの3コンテナで起動していることが分かります。
    * `MYSQL_XXX` にDBの設定情報が記載されていることが分かります。
    * appサービスの volumesにて `apps` がマウントされていることが分かります。


2. さて、ブラウザに戻り以下の通り設定し `セットアップを完了します` ボタンをクリックしてください。
    * ユーザー名： admin （任意）
    * パスワード： ********* （任意）
    * データフォルダ： /var/www/html/data
    * データベースを選択してください： MySQL/MariaDB
    * データベースのユーザー名： nextcloud （docker-compose.yml参照）
    * データベースのパスワード： nextcloud （docker-compose.yml参照）
    * データベース名： nextcloud （docker-compose.yml参照）
    * データベースのホスト名： db
3. 以下の画面が表示されることを確認してください。
![2018-06-19_01h47_36.png](https://qiita-image-store.s3.amazonaws.com/0/39596/619020ed-f81b-d216-bc4a-df0b05901e88.png "2018-06-19_01h47_36.png")

# カスタムアプリ追加
上記で触れた通り、 `nextcloud-docker-develop/docker-nextcloud/apps` ディレクトリにカスタムアプリを追加します。

1. PowerShellにて本記事用に用意した[サンプルアプリ](https://github.com/ukitiyan/nextcloud-sample-app)からソース群をappディレクトリにCloneします。

    ```
    > cd E:
    > cd nextcloud-docker-develop/docker-nextcloud/apps
    > git clone git@github.com:ukitiyan/nextcloud-sample-app.git sampleapp
    ```
1. ブラウザに戻り、 `右上の歯車アイコン` -> `+ アプリ` を選択しアプリ画面を表示し、 Sample App レコードの `有効にする` をクリックします。（認証を求められたらログインパスワードを入力してください）
![2018-06-19_02h04_55.png](https://qiita-image-store.s3.amazonaws.com/0/39596/bf2f9f90-f397-88d6-9839-946b6f605de0.png "2018-06-19_02h04_55.png")
1. トップ画面に戻り `Sample App` が表示されているか確認してください。
![2018-06-19_02h15_21.png](https://qiita-image-store.s3.amazonaws.com/0/39596/dca0bc38-e567-efd2-7e70-2bc164fd3b6e.png "2018-06-19_02h15_21.png")


# まとめ
* あとは、 `Sample App` を修正するなり、自前のカスタムアプリを追加するなり、Nextcloudアドオン開発をガシガシ進めてください。
* PHP Stormを使っていれば、同一ワークスペース内のソースにリンクしてくれるので、階層の異なる `server-src` のcoreソースに対しても、エイリアスを通してジャンプやアドバイスしてくれます。
* 開発ドキュメントは[こちら](https://docs.nextcloud.com/server/13/developer_manual/index.html)
* スケルトンアプリ作成ツールは[こちら](https://apps.nextcloud.com/developer/apps/generate)
* Nextcloudの日本語コミュニティは[こちら](https://nextcloudjp.connpass.com/)