見出し画像

【全文無料】サイファシスト開発のお話

まこと

こんにちは、まことです。
私はファイアーエムブレムサイファ(以下、サイファ)というTCGを1弾から22弾の最終弾発売日まで走り抜け、以降も今日に至るまで遊んでおります。
自己紹介の記事にも記載している通りですが、サイファを通じて数多の友人との出会いに恵まれ、数々の強者に揉まれながら多少の入賞経験もしたりしました。
そんな私ですが、2022年3月末の完全サービス終了後の現在もサイファシストというサイトの運営管理を個人の趣味で行っております。
今回はそのサイファシストの開発話についてnoteに記載してみます。
めっちゃ長いです…！

結構技術的な話も出てくると思いますので、そういうのに明るくない人にとっては意味わかんない記事になってると思います。
それでも読んでくれる奇特な方は「なんかよくわかんないけどこんな事考えて開発してたのか！」みたいな感じで読み終えてくれれば大丈夫です！笑

サイファシストのしくみ

まずは小難しい説明の前に簡単な図解を用意してみました。
現在サイファシストには様々な機能がありますが、最もスタンダードな検索機能を例に挙げてみます。

図に示す通り、管理者(まこと)がTwitterを主に情報源としてデッキ情報を収集し、それを予めサイファシストに登録します。ここはなんと手作業です()
管理者による追加の他にも、ちょっと図解すると煩雑になるので省略しましたが、デッキ作成機能で公開されたデッキレシピについても検索対象としています。
それを利用者であるみなさんが利用するPCやスマートフォン上のWebブラウザを通してサイファシストのWebサイトにアクセスし、要求された検索条件によってパラメータを送信、DB(データベース)に条件に基づいた検索を命令してその結果得られたデータをWebブラウザに表示する仕組みです。
検索の仕組みは特殊なことは特に何もしていない一般的なWebシステムと同じです。

サイファシスト開発の経緯

時は遡り、2019年4月。
平成がもうすぐ終わり令和の世が始まろうとしている最中、サイファは当時サナキが環境トップとして君臨する16弾環境でした。
私事ですが当時私は現在の妻と婚約しており、結婚までの挨拶やら準備やらで結構忙しく、外出してサイファを積極的にプレイできる状況ではなかったので、せめてTwitterで環境は知っておこうと思って対戦会や個人CSなどの結果ツイートを独自にまとめていました。

まず、上記結果ツイートをできるだけ多く引っ掛けられるよう、Twitterの検索機能を利用することにしました。
活用されている方もいらっしゃると思いますが、Twitterってクエリみたいな機能で特定のツイートを引っ掛けることができるんですよね。
随時ブラッシュアップしていってるのですが、大体イメージとして以下のようなクエリをTweetDeckの検索窓に入力して常駐させておくことで勝手に結果ツイートが流れてくるような環境をつくりました。
※実際は明らかに関係ないアカウントをマイナス検索に追加するとかしてます、サイファって名前の人とか…ｗ

