管理画面のフロントエンドコードを書く時代は終わりました。
Vironがあれば、OpenApi(Swagger)でAPI定義を行い、実装するだけで管理画面が完成します。
概要
Vironは、複数の管理画面を管理できるよう設計された、管理ツールマネージメントコンソールです。
APIサーバーとOAS2.0 jsonファイルを作成するだけで、管理画面が一つ完成します。
経緯
私の会社では、大小さまざまなサービスが開発・運用されています。
管理画面をサービス・サイト毎に作っていましたが、それには限界がありました。
エンジニアからしたら、管理画面用のデザインやAPIを作らなきゃいけない。工数がかかる。
運用・プロデューサーは、UI・UXが管理画面で違うため、操作を覚えるという学習コストが高い。
さらに外から見たいときにスマホから見れないし、緊急な対応にも大変でした。
そんなとき、うちのCTOがOASによるAPI定義と管理画面自動生成の親和性に気づき、このプロジェクトは始まったのです。
メリット
フロントエンドエンジニアにとって
管理画面作成のために、フロントエンドエンジニアは必要なくなりました。
フロントの全てはVironがやってくれます。
サーバーサイドエンジニアにとって
OpenAPI(Swagger)に対応したAPIサーバーを用意するだけになりました。
Open APIを使うことで、プログラムを、まるでドキュメントのように書くことができます。定義書を作成したら、管理画面も同時に完成してしまっている、というイメージです。
またサーバ側の言語は、javaでもNodeでもPHPでも使えるので、色々なエンジニアが使えます。そしてあらゆるサービスに使える広い汎用性も強みですね。
プロデューサー・運用にとって
サービスごとに管理画面の操作を覚える必要はなくなりました。
別々の管理画面を一つのVironという名のコンソールで管理できます。
レスポンシブデザインなので、スマホから操作することも可能です。
デモ
まず、Viron を開きましょう。
ここがホームです。エンドポイントごとのカードがずらずらと並びます。
追加ボタンを押して、管理画面を追加しましょう。
誰でも試せるテストAPIサーバーがあります。
以下のURLを入力して、追加ボタンを押してみてください。
https://viron.camplat.com/swagger.json
一つ追加されました！
カードをクリックすると、ログイン画面に移動できます。
サーバー構築をする際、ID or email/passwordでログインするか、Google認証によるログインするかカスタマイズできます。
今回のAPIサーバーは、mail/password なため、以下を入力してログインしてみてください。
| password | |
|---|---|
| viron@example.com | Ev4PNxRrls4U |
無事ログインでき、ダッシュボードに入れたら完了です！
左メニューから様々なサンプルを見ることができます。
色々見てみてください！
機能
管理画面ではCRUD機能を備えており、Swaggerで定義することで自動でコンポーネントを生成する仕組みになっています。
出力コンポーネント
表示には、以下のコンポーネントが備わっています。リンクの飛び先にサンプルがありますよ。
入力コンポーネント
入力フォーマットをSwaggerで定義することで様々な入力コンポーネントを自動で生成してくれます。
- テキスト入力フォーム(単一行)
- テキスト入力フォーム(複数行)
- 数値入力フォーム
- プルダウン入力フォーム
- チェックボックス入力フォーム
- WYSWYG入力フォーム
- オートコンプリート付き入力フォーム
- ファイルアップローダー
まとめ
Viron、こんな機能がありますよ！の紹介でしたが、ドキュメントには、どうSwaggerを定義すればいいのか？、どう作れば良いのか？が懇切丁寧に記載されています。
また実際に作る際には、リポジトリに example-email、example-googleと認証機能を実装したボイラープレートが作られていますので、そこから機能拡張していくことも可能です。
最後に、VironはOSSですので、issue・プルリクどしどし募集してます！！！
次はAPI実装の部分も解説していきまーす。
