東京大学きらら同好会

東京大学きらら同好会の公式ブログ

ぼっちちゃんよくばりセットの利用を楽にするWebアプリ

活動紹介

書いた人：kn1cht

『ぼっち・ざ・ろっく！（ぼざろ）』のアニメは、放送が終了してからも圧倒的な人気を誇っていますね。

どのくらい人気かというと、一発ネタの立て看板を作ったら万バズしてしまうほどです。

utkiraracircle.hatenablog.com

さて、ぼざろの原作コミックを出版している芳文社のアカウント「まんがタイムきらら編集部」では、放送中に多数のコマ画像が「ぼっちちゃんよくばりセット」と称して配布されていました。

ぼざろのコマ画像は、アニメ化前からSNS等でネタ画像として目にする機会が多かった（「いいいいイキってすみません…」「憂鬱な月曜日が始まった」など）ので、その文化を拡大する形で作品の盛り上がりをより高める取り組みだったと思います。

配布画像は、放送中に投稿されたものだけでも69枚にのぼります。いざ投稿したいときにいちいち探すのもけっこう大変です。

そこで、bozaro.vercel.app（btr）というWebアプリを作って公開しました。

  • 画面上の"btr"という文字を押すたびにランダムに画像が変わる
  • 左のメニューから目的の画像を探せる
  • tweetボタンから画像をツイートできる

といった機能があります。

技術的な詳細は、ぼざろオンリーに出す合同誌のネタにしたいので省略するとして、本記事ではこのアプリの特徴などを軽くご紹介します。

元ネタ

NEW GAME!の画像を閲覧・ツイートできるzoi.herokuapp.com（zoi）が元ネタです。2014年頃から存在する老舗の（？）Webアプリですね。

機能、ページデザインについてはzoiのものを踏襲しています。GitHubリポジトリもあるのですごく参考になりました。

github.com

zoiはAngularJS + Expressで作られており、今となっては時代を感じさせられる構成です。また、公開先のHerokuも今年2022年秋に無償プランが終了し、個人のネタアプリの公開先としては利便性が低下してしまいました（逆にzoiが生きているということは、作者の方が課金してくださっているということですかね……？）。

そこで、btrはNext.jsで制作し、Vercelにデプロイすることで無料運用を実現しています。本当はbtr.vercel.appにしたかったのですが、3文字ドメインは押さえられてしまっているのか使えませんでした。

画像の表示とツイート

これもzoiの真似をした部分です。btrでは、表示、ツイートともきらら編集部アカウントによる元のツイートの画像を使用します。

zoiで使われている画像は公式から許諾されたものではないので正直グレーなのですが、btrのものは公式が「お使いください」「#ぼっちちゃんよくばりセット」などと添えてツイートしたもののみを掲載しているので、安心してご利用いただけます。

ツイート機能では、画像をアップロードする代わりに画像ツイートのURL（例：pic.twitter.com/YMYv8PYbX6）を投稿します。ツイートボタンや画像投稿ボットなどで古くから用いられている方法です。文字列だけを投稿すれば画像付きツイートになるので、Webアプリ側で複雑なことをしなくて済み最高ですね。

www.slideshare.net

この仕様を応用すれば、pic.twitter.comで始まるURLをコピペすることで、リプライなどでもぼっちちゃんよくばりセットを貼り付けられます。

画像URLの収集

制作で一番大変だったのが、公式配布画像のURLを取得して設定ファイルに書き込む作業です。Twitter APIの改悪などで完全な自動化は難しく、結局69枚の大部分を温かみのある手作業で設定しました。

作業にあたっては、湯の沢氏によるnote記事「きらら編集部公式配布画像メモ」にかなり助けられました。アニメの序盤ではきらら編集部が#ぼっちちゃんよくばりセット タグを使っていない、使用OKの文言がないといった例外も多いため、この記事のおかげでリストアップが大幅に省力化されました。すばらしい作業をありがとうございます！

note.com

note.com

ご意見・ご要望

何かありましたらリポジトリへのIssue, Pull Requestをお待ちしております！

github.com

さいごに

つかってくれー（承認欲求モンスター）