Zenn
🚃

路線・駅データのAPIサービスをRuby on Rails 7 + Tailwind CSSで構築しました

2022/05/27に公開
Rails
Rails
Tailwind CSS
OpenAPI
daisyUI
tech

概要

  • Ruby on Rails 7からTailwind CSSがサポートされました。
  • Railsが公式でサポートするからにはさぞかし良いものだろうと思うので使ってみたいと思い、ゴールデンウィークの1日を使って構築してみました。
  • 路線・駅データのAPI

スクリーンショット

まずは成果物の紹介です。

トップページ

train.teraren.com

APIドキュメント

駅情報 REST API

リクエストサンプル

山手線の駅名と緯度経度を取得する例。

% curl -s  https://train.teraren.com/lines/11302/stations.json | jq -r '.[] | [.station_name, .lat, .lon]'
[
  "大崎",
  "35.619772",
  "139.728439"
]
[
  "五反田",
  "35.625974",
  "139.723822"
]
[
  "目黒",
  "35.633923",
  "139.715775"
]
[
  "恵比寿",
  "35.646685",
  "139.71007"
]
[
  "渋谷",
  "35.658871",
  "139.701238"
]

なぜ駅・路線のAPIサービスを作ったのか？

  • 駅データのサイトにて10年以上前から路線と駅のマスタデータがCSVファイルで公開されていました。
  • 上記のサイトにてAPIからデータを取得できるようになっていたようですが、サービスが停止されていました。
  • 類似サービスは様々な会社が提供していますが、無料でユーザ登録なしに簡単に利用できるAPIがありませんでした。
  • 駅データのマスタ情報は、運営元の方がオープンなライセンスを適用してくださっているので、それを有効活用したかった。

作業の流れと使った時間

  • ekidataのマスタ情報の学習: 1h
  • Tailwind CSSのチュートリアル: 1h
  • 開発環境構築: 2h
    • rails new . -c tailwind
    • docker-compose設定
  • プログラム開発: 6h
    • model作成
    • migrations作成
    • i18n
  • daisyUIの学習: 1h
  • UIコーディング: 4h
  • Lighthouse用チューニング: 1h
  • OpenAPI Specification 3形式でのAPIドキュメント作成: 1h
  • サーバ設定: 1h

Railsの主な設定

追加したgem

gem 'rails-i18n', '~> 7.0.0'
gem 'kaminari'
gem 'sitemap_generator'
gem "meta-tags"
gem "rack-cors"
gem "google-tag-manager-rails", "~> 0.1.3"
gem "gretel", "~> 4.4"
gem "geocoder", "~> 1.8"

## for dev and test
gem 'rubocop', '~> 1.28'
gem 'openapi3_parser'
gem 'openapi_parser'
gem 'annotate'

gem 'rspec-rails'
gem 'capybara-screenshot'

tailwindの設定

diff --git a/config/tailwind.config.js b/config/tailwind.config.js

index 34c0c84..01f8719 100644
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
@@ -17,5 +17,16 @@ module.exports = {
     require('@tailwindcss/forms'),
     require('@tailwindcss/aspect-ratio'),
     require('@tailwindcss/typography'),
-  ]
+    require('daisyui'),
+  ]
 }

工夫した点

  • Lighthouseのスコアがほとんどチューニングしないで95点も出せました。

lighthouse

感想

  • Tailwind CSSだけではプリミティブなUIライブラリ集なので、Tailwind CSSだけを使ってページを作るのはかなり大変です。
  • UIの部品であるコンポーネントはdaisyUIを使いました。
    • Twitter BootstrapはTailwind CSS + デフォルトでそこそこ見栄えの良いアセットが提供されているのに対してTailwindではマークアップのライブラリとそれを使ったUIのアセットは綺麗に分割されています。

Tailwindだけだと、左のように書かないといけないのですが右のように書けます。daisyUIはこのようにTailwindの1段階上位で提供されているUIのアセット集という位置づけです。その結果、Twitter Bootstrapと同じようなDSLでUIをマークアップできます。

daisyUI

  • Tailwindがnodeに依存していないということもあり、全体的にコンパイルが速くて良いです。
  • ページ内で使っているスタイルしかコンパイルされないので、必要最低限のCSSがコンパイルされるのでファイル容量が少なくて良いです。
  • DSL (Domain-Specific Language) が1つ増えるのは辛いところではありますが、daisyUIのおかげで覚える項目はほとんど無いです。

まとめ

  • UIができないエンジニアでも良い感じのUIを作れました。
  • 今は基本的なAPIしか作っていませんが、もっと便利なユースケースのAPIを増やしていきます。
  • そのうちテクニカル編を書きたいと思います。

Discussion