こんにちは、tosumaです。
今回は先日ブログでもご紹介させて頂いたFFRKのファンサイトついての記事です。技術的な話なのでプログラムやシステムについてご興味のある方はお時間いただけると幸いです。
●過去記事
【FFRK】ランキングサイトを作りました - tosumalog
【FFRK】ランキングサイトを作りました（技術話） - tosumalog
1｜まえおき
8月1日からFFRKでノーマル装備召喚の10連チケットが毎日配布されることになりましたので、毎日の装備召喚結果をシェアできる仕組みを作りました。
お馴染みのアンケートで需要あるかをまずは確認させて頂いてから、取り掛かりましたのでだいたい作るのに4日くらい掛かりましたかね。
#FFRKファンツール
— TaY Tosuma@FFRK (@Tay_Tosuma) 2022年7月23日
例の如く機能追加は人任せ😁
（3000RTいったら）毎日ただ10連ガチャに一喜一憂にならないよう結果の共有と記録ができるようランキングページをファンサイト上に作ろうと思いますがあったら使いますか？
※いつも通りツイートから自動集計
言うても、ベースとなるTwitterからのデータ収集やプラットフォームは出来ているのと、そもそもイベントは増やす前提の構想だったので、今回の改修の難易度はそんなに高くありませんね。
気になる開発規模ですが今回の規模の追加改修だと普通にシステムの開発会社に依頼すると相場的に納期2～3ヵ月の100～200万程度の見積が出てくると思います。
しかし、会社では「不要な作業はしないように！」とか、「コストを小さくするように！」とか偉そうに言ってるわけですが...どの口が言ってるんだって話ですねぇ。
2｜コンセプト
前回も書きましたが、システムを作る上でコンセプト、ゴールが必要です。
当システム及び機能のコンセプトは以下です。
・プラットフォーム(スマホ、PC)に依存しない
・Twitterアカウントさえあれば使える
・Twitterのガチャ報告と双方向で連動できる
・FFRKのプレイヤー間で情報を共有できる
・FFRK界に活気を！
3｜システム構成
当システムのアーキテクチャ（構造）はざっくり以下となっています。
収集で使用するTwitterタグはTAとは別にしていますが、大枠の考え方は変わらずですね。
3.1.基本構成
プラットフォームは既存のものにアドオンしています。
マルチプラットフォームで使えるようにWebアプリにしており、システム内でのインプットは避けた仕組みにしていますので、利用者からのインプットはTwitterでのみになります。
以前も記載しましたが、サイトはSSL化していないのでサイト内でのインプットは今後も行う予定はありません。
また、少し脱線しますが合わせて大事な点も触れておきます、FFRKファンサイトはTwitterアプリ連携は行っておりません、今後も連携する予定はありません。
Twitterアプリ連携とは、たまに診断サイトとかでTwitterアプリ連携の承諾を確認される事がありますよね？連携を許可したら過去のやりとりや繋がりを元にした（適当な）分析結果を出力してくれるあれです。
※有名な「診断メーカー」はアプリ連携しないサービスです
私もAPIを使ってる立場なのですが、基本的にAPIなどを使ってTwitterを自動操作する手段はAPIを開発するために申請したTwitterアカウントからのみになります、なので別にAPIでプログラム書いたら何でも出来るわけでは無いです。
で、そこで出てくるのが「ユーザーアクセストークンの取得」です。
これが例の「連携しますか？」の承認ですね、これを承諾してもらえたら何が出来るかと言うとその人の代理でツイートなどが出来るようになります。
悪意がある人がこれを手に入れるとどうなるかわかります？
そうです、よく聞く「乗っ取り」ってやつです。
で、当然私を含めAPIの知見や開発スキルを持った人ならやろうと思えば乗っ取り行為は割と簡単にできます。
...なので、私はTwitterアプリ連携の仕組みは作りません、この考え方は今後も変えるつもりは無いので私が提供するサービスでTwitterアプリ連携をすることはないです。
結局、今やってることと何が違うの？
という質問に答えるなら、私が提供するサービスは「私のアカウントで見える範疇 かつ 私がTwitterアプリ開いて手で同じ事ができる範疇のサービス」になりますね、利用している方のアカウント情報を使った何かは不可です、せいぜい人のツイートを効率的にメモしてる程度です。
3.2.Webサーバー
以前から同じ仕組みです。
Webサーバー(利用者からのリクエストに対してファイルをリターンする仕組み)にはApatchを使用しています。世界で最も有名なWebサーバーですね。
3.3.プログラミング言語(Web)
以前から同じ仕組みです。
画面の描画はphpを使っています、phpを使ってる理由はコンパイルいらずでお手軽だからですね。
3.4.DB
以前から同じ仕組みです。
データを蓄積する仕組みにはPostgreSQLを使っています、PostgreSQLを使ってる理由はライセンスフリーなのと構造がシンプルだからですね、お手軽。
3.5.プログラミング言語(集計)
以前から同じ仕組みです。
サーバーサイドでの計算にはPythonを使っています、Pythonを使ってる理由はTwitterAPIとの連携のナレッジが多いからですね。TwitterAPIは無料のライセンスを使っています、使いたいならTwitter社へ開発者申請すれば誰でも使えます。
3.6.処理
以前から同じ仕組みです。
Twitterからデータ収集はShellを使ってPythonで作成したプログラムをCallして実行してます。
4｜データベース構造
以前ご紹介したテーブル構成からだいぶ増えていますので、またDB関連は別でご紹介します。
基本はTwitterAPIで連携したデータを一時的にワークテーブルへ登録し、トランザクションテーブルへ登録する仕組みです。登録の際には過去に登録が有る場合にはツイートされた日付及び時刻が未来のデータを優先して登録する形になっています。
ちなみに、今回は日本のイベントになるので日本語対応しか考慮していません。
5｜Web構成
今回、ベースは ホームページテンプレート.com さんのフリー素材を使わせて頂きました、なのでフッターにはクレジット表記をしています。1から自作してもいいんですが、テンプレあると品質も安心なのとなによりスピードが1000倍違いますからね。
原型無くなるくらいカスタマイズしていますが、レスポンシブなcssなどはテンプレートの恩恵を受けています。
ファイルの構成も以前から大幅に増えているので、また別でご紹介します。
(DBもそうですが、ちょっと１記事に詰め込むには情報が多すぎるので笑)
5.1.トップページ
今回の機能追加にあたり、トップページのカルーセルに非公式イベントのバナーを追加しています。カルーセルというのはたまにサイトで見かけるバナーがくるくる移動するやつですね。
上記とは別にページ内にもリンクを追加しています。
期間などがわかるように意識しています。
5.2.非公式一覧ページ
トップからの遷移先に非公式イベントの一覧ページを追加しています。
今後もまたイベントを重ねていけるようなタイル形式の画面構成にしています、イベント期間なども書きたかったのでTA側の一覧よりも少し大きめのタイルを心がけました。
5.3.ランクページ
ランキングのページです、上段にルール紹介のページへのリンク、下段にランキングの構成にしています。
ランキングはスコアの累積評価形式（降順）、累積評価形式（昇順）、被り率（降順）の３パターンで切替できる仕組みにしました。
それぞれでランキングも詳細表示とスコア一覧の切替表示機能も用意しています。
エントリーにはTA同様にアシスト機能を用意しています。
ランキングとは別にデータ全体の統計も確認できるようにしています。
5.4.個別ページ
ランクページからユーザー名をタップすると個別ページへ遷移できるようにしています。このページではレア度別と装備種別とで切替して日々の結果を照会できるようにしています。
装備種別の情報量が多すぎて構成を悩みました笑
※レアリティ別
※装備種別
イメージアイコンからはツイートに添付された画像ファイルをモーダル画面で表示可能になっています。こちらはlightboxというフリーのライブラリを使って実現しています。
ちなみに、画像はサイト側では保持していません、一番の理由として画像をそんなにたくさん管理するストレージなんて無いです。なのでサイト側ではツイートの画像の位置情報だけ保持しています、Twitterで画像を右クリックして「画像のアドレスをコピー」って出てくるあれです。
なので利用されている方がツイートを消せば当然その宛先の画像も無くなるのでサイトから参照する事はできません、あとくされなくていいでしょ？
5.5.ルール紹介ページ
ルールの紹介用のページも用意しています。
6｜集計処理
集計にはPythonからTwitterAPIを用いて「#FFRK_FANTOOL_2208N10」のタグに紐づくツイートをファイル出力して、「タグ」「日付」「ガチャ結果」を分解して、PostgreSQLへ登録しています、いまはジョブ化しているので凡そ60分間隔で自動で動いています（私がチェックする度に周期が乱れてます笑）。
TwitterAPIについてご興味がある方は過去記事をご覧くださいませ。
ということで今回もかいつまんででしたが「システムってこんな感じで出来てるんだ、ふーん」くらいで同じように見てもらえたらいいと思います笑。
それでは皆さん、引き続き良きレコパライフを！
お読み頂き有難うございました。
※よければもう1本 関連記事をお読み頂けると幸いです
