読者です 読者をやめる 読者になる 読者になる

まちいろエンジニアブログ

南池袋のWebサービス開発会社、株式会社まちいろのエンジニアブログです。

『ワンコインランチ池袋 Webサービス版』を支える技術

こんにちは、まちいろの工藤です。

先日、まちいろ初のサービスとなる『ワンコインランチ池袋 Webサービス版』をリリースいたしました。
このサービスは弊社が開発している CMS エンジン『machi-lia』を使って構築されたものです。

そこで今回は『ワンコインランチ池袋 Webサービス版』及び『machi-lia』で利用している技術を紹介したいと思います。

『ワンコインランチ池袋 Webサービス版』とは?

月額500円で、豊島区約100メニューの680円~1,000円以上のランチを500円で食べることができるようになるサービスです。

onecoin-ikebukuro.kuupel.com

池袋で働いている方は、書店やコンビニで『ワンコインランチ東京』という書籍を見たことがあるかもしれません。
この書籍の出版を手がけている株式会社ルディック様と共同で開発・運営しているサービスとなります。

f:id:mkudo-machiiro:20160924214412j:plain:w200

『machi-lia』とは?

f:id:mkudo-machiiro:20160924223720p:plain

弊社はこれまで WordPress をベースにした開発を数多く行ってきております。
『machi-lia』は、その中で得たノウハウや課題を元に自社で開発した CMS エンジンで、以下の特徴があります。

  • 会員管理機能を標準で搭載
  • サイト上で利用する動的なデータを「マスタ」として自由に定義可能
  • WebPay といった決済サービスと連携した決済処理が可能

サイトの開発は、WordPress でオリジナルのテーマを作成していくようなイメージで開発していきます。

サーバーサイド

まちいろは元々 Java + Play Framework を採用していたのですが、最近は Ruby で開発しています。
テンプレートエンジンは ERB を使用しています。

Padrino は日本語の情報があまり多くありませんが、学習コストはそこまで高くないのでオススメです。

特に、一つのプロジェクトに複数のアプリケーションをマウント可能なところが便利で気に入っています。
『machi-lia』 では

  • 管理サイト用 API
  • フロントサイト用 API
  • フロントサイトのテンプレートレンダリング
  • ジョブサーバープロセス用

といった形でアプリケーションを分けて、構成に合わせて同時に立ち上げたり単独で立ち上げたりしています。

フロントエンド (管理サイト)

  • Vue.js
  • ES2015 (Babel)
  • WebPack
  • gulp
  • ESLint

管理サイトは Vue.js を使って SPA として開発しています。
散々言われていることですが、Vue.js は学習コストが低くて良いです。 ついに 2.0 が出たので移行を考えなければ・・・。

インフラ

  • Terraform
  • Ansible
  • AWS
  • Jenkins
  • SendGrid

インフラは AWS 上で構築しています。ELB + EC2 という非常にベーシックな構成です。
もう少し規模が大きくなったら ECS 試したいなぁと思ってます。

DB は、MySQL 5.7 の JSON 型を利用しているため RDS を採用しています。

メール送信には SendGrid を利用しています。たまに障害があって焦ります。。

その他

  • NewRelic (パフォーマンスメトリクス)
  • Zabbix (監視)
  • Re:dash (集計・グラフ)
  • CircleCI (テスト)

パフォーマンスメトリックスには NewRelic、監視には社内の Zabbix を利用しています。

『machi-lia』はまだ集計機能が弱いため、代わりに Re:dash を構築して KPI をチェックしています。

CI は CircleCI で回しています。

最後に

いかがでしたでしょうか。
目新しいところはないかもしれませんが、参考になれば幸いです。

『ワンコインランチ池袋 Webサービス版』を使っていただいているユーザーの皆様はもちろん、実際のサービスを提供して頂いている飲食店の方々へも貢献できるサービスを目指していきたいと思います。