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

tosumalog

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

【FFRK】非公式サイトを作って2年経ちました

こんにちは、tosumaです。


今回はFFRKのファンサイトついての記事です。普段利用頂いている方やFFRKプレイヤーの方、その他プログラムやシステムについてご興味のある方に見て頂けますと幸いです。

1|まえおき

一昨年の5月に思いつきで始めたFFRKの非公式サイト、2年経ちました。


経 っ て ま し た
(完全に忘れてた)



いつもご利用本当に有難うございます、昨年同様にただただ感謝です。

※作った経緯はコチラです

tosuma.hatenadiary.com


「クリアタイムの共有」と「日本版と海外版のユーザーのコミュニケーション」の2つをテーマに始めたサイト運営です。

もはや私だけのアイデアだけでなく、問合フォームやX(旧Twitter)でのコメントを多々頂いて開始当初と比べ機能も大幅に増えました。

(1人でやってんのに増やしすぎた気さえします)小声

昨年も書きましたが、1人~2人の利用者から始まったのですが、今は国内外含め毎日数百名ほど利用頂けるサイトにまで成長でき、当初の目的に対して良い感じには感じています。

2|アクセス推移

利用傾向はこのようになっています。
いつか日本ユーザーと海外ユーザーとで当たり前のようにコミュニケーション取れるの場になるのが変わらず今も理想です。
(誰がアクセスしたかなどは開示請求でもしない限り私もわかりません)

8月と2月は非公式イベントしたのでアクセス数が若干他より多い傾向ですね。
なぜか今年も4月が多いですね、何かありましたっけね。

月あたりの利用者数の推移はコチラです。
(同日の同一IPの場合は1ユーザーとしてカウントしています)

 

3|2年目で追加した機能

コツコツとまたこの1年も色々作りましたね。
増えた機能はコチラです。

<ランキング系>
・ファンサイトライト
・こだわりランキング
・コレクターランキング

<攻略支援系>
・プロフィールメーカー
・レジェンドマテリア検索
・オリジナルランクメーカー
無課金メーカー
・ギガコロシミュレーション

<ファンゲーム系>
・Dr.モグ QAメーカー
・モグボゲーム
・タイピングキーパー
・超必殺技!有限スロットルクイズ
モーグリをさがせ!

多いな。苦笑
基本的には普段私が1レコパプレイヤーとして「こんな機能あったらいいな~」というのを軸に作っています。

最近だとドットの練習をしていて、#レコパミーム というハッシュタグで遊んでいます。
画像

