Coda2 プラグインの作り方【PHP PSR-2 Fixer から学ぶ】


## <img width="50%" alt="スクリーンショット 2018-01-04 1.52.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/78776/910ee8e8-925a-f4fa-7337-120fcbbadd4c.jpeg">

----

##　<img width="70px" alt="スクリーンショット 2018-01-04 1.52.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/78776/8e16748e-dd2f-84a7-54a1-dffee25afeb5.png"> Coda2 とは

- [Panic社](https://panic.com/jp/)のコーディング・エディタ
- 有料（税込9,800円）
- WEB開発向けの単体アプリ。

----

- SSH接続、ファイル転送、ターミナル、MySQL、Git、Webサイトのプレビュー付きなど、Web開発のコーディングに必要なものを１つのアプリにパックしたようなアプリ。

---

## お金を払ったので使い倒したい<br><br>∴ プラグインを作りたい（PHPで）

----

### 学ぶとは真似ぶ<br><br>車輪の再発明とは写経

----

## やりたいこと

- 「[PHP PSR-2 Fixer](https://panic.com/coda/plugins.php?id=154)」プラグインと同じこと

1. プラグインの呼び出し（実行）
2. コードを TEMP に保存
3. TEMP のコードを PHP で整形する
4. 整形結果を返してオリジナルに反映

----

### PHP PSR-2 Fixer プラグインとは

コード整形プラグイン。 PHP のソースコードを [PSR-2](https://qiita.com/search?q=PSR-2) に準拠するように [PHP_CodeSniffer](https://github.com/squizlabs/PHP_CodeSniffer) を使って整形してくれるプラグイン。コード規約が PSR-2 縛りの場合に便利。

----

<img width="400" alt="PSR-2_Before-After.png" src="https://qiita-image-store.s3.amazonaws.com/0/78776/0ae5a964-0502-fde9-a315-78d15cca0ec3.png">

----

### PHP PSR-2 Fixer プラグインのダウンロード

- Panic.Inc
    - https://panic.com/coda/plugins.php?id=154
- GitHub
    - https://github.com/gabfl/PHP-PSR-2-Fixer-Coda-Plugin

----

## プラグイン・ファイル<br>「xxx.codaplugin」を作るのに必要なもの

----

### <img width="70px" alt="スクリーンショット 2018-01-04 3.08.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/78776/1170fb13-8544-397d-2a5c-05dff009b0e1.png">Coda Plug-In Creator

スクリプトや同梱ファイルをドラッグ＆ドロップして実行すると `.codaplugin` にコンパイルしてくれる。

ダウンロード： http://download.panic.com/coda/Coda%20Plug-in%20Creator.zip

----

## プラグインの構造を覗いてみる

----

### "PHP PSR-2 Fixer.codaplugin"の場合

https://github.com/gabfl/PHP-PSR-2-Fixer-Coda-Plugin/tree/master/PHP%20PSR-2%20Fixer.codaplugin

- プラグインを右クリックして「パッケージの内容を表示」でも同じものが見れる
- プラグインの保存先： `/Users/<user>/Library/Application Support/Coda 2/Plug-ins/`

----

### "Coda Plug-In Creator" が作ってくれるので、余り深く考えないことにする

----

## "Coda Plug-In Creator" で<br> "PHP PSR-2 Fixer.codaplugin" を開いてみる

----

|図|説明|
|:--:|:---|
|<img width="" alt="スクリーンショット 2018-01-04 3.28.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/78776/88bda521-1940-bee5-44f8-64a249f9fbee.png">|① **コマンド名：** <br>「コマンド」メニューからプラグイン名を選んだ時のメニュー名|

----

|図|説明|
|:--:|:---|
|<img width="100%" alt="スクリーンショット 2018-01-04 3.28.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/78776/88bda521-1940-bee5-44f8-64a249f9fbee.png">|② **実行スクリプト：** <br>ソースを TEMP にコピーし、④で指定された PHP ファイルを実行させるシェル・スクリプト。[[fixer.sh のソースを読む](https://github.com/gabfl/PHP-PSR-2-Fixer-Coda-Plugin/blob/master/PHP%20PSR-2%20Fixer.codaplugin/Contents/Resources/052BF6D4-518B-4210-B10D-EAF406F1473B/fixer.sh)]|

----

|図|説明|
|:--:|:---|
|<img width="100%" alt="スクリーンショット 2018-01-04 3.28.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/78776/88bda521-1940-bee5-44f8-64a249f9fbee.png">|③ **スクリプトへのデータの渡し方：** <br>ここでは全体を "fixer.sh" に渡すので「書類」。処理結果で置き換えるので「現在の書類と置換」|

----

|図|説明|
|:--:|:---|
|<img width="100%" alt="スクリーンショット 2018-01-04 3.28.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/78776/88bda521-1940-bee5-44f8-64a249f9fbee.png">|④ **実処理ファイル：**<br> PSR-2 にコードを整形するPHPファイル [`phpcbf.phar`](https://github.com/squizlabs/PHP_CodeSniffer#installation) と 整形ルールのファイル [`rules.xml`](https://github.com/gabfl/PHP-PSR-2-Fixer-Coda-Plugin/blob/master/PHP%20PSR-2%20Fixer.codaplugin/Contents/Resources/052BF6D4-518B-4210-B10D-EAF406F1473B/Support%20Files/rules.xml)<br>※ [`phpcbf.phar`](https://github.com/squizlabs/PHP_CodeSniffer/blob/master/scripts/build-phar.php)は [PHP_CodeSniffer](https://github.com/squizlabs/PHP_CodeSniffer/tree/master/) を [`-v`オプション付きで PHPアーカイブしたもの](https://github.com/squizlabs/PHP_CodeSniffer/issues/699#issuecomment-232808282)|

----

## 総括

独自処理の PHP を作って `.phar` 化して差し替えてプラグインをコンパイルすれば、PHPで独自プラグインが作れそう。

[WordPress のPHPコード規約](https://wpdocs.osdn.jp/PHP_%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E8%A6%8F%E7%B4%84)に準拠した PHP-Codesniffer のXMLと差し替えるとか。

整形以外のプラグインを作りたい場合は、[Coda Plug-in Kit](https://github.com/panicinc/CodaPluginKit)のサンプルが参考になるかも。

----

## 参考文献

- 「[Coda Plug-in Kit](https://github.com/panicinc/CodaPluginKit)」 @ GitHub
- 「[Codaのプラグイン作成](http://www.almondlab.jp/labs/78)」 @ almondlab.jp
- 「[Coda ライブラリ](https://library.panic.com/jp/coda/)」 @ Panic.com
- 「[Coda リリースノート](https://library.panic.com/jp/releasenotes/coda2/)」 @ Panic.com
- 「[Coda FAQ](https://panic.com/jp/coda/)」 @ Panic.com
- 「[WordPress-Coding-Standards: PHP_CodeSniffer rules (sniffs) to enforce WordPress coding conventions](https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards)」 @ GitHub
- 「[PHP CodeSniffer を使ってWPコーディングスタンダードのエラーをチェック&自動修正しよう](https://www.mirucon.com/2017/08/05/php-codesniffer/)」 @ ミルログ