クックパッド開発者ブログスマートフォン用の表示で見るクックパッド開発者ブログ2015-04-06新規サービスの管理画面を短期間で見栄え良く実装するこんにちは、クックパッド料理教室の京和です。管理画面はほとんどのウェブサービスに存在し、ユーザサポートやサービスの状況・KPIなどを確認するために、スタッフが毎日利用するとても重要なものです。関わらず、新規サービスでは人員が不足していることから、ついおざなりなデザインや実装になりがちなのではないでしょうか。EngineとBootstrapのデザインテンプレートを使った、見栄えがよくメンテナンスしやすい管理画面を短期間で実装する方法についてご紹介します。EngineはRailsアプリケーション上で動く、ミニRailsアプリケーションのようなものです。Engineの実態はまさにこのRails::Engineクラスです。した事ができるのはRailsのマイクロカーネルアーキテクチャのおかげです。3」で詳しく解説されており、非常にオススメです。Engineは以下のコマンドで簡単に作ることができます。以下にファイルが生成されます。下記のとおり、Railsアプリケーションとよく似た構成になっていますね。specControllerやViewはもちろん、Gemfileやroutes.rbなども用意されています。bin/railsコマンドもあるので、scaffoldなどのGeneratorを利用することも可能です。Engineは、本体のGemfileとRoutingに定義することでアプリケーションから呼び出す事が可能です。}ここではconstraintsのsubdomainオプションを使ってドメインを分けています。Engineは通常のRailsアプリケーションとほとんど同じ感覚で書くことができます。Engineについての詳しい解説はRailsGuidesをご覧ください。Engineを使った際の利点は、端的に言うとアプリケーションを分ける場合と分けない場合の「いいとこ取り」ができることです。管理画面を別アプリケーションとして実装する場合、コードの共通化、特にモデルのメソッドやValidation・Scopeなどの共通部分をどのように管理するかが課題となることが多いです。submodulesを使うと思いますが、実運用は厳しいのが実情だと思います。一方で、管理画面を同じアプリケーション内に実装した場合、ユーザ用アプリケーションと密結合することになり、セキュリティやメンテナンスコストについて不安を抱えます。Engineの場合、名前空間とコードベースを分離しつつ、モデルのコードは共通して呼び出すことができますし、更には管理画面でしか使わないテーブルであれば、Engine側にのみモデルを定義すると言ったことも可能です。別のアプリケーションとして切り出したいといった場合も比較的容易にできるでしょう。Engineとして実装していますが、1つのアプリケーション内にこれらが混在していた場合、メンテナンスするのはかなり難しかったと思います。Templateを組み込むBootstrapのデザインテンプレートは有償・無料含めて様々なものがあります。ググれば沢山のものが見つかるでしょう。Template(無料)などが使われています。数年前は有償の方がクオリティが高かった印象がありますが、最近は無償でもハイクオリティなものが増えてきているように感じます。Pipelineのパス以下に置くだけでOKです。Engineの場合はアセットファイルも分離されるので、本体とは異なるデザインテンプレートも気軽に設置することができます。Engineは名前空間が分かれてるとは言え1つのRubyプロセスで動いているため、相互で参照することが可能です。モデルを共通化できることは便利ですが、一方でコンテキストが異なるアプリケーションが混在している状況でもあるため、さじ加減を間違えると技術的負債になってしまいます。(どんなアプリケーションにも言えることですが)default_scopeは原則使わないほうがよいでしょうし、Concernに分けて実装すると言ったことも必要です。子(Engine)から親(Application)への参照以外にも、やろうと思えば親から子のモデルを参照することもできてしまいます。Engine内に実装したモデルが、仕様変更が続いた結果ユーザ向けアプリケーションからもよく参照されるようになっていた、と言った事例がありました。サービスは日々変化していきますから、コードベースもそれに合わせて適宜リファクタリングをしていくべきでしょう。いえ、こうした問題は、通常発生する技術的負債とあまり変わらないと思います。Appendix:その他、管理画面で気をつけている事などを書いてきます。管理画面に名前をつける料理教室では私たちの管理画面を「Daddy」と呼んでいます。名前の由来はクックパッドの歴史に触れるので詳しくはお話できないのですが、他のサービスの管理画面でも同じように名前を付けている事が多いです。名前を付けることで、ともすれば無機質な印象のする「管理画面」から、毎日扱う「サービス」となり、より愛情を注ぐことができます。愛着をもてる名前を考えることはとても重要だと思います。ガイドラインをつくるクックパッドではドメインの分離や認証方式・監査ログの取得など、管理用アプリケーションを実装する際のガイドラインが定められています。原則として、すべてのサービスの管理画面でこのガイドラインを満たすことが求められており、これらがセキュリティやコンプライアンスを担保しています。それらの実装を支援するため、共通ログ基盤Figlogなどの様々なライブラリが存在しています。Templateによる管理画面の実装は、私が料理教室事業部に配属された当初、管理画面がとても貧弱だったことからついカッとなってリニューアルしようと考えたことがきっかけでした。Templateの選定なども含めて3日程度で実装は完了し、メンバーからはとても喜ばれました。幾つかの新規サービスでも同様の構成が採用されることになり、サービス間での管理画面の実装方式が共通化されると言ったメリットも生まれました。配属直後で高まっている意識と比較的余裕のある状況は、チャレンジのしやすい大きなチャンスと言えるかもしれません。管理画面は毎朝必ず見るもので、利用する時間は業務の中でも大きな割合を占めます。管理画面を素敵にして毎日の業務を楽しくすることは、毎日の料理を楽しみにし続けていくためにとても重要なことだと考えています。クックパッド料理教室ではエンジニアを募集しています。サービスに興味をお持ちの方はぜひこちらからご連絡ください。〜舞台裏を支...2017-05-10最近のサービス間のデータとイベントの連携についてこんにちは。