Knowledge

ぶるーすかいおみくじ:振り返り

  • 投稿日:
    2025/01/06
  • 更新日:
    2025/01/06
  • 読了時間:
    10分程度
ぶるーすかいおみくじ:振り返りのサムネイル

はじめに

2024年の大晦日に時間ができたので作ったコンテンツ「ぶるーすかいおみくじ」について、制作の経緯や技術的な話、結果分析などを取りまとめていきたいと思います。

ちょっと時間できたのでなんか作ろうかな

— 澤田芳弘(SWD) (@heion.net) 2024-12-31T04:06:33.338Z

ぶるーすかいおみくじとは

ぶるーすかいおみくじとは、Blueskyのアカウントでおみくじが引けるコンテンツです。
ハンドル名を入力して「おみくじを引く」を押すとハンドル(アカウント)毎にくじの結果が表示されシェアできる、ただそれだけです。

元旦に間に合わなかったけどBlueskyのアカウントでおみくじが引けるサイトを用意しましたoracle.heion.net1日で作ったのでいろいろと粗いですが、よかったらくじを引いてみてください。

— 澤田芳弘(SWD) (@heion.net) 2025-01-02T07:17:20.488Z

なお、くじの結果は大吉・吉・末吉の3パターンしか表示されず、凶は排出されません。

年始からこんなコンテンツで嫌な気持ちにならないようにくじは大吉・吉・末吉の3パターンで凶は出ません。結果はランダムではなくユーザのdidから毎年結果が変わるようになっています。以下は私の結果です。

— 澤田芳弘(SWD) (@heion.net) 2025-01-02T07:17:20.489Z

おみくじの結果は以下のように、シェアすると自身のアイコンとともに表示されるようになっています。

ぶるーすかいおみくじの結果は「吉」でした。 oracle.heion.net?handle=heion…

— 澤田芳弘(SWD) (@heion.net) 2025-01-02T07:17:20.490Z

反響・分析

で、まず実際にどれくらいの方に見ていただいて利用されたのか、
結果を確認していきたいと思います。(2025/1/6時点)

以下は、1/3時点での恐らくピーク時のGA4ベースでの同時アクセス数になります。

GA4のリアルタイムユーザ数

30分間で約550人が同時にアクセスしているようで、1ページしかないコンテンツのわりにそれなりのアクセス数になっていてビビり散らかしました。

次にデバイスカテゴリ別でユーザ数を見てみると、ピークの1日(1/3)で1.7万ユーザにアクセスいただいており、SNSの特性上ほとんどがスマホ経由だったことがわかります。

GA4でのアクティブユーザ数デバイスカテゴリ別集計

続いてサブミットされたイベント数(≒ハンドル名を入力してくじを引いた数)も出してみます。
キーイベントの設定が遅くなったせいで正確な数値が出せなかったのでサブミット時としているのでこれも少々差異あるかと思います。

サブミットイベントのイベント数とユーザー数

イベント数的には2万ですがそのイベントを発生させたユーザー数は1.5万なので、ひとりで複数回イベントを発生させている方がいる(実際の入力value値を確認すると、入力間違いなどで何回かくじを引いている方が割と多い印象)ようですので、1人1回で見るなら1.5万回のくじを引かれた、としたほうがより近いのかなと思います。

Blueskyアプリ内からURL(oracle.heion.net)で検索した結果を撮影したもの

制作時の想定では精々100人くらいに使ってもらえれば十分かなと思っていたのですが、予想よりかなり多くの方にくじを引いていただけたようで作てよかったな、と。

ご利用ありがとうございます・・・!

開発背景と技術的な話

経緯と開発期間など

以前にリリースしたBlueskyTimeline以降もBlueskyのAPIで何かしたいな、レベルで考えてはいたのですがリアル業務が忙しく具体的に動けてなかったところに、大晦日に少し時間ができたので何か作ろうかなと思ったのがきっかけで着手し始めたのですが、結局いろいろな誘惑に負け続け、実作業は実質元日の1日間での作業でした。

内訳としては、

  • 開発構想・おおよその仕様策定 2時間
  • デザイン・素材作成 6時間
  • コーディング 3.5時間
  • テスト 0.5時間

といったところでしょうか。
着手より前から構想していた時間が含まれるので、厳密には1.5人日といった感じですね。

faviconやOGP画像など、何気に用意しないといけない素材が多くてめんd・・・・大変でした。

仕様面のはなし

年始のコンテンツなのでおみくじとかが無難かな、というところで割と安直に決めたのですが、Blueskyのアカウントごとに固有の結果(といっても3パターンなのですが・・・)を出すということは元々うっすら考えていました。