あまりこれに意味は無いです。(真顔



以下は1ヶ月経過時と1年経過時の記事です。

※サイトを作って1ヶ月経過時

tosuma.hatenadiary.com


※サイトを作って1年経過時

tosuma.hatenadiary.com

 

4|非公式イベント

この1年も無事非公式のイベントの開催できました。

第3回はコチラ、どっかで見たことあんな。


第4回はコチラ、どっかで見たことあんな。

 

どっかで見たことあるのばっかじゃねーか!!

などのツッコミはご容赦ください(土下座)


5|苦労話

前も書いたんですが、基本的にファンツールの運用で毎日何かしらやってます。

と言っても私は職業柄、毎日IT関連の情報収集や勉強を30分~1時間程度必ず行うようにしているので歯磨きみたいなものです。

※具体的には以前こちらで紹介させて頂きました。

tosuma.hatenadiary.com


で、苦労したのはコチラですね。

tosuma.hatenadiary.com


TwitterがXになり、経営方針が変わったことでAPIが今までと同じようには使えなくなりました。

これに伴って処理をほぼ1から作り直しが生じたのと、完全自動化を断念しました。


......ただ、完全自動化はまだ諦めていないのでコツコツ研究しています(暗黒微笑


6|さいごに

初心から変わらずですが、今後も私を含めたFFRKプレイヤーがゲームをより楽しめるようにサイトの改善ならびに運用を行っていければと考えております。
また、不具合なんかもたまに出てご迷惑お掛けする事があるとは思いますが出来る限り迅速に対応しますので、引き続きご利用頂けますと幸いです。


今後とも「FF Record Keeper FanTool」をどうぞよろしくお願いします!!



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



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



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

tosuma.hatenadiary.com

tosuma.hatenadiary.com

tosuma.hatenadiary.com

tosuma.hatenadiary.com


 

【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


 

【FFRK】ウォーリーを探せ!みたいなゲーム作ってみた

こんにちは、tosumaです。


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

 

 

1.前置き


ファンツールというかゲーム作りに関しては基本的に勉強がてら取り組んでいます。
やる気のない勉強のイラスト | かわいいフリー素材集 いらすとや

私は10年以上この業界に居るので、出来上がっているプログラムやシステムを見るとある程度は「こんな仕組みなんだろうな~」というのはイメージできます。


......が、実際にやってみるとイメージ通りにはいかなかったり、ちょっとした壁によくぶち当たります。




なので、実際にやってみて、壁にぶちあたって、解決方法を模索して、解決するサイクルがとてもとても大事なんですよね。

それが一番大事 | 言葉は言霊 ~話す言葉によって未来が変わる~


プログラムというのはイメージの世界だ...
実装方法がイメージできないものはプログラムでは実現できない...

アニメ『葬送のフリーレン』リヒターとは?声優は花輪英司さん! | アニメニュース | アニメフリークス


私が作るゲームでは加えて以下コンセプトありきで作っています。

・プラットフォームを問わない
・シンプル
・何かしらFFRKを連想できるもの

プラットフォームを問わないという事は必然的にWebベースのゲームとなります、そのためイメージやサウンドなどは極力避けるor縮小したものを使う必要があります。

※レコパのSE、イメージ以外はすべてライセンスフリーのイメージやサウンドを使うようにしています


2.使っているプログラム


ゲームを作るプログラムはJavascriptベースになっています、シンプルの極みです。

あと、これまでもよく使っていますが、ライブラリにはenchant.jsを選択しています、enchant.jsはオープンソースHTML5向けゲームエンジンになります。
enchant.js - Wikipedia


※ライブラリ…あらかじめゲーム作りに必要なロジックが準備されているもの

enchant.jsはシンプルで難易度も高く無いため個人的には気にいっています。

ただ、開発自体が何年も前に終了してしまっているため最新のブラウザで問題が生じた場合に対処がされないなどリスクはあります。

また、マルチタップに対応していないため複数の指での同時操作するようなゲームは作る事ができません。

なので、いずれはUnityなどにシフトしようかな、とは考えてはいます。




ゲーム作りもこれで5本目ですからね、比較的スムーズにサクッと作れるようになってきました~。



なんて思ってたんですよ。(後述)


3.ゲームの概要


画面に無数に配置されたキャラクターの中に隠れているモグを見つけるゲームになっています。


見つけてタップすると加点されるので、制限時間内でより多くのモグを見つけて最終的なスコアで競う感じですね。

※ゲームはこちらです ⇒ モーグリを探せ!


えっ? どこかで見た感じがするって?



えっ?
ウォーリーをさがせ!展」が東京・横浜・大阪・名古屋で、日本初登場の絵本原画&イラストなど約150点 - ファッションプレス


画面イメージはこんな感じですね。


とにかく目に優しく無いですねぇ。笑



......とまぁ、こんな感じですが


少しでも楽しんで頂ければ幸いです!!


4.工夫した点


ずっと同じ感じだと単調になるので、進捗に応じて以下の工夫を取り入れています。

①モグが段々と小さくなる
②制限時間の増加量が段々と少なくなる
③フェイクキャラが出現&段々と増える
④UFOが出現
⑤ピンチになるとプレッシャーをかける
⑥選択キャラごとにアビリティを用意

UFOはどこの馬の骨かわからん奴ではなく、もちろんFF8のやつです。
FF8】コヨコヨ&UFOイベントの攻略方法【ファイナルファンタジー8】 - ゲームウィズ
※画像はネットで拾ったもの

⑥は実は隠しキャラを1人用意しています......と言っても別に特別強いわけでは無いです。笑


5.公開中断


このゲームですが4/15に公開したんです!!


見てください、この呑気なポスト。

 

そ の 日 の う ち に 公 開 停 止 し ま し た 。


いやいや......どうも一部のAndroidで動かなかったんですよ。
(制限時間が進まないようになってしまっていた)

基本的にIPhoneとパソコンと手持ちのタブレット(Android)でのみテストしており、その範囲内では普通に動作していたため気づきませんでした......。

......で、プログラムを眺めても問題が見つからず、ネットで類似事象をえっちらおっちら調べてるとありました。

teratail.com


原因は addChild しすぎ

基本的に[生成]⇒[削除]⇒[生成]がセオリーかと考えていたんですけどね、どうもAndroidの一部だとそれでは描画が耐えられないようなのでした。

描画ではなくメモリ上に展開する部分がネックなんですかね、メモリ上に展開済みであればサイズ操作、位置操作、透度操作などなどはサクサクと軽い感じでした。

Andoroidの一部だとremoveChildしてもメモリから即消えないんですかね、対策としてはaddChildした後はremoveChildは一切しないように見直しをしました。

<対策前>
画像
<対策後>
画像

モグやハズレキャラなどは次ターン時には座標を変更するのみ、UFOやフェイクなどは一時的に画面外の座標を指定して移動したりリサイズする事で対処しています。

そうする事でなんとか本問題は解消できました。


これ実は以前に落ちモノゲーム作ってる時に同じ問題に直面して心が折れてたんですが、今回は調べ出して割とすぐにアタリをつける事が出来て最終的に解消できたので良かったです。笑

 

6.実装のポイント


<構成>

ゲーム構成(シーン)は4つで構成しています。

①ロード
②タイトル
③メイン
④リザルト

ゲームを起動するとまず[ロード]シーンを表示、ロードが終わると自動で[タイトル]シーンへ遷移、開始ボタンを押すと[メイン]シーンへ遷移、制限時間が無くなると[リザルト]シーンに遷移しています。

また、[リザルト]シーンからはボタンに応じて[タイトル]シーンもしくは[メイン]シーンへ遷移するような感じになっています。

<キャラの優先順位付け>

今回はモグ、ハズレ、フェイク、UFOとたくさんのキャラが画面上に配置するわけですが、重なる優先順位にやや苦戦しました。

モグがハズレやフェイクに重なるとタップが出来なくなり詰んでしまいます。笑
そのためハズレ<フェイク<モグ<UFOとなるように優先順位をつけています。

また、ハズレの中でも最大2種類のキャラになるようにしていますがどっちかが下で残りは上だと見た目的にイマイチなので入れ子になるように各要素ごとに優先順位を制御しています。

<難易度を調整するフェイクキャラ>

フェイクキャラを配置したくて考えたんですがFFってドラクエモシャス的な要素やポケモンメタモン的なのがパッと思い浮かばなかったんですよね。

......で、悩んだ末に、FF6モーグリスーツがあるのを思い出して、ストラゴスとリルムは装備すると見た目もモグになるんでこの2人をフェイクキャラとして採用しています。笑

わざわざドット画像もオリジナルで作ったんですが、良い感じでジャマなので満足しています。

<難易度を調整するお邪魔キャラ①>

30ターンを超えるとそれから5ターン起きにUFOが出現します、タップするとリサイズした後に爆発エフェクトのイメージ数枚をフレーム単位で切替することでアニメーションっぽい感じにしました。

最近はドット操作も慣れてきたので良い感じにこれくらいのアニメーションなら作れるようになりました。笑

<難易度を調整するお邪魔キャラ②>

プレイヤーを混乱させる目的(性格悪い)でFFRKモグとFF6モグを配置するパターンがあります、これは10ターンに1回出すようにしています。


7.あとがき


上述した通り、以前は行き詰っていた問題にもスマート(?)に対応できたりとゆるやかな成長が感じられました。笑

本当はアクションゲームを作っていたんですが、先日の縄跳びの評判があまりにも悪くってアクションは一旦避けました......。苦笑


私の最終目標はロックマンみたいなゲームを作る事なので、また引き続き勉強&経験値積みしてレベルアップしていきたいと思います~。


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


過去記事

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

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





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



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

tosuma.hatenadiary.com

tosuma.hatenadiary.com

tosuma.hatenadiary.com

tosuma.hatenadiary.com