欲しいものは作るしかない

2022年4月に新卒エンジニアとして就職しました。
エンジニア研修を終えて配属となった段階で、個人開発の第一歩としてVue.jsを使ったブラウザ拡張機能を作ることにしました。

麻雀アプリ「雀魂」の牌譜をワンクリックで変換して別の麻雀アプリ「天鳳」向けの解析サービスに送信する拡張機能です。
ブラウザの覇権たるGoogle Chrome及び雀魂を軽快に遊べるMicrosoft Edgeに向けてリリースしました。

インストール・使い方の解説→雀魂でもNAGAで牌譜検討！拡張機能リリースしました。 | モダンジャン研究会
 リリース報告ツイート

対象の読者

これからChrome拡張などを作りたい方
ブラウザ拡張のクロスブラウザ対応をしたい方
フロント系の学習の成果としてなにか作ってみたい方

なぜ麻雀の拡張機能を作ったのか。

ここは技術的な内容としては薄いので興味がない方は飛ばしてください。

コロナ禍をきっかけに麻雀を初めて2年ほどドップリハマり込んでいます。麻雀の世界にもAIの波は到達しており、有名なものがいくつか存在します。

Super Phoenix (Microsoft Asia:天鳳10段)
NAGA (dwango:天鳳10段)
爆打 (水上直紀:天鳳7段)
Akochan (:天鳳7〜9段相当)
Mortal (Equim:天鳳段) OSS
鴨神にゅう (???:天鳳8段) VTuber

カッコ内、(開発者:実績)

日本の麻雀界でよく知られているのは上から3種です。しかしネット麻雀猛者や麻雀研究家には知られているものとして取り上げざるをえないのがAkochan及びMortalでしょう。

Akochan

Critter氏が制作した麻雀AIです。天鳳7〜9段の実力とのことです。
Githubに公開されており、下記のMortal作者Equim氏によりAkochan Reviewerとして牌譜解析ツールにもなっていました。
critter-mj/akochan | Github

Mortal

上記Akochan Reviewerを制作して公開されていたEquim氏が2022年に公開したAIです。AGPL v3.0として公開されており、3人の開発者が活動しています。
またMortalとAkochanを利用した牌譜解析ツールmjai-reviewerが無料で提供されています。
Equim-chan/Mortal | Github
mjai-reviewer

雀魂とNAGAについて

NAGA及びAkochan Reviewerは天鳳の牌譜形式のみ牌譜検討を受け付けています。
(Mortalのリリースと共にAkochan Reviewerは雀魂牌譜にも対応したmjai-reviewerに進化しました)
よってこれまではEquim氏が公開していたスクリプトをTampermonkeyという拡張機能に登録するなどして幾つかの手順を踏むことで雀魂牌譜もNAGA解析をできる環境になっていました。

雀魂の牌譜をNAGA解析する方法|アトリエ@凛凛、凛世|note
雀魂の牌譜をNAGAに解析させる|ねことくまとへび

しかし天鳳の牌譜URLをテキストファイルとしてダウンロードするというもので、面倒だったためワンクリックでNAGA牌譜検討を利用したいと考えて拡張機能の製作を決めました。

開発環境

Vue.js,TailwindCSSを採用しており、拡張機能のManifest v3に対応している環境としてこちらを参考にしました。
ホットリロード機能にも対応しており、option, content-scriptなどの各領域でVue.jsのビルドを行うための資料になりますので、ぜひ参考にされると良いと思います。

拡張機能の仕様はGoogleが制定したManifestというもので定められています。現在はManifest v3となりますが、これについて情報を整理するのはとても大変でした。理解の助けになった資料を下記に記載します。

構成

mainifest.json

拡張機能開発においてはストアに情報を提示し、ブラウザに許可する権限を通知するこのがファイルが最も難しいものだと思います。

{
  "manifest_version": 3, //現在は3しか受け付けられていない
  "name": "MahjongSoul Review Supporter",
  "version": "1.0.3",
  "description": "__MSG_appDesc__", //多言語対応
  "author": "kbkn",
  "icons": {
    "48": "imgs/extension_icon48.png",
    "128": "imgs/extension_icon128.png"
  },
  "default_locale": "en", //多言語対応の基準
  "content_scripts": [
    {
      "matches": ["https://game.mahjongsoul.com/*"],
      "js": ["content_script.js"]
    },
    {
      "matches": ["https://naga.dmv.nico/naga_report/order_form/"],
      "js": ["content_script_naga.js"]
    },
    {
      "matches": ["https://mjai.ekyu.moe/"],
      "js": ["content_script_mjai.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "background": { "service_worker": "background.js" },
  "permissions": ["storage"], //設定の保存と牌譜データの受け渡しに使った。
  "host_permissions": [
    "https://game.mahjongsoul.com/*",
    "https://naga.dmv.nico/naga_report/order_form/",
    "https://mjai.ekyu.moe/"
  ],
  "options_page": "options.html",
  "web_accessible_resources": [
    {
      "resources": [
          "web_accessible_resources.js",
          "dd.js",
          "event.js"
      ],
      "matches": [
          "https://game.mahjongsoul.com/*"
      ],
      "use_dynamic_url": true
    }
  ]
}

host_permissionとweb_accessible_resourcesで大量に書いているのはcontent-scriptを利用してサイト側のスコープに関数をインジェクトするためです。

popup.html/popup.js

牌譜画面で拡張機能のアイコンをクリックした時点でcontent-scriptにリクエストを送信し牌譜データを取得します。
牌譜データをから情報を抽出し、Vue.jsのリストレンダリングで表示しています。
選択をしてsubmitボタンを押すと牌譜データをlocal storageに保存した上でNAGAに画面遷移します。
またmjai用のタブではプレイヤー情報とURLを取得して利用者に解析したいプレイヤー視点を選択したもらうと画面遷移します

content-script.js

3サイトに対してそれぞれcontent-scriptを適用しています。

雀魂
1. 牌譜取得のスクリプトを埋め込む。
2. 上記スクリプトにリクエストを送り、返ってきた牌譜データをpopupのjsに返す。
NAGA
- 牌譜データをlocal storageから取得できるとtextareaに値を反映する。。
mjai-reviewer
- 牌譜URLと席の情報をlocal storageから取得できるとinput textと席順のselectに値を反映する。

option.html/option.js

拡張機能上の言語設定
言語別雀魂サーバーごとに異なる牌譜URLのドメイン

に対応するための言語設定を行います。local storageに保存しています。

審査過程

クロスブラウザ対応についてはこの記事が大変参考になりました。
クロスブラウザなブラウザ拡張を開発・審査・公開するまで【Chrome拡張】 | Qiita

まとめ

tailwindCSSとVue.jsを利用したおかげで短期間でそれなりにリッチな拡張機能が作成できました。
業務で得た知識をもとに自分が欲しいものを作って公開するというのはなによりもモチベーションに効きます。

【Vue.js】2週間でリリースまで。ネット麻雀のデータを他ゲーム向けのサービスで解析させる拡張機能【Maniefest v3】