打線メーカー【〇〇で打線組んだ】

打線メーカー

Web1Weekのお題は「２」！
2といえば「2ちゃんねる」！
2ちゃんねるといえば「〇〇で打線組んだ」

ということで自分だけの「〇〇で打線組んだ」を作れる打線メーカーを作りました。

「〇〇で打線組んだ」とは

「〇〇で打線組んだとは」とは、何らかの対象を野球の打線に当て嵌めて考えた、というもの。

例えば、「岩タイプのポケモンで打線組んだ」だと

1　一　ゴローニャ
2　遊　レジロック
3　二　ドサイドン
4　中　バンギラス
5　右　テラキオン
6　三　ユレイドル
7　左　プテラ
8　捕　ラムパルド
9　投　トリデプス

のようになる。(出典:ニコニコ大百科)

1列目の数字が野球の打順で、2列目の漢字が守備位置を表しているらしい。

実際に打線を作る際は、これらのイメージが大事だそうで、
ニコニコ大百科によると

打順（印象）
1　わかりやすい・即効性
2　手堅さ
3　バランス感
4　問答無用の破壊力　ネタ系ならここでいちど笑わせておきたい
5　4に続くインパクト
6　傑作ではないが光るものがある
7　地味だが抑えておきたいもの
8　打線に組み入れたいと思ったなかで最後まで残ったやつ
9　いちばん華があるもの（ここに投手を入れない場合はその限りではない）

守備（内容）
投手　ほぼ9番打者枠のため、打順ネタの〆としていちばん優れているもの
捕手　多くの人間の共感を得られるであろう安定感のあるもの
一塁手　知名度や認知度が高く、良かれ悪しかれ話題になるとっかかりがあるもの
二塁手　スルメ
遊撃手　技巧的に優れているもの
三塁手　攻めの姿勢が強いもの
左翼手　マイナー志向
中堅手　オールマイティー志向
右翼手　荒削りではあるが力強いもの

だそうです。正直二塁手のスルメがよくわかりませんし、覚えるのも大変なので、僕は4番がエースというイメージだけで作っていこうと思います。

使い方

こんな感じのフォームに入力すると

以下のような画像が生成されます。

あとはTwitterにリンクを投稿すると、OGP画像として表示されるようになってます。

• ポケモンで打線組んだ
• 個人開発者で打線組んだ
• フォロワーで打線組んだ

など色々お使いください。

OGP画像として表示した理由は、本当はリンク先に作った人のTwitterアカウントとかを載せたページを作りたかったからです。

今回、そこまで行けなかったので、今後の課題です。

使用技術

Nuxt + firebase + vercel という構成です。
OGP画像をTwitterに表示するにあたって、NuxtのSSRを使用しました。

vercelはvercel.jsonにNuxtの公式Vercel へデプロイするには？の内容をコピペするだけでいいのですごい楽です。SSRの設定も勝手にやってくれます。

firebaseはfirestoreとcloud storageを使用しました。
生成した画像をcloud storageに保存して、そのURLをfirestoreに保存する流れになってます。

あとCSSフレームワークは、Vuetifyというマテリアルデザインのフレームワークを使いました。今回のアプリはあんまりマテリアルデザインっぽくありませんが、上手く使うとGoogleのアプリみたいな見た目が作れるはず。
正直マテリアルデザイン 関係なしに、Vuetifyはコンポーネントの数が多く、ドキュメントも読みやすいのでおすすめです。

デザイン

一番時間がかかった部分です。Inkscapeを使ってイラストを書いてるんですが、日本語入力が上手くできなくてすごい苦労しました。結局、日本語の部分の文字はパワポで作って、それを画像としてInkscapeで使いました。

自分はまだ上手くInkscape使いこなせていませんが、Twitterを見るとすごい作品を作っている方もいるので、もっと頑張らないとなって思います。

色に関しては、[サルワカ ]配色パターン見本40選を参考しました。

おわり

今回はじめてweb1weekに参加しました。参加する前はつよつよ開発者しか参加できないイベントだと思っていましたが、いざ参加してみると文化祭のような雰囲気でとても楽しかったです。