これまでに制作した配信アプリ向けツールや情報サイトです。制作の背景や技術的な工夫もあわせて紹介しています。
iOS向け配信テロップ作成ツール（Canvas + Picture-in-Picture）
配信画面に重ねて表示できる演出テロップを、iPhone一台で作成できるツールです。CanvasとPicture-in-Pictureを組み合わせ、Glow・Fireなどのテキストエフェクトや、Stars・Sparks・Stage Lightsといった背景エフェクトを実装しています。当初は1つのscript.jsに機能が集中していましたが、state / premium / storage / telop / mainの5つのESモジュールに分割し、循環参照を避けるためにコールバックパターンと共有のstateオブジェクトを使う設計にリファクタリングしました。速度スライダーには区分線形補間を使い、なめらかに速度を変化させられるようにしています。
サイトを見るMirrativで使える自作・他制作者のツールをまとめたリンク集
これまでに制作したツールに加えて、他の方が制作された便利なツールもまとめて紹介するポータルサイトです。Mirrativのミッション「わかりあう願いをつなごう」にちなんで「願い」「繋ぐ」をコンセプトにしています。掲載しているツールは、非公開APIや通信解析などを使わず、公開情報のみをもとに作られたものであることを確認したうえで掲載しています。
サイトを見るMirrativの新作ライブゲーム「スラモン」の攻略メモを公開する情報サイト
Mirrativで新しく始まったライブゲーム「スラモン」について、自分用に集めていた攻略情報を一般公開するために制作しました。イベントの選択肢とその報酬、アイテムやスキルの効果などを、VSCode風のキーワード検索機能（モバイル対応）ですぐに調べられるようにしています。モンスターデータとスキルデータを別ファイルで管理し、1体のモンスターが複数のスキルを持ち、1つのスキルを複数のモンスターが習得できるという多対多の関係をシンプルなJSファイル構成で表現しました。バトルスキルの一覧は「物理攻撃」「魔法攻撃」「バフ」「デバフ」「状態異常」「回復・カウンター」など種類ごとにグループ化し、アコーディオンで開閉できるようにしています。現在も最も活発に更新しているプロジェクトです。
サイトを見るMirrativのライブゲーム「スラコロ」に出現する「ヤミクマ」の憑依判別ガイド
モンスターに「ヤミクマ」が憑依すると、通常状態と見比べてどこかに違和感のある異変が現れます。このサイトでは、通常状態と異変状態の画像を並べて比較しながら、その異変ポイントを判別できるようにまとめています。モーダルでの左右ナビゲーションやスワイプ操作（Pointer Events API）、三ペインのカルーセル構造によるドラッグ追従などをバニラJSで実装しました。
サイトを見るMirrativのランキングイベント向け、ルーレットギフトの期待値計算ツール
その日に進んだマスの合計を競うランキングイベントに向けて、ギフト数と進むマスの期待値、目標マスに必要なギフト数の目安を計算できるツールです。有償コインは期待値の高いギフトから優先的に使い切る設計にし、期間限定の「SUPER FEVER」開催時は計算式を切り替えられるようにするなど、実際のイベント運用に合わせて機能を拡張してきました。
サイトを見るMirrativのライブゲーム「スラコロ」専用ギフトの期待値計算ツール
「普通の宝箱」「豪華な宝箱」などスラコロ専用ギフトを贈ったときの、GP・オッズ・エモモの宝玉・獲得メダルなどの期待値を計算できるツールです。「贈る個数から計算」「使用コインから計算」「目標GPから計算」「目標オッズから計算」「目標ぶる太数から計算」「連勝ボーナス」の6タブで構成し、目標値に対して10連ギフトを優先消化する組み合わせを自動で算出します。デザインは舞台のカーテンとレッドカーペットをイメージした配色にまとめました。
サイトを見るMirrativの「チア機能」に関する一覧表・検索ツール
チアレベルとチアランクという2つの仕組みで構成される「チア機能」について、達成条件をすぐに確認できる一覧・検索ツールです。公式アプリの配色やグラデーションを再現し、条件A・B・Cを単一選択にする、横スクロールを廃止するなど、実際の使いやすさを検証しながらUIを調整しました。
サイトを見る