tosumalog~ IT的備忘とパパ的備忘を書き綴ります ~

tosumalog

~ IT的備忘とパパ的備忘を書き綴ります ~

【FFRK】ギガスコロシアムのパーティ検討ツールを作った

こんにちは、tosumaです。


今回もFFRK絡みかつファンサイト関連の記事です。技術的な話なのでプログラムやシステムについてご興味のある方はお時間いただけると幸いです。

 

 

1|まえおき

私、毎日FFRKは遊ばせてもらってます。


レコパ、楽しいですよね、もうね生活の一部。



歯磨きレベルです。




でもギガスコロシアムだけはあんまりやってません。



虫歯なるわ。



このブログ書き出した時点での私の攻略状況です。(白目)





ギガス、なんでやる気が起きないんでしょうね~。



パーティ組むのが大変?



敵がタフ&硬すぎて爽快感が無い?



持ち物検査が厳しすぎる?




うーん......。



め ん ど い


たぶん大多数がこれじゃないすかね。



......なんですが、少し前からギガスコロシアムのミッションが始まったためそうも言ってられなくなりましたよね。


現状、ミッションの報酬が他で入手不可のものなので流石に見過ごせず。






頼 む か ら ラ ビ ダ ン の 方 の 報 酬 に し て く れ ! !




で、いざやろうと思うと3パーティ......もとい、物理魔法で都合6パーティ作る必要があるわけです。


バランスは勿論、弱体・チェイン・バフ・デバフ・乾坤対策・等々と組み立てることになります。


まぁまぁ大変な作業。


今回のミミッククィーンをやろうと最初にパーティ作り始めた時にアプリが強制的に終了したので心が折れかけました。



...もっとお手軽に検討できないかな。


...なんかそういうツールないかな。



自 分 で 作 り ま し た


2|本機能の概要

本機能はコチラからご利用可能です。
https://taytsm.com/ffrkrank/GigasColiseumSimulation.html

本機能の使い方はコチラをご参照ください。
https://taytsm.com/ffrkrank/GigasColiseumSimulationHowto.html

本機能ではギガスコロシアムのパーティ構成を検討・結果を画像として保存する事が可能です、メモや他者との共有、相談やアドバイスなどで使って頂く事が可能です。


キャラクターの一覧からタップしてパーティを組み立てる使い方になっていて、ファンツールではお馴染みですが作ったものは画像として保存する事が可能になっています。


また、機能としては用意していませんがURLを取っておくとそのまま編集状態を再現する事も可能です。

3|工夫した点など

①操作感

操作感は出来る限りゲームの操作に合わせています。
そうしておくと直感で使って頂きやすいからですね。


②画面の構成

扱う情報が多いのでスマホなど小さな画面でどう表現するか悩みました。

パーティを3つについては表示をタップで切替できるようにしています、1~3の間でキャラクターの移動はほんとは可能にしたいのですが選択状態などの状態管理が難しいので諦めました。


③大量のキャラクターの扱い

キャラクターが多いのでシリーズ、属性毎に分割して表示を分けられるようにしました。


基本的に初回の読込後は次の画面更新までは通信を一切発生させないようにしているのでタップ操作でサクサク画面が動作できるよう意識しました。

④役割の選択

本機能では役割(ロール)も選択可能にしています、キャラごとに選択はやはり大変なので選択式ではなくモーダル形式でタップで極力ストレスなく選択できるような作りを意識しています。



と、色々考えてはいるものの、それでもパーティ3つ作るのは割と大変ですね笑

4|使い方のイメージ

基本的にはゲームとファンツールを同時に起動しておいて、ゲーム内でキャラの必殺技や状態を確認しつつ、ファンツール側で組み立てて行く感じの使い方を想定しています。


チェインや弱体、乾坤役などがまずは埋まると思いますので3パーティでそれぞれ埋めていき、あとはアタッカーやその他役割のバランスを考慮してペタペタやってもらう感じですね。


5|HTMLのイメージ化

いつもながら生成したHTMLをイメージに置き換えるのは「html2canvas」を利用させて頂いています。
html2canvas - Screenshots with JavaScript

HTML→イメージ化する際の考慮点は前回の記事をご覧ください。

tosuma.hatenadiary.com



6|苦労した点

①レスポンス

レスポンス面で悩みました。

キャラクターが多いので選択したら下段のキャラクターの一覧から選択キャラは除外する形にしたいので最初は毎回通信を発生させていました。

楽 な の で !

ただ、そうすると毎回各キャラの情報をサーバーから取得する形になるため、家のWi-fi回線の場合だと気にならないレベルでしたがスマホなどの回線の場合はモサっとした感がぬぐえませんでした。

また、通信制限状態だと顕著で、キャラを選ぶたびにロードが発生したので論外でした。

ということで最初の一回だけキャラ情報を読み込んで、見えない箇所に情報として持たせてそこを再利用する方針に見直しています、通信制限下でも初回読込だけはどうしても若干掛かりますがその後はサクサク動作可能です。

レンダリング

レンダリング部分でも悩みました。

スマホだと問題無いんですがHTML→イメージ化する際にパソコンやタブレットの場合、どうしても画面の幅が広くなってしまうため出力する画像の余白が大きくなってしまいます。


対策としてはインラインフレーム(iframe)を使う事でイメージ化する範囲を制限する事は可能なんですが、インラインフレームを使うために今度は画面間のデータ渡しなどがややこしくなるので、一旦パソコンやタブレットでの余白調整は諦めました。
この点の克服は今年の私の課題の1つです。

7|遊び心

今回の機能ではダンジョン名を選択すると生成画像にもダンジョン名が表示する事が可能にしています。

これ自体は必殺技構成画像メーカーでも取り入れてるオプションなのですが今回は更に作り込みをしてダンジョンのボスイメージも付ける事ができるようにしました。
(ボスによって背景色も変化します)


オプションつけるの好きなんですよね、ゲームでもオプションが細かければ細かいほど好きです笑。

8|今後の予定

基本的にこの機能に対してこれ以上の拡張は一旦考えていません、ギガスダンジョンが増えたらメンテするくらいですね。

もしリクエストフォームなどで追加要望があれば勿論前向きに検討させて頂きます!




それでは皆さん、引き続き良きレコパライフを!


過去記事

【FFRK】ランキングサイトを作りました - tosumalog

【FFRK】ランキングサイトを作りました(技術話) - tosumalog





f:id:tay_tosuma:20200219062206p:plain
お読み頂き有難うございました。



※よければもう1本 関連記事をお読み頂けると幸いです

tosuma.hatenadiary.com

tosuma.hatenadiary.com

tosuma.hatenadiary.com

tosuma.hatenadiary.com