テクノロジー

管理画面は設定ファイルぐらいシンプルに作れるべき!『Viron』を使ってみました

edvakf
2018.4.23
シェア
ツイート
ブックマーク
トゥート

こんにちは。Web APIにちょっとこだわりのある、CTOの@edvakfです。

最近福岡のヌーラボさんで開かれたGeeks Who Drink -Public API Edition-で「お前はこれまでに作ったAPIの数を覚えているのか?」というタイトルで30分ほど発表してきました。発表資料はこちらです。

Vironと私

そんなWeb API好きの自分ですが、どうしてもUIを作るのはあまり得意ではなく、管理画面を実装したりするのは苦手意識があったのです。…などと思ってところ、今年の2月にCAモバイルさんからVironというツールが発表され、「まさに欲しかったやつだ!」となったのでした。

ピクシブ福岡オフィスで作っているpixiv chatstoryでは、「RailsのAPI」と「iOSアプリ」と「Webフロントエンド」という3つのリポジトリになっていて、ユーザーのアクセスする箇所ではRailsはJSONしか返しません。

Vironを使うことで管理画面もAPIオンリーになってくれれば最高ですが、今のところは既存の管理画面とVironの併用状態です。

RailsでViron対応の管理画面を作る準備

VironのサンプルアプリケーションはNode.jsなので、Railsでのやり方を書いておきます。コードはgistに貼っておきましたので、リンクから参照してください。

Vironの画面自体は静的ページとしてデプロイできます。Vironのリポジトリをチェックアウトして npm build して dist ディレクトリ以下をFirebase Hosting等にデプロイするだけで良いです。

Railsではまず、API定義をまとめたswagger.jsonを返すエンドポイント作ります。これのURLをVironの管理画面に登録することになります。

swagger-blocksというgemを使いました。

/viron/viron_authtype というAPIは必須です。swagger.jsonにも定義を書かなければいけません。これらのエンドポイント用のSwagger定義がけっこう長くなるので最初ちょっと面倒でした。コピペできるように置いておきます。

今回の管理画面はIP制限しているので、 /viron_authtype は手抜きしてあります。最初はBASIC認証をしようと思ったのですが、VironがAuthorizationヘッダーを独自で使うので、IP制限に切り替えました。ゆくゆくはGoogle認証にするかもしれません。

管理画面を一つ作ってみる

CRUD対応の管理画面を作るには、index, create, update, delete を定義します。 index 以外は欠けていても良いです。

index をページング対応するには、 limitoffset をGETパラメータで受け取るようにして、 x-pagination-current-page, x-pagination-limit, x-pagination-total-pages というレスポンスヘッダーを返さなければいけないみたいです。今のところ次のような簡易的に共通メソッドを定義して対応してみました。

また、これらのヘッダーはCORSの Access-Control-Expose-Headers に追加しなければいけません。

所感

ここまでのセットアップは少々試行錯誤が必要でした。まだ新しいツールということもあって、ドキュメントサンプルアプリケーションの他にもVironのコードもけっこう見ました。

しかしながら、ここまでできてしまえば、実際に一つの管理画面を作る変更が

  • 15行のController
  • 10行のView(!)
  • 60行のテスト
  • 200行のswagger定義(!!)

になりました。以前から ウェブアプリケーションは設定ファイルぐらいシンプルなものであるべき (特に管理画面のようなお決まりパターンのところは)と思っていたので、かなり理想に近づいたと思っています。

HTMLのフォームを扱う管理画面だとテストが面倒で端折ってしまったりしますが、JSONだけであればテストも簡単です。以前に書いた手法↓で将来に渡ってAPI定義と実装の乖離を防げるのでオススメです。

ただ、やはり複雑な管理画面は作れませんので、あくまでも簡単なものを簡単に作るためのものと割り切って、作り込んだ管理画面とうまく使い分けることになりそうです。

宣伝

ピクシブでは管理画面を 作り込みたい エンジニアも 作り込みたくない エンジニアも募集中です!

シェア
ツイート
ブックマーク
トゥート