Nuxt.jsでFF14のツールを作成しました(記号･特殊文字エディター＆テキストコマンド検索)

Nuxt.js(Vue.js)を使った小規模のウェブアプリケーションを2つリリースしました。

やっているゲームのツール的なもので、しばらくこういうのがあればいいのにな～とぼんやり思っていたものが公式でも非公式でも出てくる気配がなかったので（他力本願寺）、自分で作成・公開しました。

FF14記号･特殊文字エディターについて

FF14ではゲーム内でのみ使える特殊な文字や記号がありますが、キーボードからはまず入力できません。なにかしらのログなどからコピー＆ペーストをしなければ使えないという手間があります。

かといって別にカジュアルに使うものでもないため、まあコピー＆ペーストでいいかなと思っていましたが、昨今（？）レイド開始前の説明マクロなどでも使う機会が増え、もうちょっと便利に使えないかなという考えになりました。

通常のタイピングで主な文章などを打ちつつ、必要な箇所で使いたい特殊文字をマウスぽちで挿入する感じのウェブアプリケーションです。

入力内容を都度localStorage（ブラウザ依存）に保存しているため、うっかりタブやブラウザを閉じても復帰可能です。

ブラウザ上で表示されている特殊文字はゲーム内の表示をもとに、Webフォントを自作して表示させています。

コピー時・プレビュー画面で差異が出ないよう、プレビュー画面に入力データを反映するときに「豆腐」を特定のclassを持ったspan要素に変換したりと泥臭いことをしています。

プレビューや打ち込みで妙なラグが発生しないかが懸念事項でしたが、今の所特に問題なく操作できてると思います。

半角スラッシュから始まるコマンド（いろいろできる）はFF14の公式サイトでも確認できますが、量が膨大であり、ある程度ジャンル分けされていることによりページ内検索をジャンル毎に実行しないと、コマンドそのものと説明文の検索ができません。

また、用途をググってもなんかめんどくさい（比喩）サイトが出てくることが多いので、自力でなんとかしたい硬派なヒカセン向けのウェブアプリケーションになります。

内容としては単純にFF14公式サイトからスクレイピングしたコマンド一覧をJSON形式であれやこれやして、初回のみJSONファイルを取得＆localStorageに保存し、次回以降はlocalStorageに存在しているJSONファイルを読み込みます。

専用の検索欄ではコマンドそのものと説明文などを対象に全コマンドを検索でき、ヒットしないコマンドは表示されない仕様になっています。これ、公式サイトで普通に実装してほしいあれなので万が一スクエニから連絡来たらソースコードぶん投げます（コードの質はおいといて／ていうか単純だからなんとかしてほしい）。

ゲーム内でもマクロ作成のときにコマンド一覧確認できるんですけど、こっちはコマンドがアルファベット順に並んでいるだけという地獄仕様です。知人友人らにツールの動作確認を依頼したとき、ある一人から「ゲーム内のあれで慣れてる」と言われ泣きました。敗北だよそれは

どちらもデータの用意が一番大変でした。手作業がなんだかんだ多かった……途中で何度か寝そうになっていた

あとは必要な時以外通信を絶対発生させないという自分ルールもありましたが、通信を発生させること自体が難しい用途だったので今回作ったものについては特に問題ありませんでした。

Firebase Hostingをついでに試せそうだったので導入しました。deployめっちゃ楽でワロタ。ただ転送量やばくなったらFirebaseじゃなくて普通に国内サービスのレンタルサーバー使うことになりそう。多分。