Spotify NowPlaying Sharing App

このアプリケーションは、Spotifyで現在再生中の曲やエピソードを、任意のMisskeyサーバーもしくはTwitter(自称:𝕏)に共有するためのWebアプリケーションです。

概要

SpotifyのAPIを使用して、現在再生中の曲やエピソードの情報を取得します。
そして、簡単に共有できるようにシェアリンクを生成し、MisskeyもしくはTwitter(自称:𝕏)にリダイレクトさせます。

シェアリンクには、以下のようなフォーマットのテキストが含まれており、曲名, アーティスト名, #NowPlayingを自ら入力する必要はありません。

あとがき / 来栖夏芽
#NowPlaying #PsrPlaying
https://open.spotify.com/track/5WehEFiES0ebVqgXpYQ8Fi

機能

リダイレクト共有（従来機能）

/note - Misskey向けシェアリンクへリダイレクト
/tweet - Twitter(𝕏)向けシェアリンクへリダイレクト

API直接投稿（新機能）

ダッシュボードでMisskey/Twitterアカウントを連携し、APIトークンを使って直接投稿が可能です。

MiAuth - Misskeyアカウント連携
Twitter OAuth 2.0 PKCE - Twitterアカウント連携
ヘッダートークン認証 - オプションでAPIにセキュリティ層を追加

デモ

Spotifyで音楽を再生した状態で、ここにアクセスしてみてください。
曲名、アーティスト名が入った状態で、簡単に共有することができます。

プロジェクト構成

spotify-nowplaying/
├── .github/
│   └── workflows/
│       └── test.yaml        # CI/CDワークフロー
├── cmd/
│   └── server/
│       └── main.go          # アプリケーションエントリーポイント
├── frontend/                # React フロントエンド
│   ├── src/
│   │   ├── pages/           # ページコンポーネント
│   │   │   ├── Login.tsx    # ログインページ
│   │   │   └── Dashboard.tsx# ダッシュボード
│   │   ├── test/            # テストユーティリティ
│   │   │   ├── setup.ts     # テストセットアップ
│   │   │   └── test-utils.tsx # カスタムrender
│   │   ├── api.ts           # API クライアント
│   │   ├── api.test.ts      # APIテスト
│   │   ├── App.tsx          # ルーティング
│   │   ├── App.test.tsx     # ルーティングテスト
│   │   └── main.tsx         # エントリーポイント
│   ├── package.json
│   └── vite.config.ts
├── internal/
│   ├── auth/                # 認証ユーティリティ
│   │   ├── auth.go          # JWT, PKCE, トークンハッシュ
│   │   └── auth_test.go     # 認証テスト
│   ├── handler/             # HTTPハンドラー
│   │   ├── handler.go       # 共通ハンドラーロジック
│   │   ├── handler_test.go  # ハンドラーテスト
│   │   ├── note.go          # Misskey リダイレクト
│   │   ├── tweet.go         # Twitter リダイレクト
│   │   ├── status.go        # ステータスエンドポイント
│   │   ├── spotify_auth.go  # Spotify OAuth（フロントエンド用）
│   │   ├── miauth.go        # MiAuth フロー
│   │   ├── twitter_auth.go  # Twitter OAuth 2.0 PKCE
│   │   ├── api_post.go      # API 直接投稿
│   │   └── settings.go      # ユーザー設定
│   ├── metrics/             # Prometheusメトリクス
│   │   ├── metrics.go
│   │   ├── metrics_test.go  # メトリクステスト
│   │   └── middleware.go
│   ├── spotify/             # Spotify API関連
│   │   ├── auth.go          # OAuth認証（型定義）
│   │   ├── auth_test.go     # 認証テスト
│   │   ├── client.go        # APIクライアント
│   │   ├── client_test.go   # クライアントテスト
│   │   ├── player.go        # 再生情報取得・シェアURL生成
│   │   └── player_test.go   # プレイヤーテスト
│   └── store/               # データベース
│       └── store.go         # PostgreSQL 操作
├── migrations/              # DBマイグレーション
│   ├── 001_create_users.up.sql
│   └── 001_create_users.down.sql
├── docker-compose.yml
├── Dockerfile
├── go.mod
└── README.md

セットアップ

アプリケーションをローカルで実行するためには、以下の手順に従ってください。

1. リポジトリをクローン

git clone https://github.com/Soli0222/spotify-now-playing.git
cd spotify-now-playing

2. 環境変数を設定

cp .env.example .env

# 基本設定
PORT=8080                        # 起動するポート番号
METRICS_PORT=9090                # メトリクスポート番号（デフォルト: 9090）
SERVER_URI=example.tld           # リダイレクト先サーバーのドメイン
BASE_URL=https://example.tld     # アプリケーションのベースURL

# Spotify API
SPOTIFY_CLIENT_ID=xxxxxxxx       # Spotify クライアントID
SPOTIFY_CLIENT_SECRET=xxxxx      # Spotify クライアントシークレット

# データベース（API直接投稿機能を使用する場合）
DATABASE_URL=postgres://user:password@localhost:5432/spotify_nowplaying?sslmode=disable

# JWT（API直接投稿機能を使用する場合）
JWT_SECRET=your-secret-key       # JWT署名用シークレット

# トークン暗号化（推奨）
TOKEN_ENCRYPTION_KEY=xxxxxxxx    # 32バイトの暗号化キー（AES-256）

# Twitter API（Twitter連携を使用する場合）
TWITTER_CLIENT_ID=xxxxxxxx       # Twitter クライアントID
TWITTER_CLIENT_SECRET=xxxxx      # Twitter クライアントシークレット

暗号化キーの生成方法:

# OpenSSLを使用
openssl rand -base64 32 | head -c 32

