🐙

[Splate]スプラトゥーン風のネームプレートメーカーを作りました

2022/11/29に公開

Firebase

こんにちは。突然ですが皆さんスプラトゥーン3はやっているでしょうか？私はハマって結構やっています。その中に「ネームプレート」という名前や二つ名を表示できるものがあります。そのスプラトゥーン風のネームプレートを作ることができるWebアプリを作成したので、今回は概要や使用した技術などについてまとめていこうと思います。

概要

https://splate.cogon-k.com
このURLからアクセスすることができます。

このような感じで自分だけのスプラトゥーン風のネームプレートを作成することができます。背景画像、名前、二つ名、番号、バッジを自由に変更することができます。
また、このように共有用URLにはOGPとしてネームプレートが表示されます。

特徴

ゲーム内では使えないものも使うことができる

前述したように、背景画像、二つ名、番号を指定することができます。これらは、ゲーム内では決まったものの中から選ぶ、もしくは変えることができません。しかしSplateでは自由に好きなものを指定することができます。そのため、例えば自作の背景画像を使ったり、ゲーム内には存在しない二つ名を使うこともできます。

きれいに切り抜ける

ゲーム内のネームプレートをダウンロードすることは(2022/11現在)できません。そのため例えばTwitterのヘッダーなどに使用する場合はスクリーンショットを切り抜くしかありません。しかしSplateでは作った画像をダウンロードすることができるため、きれいに切り抜かれた画像を使うことができます。

気軽に共有できる

作ったネームプレートを共有したい場合、Twitterのツイートボタンからのツイートでは画像を添付することができません。そこでネームプレートを作成したときに固有のURLを発行し、動的OGPを用いて表示することによって画像をダウンロードし、ツイートに張り付けるという手間をなくしました。これによってより気軽に作ったネームプレートを共有できるようになったのではないかと思います。

使用した技術

言語

JavaScript
HTML
CSS

フレームワーク

Nuxt.js
Vuetify

サーバー

OCI ARM A1インスタンス

クラウド

Firebase Storage

その他

Docker

フロントエンドフレームワークにはNuxt.js、CSSフレームワークにはVuetifyを採用しました。諸事情で開発期間がとても短かったためすでに使ったことのあるフレームワークを選びました。
またページはOCIのA1インスタンス上でDockerを用いて公開していますが、画像をアップロードするためにFirebase Storageを採用しました。前述したように開発期間がとても短く、別途バックエンドを開発する時間がなかったためFirebaseを使いました。

処理の流れ

文字列などの変化を監視し、リアルタイムでHTMLのCanvasを更新します。このときCanvasはプレビューを表示するCanvas、最終的にダウンロードできる画像となるCanvas、OGP画像に用いるCanvasの3つがあります。3つ用意した理由は、プレビューを表示するCanvasのサイズはデバイスによって変わってしまうため、どのデバイスであっても固定のサイズとなるCanvasを用意する必要がありました。またネームプレートのアスペクト比は7:2なのに対し、Twitter OGPは1.91:1なので、トリミングを防ぐために上下に空白を追加するCanvasも用意しています。
そして完成と共にOGP画像だけでなくダウンロードできる画像もFirebase Storageに保存します。これにより後からでもURLさえあれば何度でも画像を保存できるようになっています。

Firebaseについて

実は今まで公開してきたサービスは全てVPS上で公開しており、クラウドサービスを使ったのは今回が初めてでした。しかしFirebase Storageはかなり簡単にファイルをアップロードすることができ、権限設定や認証なども充実していてとても使いやすかったです。もっと複雑なシステムを作る場合はバックエンドを自作する必要がありそうですが、今回のようにファイルをアップロードするだけのように簡単な機能であれば十分使えそうなので、今後は積極的に活用していきたいです。

フォントについて

スプラトゥーンにおいてフォントは非常に重要です。スプラトゥーンでは「ロウディ EB」というフォントのかななどをカスタマイズした特徴的なフォントが使われており、フォントをこれにするだけで「スプラトゥーン感」が一気に高まります。しかしながらこのフォントはライセンスフォントであるため使用料がかかり、さらにかなはカスタマイズされているため完全な再現はできません。
そこで、名前の部分には「えもわーる角」、二つ名と番号の部分には「バナナスリップ」というフリーフォントを使用させていただきました。どちらのフォントも似ているフォントであるため完全な再現はできませんが、「スプラトゥーン風のネームプレート」にはなっていると思います。

バッジについて

スプラトゥーンにおけるバッジは様々な種類があり、最大3つ付けることができます。しかしこれも実際にスプラトゥーン内にあるものをそのまま使うことはできません。そこである程度の種類があり、馴染み深いものということで絵文字を使うことにしました。ただちょっと雰囲気とあっていないような気もするので、何か他のものに変えるか好きな画像を使用できるようにするかもしれません。

苦労したところ

一番苦労したのは何といってもデザインです。スプラトゥーン関連のWebサイトということで「スプラトゥーンっぽさ」があるデザインにしたかったのですが、スプラトゥーンは独特なデザインで非常に難しかったです。意識したのは全体はモノクロな配色にし、ボタンなど一部のパーツを鮮やかな色にするということと、全てのパーツに丸みを持たせるということです。またフォントも二つ名、番号に用いたフォントである「バナナスリップ」を指定しています。デザインについてはあまり得意でないため完璧ではないですが、「なんとなくスプラトゥーンっぽい？」と思ってもらえるようなデザインになったのではないかと思います。
またCanvasの仕様で詰まりました。私は普段Androidを使っているのですが、PC、Androidでは問題なく動いていたのに、あるところでデモとして試用してもらった際に一部のiPhoneで動かない場合がありました。ブラウザやバージョンによって挙動が変わることは知識として知っていたのですが、実際に機種によって動かないという状況に遭遇したのが初めてだったため、ちょっと焦りました。その後ちゃんと調査して修正したので、今は問題なく動いていると思いますが、もし何か問題があった場合は教えていただけると幸いです。

今後の課題

現在、背景画像は画像の中心を7:2になるように切り抜いています。しかし画像の一部を使いたいという場合や、画像の上の方を使いたい場合などもあると思います。そのためには画像を位置調整できる機能を付ける必要があるのですが、そのような機能はまだ実装できていないので、今後実装していければと思っています。
また自分で背景画像を用意するというのは少し面倒なので、最初からいくつか素材を選べたらよいのですが、私自身絵が全く書けないので提供してくださる方を募集しています。

概要

特徴