0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

新しい個人開発サービスとして 「PullLog(プルログ)」 をリリースしました。
サービスURL: https://pulllog.net


PullLogとは

PullLogは、ソーシャルゲームのガチャ履歴を記録・分析できるWebアプリケーション です。

「いつ・どれだけ回したか」「課金額はいくらか」「レア排出率はどの程度か」を簡単に記録し、統計グラフとして可視化することができます。

ユースケースとしては以下のようなものを想定しています。

  • ガチャ履歴を整理して残したい
  • 課金額を把握し、健全にゲームを楽しみたい
  • レア排出率の推移を分析したい

開発の背景

従来、ガチャの回数や課金履歴をエクセルシートで記録していたのですが、
複数タイトルを継続的に管理していると、行数が膨大になり、集計式のメンテナンスも負担になっていました。

そこで「手動の記録・集計を自動化するWebサービス」としてPullLogを設計しました。

開発にあたっては、以前に個人開発した MockAPI-PHP をモックサーバーとして利用し、初期段階ではフロントエンド開発を優先。
バックエンド実装を切り離すことで、UI/UXを重視した形で開発を進められた点が効率的でした。


主な機能

PullLogで現在提供している機能は以下の通りです。

  • ガチャ履歴の記録
    日付ごとに回数・レア排出回数・排出内容・課金額などを登録可能。タグやメモも付与できます。

  • 統計グラフの自動生成
    月ごとの課金額や排出率を各種チャートで可視化。複数タイトルの比較・クロス集計も可能です。

  • アプリごとの管理
    タイトルごとに天井回数やレアリティ定義を設定でき、複数アプリを一元的に管理できます。

  • 多言語対応
    日本語 / 英語 / 中国語に対応。課金通貨もアプリごとに指定可能です。

  • Googleアカウントでのログイン
    従来型のメール認証を省略し、Googleアカウントですぐに利用開始できます。
    なお、メールアドレスを使った新規アカウントの発行もできます。

  • 無料で利用可能
    現在すべての機能は無料で提供しています。


PullLogの画面イメージ

  • ログ入力画面
    pulllog_history_jp.png
    UI/UXとして重視したのが「最短数クリックのみでログ保存ができること」です。ガチャの頻度にもよりますが、日々行うことになる作業なのでこのUXコストを最小化したかったのです。とりあえず回数や課金額といった数値系ログを少ないクリック数+クリックのみで完結できるUIを実現しています。排出内容やタグ付け、メモ書きといった詳細分析用のテキストデータは後付けで追記できます。

  • 統計ページ(課金割合 / レア排出率グラフ)
    pulllog_stats_jp.png
    複数アプリ+期間指定での統計やクロス集計が可能です。単一アプリ集計では、アプリ設定でプリセットとして提供されている初期マーカーを使用して排出内容をマーキングすることでピックアップ率やすり抜け率といった排出内訳の集計もできます。

  • アプリ一覧画面
    pulllog_apps_jp.png
    アプリ毎に日付変更時間や天井のあり・なし、回数、課金する通貨単位を設定可能です。またアプリ内での最高レアリティや、分析用のマーカー定義なども行うことができます。さらにアプリ毎に履歴データをダウンロードしたり、ローカルファイルの履歴データをインポートして一括で履歴を登録することも可能です。


今後の展開

PullLogは基本的なログ管理・統計機能を備えていますが、今後の改良点として以下を検討しています。

  • カスタムタグやフィルター機能の拡充
  • ユーザーごとのストレージ連携を利用した画像アップロード機能
  • SNSシェアを意識した統計画像の自動生成

技術スタック

PullLogの開発には以下の技術を利用しています。

  • フロントエンド: Nuxt 3, TailwindCSS, PrimeVue, Pinia
  • バックエンド: Laravel 12, PostgreSQL 14
  • インフラ: Cloudflare Workers + VPS
  • ライブラリ等: Chart.js, Luxon, Zod, MockAPI-PHP など

さらに詳しい技術的背景については下記のオープンナレッジ・リポジトリで公開しています。
PullLog Documentation (Public)


開発の所感

PullLogでは、フロントエンドとバックエンドを完全に分離してドメインが異なるCORS環境として構築しています。
そのためセッション管理にCookieは使えず、フロントエンドとバックエンドはAPIのエンドポイントでのみ繋がる疎結合の構成です。
両者間の認証は秘匿化されたAPIキーとトークンで行っていて、これらの認証情報を秘匿化するためにフロントエンドにはAPIプロキシ層を実装しています。つまり、SPAのNuxtアプリのAPIリクエストはすべからくSSR(Nitroのnode.jsサーバ)のAPIプロキシが中継し、秘匿情報を付与してからバックエンドのLaravelアプリにリクエストするという構造です。
この構成のアプリ(特にSSR部分)をホストできるインフラとしては Cloudflare Workers が最適でした。SSRに対応でき、さらに無料枠のあるホスティングサービスは数少ないので Cloudflare にはとても感謝しています。

また、MockAPI-PHPを使ってフロントエンドとバックエンドの開発を完全に切り離したのも効果的でした。
初動からバックエンドの仕様や実装の制限等を考慮せずにUI/UXの製造に集中できるのは開発モチベーション的にかなり効果が大きかったです。フロントエンドからのAPIリクエストはMockAPI-PHPで簡略的にフックして、JSONレスポンスをそのままファイルDBとして使用することで、フロントエンドの要求仕様をそのままデータ設計にすることができました。そしてフロントエンドの実装がほぼ完了した頃合いでOpenAPIのスキーマを生成して、そのスキーマからDB設計→バックエンド実装とシームレスに繋げることができました。

バックエンドのLaravelアプリの開発時に、OpenAPIのスキーマからDBマイグレーション・モデル・コントローラを自動生成しての「スキーマ駆動開発」にチャレンジしてみました。しかしながら、これは失敗しました。自動生成コード自体の精度がかなり低く、手直しと最適化のコストがスクラッチビルドのコストを超えたため、採用は見送りました。この辺のバックエンド開発開始時が一番混沌として苦しんだ時期です。

総じて開発工数はおよそ4人月、1人で約5ヶ月間の開発期間で完成しました。


まとめ

PullLogは「ガチャ結果を整理し、データとして可視化できるサービス」を目指して開発しました。

まだ公開直後ですが、引き続き改善を行いながら、ガチャプレイヤーが安心して利用できるプラットフォームに育てていきたいと考えています。

サービスはこちらから利用できます
https://pulllog.net

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?