# または、Goで生成
go run -e 'package main; import ("crypto/rand"; "fmt"; "io"); func main() { b := make([]byte, 32); io.ReadFull(rand.Reader, b); fmt.Printf("%s", b) }'

3. OAuth設定

Spotify Developer Dashboard

以下のCallback URIを登録してください：

{BASE_URL}/note/callback
{BASE_URL}/tweet/callback
{BASE_URL}/api/auth/spotify/callback

X (Twitter) Developer Portal

以下のCallback URLを登録してください：

{BASE_URL}/api/twitter/callback

4. フロントエンドのビルド（開発時）

cd frontend
pnpm install
pnpm build
cd ..

5. データベースのセットアップ（API直接投稿機能を使用する場合）

PostgreSQLを起動し、マイグレーションを実行してください。

Docker Composeを使用する場合は自動的にセットアップされます。

実行

開発環境

# バックエンドのみ（リダイレクト機能のみ）
go run ./cmd/server

# フロントエンド開発サーバー
cd frontend
pnpm dev

Docker Compose（推奨）

docker compose up -d

これにより以下のサービスが起動します：

アプリケーション（ポート8080）
PostgreSQL（ポート5432）
メトリクス（ポート9090）

ビルド

ローカルビルド

# フロントエンド
cd frontend
pnpm install
pnpm build
cd ..

# バックエンド
go build -o server ./cmd/server
./server

マルチアーキテクチャDockerイメージ

docker buildx build --platform linux/amd64,linux/arm64 -t your-registry/spotify-nowplaying:latest --push .

テスト

バックエンドテスト

# すべてのテストを実行
go test -v ./...

# カバレッジレポート付きで実行
go test -v -race -coverprofile=coverage.out ./...
go tool cover -html=coverage.out -o coverage.html

フロントエンドテスト

cd frontend

# テストを実行
pnpm test:run

# ウォッチモードでテストを実行
pnpm test

# カバレッジレポート付きで実行
pnpm test:coverage

Lint

# バックエンド
go vet ./...
golangci-lint run

# フロントエンド
cd frontend
pnpm lint
pnpm tsc -b  # 型チェック

CI/CD

GitHub Actionsを使用して、すべてのプッシュとプルリクエストで自動テストが実行されます。

ワークフロー

ジョブ	説明
`test`	Goのユニットテスト
`lint`	golangci-lintによる静的解析
`frontend-test`	Vitestによるフロントエンドテスト
`frontend-lint`	ESLint + TypeScript型チェック
`build`	バックエンド・フロントエンドのビルド確認

API

リダイレクトエンドポイント

エンドポイント	説明
`GET /note`	Spotify認証 → Misskeyシェアへリダイレクト
`GET /tweet`	Spotify認証 → Twitterシェアへリダイレクト

直接投稿API

エンドポイント	説明
`GET /api/post/:token`	APIトークンを使って直接投稿

クエリパラメータ

パラメータ	値	説明
`target`	`misskey`, `twitter`, `both`	投稿先（デフォルト: `both`）

ヘッダートークン認証（オプション）

ダッシュボードでヘッダートークンを設定した場合、リクエストヘッダーに含める必要があります：

X-API-Token: your-header-token

使用例

# Misskeyのみに投稿
curl "https://example.tld/api/post/your-api-token?target=misskey"

# 両方に投稿（ヘッダートークン認証あり）
curl -H "X-API-Token: your-header-token" "https://example.tld/api/post/your-api-token"

メトリクス

Prometheusメトリクスは別ポート（デフォルト: 9090）の /metrics エンドポイントで公開されます。

利用可能なメトリクス

メトリクス名	タイプ	ラベル	説明
`http_requests_total`	Counter	method, path, status	HTTPリクエスト総数
`http_request_duration_seconds`	Histogram	method, path	HTTPリクエスト処理時間
`spotify_api_requests_total`	Counter	endpoint, status	Spotify APIリクエスト総数
`spotify_api_request_duration_seconds`	Histogram	endpoint	Spotify API応答時間
`share_redirects_total`	Counter	platform, content_type	シェアリダイレクト数
`oauth_callbacks_total`	Counter	platform, status	OAuthコールバック数

ライセンス

このプロジェクトはMITライセンスの下で公開されています。詳細はLICENSEファイルをご覧ください。

Name		Name	Last commit message	Last commit date
Latest commit History 248 Commits
.github/workflows		.github/workflows
cmd/server		cmd/server
frontend		frontend
grafana		grafana
internal		internal
.env.example		.env.example
.gitignore		.gitignore
Dockerfile		Dockerfile
LICENSE		LICENSE
README.md		README.md
docker-compose.yml		docker-compose.yml
go.mod		go.mod
go.sum		go.sum
renovate.json5		renovate.json5

Folders and files

Latest commit

History

Repository files navigation

Spotify NowPlaying Sharing App

概要

機能

リダイレクト共有（従来機能）

API直接投稿（新機能）

デモ

プロジェクト構成

セットアップ

1. リポジトリをクローン

2. 環境変数を設定

3. OAuth設定

Spotify Developer Dashboard

X (Twitter) Developer Portal

4. フロントエンドのビルド（開発時）

5. データベースのセットアップ（API直接投稿機能を使用する場合）

実行

開発環境

Docker Compose（推奨）

ビルド

ローカルビルド

マルチアーキテクチャDockerイメージ

テスト

バックエンドテスト

フロントエンドテスト

Lint

CI/CD

ワークフロー

API

リダイレクトエンドポイント

直接投稿API

クエリパラメータ

ヘッダートークン認証（オプション）

使用例

メトリクス

利用可能なメトリクス

ライセンス

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 9

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Packages