(#FEサイファ OR #FE0 OR #サイファ OR #ファイアーエムブレムサイファ OR #FECipher OR FEサイファ OR FE0 OR サイファ OR ファイアーエムブレムサイファ OR FECipher OR ファイアーエムブレム OR ファイアーエムブレムサイファショップ) (優勝 OR 全勝 OR 入賞 OR 対戦会 OR デッキ OR 使用 ) (filter:links OR filter:images)

そうしたら次は流れてくるツイートを管理しやすい形式に加工します。
データの形式としては、まずヘッダーデータとしてツイートの日付、主人公名、TwitterURLを、ボディデータとして採用カード名、採用枚数を記録し、加えてそれぞれに独自にデッキNoを定義してヘッダーとボディデータを紐づけることでデッキのデータを管理します。

デッキ概要を表現するヘッダーデータはこんな感じで
デッキ詳細を表現するボディデータはこんな感じでヘッダにぶら下げる形で扱えるようにしてます

デッキの詳細は写真が掲載されているものなら目視で確認して、カード1種につき1行データを追加する形で作業するというかなりのアナログ作業ｗ
でもまぁ好きなコンテンツの作業だったのでそこまで苦になりませんでした。
そうして16弾環境の約3ヶ月間、まとめたデータをブログにした記事が下記のものになります。

これだけでも結構やりきった感がありましたし、実際「こんな細かいデータ取ってたとか感心した」みたいな感想も頂いたりしてそこそこ反響もあって楽しかったんですが、ここで私に更に欲が生まれます。

こういうデータを常に誰でも確認できる環境があったら面白いんじゃないか…？？？

デッキ概要とデッキ詳細にデータを分けて管理していたため、主人公名だけではなく採用されているカードからもデッキを検索できるような仕組みが実装可能なビジョンが既にこの時脳内にありました。
もし実現できれば、これはきっと誰もやってない新しい試みになるぞ…！
そう思ってワクワクした私は徐々に実現に向けて動き出すのでした。

デッキ検索ツールの実装検討と誕生

2019年7月に無事入籍を済ませ、同年9月には新婚旅行にも行くなど順調な新婚生活を送っていた一方(マジでマジでコロナ前で助かった…！)、上記のデータ管理作業自体は細々と続けていました。
結婚の他にも風花雪月発売とかも重なって家にいたんで全然外でサイファやってなかったんですけど、17弾環境当時だったんであんまサイファプレイしてなくても集計しててなんかゼフィール多くね…？？？とか思ってた気がします。
そんなこんなで落ち着いてきた10月頃から本格的に実装作業に乗り出します。

まず最低限の実装要件として考えていたものとしては下記のようなものになります。

  • PC・スマホで閲覧できること

  • Twitter上の優勝&入賞レシピを検索できる機能を備えること

  • 環境を簡単に俯瞰できるような機能を備えること

PC・スマホで閲覧できること

サイファのデッキデータを常に確認できるようにするため、まずシステムを実装し公開する必要がありました。
そのためにはWebサーバーを立てて、その上に検索システムを乗っけることで実現が可能となります。
現実問題、サーバーを自分で用意するのは電気代とかかかるしマシンも高いしであり得ないんでレンタルサーバーを利用するのは確定でした。
レンタルサーバーの選定基準としては、Webシステムの実装が目的のため、最低限データベースを利用できることが条件として挙げられました。
本職ではないのですが私のエンジニア経験としてPHP+MySQLを扱えたため、それを扱えるサーバーがいいだろうということで、過去にも利用したことがあるさくらインターネットの「さくらのレンタルサーバ」を利用することにしました。
スタンダードプランで月額425円くらいのプランです。
まぁ趣味に金かけるのは当然ですし、このくらいなら別にいいやってことで契約。
加えてragnellike.comというドメインも取得したので、その利用料もいくらかかかってます。
そういうわけで年間5200円+ドメイン使用料がサーバー維持費ってことでかかってます。

ここまではサーバー側の必須要件で、次はPCやスマホといった端末クライアント側の必須要件についてです。
私なんかはエンジニアなんで日常的にパソコンを利用していますが、現代の世の中のWebシステムはスマホやタブレットからの閲覧が大半です。
極力閲覧環境によって見え方が変わらないようなレスポンシブデザインは、サイファのデッキデータを誰でも閲覧できる環境を実現するという当初の目的達成には必須要件でした。
その実現のために、ずっと興味のあったWebアプリケーションフレームワークの「Bootstrap」を利用することにしました。
Bootstrapの詳細な説明は省きますが、現代のWeb環境において広く利用されており、ドキュメントも充実しており、作りながら学ぶのにもそこまで苦労しないだろうというのが主な理由でした。
確かBootstrapはTwitterで利用されていたフレームワークに手を加えたものがオープンソースとして公開されたものだったと思います。
Bootstrapを利用することで、PCではきれいに表示されているのにスマホだと画面が小さいせいでめちゃくちゃ画面スクロールをしないと閲覧できない！といったことがなくなります。

PCでの見え方はこんな感じで2列なんですが
スマホだとこんな感じで1列になるのです！
この小さい画面で2列になってたらめちゃくちゃ横スクロール
しないといけなくなって見づらすぎますね

Twitter上の優勝&入賞レシピを検索できる機能を備えること

これの実装要件は非常に単純で、要は「主人公名」を入力したらその主人公のデッキが一覧でバババッと出てくるような機能が求められました。
スプレッドシートで管理していたときのデータ構造でそれは十分実現可能だったので、検索条件を指定できるフォームをPHPという言語で実装し、そのデータをもとにMySQLで検索クエリを発行して検索し、得られたデータセットをPHP側に返すような仕組みで実現できました。
ただそれだけだと面白くなかったので、加えて「採用しているカード」からもデッキを検索できるようにもしました。
これは採用カード1枚1枚をご丁寧に1行ずつのデータとして管理していたから実現できました。
あとはカードゲームの環境や構築情報は水物ですので、時期も大事ですね。
そのため、Twitterのツイート時期をベースにデッキ情報に日時情報を持たせ、期間で検索できるようにするのも必須でした。
以上の結果、主人公名、採用カード、デッキ情報の発祥時期の3つで検索できるようにするのが当初の実装要件となりました。
これが現在のサイファシストで「デッキ検索」として利用できる機能の前身です。

最初はこんな感じのUIでしたね…懐かしい

環境を簡単に俯瞰できるような機能を備えること

デッキ情報を主人公名、採用カード、時期の3軸でまとめていたため、簡単な分析であればできるだろうというのも実装ビジョンがありました。
そのため、アクセスするだけで流行っている主人公や採用カードがひと目で分かるような仕組みも作ろうと思いました。
また、一覧で表示されている主人公名やカード名にリンクを張って、クリックしたらその主人公orカードのデッキの分析ができるような、所謂深掘り分析もできるようになれば面白いのではないかと思いついたので、その実装をしようと考えました。
これはほとんどデッキ検索の仕組みを流用すれば実現できたため、先にデッキ検索機能を実装し、そのソースコードをある程度流用して比較的短時間で実装できました。
これが現在のサイファシストで「デッキ分析」として利用できる機能の前身です。

これが初期案完成後ちょっとしてからの画面で、時期としては19弾になりますかね

そんなこんなで実装を進め、大体1ヶ月半くらいかけて「ファイアーエムブレムサイファ デッキ検索ツール」というネーミングセンスのかけらも感じないなんとも地味な名前でサイファシストの前身が誕生しました。
当初考えていたものが、一旦はほぼ実現できたので嬉しかったですね～。
最初はあまり積極的に宣伝もせず、一旦Twitterのフォロワーにだけ公開(当時鍵垢だった)していたのですが、徐々に存在がバレてフォロー外の方にも認知されるようになったので、年明け以降の2020年2月に紹介記事を書いて正式にお披露目となりました。

サーバー側の実装は本職ゆえ得意なのでそんなに苦労しなかったんですけど、正直クライアント側の実装はあまり得意じゃないので、現在でももうちょっとやりようあったんだろうなあとは思わなくもないです…。
jQueryとかはまぁまぁ扱ってたんですけど本職じゃないので偏った知識ですし、Webデザインに関しては完全に素人同然ｗ
本職のWeb開発屋さんがもし見てたら色々教えて欲しい…！

ガチャログ終了とサイファシストの誕生

2020年当時まで、サイファのデッキレシピ作成といえばガチャログというサービスが主流でした。
しかし、そのガチャログが確か2020年末でサービスを終了するということで、Web上でデッキを作成・管理できる環境がほとんどなくなってしまったのです。
私自身もガチャログをかなり愛用していてサービス終了を惜しんだのですが、ここでふと思ったのです。

なきゃ自分で作ればいいんじゃね…？？？

幸いカードのデータなんかはこれまでのデッキ検索の仕組みを作るにあたって用意していましたし、デッキデータを作成・保存・管理するシステムの実装だけであればそんなに実現は難しくないように思えました。
ただ、前述の通りあまりクライアント側の実装は得意じゃないので、ガチャログのような操作感でデッキ作成機能インターフェースを実現するのには少し自信が持てずにいました。
目標としてはガチャログの代替サービスになるものじゃないといけないなあと勝手に思っていたので、「ちょっと勉強する必要があるなぁ、まぁ良い機会だし既存のシステムを少し研究してみよう」と思い、サービス終了までの間、ガチャログがどんなインターフェースなのか今一度観察し、実装イメージを膨らませていました。

そして予定通りガチャログが2020年末にサービス終了したあと、年明けて2021年になってデッキ作成機能の実装に取り掛かるのでした。

主な実装要件としては下記の通り

  • デッキ管理を実現するため何かしらのアカウントを発行する

  • カード名を入力したら候補になるカードをリストで自動表示する

  • デッキレシピの画像が保存できるようにする

  • デッキレシピのツイートを可能に、またTwitterカード画像ではデッキレシピの画像が出るようにする

サーバー側のデッキ保存の仕組み自体は何の懸念もなかったので、新機能だったり利用者のみなさんが触る部分だったり、あとはSNS連携部分の見た目の部分だったりを課題として認識していました。

デッキ管理を実現するため何かしらのアカウントを発行する

デッキレシピを管理するためには何かしら個人と判定できる仕組みを導入する必要がありました。
前述のガチャログはその情報をおそらくWebブラウザで識別しているようで、たぶんCookieを利用していたのではないかと思いますが、Webブラウザでの識別だと利用している端末によって紐づけが変わるという問題がありました。
例えば家ではパソコン、外ではスマホというように利用している場合、それぞれで同じデッキレシピを参照できなくなるという問題が発生します。
それはあまり望ましくないなと感じていたため、今回は導入も楽で上記問題も解決できるTwitterOAuthの仕組みを利用して、Twitterアカウントと連携することでログインの仕組みを実現することにしました。
Twitterアプリケーションとしてサイファシストを登録し、ログイン用のトークンなどを発行、それをサイファシストに組み込むことでログイン処理を実現しました。

よくこういう画面見たことあると思いますが、TwitterOAuthを利用すると実装できます

カード名を入力したら候補になるカードをリストで自動表示する

ストレスなくデッキレシピを作成する環境を実現するために、採用したいカード名を入力したらすぐ候補一覧が出てくるような仕組みが求められました。
これを満たすためには予めカードの情報を用意し引っ張ってくるような仕組みが必要です。
サイファのカードはテキスト重複なども全部含めると3177種存在するのですが、それらのデータをデッキ作成画面を開くたびに読み込んでいては、3177種のデータを読み切るまで画面が表示されない問題が発生します。
それはあまり操作感としては良くないだろうということで、ここは検索ワードが入力されたら都度通信し必要な情報のみ取ってくるような仕組みで実現することにしました。
実際のデッキ作成画面では、検索ワードが入力されたら裏で通信が発生し、候補リストが返ってきたらリストとして表示するようにしています。

「マルス」と入力されたら裏で「マルスってカード教えてくれ」って通信が飛んでます

デッキレシピの画像が保存できるようにする

デッキ作成した際に、各々のTwitterアカウントやブログなどでデッキを紹介する際にデッキレシピの画像が必要になることを想定していたため、こちらの実装も必要かなと思いました。
デッキレシピ表示画面上で画像で保存できるようなボタンを用意し、それが押されたら画像がDLできるようにする、という機能を想定し実装にあたりました。
最初はレシピ画像保存のボタンが押されたら、デッキレシピの画像をWebブラウザ上で生成し、それを都度DLするような仕組みを想定し、Javascriptを用いて実装したのですが、運用してみると問題点だらけでした。

  • ブラウザでの画像の読み込みが完了しない段階で画像DLをするとカード画像が歯抜けになってしまう

  • Webブラウザは各々の環境に依存するので、画像上のフォントが統一されない

などが主に大きな問題でした。
特に2つ目はどうしようもなく、この運用は厳しいと判断して実装を破棄し、サーバー側でデッキ画像を生成し保存しておく手法を取ることにしました。
具体的には、デッキ作成画面でデッキを保存した際にサーバー側でデッキ情報をもとにデッキ画像を生成、それをサーバーに保存し、デッキレシピ表示画面で予め保存している画像をDLさせる、というものでした。
これであればサーバーはサイファシスト側1台だけですので、各々の環境に依存することなくフォントが統一されないという問題も解決され、画像自体はサーバーにあるためなにか問題が起きた際にも管理者側で対処できるというメリットがありました。

デッキレシピのツイートを可能に、またTwitterカード画像ではデッキレシピの画像が出るようにする

TwitterをはじめとしたSNSなどのWebサービスは、リンクを張った際にクリックして貰いやすくなるように、リンク先のページのタイトルや画像を表示する機能に対応しており、Twitterカードと呼ばれています。
この機能自体はもともと設定はしていたのですが、ガチャログでは作成したデッキレシピの画像がここに表示されるようになっていたので、サイファシストでもデッキ作成時に自動生成されたこの画像をTwitterカードとして表示されるように実装しています。

↑こんな感じでデッキ画像がTwitter上に表示されるようになってます


以上の要件を満たすように意識して実装を開始して、だいたい2週間足らずで完成したんじゃないかなと思います。
2021年の1月中旬頃から作業を開始して、最初は2月くらいに公開かな～なんて思ってたんですが、作業してみたら案外サクッと行けたんで…！

そうしてデッキ作成機能を新たに搭載して大型アップデートを果たすと、もはやこのサイトは検索ツールではないなということになり、これまで「ファイアーエムブレムサイファ　デッキ検索ツール」というしょーもない名前だったのを、サイファプレイヤーをアシストするいう意味を込めて「サイファシスト」と改名し、新たに生まれ変わったのでした。

公式サービス終了とカード検索機能の追加

デッキ作成機能を実装後、おかげ様でたくさんの反響をいただきまして現在に至るまで1000件を超えるデッキレシピの登録がされています。
サービス中のTCGならともかく、サイファって22弾を最後に販売されなくなって、現在はサービス終了してるんですよ？みんな頭おかしいんじゃないですか？
まぁ冗談はさておき本当に利用者の皆さんには感謝です。
それだけサイファって愛されてるってことなんやな…。

さて、そんなこんなで1年くらいたった2022年3月末、告知されていたように公式のメールサポートの終了を以て完全サービス終了を迎えることとなりました。
これまで公式サイト上で利用できていたカードリスト検索機能も利用できなくなるということで、数多の惜しむ声がTwitter上に溢れたのは記憶に新しいのではないでしょうか。
さて、そんな時思ったんですよね…もう分かると思いますが…

なきゃ自分で作れば（ｒｙ

というわけで、3月末の公式サイト閉鎖までに代替となるような機能を実装し公開することを目標に早速作業を開始するのでした。

主な実装要件としては下記の通り

  • サイファシスト内のカード情報の整理

  • カード詳細表示ダイアログの実装と再利用

  • 検索条件の細分化、および強化

サイファシスト内のカード情報の整理

これまでサイファシスト内で管理していたカードの情報って、カード名やシンボル、簡単な分析のために戦闘力や支援力なんかがあるだけの必要最小限のものに留まっていました。
しかしカード検索機能を実装するとなると、スキル文章なんかでも検索する必要が出てくるため、この必要最小限の情報を拡張してフルデータをサイファシスト内に搭載する必要が出てきました。
そのため、まずは全カードのフルデータをマスターデータとして定義する作業からはじめました。これは手作業です。
フルデータを用意したらデータベースに反映し、既存のサービスに影響が出ないよう気をつけつつ少し既存の機能の処理も修正したりしています。

支援スキルとか、途中から微妙に文言変わってるのは知ってるんですが、同名スキルは面倒でコピペで対応したりしたんで、実際のカード上の文章とサイファシスト上の文章で表記の微妙な食い違いが発生してるかもしれません…！気づいたら直します。

カード詳細表示ダイアログの実装と再利用

カード検索機能で使用するカードのフルデータが用意できたので、次は詳細情報を表示するダイアログ機能の実装に取り掛かりました。

こういうやつです

先にこちらを作業した理由としては、先んじて作業して既存のデッキ検索や分析機能でカード名をクリックした際にこのダイアログを表示するなどの機能拡張が見込めたからです。
デッキ詳細画面では、それまではカード画像をクリックすると画像を拡大するような処理になっていましたが、視認性があまり良くないかなということで、こちらの表示に差し替えることにしました。
またカード分析画面でもそれまではカード名をクリックするとカード画像が表示されるようになっていましたが、同様の理由でこちらのダイアログを表示するようにしてます。
こうしてカード検索機能実装をきっかけにして既存機能の改良を図ったのでした。

検索条件の細分化、および強化

さて、ここまでしてようやく本懐のカード検索機能の実装に取り掛かるわけですが、検索機能の実装自体はここまで土台を整えれば正直楽勝でした。
ですので公式サイト上でカード検索機能を利用していたときにあったら良いなと思っていた検索条件の実現と、これは何のためにあるんだって言う条件の削除を行うことにしました。
具体的には下記のような条件が公式サイトとは異なる点です。

  • 性別、シンボル、武器、タイプ、射程、レアリティなどがOR検索できる

  • フリーワード検索の対象の「称号」がどうしても存在意義がわからなかったので削除

あとは検索結果ダイアログの表示にも被るところですが、せっかくデッキ検索などの機能も搭載しているサイファシスト上でのカード検索機能ということで、検索した結果そのカードがどのデッキに採用されているのかボタンクリックで飛べるようにもしています。

今にして思うと、収録弾検索は表示面積大きすぎて邪魔感あるのでチェックボックスじゃなくても良かったかも…？

これらの要件を意識して実装を完了し、2022年1月末にこちらの機能追加の告知を以て対応完了となりました。

サイファシストの今後

2022年5月現在でも全盛期からさほど落ちることなくアクセス数も維持できていて、日々少しずつではありますがデッキの投稿も続いている状況ですので、ファイアーエムブレムサイファというコンテンツの強さを感じています。
他のTCGも数多く触れてきた友人が口を揃えて言うのは「こんなゲーム見たこと無い」っていう話、ホントそうだと思います。

さて、今後のサイファシスト運営の計画ですが、特にもう大きなアップデートは現状予定してないです。
というのも、デッキが検索できて、流行り廃りを簡単に俯瞰できて、デッキも作れて、カードも検索できて、個人的にはこれだけできればもう十分だろうというところまで作れたという自負があるからです。
一人回しツールとか、サイファシスト上での対戦とか、できたら面白そうとは思いますがそこまで行くともう色々権利とかダルそうなのでやりません！明言します。
もちろん細かな不具合の修正だったり、ちょっとした機能の改修くらいは行うと思いますが、何週間もかけて1つの機能を実装するというような大規模なことはもうやらないつもりです。
ただこんな機能があったら良いなと言うようなアイデアは募集してますので、実装工数がそこまで大きくなく、実装することで明確に利が生まれると感じたものに関しては前向きに取り組もうと思います。

サイファはアナログなゲームですので、ユーザーの手元にカードがある限り永遠に遊ぶことができるのは現状サービス中のFEHと比べて明確な利点だと思うので、これからもサイファを遊ぶ方々の助けになるような場でありつづけられればいいなとは思います。

ただ、サイファシストはあくまで個人プロジェクトで、維持費もかかってます。
ここ数年はまだそのつもりはありませんが、いずれ人も減り、維持費かけてまで運営するのもったいないな～って感じ始めたらゆくゆくは閉鎖するつもりです。
他にも、借りているサーバーの方になにかトラブルや不祥事があって閉鎖せざるをえない状況になった場合も同様です。
そういうリスクが有る上でのサービスであることは、できればご認識頂けますと幸いです。
もちろんその際にはやむを得ない事情を除き、余裕を持って告知対応もさせていただきます。

まぁ私のエンジニアとしてのスキルを活かす趣味の場としてサーバーを借りてるっていう見方もできるので、ビジネスライクに儲からないから閉鎖とかは無いのでそれは安心してください、広告とかで儲けてもないですし。

最後に、せっかくなのでnoteの記事を投げ銭形式にしてみたいと思います。投げ銭、ちょっとやってみたかったんですよね。
私の活動のご支援、サイファシスト開発お疲れ様、これでポケカでも買ってくれ、名目は何でも良いです。
もうあまり手に入らなくなったサイファのパックを剥く感覚で、もしよろしければお願い致します。

気づいたら10000文字以上も書き連ねる長文になってしまいました。
ここまで読んでくれる人いるんですかね…という疑問もありつつ、ここまで読んでいただきありがとうございました。

ここから先は

0字

¥ 300

期間限定 PayPay支払いすると抽選でお得に！

この記事が気に入ったらサポートをしてみませんか？