💎

Shlink-UI-Rails を作った話｜Rails 8 × Hotwire でモダンなURL短縮UIを実装

に公開
Ruby
Rails
Rails 8
shlink
tech

はじめに

こんにちは、enjoydarts です。
フリーランスのWebエンジニアとして、旅をしながらコードを書いています。普段は Rails や Laravel を中心に開発しており、この Shlink-UI-Rails の開発ではClaude Codeを実際に活用 しながら実装を進めました。

このアプリは、セルフホスト型 URL 短縮サービス Shlink の API を、Rails 8 × Hotwire (Turbo / Stimulus) と Tailwind CSS を使って自分好みの UI にしたものです。

まず Shlink について簡単に説明します。
Shlink は、自前でホストできるオープンソースの URL 短縮サービスです。REST API や CLI から操作でき、短縮リンクの作成に加えてクリック数や位置情報といった統計も取得できます。独自ドメインを使えるのも特徴で、セルフホスト環境に適しています。（公式サイト: shlink.io）

ただ、公式の Web クライアントは React 製で、私の希望する UI やワークフローとは合わない部分がありました。そこで、Rails 8 × Hotwire を使って自分好みの UI を実装したのが、この Shlink-UI-Rails です。

👉 リポジトリ: github.com/enjoydarts/shlink-ui-rails

このアプリには、Shlink の API を Rails から扱いやすくするために、次のような機能を実装しています。

URL短縮

  • 長いURLを短縮（必要に応じてカスタムスラグも設定）
  • QRコードの自動生成
  • ワンクリックコピー機能
  • Gmail風のタグ入力UI

ユーザー管理

  • Deviseによる認証
  • Google OAuth ログイン
  • メール確認（Confirmable）
  • 管理者・一般ユーザーのロール管理

マイページ

  • 短縮 URL の一覧表示
  • クリック数や統計の表示
  • 検索・フィルター・ページネーション
  • Shlink API との手動同期
  • ソフトデリート対応

UI/UX

  • モバイルファーストのレスポンシブ対応
  • ガラスモーフィズムやアニメーション効果
  • タグの視覚化で直感的な操作感

使用技術

Backend

  • Ruby 3.4.5（YJIT 有効）
  • Rails 8.0.2.1
  • MySQL 8.4
  • Devise / OmniAuth（Google OAuth2）
  • Faraday（Shlink API 呼び出し）
  • Ridgepole（DB スキーマ管理）
  • Config gem（環境設定管理）

Frontend

  • Hotwire（Turbo / Stimulus）
  • Tailwind CSS v4
  • PropShaft

テスト・品質管理

  • RSpec / FactoryBot
  • WebMock
  • RuboCop / Brakeman / Bullet

開発環境・運用

  • Docker Compose
  • Makefile
  • Solid Queue
  • GitHub Actions CI

セットアップ方法

以下の手順でローカル環境を立ち上げられます。

git clone https://github.com/enjoydarts/shlink-ui-rails.git
cd shlink-ui-rails
cp .env.example .env
# .env を編集して必要なキーを設定
make setup
make up

アクセス: http://localhost:3000

.env に設定する主なキー

  • SHLINK_BASE_URL
  • SHLINK_API_KEY
  • GOOGLE_CLIENT_ID
  • GOOGLE_CLIENT_SECRET

今後の展望

このアプリはまだ公開したばかりで、出来たての状態です。これから改善していける部分が多く、発展の余地が大きいと考えています。

まとめ

Shlink-UI-Rails は、公式クライアントでは満たせなかった部分を補い、Rails 8 × Hotwire を使って自分のワークフローに合う形で作った UI です。

  • Shlink をセルフホストで使いたいけれど、もっとシンプルに操作したい
  • Railsのスタックで完結させたい
  • Turbo/StimulusでSPAライクなUIを試したい

そんなニーズに応えるサンプルにもなっています。

まだ出来たてで改善余地も多いですが、触ってみて「こうしたらもっと良くなる」といったフィードバックや PR をいただければ嬉しいです。

👉 github.com/enjoydarts/shlink-ui-rails

お知らせ

Rails や Laravel の技術記事のほか、ガジェットやイヤホン、香水のレビューもブログで発信しています。今回の Shlink-UI-Rails の開発記録も随時まとめていく予定です。

👉 コードと音と香りの交差点 https://enjoydarts.blog

Discussion