こんにちは、tosumaです。
今回はFFRKのファンサイトについての記事です、技術的な話なのでプログラムやシステムについてご興味のある方はお時間いただけると幸いです。
●過去記事
ランキングサイトを作りました
ランキングサイトを作りました（技術話）
装備召喚の集計ツールを作りました（技術話）
装備召喚の集計ツールを作りました（あとがき）
魔石効果のシミュレーションツールを作りました
1｜作成の経緯など
作った経緯というか目的としては「魔石効果の計算がめんどいから」です。笑
具体的には以下を良ければご覧くださいませ。
私はエンジニア（といっても今は経営寄りで手を動かす仕事メインでは無いですが苦笑）を10年以上やってますが、やはりこうやってテーマを決めて、使って頂く人たちを想定して、実際にものを作ってみるとまだまだ色々な発見があって面白いんですよ。やはり『実践に勝る経験なし』と強く感じます。
なので、「プログラム勉強しようかなー」とか「プログラム組んでみようかなー」とか思ってる方は考えてる時間があればまずは手を動かしてみる事をお勧めします。
そして、気になる開発規模ですが、作るのにだいたい2～3週間くらいかかりました。
(1日30分～1時間程度の作業)
で、私が会社(仕事)で請け負う場合であれば開発期間2～3ヶ月程度で150～200万ってところですかね。（その場合は設計書や品質担保や運用マニュアルなど含みます）
2｜コンセプト
毎回書いてますが、システムを作る上でコンセプト、ゴールが必要ですね。
当機能のコンセプトは以下です。
①プラットフォーム(スマホ、PC)に依存しない
②誰でも利用可能
③操作中に画面更新(再読込)は行わない
④FFRKのプレイヤー間で情報を共有できる
⑤FFRKの攻略に活用できる
⑥簡単操作
⑦魔石効果の上昇パラメータを可視化
①～⑥はいつもので、⑦が本機能のポイントですね。
3｜設計
完成イメージは以下のような感じで取り掛かりました。
ゲーム内で照会可能な情報＋計算結果が見える形ですね。
理想形は複数のパターンの設定が可能でパターンを並べてステータス値などの上昇値を比較できたらいいなと思ってました。
※ファイヤ⇒ファイア (恥)
それに対して完成形は以下でした。
魔石構成のイメージ。
魔石ステータスと加算ステータスのイメージ。
魔石効果の計算結果のイメージ。
概ね最初に描いていたイメージ通りに実現できたんじゃないでしょうか。
実際に作ってみてわかったのですが、情報量が多い都合どうしても動作がもっさりしそうだったのでパターン別の比較については断念しました。
4｜システム構成
当システムのアーキテクチャ（構造）はざっくり以下となっています。
ベースはファンツールの枠組みの中で実現している形ですね。
今回は画面上での計算がメインになるためサーバーサイド(Python)の処理はありません。
4.1.基本構成
前述の通り、プラットフォームは既存のものにアドオンしています。
マルチプラットフォームで使えるようにスマホアプリ化などは行わず、Webアプリにしています。
サイトポリシーとしてシステム内でのインプットは避けた仕組みにしていますので、本機能における利用者からのインプットはありません。(画面上で項目を変更して画面の結果に変化を起こす事のみ)
4.2.Webサーバー
以前から同じ仕組みです。
Webサーバー(利用者からのリクエストに対してファイルをリターンする仕組み)にはApatchを使用しています。世界で最も有名なWebサーバーですね。
4.3.プログラミング言語(Web)
以前から同じ仕組みです。
画面の描画はphpを使っています、phpを使ってる理由はコンパイルいらずでお手軽だからです。ただ、PHPはDBからのデータ取得などがメインで今回は画面上で計算をゴリゴリ行っているのでJavascriptでの処理の比重が大きいですね。
4.4.DB
以前から同じ仕組みです。
データを蓄積する仕組みにはPostgreSQLを使っています、PostgreSQLを使ってる理由はライセンスフリーなのと構造がシンプルだからです。
5｜データベース構成
今回の機能では魔石のマスタ、魔石効果のマスタの２つで実現しています。
魔石のマスタには★5魔石～最新の魔石（ギルガメッシュ、エデン）までの情報を保持しており、それぞれ紐づく基本スキルを2つ、魔石ステータスを属性値として登録しています。
魔石効果のマスタにはパワーアップなどの効果の情報を保持しており、その効果がどのような効果なのかを登録しています、★6以上の魔石には1つの魔石効果で複数の効果が紐づいているためエンｘｘｘとかステータス系などは１：ｎで設定できるような設計思想になっています。
魔石が追加されたり、魔石効果が増えた場合にはプログラムを修正する事なくマスタのメンテナンスを行うだけで画面に反映される仕組みですね。ただ、さすがに今定義していない新たな効果が出てきた場合は改修を伴いますね。
悩ましかったのは魔石オーディン以降は基本効果が2つではなく任意で2～10個になる点ですね。笑
この点については同じ仕組の中で魔石と魔石効果を１：Ｎで紐づくように設計していますので魔石マスタ1件に対して最大で魔石効果マスタが12件紐づく形になっています。
ちなみに既にギルガメッシュとエデンは登録済みで、本日(10/28)リリースの地弱に合わせて魔石効果のマスタにエンストーンとバストーンの数値をUPDATEするのみで画面には反映されます。（メンテ作業時間は2分です）
6｜Web構成
毎回書いていますが、本サイトのベースは ホームページテンプレート.com さんのフリー素材を使わせて頂いています、なのでフッターにはクレジット表記をしています。1から自作してもいいんですが、テンプレあると品質が安心なのと開発スピードが段違いなためです。良いものはどんどん使いましょう。
ただ、原型無くなるくらいカスタマイズしています。笑
6.1.魔石構成 部分
気にした点は2つです。
1つは「スクショ1枚で全体が収まること」ですね、Twitterで共有とか画像として残すとかする場合にゲーム内だとメインとサブが別れていたり、画面上だと効果も4つしか表示されないので共有しづらいですよね、その点を解消したかったんです。
2つ目は「ストレスを小さくしたい」です。
操作を直感的で簡単にする事で悩ましい要素を排除、手打ちをなるべく避け片手でリストからポチポチと選択する仕組み（それでも多い苦笑）にしていますのと、１つ１つの操作で毎回画面が再更新しないような作りとしました。
画面の作りとしてはビュー(HTMLファイル)６枚で構成しています。
魔石や効果の画像をどれでもタップ（クリック）するとモーダル表示でメイン、サブ１～４に紐づくビューが表示される仕組みになっています。
表示したり、見え無くしたりをコントロールしているので再度開くと前の状態が残ったままになっていて、ふとした操作ミスでやり直しが不要になるようにしています。
また、プルダウンはそれぞれ前述のマスタから情報を取得してセレクトボックスを構成していますね。
魔石を選びなおすとチェンジイベントをトリガーに魔石効果は一度リセットするようにJavascriptで計算しています。
魔石や効果を選ぶと同じくチェンジイベントをトリガーにJavascriptでメインのビューのHTML値を書き換えてします。具体的には魔石や効果の画像やステータス値など、他の魔石や効果をチェックして全体の計算を行っています。
ただ、前述した通りイチイチ画面の更新を掛けたくなかったのでプルダウンを変える度にデータベースに取得しに行ったりは避ける必要があり、最初の更新のタイミングでセレクトボックスにすべての情報を持たせるようになっています。
つまりプルダウン上では名前しか見えていませんが「魔石名,画像パス,効果1,効果2,効果3,効果4… 」といった具合に内部では仮想配列で情報を持たせている形です。セレクトボックスが単一しか情報は持てないためカンマ区切りで情報を持たせて処理内でスプリット掛けて分割しています。（ここの実現案は割と悩みました笑）
6.2.魔石ステータス 部分
6.1で記載していますが、プルダウンを構成する段階で魔石の各ステータスを持たせていますので、魔石を選びなおすたびにメイン、サブ１～４それぞれを再チェックして計算した結果をメインのビューのHTMLを書き換えています。（どの魔石を選んでも再計算を行っています）
計算自体はJavascriptでゴリゴリやってます笑。
一応共通で関数を組んでいるのでどの魔石を切替しても同じメソッドが呼ばれる感じですね。
6.3.加算ステータス 部分
6.2の考え方と同じですが、こちらを求めるためには6.2の総魔石ステータスだけではなく、魔石効果の計算も必要になるため、魔石や魔石効果を変更した場合には毎回全魔石と全効果の選択状態をチェックの上、総魔石ステータス計算⇒魔石効果計算⇒加算ステータス計算と段階的に行っています。
ここも計算はJavascriptでゴリゴリやってます。
あとは画面からは見えないんですが、目に見えない領域に選んだ魔石のステータスや効果の値を全部書き出して、論理的な一時テーブルみたいな状態を作っています。笑
そうするとテストとかする場合にデータ取得の観点と計算の観点で切り分けできるので開発する上ではとても楽になりますね。
なんでもかんでも裏で一発でやると楽に見えますが、計算過程や処理過程を残すとテストやトラブル発生時に切り分けやトレースが容易になったりするんですよ。
6.4.魔石効果 部分
6.2と同じ考え方ですね、魔石や魔石効果を切替時にプルダウンに持たせている各情報を拾って計算しています。
ここの部分では2点ほど悩みました。
まず1つ目が「ライズパワー」と「アベンジパワー」の画像が同じ問題です。
これゲームの設計ミスでは？と言いたくなりましたが内部的にはおそらく同じプログラムの中でパラメータを＋と－で分けて実現されてるんだろうなって推測してます。
で、上記の画面で対策を考えた結果、、、魔石効果のアイコンの色を変える事にしました。文字足すとかは画面の情報量が増えるので避けたかったんでね。
2つ目の悩みがステータス系の加算率は実際には総魔石ステータスと掛け合わせた際に切り捨て、切り上げの処理が発生しますので効果単体では厳密に数値が出せません。
で、小数点以下を出せばいいんですが画面レイアウト的に小さく小さくしたかったので整数表記にして、注意書きを足すことで対策としました。
6.5.共有とリセット
毎回魔石構成設定するのも手間ですし、他の人に紹介するのにもスクショだけってのも中々扱いづらいため、共有する仕組みを考えました。
当サイトポリシーの都合、作ってもらった構成をサイト内に保存などは行えません、データを預かりたくないし、どんどん溜まってしまうんで論外です。
で、考えた案としてはURLパラメータ方式です。
具体的にはこのページにアクセスするURLに魔石や魔石効果の情報を含める事ができる仕組みですね。こうする事でURLさえ残しておけばまた同じ状態からスタートできるってわけです、ラクチンなのに加えて他の人に共有もやりやすいと考えます。
上記の共有ボタンをタップ（クリック）すると自動でTwitterアプリを起動してURLを貼り付けできるようにしています。
また、魔石や効果を選んだ時点でブラウザのアドレスバーを書き換えていますのでこの共有ボタンを押さなくてもアドレスバーのURLをコピーして頂く事でも保存が可能になっています。
アドレスバーのURL書き換えもJavascriptで行っています。
リセット機能もやり直ししたい時に不便だったので後からつけました。
これはJavasriptで全部初期値に更新してます。
ということで今回もかいつまんででしたが「システムってこんな感じで出来てるんだ、ふーん」くらいで同じように見てもらえたらいいと思います笑。（定型文）
それでは皆さん、引き続き良きレコパライフを！
お読み頂き有難うございました。
※よければもう1本 関連記事をお読み頂けると幸いです
