1. TOPページに戻る
  2. Javascript
  3. Vue.jsを使ってFF14で使えるツールを作ってみた

Vue.jsを使ってFF14で使えるツールを作ってみた

よくMMORPGのFF14を遊んでいるのですが、それを進めるうえでちょっとメモ的なツールが欲しいなと思ったので、勉強ついでに興味があるVue.jsで作ってみました。

どんなツールか

ゲーム内のとあるコンテンツでアイテムを集めてスキルを使えるようにする、「ロゴスアクション」というのがあるのですが、「どのスキルが未開放か」というのと「スキルを開放する装置」が別々の箇所にあるため何を開放したか、また未開放のスキルは何のアイテムが必要か覚えておく必要があります。

それを覚えておくのが面倒だったので、ぱっと見でわかるようなものを作りました。

見た目と仕様

基本的には開放スキルが見える一覧はゲームの見た目とあわせてあり、その下に未開放のスキルで必要なアイテムを並べています。

一覧のゲームと同じ位置の箇所をクリックするとゲームと同じアイコンがつきます。また、アイコンがついたスキルは下のアイテムの箇所からも削除されます。

逆に下のアイテムの箇所をクリックしても削除され、上の一覧にアイコンがつきます。取得スキルが増えると必要なアイテムエリアの項目はだんだん減っていくので どれを開放していないかすぐわかります。

Vue.js

今回はVue.jsというJavaScriptのフレームワークを使用しています。必要なデータはjsonで管理していてそこからデータを取得し、それをVue.jsで加工し表示しています。クリックしたスキルはdataでtrue/falseを使って表示非表示を管理しています。

このままだとブラウザをリロードするとスキル開放状態がリセットされ悲しいので、データ保存はブラウザのlocalStorage(ローカルストレージ)を使用しています。 使用ブラウザが違うとリセットされてしまいますが、そこまで長期間使うようなツールでもないのでこれで十分かと思ってます。

記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。
Copyright (C) 2010 - 2018 SQUARE ENIX CO., LTD. All Rights Reserved.