見出し画像

「今の酒はこれ！ジェネレーター」というものを作りました

ぷろろー

1. きっかけ

最近私は、週末にVRChatの 酔いどれ集会 でお酒を飲むのが習慣になっています。そのなかで、お酒についてお話することが多いので、いま飲んでいるお酒を載せた看板をアバターに仕込んでいくようにしはじめました。その姿を写真を撮って毎週ツイートもしています（自分のKawaiiアバターをツイートするための理由にしている節もあります）。

とある酔いどれ集会の回で、一緒に飲んでいるフレンドが「それいいやん！俺も欲しいわ！」って言ってくれました。そこで、簡単にアバターに仕込めるような仕掛けができると面白いかなと思い、あまり何も考えずVSCodeを起動しました。

2. 作るものの選定

さて、何を作るかですが、なんとなくの創作欲みたいなものがあり、自分にできそうな範囲でサクッと作りたい気持ちがありました。
普段、私はテクスチャの編集などをGIMPで行っているのですが、毎回ソフトを立ち上げたりするのを大変に感じていました。そこで、看板のテクスチャだけでも生成できると良いかなと思いました。本当だったら、unitypackage形式だったりで出力できるのが良いのかもなんですけどね…。

また、技術的にはWebアプリでできると良いかなと思い、今回はVueを採用しました。普段はシステムエンジニア（ほんまか？）という肩書きで仕事をしているのですが、ほとんどコーディングをする機会がないので勉強を兼ねてできると良いなと思いました。
あと、いわゆる「○○ジェネレーター」みたいなものの仕組みが知りたかったのもあります。

3. できたもの

こちらになります！（スマホ対応ができていないのでスマホからは見づらいです）

・お酒の画像が入った写真をアップロードして、特定の範囲だけをトリミングして看板に合成できます。
・また、お酒の名前や価格、説明などの情報を入力して看板に合成できます。その際、フォントや色を調整できます。
・VRChat用立て看板 - すずめはうす - BOOTH に合わせたテクスチャを出力できます。

これを使って作ったテクスチャを使ってくれた写真は、Twitterハッシュタグの ＃今の酒はこれ で共有してくれるとうれしいです！みんなの好きなお酒を知りたいので！

4. 技術的な話

4.1 文字と画像を合成して描画する手法について

今回は、HTML5のCanvasを作成してその上に画像と文字を描画することで合成しました。なにか便利そうなライブラリとかあるかなと思って少し調べたところ、実際の画像として出力が容易そうだったのでCanvasを採用しました。
アップロードした画像のトリミングには、cropperjs のVue向けWrapperである vue-cropperjs を利用しています。細かい設定もできてとても便利なライブラリです。

4.2 公開環境へのデプロイについて

ホスティングについては色々あることは知っていて、なんとなくHerokuを想定してはいましたが、今回はFirebaseを利用しました。
firebase-tools を利用したところサクッとデプロイできたのでありがたかったです。GitHub Actionsとの連携（mainリポジトリにコミットされた際のCD）もインストール時に対話式で完了して「おお～」ってなりました。

4.3 VueとかWeb周りの細かいやつ

他には以下のような技術を使わせていただきました。

・Vuetify を採用すると快適になりました。カラーピッカーもVuetifyにあったんやね。
・フォントは主にGoogle Fontsを利用しています。もともと @import での利用を想定していましたが、Canvasへそのフォントを利用して描画する機能も含めたいことから先に読み込みをしたいということもあり、今回は webfontloader を利用しました。

4.4 参考にした記事

実装に際しては、以下以外にも色んな記事を参考にさせていただきました。

・恋愛ゲーム風ジェネレーター
・Cropper.jsを使ってみる | cly7796.net
・VueアプリをFirebaseに爆速デプロイ! - Qiita
・Embedded Tweet parameter reference | Twitter Developer
・[OGP] 重複したタグはTwitter Cardsで併記しなくても良い

5. 感想

完走した感想ですが…、仕事柄、言語としてはJavaを扱うことが多くて、WebアプリケーションもStrutsやSpringなんかで実装したりすることはありました。
フロントエンドも細かい操作をほとんどすることはなくて、JavaScriptを触るのも難しそうだなぁ…、と思っていて逃げていた部分だったので、今回操作できて面白ｋ…、大変でした…。

6. 使ってもらえるとうれしいです！！！

今回作った 今の酒はこれ！ジェネレーター は、半分自分用みたいなところはあるのですが、せっかくなので皆さんにも使ってもらえるとうれしいです。

＃今の酒はこれ でみんなの好きなお酒を共有してください！

画像2



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