サイファのデッキ作成ツールを作ってアップデートしてみました

ごあいさつ

本ブログの数少ない読者の皆さん、ご無沙汰しております。明けましておめでとうございます。
サイファ22弾が出て3カ月余、本来であれば23弾が出て環境が動いているような時期ですが、皆さんいかがお過ごしでしょうか。
最近はコロナ禍による外出自粛要請、およびテレワークできるタイプの業種(IT系です)のため、ほとんど自宅で過ごしながら夜はdiscordに篭もる生活を送っています。
サイファの大会は行けていないので年明けからもらえるエマのプロモはまだもらえていないのですが、サイファ自体はそれなりにオンラインで遊んでいます。
Amoung Usおもしろいよね!!!!(唐突) もともと人狼とかやってたんですげーいいなってなってます。

本題

さて、話の本題ですが、昨年11月末にガチャログというサービスが終了致しました。
本ブログでもデッキ紹介などで大変お世話になり、ガチャログに記載したデッキをそのまま掲載して記事にするなどしておりましたが、サービスが終了した今となっては掲載したデッキの全てが閲覧できなくなってしまっています。
終了告知自体は結構前からされていたのに対応を怠った私の責任です。マジでこれどうしよう。。。

まぁそんな私事情はいいんですけど、とにかくデッキを手軽にWeb上で作成できる環境が失われてしまったのは、サイファプレイヤーにとって結構大きな問題だったのではないでしょうか。
代替サービスとして他のレシピ作成ツールを利用されていた方もいらっしゃったと聞いていますが、まぁ色々使いづらい点があったというようにも聞いていました。

なんでまぁ、私は『なかったら作れ』の精神の持ち主ですので、作っちゃいました。

以前より運営させていただいている下記サイトに、デッキ作成機能を追加した大型アップデートを本日実施しております。
ragnellike.com

このアップデートで、もはや役割が巷のデッキを検索するだけにとどまらなくなったので、『サイファ』のプレイを支援、すなわち『アシスト』するツールでありたいという気持ちを込めて、サイト名を『サイファシスト』と改名させていただきました。
ちょっとファシストって言葉が含まれてるのは正直どうなんかなと思わなくはないですが、語呂合わせなので許して()

できること

TwitterIDでのログイン機能

今回追加したデッキ作成機能をフルに活用するためには、TwitterIDでのログインが必要な仕様とさせていただいております。
TwitterIDでのログインは、ページ上部のヘッダーにある「TwitterIDでログイン」のリンクから可能です。
f:id:ragnellike:20210124171627p:plain

スマホからだと、ヘッダー上部の三本線がついているボタンを押すとメニューが出てくるのでそこにある「TwitterIDでログイン」のリンクから可能です。 f:id:ragnellike:20210124171914p:plain

※なお、TwitterAPIを使用したアプリ連携を要求する挙動となっておりますが、許可されている権限にツイートやDMの送信などは含まれておらず、よくあるスパム的な動作を本サイトが行うことは技術的に不可能となっております。

ログインすると、ヘッダーに自分のTwitterIDが表示されリンクになりますので、クリックするとマイページに遷移可能です。
f:id:ragnellike:20210124172450p:plain

マイページでは、保存したデッキの閲覧・編集・削除や、ログアウトが可能です。
f:id:ragnellike:20210124172551p:plain

デッキレシピ作成

ヘッダーの「デッキ作成」のリンクから、下記のようなレイアウトのデッキ作成画面に遷移できます。
f:id:ragnellike:20210124172741p:plain

画面左のカード検索欄にてカード名を入力すると即座に検索結果がリストで返ってきます。
ここの検索はカード名、要するに称号+キャラクター名の文字列が検索対象となっており、検索順は基本的にブースターパック→スターターデッキ→プロモーションカードの順です。
ただ、スターターデッキやプロモーションカードでも、ブースターパックのカードと同等の性能(パラレル)のものはブースターパックと同じ順で表示しています。
f:id:ragnellike:20210124173412p:plain

カードを選択すると枚数を選択させるダイアログが表示されますので、枚数を選択してください。
f:id:ragnellike:20210124173543p:plain

