ROのクエスト情報を整形するUserScript

2022/10/05更新：公式が対応したので不要な旨記載しました。無効/削除の仕方を追記しました。
2022/04/12更新：RO公式の更新内容に追従しました。

要約

• RO公式のクエストリストが見にくいので、見やすく整形するUserScriptを書きました

• Tampermonkeyをダウンロード＆インストールした後、本スクリプトをコピペ→保存で動きます

• 公式のレイアウト変わったら多分動かなくなりますのでご利用は自己責任でどうぞ

• 2022/10/04のアップデートで、公式が見やすさを改善してくれました。
  このスクリプトは不要になったかなと思います。 (完了/未完了を左右でなく上下に分けてくれているのでその部分は相変わらず見にくいですが……)

何ができるの？

RagnarokOnlineのプレイヤー向けに、クエストリストを整形します。

Before

完了未完了がまとまっていないうえに、クエスト順も左右に読まないといけない

After

完了を左側、未完了を右側にまとめて表示。少しだけ行間も広くとって読みやすくしてみた

使い方

Tampermonkeyを先にインストールしてください。
インストール後、Tampermonkeyのダッシュボードから新規ユーザスクリプト作成画面に遷移し、以下をコピペ→保存。

// ==UserScript==
// @name         Ragnarok Online Quest Viewer
// @namespace    https://ro-mastodon.puyo.jp/@self_itigo
// @version      0.3
// @description  クエストを完了/未完了に分けてリスト表示するよ。
// @author       self_itigo
// @match        https://rowebtool.gungho.jp/quest*
// @require      https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
// ==/UserScript==

(function() {
    // リスト形式を辞める
    $('.questList>li').replaceWith(function(){
        var tag_class = $(this).attr("class");
        var tag_id = $(this).attr("id");

        if ( tag_class == null) {
            // 完了のクエストのクラスをfinishedにしてしまう（未完了はunfinishedなので）
            var tag_class_plus = 'class="finished"';
        } else {
            var tag_class_plus = 'class="'+tag_class+'"';
        }
        if ( tag_id == null ) {
            var tag_id_plus = [];
        } else {
            var tag_id_plus = 'id="'+tag_id+'"';
        }
        $(this).replaceWith('<span '+tag_id_plus+' '+tag_class_plus+'>'+$(this).text()+'<br></span>');
    });
    $('.questList').replaceWith(function(){
        var tag_class = $(this).attr("class");
        var tag_id = $(this).attr("id");

        if ( tag_class == null) {
            var tag_class_plus = [];
        } else {
            var tag_class_plus = 'class="'+tag_class+'"';
        }
        if ( tag_id == null ) {
            var tag_id_plus = [];
        } else {
            var tag_id_plus = 'id="'+tag_id+'"';
        }
        $(this).replaceWith('<div '+tag_id_plus+' '+tag_class_plus+'>'+$(this).html()+'</div>')

    });
    // 完了/未完了の要素を分離する
    $('.questList>.finished').wrapAll('<div class="questListBody" id="completed"></div>');
    $('.questList>.unfinished').wrapAll('<div class="questListBody" id="incomplete"></div>');
    $('.questListBody').css({
        'width':'50%',
        'line-height':'140%'
    });
    // 完了を先に表示する
    $('#completed').insertBefore('#incomplete');
})();

一応スクリプト本体も置いておきます。
ダウンロードする意味はないと思いますが。一応。
（本来jsファイルをWeb上で直実行させることで自動インストールできるはずなのですが、noteさんのセキュリティがしっかりしていてうまく動かないのでコード直貼りしました。恥ずかしい！）

RagnarokOnlineQuestViewer.user.js

2.04 KB

ファイルダウンロードについて

ダウンロード

使用をやめるときは

アドレスバー右のTampermonkeyアイコンからメニューを開き、スクリプト名の部分を無効側(グレーアウトするように)にチェック入れていただければと。

これはオフにした状態

スクリプトを削除する場合は、上記メニューからダッシュボードを開き、スクリプト名の一番右側にゴミ箱の削除ボタンがあるかと思います。そちらから削除ください。

ゴミ箱アイコンクリックで削除

公開の経緯

もともとは自分と身内用に作ったのですが、思いのほか反応を頂けたので。

海音@Mimir (@self_itigo@ro-mastodon.puyo.jp)

ただ、動けばいいの精神で作っているので、以下ご留意ください

• jQueryのお作法なんて知りません
  （きっとすごいひとがいい感じに整形してくれるにちがいない）

• クエスト一覧と職業関連クエストがすべてまとまって表示されます
  （分離する労力に見合わないと判断したので……）

• 公式がレイアウト変更したら動かなくなると思います
  （そのときに私が追従するかは気分次第です）

いやー初めてjQuery触りましたけど便利ですね。

では素敵なRO（クエスト）ライフを！