Gashooの管理機能

GASHOO Inc. Advent Calendar 2017土曜日担当、3日目を飾ります、t-kusakabeです。土曜日担当ですが3日目も飾っちゃいます。またまた裏側話です。最近管理者画面(以降、gashoo adminとなります)の作成に取りかかることができたのでその話ができればなと思います。

gashoo adminの技術選定。

やっぱりRubyを使っています。ただ本体でRoRを採用しているためせっかくなら他のFWを使いたいなと思いHanamiを採用することにしました。

Hanamiについて

他FWとの比較

今年の8月のるびまで紹介されて知名度があがった気がするHanamiですが、他のFWに比べ以下の違いがある様に感じました。 - RoR : 重量級で、コマンド豊富。提供されるものが多い。レール乗れ感すごい。 - Sinatra : 超シンプル。よしなにしてくれ感。 - Hanami : Sinatraよりも色々してくれるけど、RoRほどレールに乗れ感がない。

RoRだとどうしてもDDD等がしにくくなりますが、Hanamiならやりやすいと思いました。以下、公式抜粋です。(英語力ないのでgoogle翻訳しただけです。。。)

高速応答時間
Hanamiはスピードに合わせて最適化されています。 ミリ秒単位で応答を返します。 Content Delivery Networksを最大限に活用して、アプリをより迅速に作成できます。

フル装備だが軽量
メモリを犠牲にすることなく強力な製品を構築するために提供する100以上の機能を使用してください。 Hanamiは他のフル機能のRubyフレームワークより60％少ないメモリを消費します。

デフォルトで安全
Content Security Policy、X-Frameヘッダー、自動エスケープなどの最新のブラウザー技術に依存するアプリケーションを展開して、最も一般的なセキュリティ脅威からユーザーを保護します。

シンプルで生産的な
Hanamiのシンプルなデザインとそのコンポーネントのシンプルさをお楽しみください。 柔軟なコードを数分で作成し、将来のために簡単に変更できます。

他のフル機能のRuby フレームワークより60%少ないメモリ

RoRを意識してる感があって個人的に面白いなと思いましたw

Hanamiのディレクトリ構成

個人的にHanamiを使ってみて良いなと思ったところはその構成でした。デフォルトのスケルトンは以下になります。

.
├── Gemfile
├── README.md
├── Rakefile
├── apps
├── config
├── config.ru
├── db
├── lib
├── public
└── spec

基本的にはapps以下を触ることになると思います。

apps
└── web
    ├── application.rb
    ├── assets
    │   ├── favicon.ico
    │   ├── images
    │   ├── javascripts
    │   └── stylesheets
    ├── config
    │   └── routes.rb
    ├── controllers
    ├── templates
    │   └── application.html.erb
    └── views
        └── application_layout.rb

Hanamiはマイクロサービス化をしやすくするためapps以下に好きにディレクトリを足せる様になっています。通常のアプリケーションのコードをweb以下に作っている最中、管理者のみの機能が欲しくなった場合は hanami g app admin とすると

apps
├── admin
│   ├── application.rb
│   ├── assets
│   │   ├── favicon.ico
│   │   ├── images
│   │   ├── javascripts
│   │   └── stylesheets
│   ├── config
│   │   └── routes.rb
│   ├── controllers
│   ├── templates
│   │   └── application.html.erb
│   └── views
│       └── application_layout.rb
└── web
    ├── application.rb
    ├── assets
    │   ├── favicon.ico
    │   ├── images
    │   ├── javascripts
    │   └── stylesheets
    ├── config
    │   └── routes.rb
    ├── controllers
    ├── templates
    │   └── application.html.erb
    └── views
        └── application_layout.rb

みたいな感じにapps以下にadminとして別のディレクトリを用意することができます。また

apps/web/controllers
└── test
    ├── index.rb
    └── show.rb

各controllerの下にアクション毎にclassを生成するので、RoRの様なfat controller状態になりにくいと感じました。 modelも同じく、entityとrepositoryに別れているためDDDっぽく責務をわけやすくなっています。

フロント側

Reactを採用しています。今回は apps/web 以下に front というディレクトリを作成しYarnを使って管理しています。

.
├── Dockerfile
├── css
├── dist
├── gulpfile.babel.js
├── index.html
├── node_modules
├── package.json
├── src
├── webpack.config.js
└── yarn.lock

src以下にjavascriptを、css以下にscssを置いてgulpでコンパイルしています。 CSS設計にはFLOCSSを採用しています。

.
├── foundation
├── layout
├── object
└── style.scss

どうでしたでしょうか。 gashoo adminを作り始めたのがまだまだ最近のためほとんど土台しかできていない状態で、よくある形止まりになってしまっていますw 今年のアドベントカレンダーが終わる終わる頃にはちょっとは変わったことが出来るかもしれないのでその時はまた記事にしようと思います。 (むしろ記事にするために進捗だしたい。。。)

GASHOO BLOG

Gashooの裏側。(2)