先日、久しぶりに「脳内メーカー」を試したときに
「同じ名前を入れると結果が同じだけど、どういう仕組みなんだろう？」
「どうやって画像を作っているんだろう？」
と内部的なところに興味がでて、自分も似たようなWebアプリを作ってみたいなぁと考えるようになりました。Javaを使って自分だったらどう実装するか考えたり調べたりしながら、ここ1ヶ月コツコツとプログラミングしてました。
まだ細かいエラー処理などの実装が必要ですが、とりあえず乃木坂46 21枚目の選抜発表に合わせて7/1にリリースしました。
www.rpgparty.sakamichi46.com
トップページはこんな感じで、ゲーム感を出してみました。
メッセージがピコピコ流れていますが、これは iTyped.js というJavaScriptライブラリを使って、タイプライター風に表示しています。
フォントは PixelMplus（ピクセル・エムプラス）を使いました。漢字まで含まれていて素晴らしすぎる…。ライセンスの自由度も素晴らしすぎる…。
itouhiro.hatenablog.com
アプリの内容は脳内メーカーと同じです。名前を入れたらランダムで乃木坂メンバーをピックアップしてRPGパーティを組むというもの。完全なランダムではなく、名前の文字が同じであれば同じパーティとなります。
「キクタロー」の結果はこちらです。
豪華すぎる結果になってますが、開発者が有利になるような仕組みは入っておりませんのであしからず(^^;
ちなみにドット絵も頑張って作りました(^^;dotpictというアプリが素晴らしくて、スマホで簡単にドット絵を作れるので、外にいるときでも空き時間とかに作っていました。
dotpicko.net
以下のサイトでベースを作って、あとは乃木坂の制服や衣装にあわせた感じです。
ちびキャラを描いてみよう編【現役ゲームクリエイターによるドット基礎講座 第2回】 - Creatures Garage
「Peing - 質問箱 -」なども大流行りですが、あれはツイートしたときに表示されるカード画像が目立つことが人気の一端になっていると思っています。なので、自分もああいう仕組みも入れたいなと思いました。画像はJavaのGraphicを使って生成しているのですが、最初はそれをbase64にしてhtml表示していました。ただ、これだとTwitter Cardで表示されないという…。どうやら静的なURLが必要なようです。(この辺？ 詳しい方いたら教えて欲しい…）
AWSのS3とか使って画像を保存させるしかないのか…と思っていたのですが、調べてみたら Cloudinary という画像・ビデオのアップロード＆加工が簡単にできるサービスがありました。試したら便利だったので今はこれを利用しています。
cloudinary.com
Freeプランでもかなり使えます。
これで以下のような形でTwitter Cardがしっかり表示できるようになりました。この辺は実装してみないとわからないものですね。
Webのフロントhtmlは Netlify に置いて、パーティや画像の生成をするサーバサイドは Heroku を使っています。Webフレームワークは Spring Boot + Thymeleaf です。
乃木坂ファンをターゲットに作っていますが、乃木坂46をあまり知らない方も是非お試し欲しいなと思います。そして出て来たメンバーを是非知ってもらえると嬉しいです><;需要があれば、欅坂46、けやき坂46（ひらがなけやき）にも対応します！
