もう管理画面のフロントコードを書く必要はありません、そう Viron ならね。

![riot.png](https://qiita-image-store.s3.amazonaws.com/0/104868/37ccafa7-74dd-0683-6cc0-e2a3945d428a.png)

管理画面のフロントエンドコードを書く時代は終わりました。
**Viron**があれば、OpenApi(Swagger)でAPI定義を行い、実装するだけで管理画面が完成します。

**そしてこれはOSSです。誰でも自由にお使いいただけます。**

## 概要
**Viron**は、複数の管理画面を管理できるよう設計された、管理ツールマネージメントコンソールです。
APIサーバーとOAS2.0 jsonファイルを作成するだけで、管理画面が一つ完成します。

## 経緯
私の会社では、大小さまざまな**自社サービス**が開発・運用されています。

管理画面をサービス・サイト毎に作っていましたが、それには限界がありました。

エンジニアからしたら、管理画面用のデザインやAPIを作らなきゃいけない。工数がかかる。
運用・プロデューサーは、UI・UXが管理画面で違うため、操作を覚えるという学習コストが高い。
さらに外から見たいときにスマホから見れないし、緊急な対応にも大変でした。

そんなとき、うちのCTOがOASによるAPI定義と管理画面自動生成の親和性に気づき、このプロジェクトは始まったのです。

## メリット

### フロントエンドエンジニアにとって
管理画面作成のために、フロントエンドエンジニアは必要なくなりました。
**フロントの全てはVironがやってくれます。**

### サーバーサイドエンジニアにとって
OpenAPI(Swagger)に対応したAPIサーバーを用意するだけになりました。
Open APIを使うことで、プログラムを、まるでドキュメントのように書くことができます。定義書を作成したら、管理画面も同時に完成してしまっている、というイメージです。あとは、**Swaggerの定義書に沿ってロジックを書くだけです。**

またサーバ側の言語は、javaでもNodeでもPHPでも使えるので、色々なエンジニアが使えます。そしてあらゆるサービスに使える広い汎用性も強みですね。

### プロデューサー・運用にとって
サービスごとに管理画面の操作を覚える必要はなくなりました。
別々の管理画面を一つの**Vironという名のコンソール**で管理できます。
レスポンシブデザインなので、スマホから操作することも可能です。

## デモ
まず、[Viron](https://cam-inc.github.io/viron/latest/#/) を開きましょう。

![home.png](https://qiita-image-store.s3.amazonaws.com/0/104868/e0b978f5-7494-2b5b-fcf2-70e9c9e98f08.png)

ここが**ホーム**です。エンドポイントごとのカードがずらずらと並びます。
追加ボタンを押して、管理画面を追加しましょう。

<img width="460" alt="ScreenShot 2018-02-01 11.42.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/104868/91677548-07a6-28cd-772c-43ab98bfa394.png">

誰でも試せるテストAPIサーバーがあります。
以下のURLを入力して、追加ボタンを押してみてください。
https://viron.camplat.com/swagger.json

<img width="457" alt="ScreenShot 2018-02-01 11.44.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/104868/4f097fae-7a1f-422f-aabd-d9f8b64cf34e.png">

一つ追加されました！
カードをクリックすると、ログイン画面に移動できます。

<img width="666" alt="ScreenShot 2018-02-01 11.46.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/104868/e60f8d65-2e55-b60d-7225-3e9a1fc03f80.png">

サーバー構築をする際、`ID or email/password`でログインするか、Google認証によるログインするかカスタマイズできます。
今回のAPIサーバーは、`mail/password` なため、以下を入力してログインしてみてください。

|mail|password|
|---|---|
|viron@example.com  |Ev4PNxRrls4U  |

無事ログインでき、ダッシュボードに入れたら完了です！

<img width="1363" alt="ScreenShot 2018-02-01 11.54.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/104868/19cd4033-0544-b0d4-43c4-f804c48a826b.png">

左メニューから様々なサンプルを見ることができます。
色々見てみてください！

## 機能

管理画面ではCRUD機能を備えており、Swaggerで定義することで自動でコンポーネントを生成する仕組みになっています。

### 出力コンポーネント

表示には、以下のコンポーネントが備わっています。リンクの飛び先にサンプルがありますよ。

* [数値コンポーネント](https://cam-inc.github.io/viron-doc/docs/dev_component_number.html)
* [テーブルコンポーネント](https://cam-inc.github.io/viron-doc/docs/dev_component_table.html)
* [チャートコンポーネント](https://cam-inc.github.io/viron-doc/docs/dev_component_chart.html)



### 入力コンポーネント

入力フォーマットをSwaggerで定義することで様々な入力コンポーネントを自動で生成してくれます。

* [テキスト入力フォーム(単一行)](https://cam-inc.github.io/viron-doc/docs/dev_form_textinput.html)
* [テキスト入力フォーム(複数行)](https://cam-inc.github.io/viron-doc/docs/dev_form_textarea.html)
* [数値入力フォーム](https://cam-inc.github.io/viron-doc/docs/dev_form_numberinput.html)
* [プルダウン入力フォーム](https://cam-inc.github.io/viron-doc/docs/dev_form_select.html)
* [チェックボックス入力フォーム](https://cam-inc.github.io/viron-doc/docs/dev_form_checkbox.html)
* [WYSWYG入力フォーム](https://cam-inc.github.io/viron-doc/docs/dev_form_wyswyg.html)
* [オートコンプリート付き入力フォーム](https://cam-inc.github.io/viron-doc/docs/dev_form_autocomplete.html)
* [ファイルアップローダー](https://cam-inc.github.io/viron-doc/docs/dev_form_uploader.html)

## まとめ

**Viron、こんな機能がありますよ！**の紹介でしたが、[ドキュメント](https://cam-inc.github.io/viron-doc/)には、`どうSwaggerを定義すればいいのか？`、`どう作れば良いのか？`が懇切丁寧に記載されています。

また実際に作る際には、リポジトリに `example-email`、`example-google`と認証機能を実装したボイラープレートが作られていますので、そこから機能拡張していくことも可能です。

**最後に、VironはOSSですので、issue・プルリクどしどし募集してます！！！**

次はAPI実装の部分も解説していきまーす。

## リンク
* [Viron](https://cam-inc.github.io/viron/latest/#/)
* [GitHub](https://github.com/cam-inc/viron)
* [viron-doc](https://cam-inc.github.io/viron-doc/)
    * ドキュメント
* [node-vironlib](https://github.com/cam-inc/node-vironlib)
    * APIサーバーを簡単に構築出来るライブラリ
    * [npmサイト](https://www.npmjs.com/package/node-vironlib)
    * [詳細ドキュメント](https://cam-inc.github.io/viron-doc/docs/adv_vironlib.html)