以上の操作を繰り返せばデッキの画像がこんな感じで揃っていくんじゃないですかね~
デッキ画像リスト上に表示されたカード画像にマウスを近づけたりタップしたりすると、「削除」と「コピー」ボタンが表示されますので、これで自在に枚数を増減させることも可能です。
f:id:ragnellike:20210124173712p:plain

デッキ概要の入力も忘れずにお願いします。
デッキ名、主人公名、作者コメントはともに自由記述が可能ですが、それぞれ50文字、30文字、100文字までの制限があります。
デッキを保存すると基本的にはサイト上に公開され、「みんなのデッキ」リンクから閲覧ができるようになっていますが、TwitterIDを出したくないとか、大会前だからデッキは見せたくないなどの事情があると思いますので、その際はそれぞれ「Twitter ID非公開」と「デッキ非公開」にチェックをつけるとそれぞれのフラグに応じて公開されなくなります。
f:id:ragnellike:20210124174456p:plain

更にデッキ編集画面ではカードの順番を入れ替えることが可能です。
現状PCでの操作に限定されてしまいますが、画面下部のデッキソート欄でカード名のリストをドラッグアンドドロップすることで、カードの入れ替えを行うことができます。

こういう並びだったのが f:id:ragnellike:20210124173712p:plain

ん~、ギネヴィアをゼフィールの前に持っていくか~!! f:id:ragnellike:20210124174840p:plain

表示が入れ替わった!!!! f:id:ragnellike:20210124174855p:plain

本当はカード画像をドラッグアンドドロップしたかったんですけどちょっと技術的にむずかしかったです、ごめんなさい…

とりあえずどっかのタイミングでスマホでもソート順を入れ替えられるようにはしたいですね。

ここまで入力が済んだら、いよいよデッキを保存するだけです。
保存すると、デッキ保存完了ダイアログが出ておわりです。

ちなみに、デッキを保存できるようになる条件は、「主人公名が入力されていること」と「枚数が50枚以上であること」です。
その条件を満たさず保存ボタンを押しても弾かれてしまうので、ご注意ください。

こまかい話

ツイート機能

表示しているページのリンクを添えてツイートする機能自体は前からあるのですが、特に推したいのはデッキレシピのツイートによる共有です。
みんなのデッキの閲覧画面でツイートボタンを押すと、デッキ名とデッキ閲覧ページを添えてツイートが可能ですので、デッキレシピの共有が可能です。
ぜひご活用ください。
f:id:ragnellike:20210124175620p:plain

レスポンシブデザインに対応

これも前から対応してるんですけど、PCのような大画面での閲覧をスマホでも同じようにしようとすると無理がありますので、デッキレシピ表示はPCのような大画面では横10枚、スマホのような小画面では横5枚にしてあります。

↓PCだとこういう画面ですが、
f:id:ragnellike:20210124175809p:plain

スマホだとこういう画面になります。
f:id:ragnellike:20210124175840p:plain

この対応は、今回追加したデッキ作成画面、投稿デッキ閲覧画面のほか、もともとあるデッキ検索ツールでのデッキ閲覧画面でも適用しています。

今後の展望

デッキ検索ツール側への連携

デッキ検索ツールもおかげさまで今では7000件以上のデッキレシピが登録され、検索対象としてもなかなかのビッグデータになってきた感じがあるんですが、これ、今まで私がひとりで入力し続けてきたので(自分でもけっこう狂気だと思ってます)、今回こうしてデッキ投稿機能を実装したこともありますし、連動したいなっていうのは今一番やりたいことです。
楽してぇ~~~~

レギュレーションを考慮したカード検索

いわゆる1~4弾のカードを除外したカード検索とか…?正直あんまり恩恵も薄い気がしてるのでロンチでは見送ったんですが、要望が多ければ作りたいと思います。

サイファにおけるガチャログ代替サービスとしての知名度

作った動機がガチャログがなくなったからという正直な理由なので、サイファプレイヤーにとってメジャーな作成ツールになってほしいなという想いはあります。
ただ、あのサービスは作ってて本当に痛感したんですけどすごいサービスでした…。さすがに及ばないにしても足元くらいには到達したいですね。

機能要望について

個人で開発、運用しているものですので、私個人の脳みそなんてたかが知れていますしアイデアには限りがあります。
ご利用の上で、ご不便に感じた点、機能のご要望等ありましたら、コメントにて記載いただけますと、参考にでき、大変ありがたいです。
よろしくお願いします。