・くじの確率

Web上のおみくじコンテンツでは引くたびにランダムに結果が変わるものも多いですが、それでは自分の為に用意された感(?)がないですしBlueskyのAPIを使う意味も薄いので、自分だけの結果が出るもの、ということでユニークなidとして表面上出力されず、ユーザー自身で書き換えができないdidを利用し(ハンドル名は割と書き換えが可能なので)、そのdidを数値化しつつ、くじを引いた年と組み合わせて大吉・吉・末吉のいずれかに割り振られるようなロジックを組みました。

なお、夢がない話なのでリリース時はあえて言及しませんでしたが(うすうす気づかれている方もいらっしゃいましたが)「やっぱ大吉出たらうれしいでしょ?」ということで出し渋る意味もないので、大吉が出る確率が最も多くなるように設定しており、割合としてはおおよそですが

大吉(60%) / 吉(20%) / 末吉(20%)

くらいになるようにしています。
※実はテスト時に裏側でいくつかのアカウントで確認していたところ、手元で試したアカウントではたまたまだと思うのですが、あまりにも大吉が出なさ過ぎてちょっと確率をあげたりしました。

・シェア時のOGP画像

シェアした際に自身のアイコンとくじの結果が表示されるようにすることで、自分だけの結果感も演出でき、それを見たユーザが自分も試してみよう、という動機付けにもなると思い、画像生成するプログラムも実装しました。

BlueskyのAPIからリクエストしたアバター画像の実態は四角いので出力時に丸くマスクしてくり抜いたうえで、くじの結果画像と重ねて表示する、といった具合のものになります。

一度生成したものはCDN側でキャッシュしてくれるので比較的高速なのですが、初回シェア時はどうしてもオリジンサーバのスペックに左右されてサムネイルの生成にちょっと時間がかかるのが如何ともしがたいポイントでした。

シェアいただいた方の中には、サムネイルの生成を待てずにテキストだけをシェアいただいている方もちらほら確認しています。

シェアといえば、X(旧Twitter)へのシェアがあることについて言及いただいているのを見かけましたが、作者は特に何も考えていません。
しいて言うなら、Blueskyの閉じた世界の中だけでぐるぐるシェアするより、その他の世界へもシェアできたほうがより利用いただけるかな、くらいで特別な思想があるわけではないです。
あと、XへのシェアのロジックがBlueskyと近いのでついでに実装した感はあります。

・紙っぽい表現

今回おおよそのデザイン素材はillustratorで作成してSVG書き出ししたものを利用しています

illustratorでのデザインキャプチャ

ただ、ベクターデータを配置していくだけだと紙っぽい質感などを出しづらいので、SVGで書き出した後にフィルターをかけることでSVGでありながら拡大縮小に耐えられる紙っぽい質感を実現させています。
がちがちにデザインされたものをカンプ合わせしながら作るみたいな案件だとなかなか実際に使う機会がない小技かもしれませんが、時短に役立ってくれました。

filter適用前
filter適用後

以下参考にさせていただいた記事:

振り返りまとめ

今回突貫で制作したにもかかわらず多くの方に利用いただけたので、改めて用意してよかったと感じました。

作っているときには気づかなかったこととして「おみくじの結果はランダムではなくアカウントごとにその年毎に決定されます」と表記はしていたのですが、それでもくじの結果がランダムで変わると勘違いされている方や、ハンドル名がわからない、間違っている方が割といらっしゃるようでしたので、うまく伝え切れていなかったな・・・というのと、なにがしかの入力補完を用意すべきだったかもしれないとは感じました。
※Blueskyのハンドル名は独自ドメインをハンドルにできるので、必ずしも「****.bsky.social」というフォーマットにならないのが悩ましいところですが。

まだまだユーザーの少ないBlueskyでAPIを使っておみくじを引く、みたいなコンテンツはお仕事の企画だとリーチ数が少なくて通らない可能性が高く、個人での開発だからこそできることなのかなと思います。
とはいえ、仮に同じものをX(旧Twitter)で用意しても先駆者が多数存在している可能性が高く、そこまで認知されることもなかったのではないか、とも思っており個人的にはBlueskyはまだこれからのサービスですのでそれが故にブルーオーシャンだと思っています。(ブルースカイだけに)

また、BlueskyのAPIは他の主要なSNSと異なり無料で簡単に使えて縛りもかなり緩いため、開発者にとっても嬉しいサービスかと思いますので、今からでもBlueskyのAPIを使ってなにがしかのサービスを用意すれば寡占的な状況にもっていくことはそれほど難しくないのではないかと思いますので、開発者にはぜひ色々なサービスを作っていただきたいですね。