tips 0018 multiple versions - cwtickle/danoniplus GitHub Wiki

^ Tips Indexに戻る

| < WordPressを使って作品を公開 | 複数バージョンのファイル切り替え | ローカルでのプレイ方法(補足) > |

複数バージョンのファイル切り替え

  • customjsを多用している場合、バージョンが上がると動かず、元に戻したいときがあります。
  • 下記のような方法で比較的容易に戻すことが可能です。

方法1: CDNを使った切り替え方法

  • jsDelivrのCDNを使ってバージョンを切り替える方法です。ver40.4.0以降で使用できます。
  • 自サイトにアップロードしている danoni_main.js を danoni_main_local.js にリネームします。
    danoni_main.js を以下の内容に置き換えます。
// URLクエリのキーから値を取得
const getQueryParamVal_local = _name => {
    const param = new URL(location.href).searchParams.get(_name);
    return param !== null ? decodeURIComponent(param.replace(/\+/g, ` `)) : null;
};

// バージョン情報を取得してスクリプトタグを生成
// jsフォルダに「version.txt」をバージョン名入りで格納しておく
const randTime = Date.now();
fetch(`../js/version.txt?${randTime}`)
  .then(response => response.text())
  .then(version => {
    const script = document.createElement('script');
    const tmpVersion = getQueryParamVal_local('v') || version;
    script.src = `https://cdn.jsdelivr.net/npm/danoniplus@${tmpVersion}/js/danoni_main.min.js`;
    script.onerror = () => {
        const script = document.createElement('script');
        script.src = `../js/danoni_main_local.js`;
        document.head.appendChild(script);
    };
    document.head.appendChild(script); // スクリプトをヘッダーに追加
    console.log(`Loaded version: ${tmpVersion}`);
  });

使い方

  • URLクエリに?v=40.7.2のように指定することでバージョンを切り替えます。
  • デフォルトのバージョン名はjsフォルダ配下に「version.txt」を作り、
    その中に「41.0.1」のように適用するバージョン名を格納します。

方法2: 自サイト側で切り替える方法 (.htaccess利用)

  • あらかじめサブフォルダに一式を退避しておき、.htaccessの設定で参照先を切り替えることでファイルの切り替えができます。

フォルダ階層

[danoni]
  └ .htaccess
  └ [js]
  └ [css]
  └ [skin]
  └ [img]
  └ [music]
  └ [work]  - 作品本体の格納先
  └ [work2]
  └ [old]   - 過去バージョンのjsファイルなど一式
    └ [v37.3.1]  - バージョン名（一例）
      └ [js]
      └ [css]
      └ [skin]
      └ [img]

.htaccess

  • ダンおにのルートフォルダに「.htaccess」というファイルを作成して、下記を記述します。
  • このファイルを格納すると、HTMLファイルを書き換えることなく、old/v37.3.1/配下にいるデータを見に行くようになります（musicフォルダを除く）。
RewriteEngine on
RewriteRule js/(.*)$ old/v37.3.1/js/$1 [L]
RewriteRule css/(.*)$ old/v37.3.1/css/$1 [L]
RewriteRule skin/(.*)$ old/v37.3.1/skin/$1 [L]
RewriteRule img/(.*)$ old/v37.3.1/img/$1 [L]
  • 元に戻したいときは、行の先頭を#でコメント化すれば元に戻ります。
RewriteEngine on
#RewriteRule js/(.*)$ old/v37.3.1/js/$1 [L]
#RewriteRule css/(.*)$ old/v37.3.1/css/$1 [L]
#RewriteRule skin/(.*)$ old/v37.3.1/skin/$1 [L]
#RewriteRule img/(.*)$ old/v37.3.1/img/$1 [L]
  • work2フォルダだけルール適用したい場合は、work2フォルダに以下の.htaccessを配置します。
  • この場合、danoniフォルダには.htaccessを配置しないほうが良いです（ルールが重複するため）。
RewriteEngine on
RewriteBase /danoni/work2/
RewriteRule ../js/(.*)$ ../old/v37.3.1/js/$1 [L]
RewriteRule ../css/(.*)$ ../old/v37.3.1/css/$1 [L]
RewriteRule ../skin/(.*)$ ../old/v37.3.1/skin/$1 [L]
RewriteRule ../img/(.*)$ ../old/v37.3.1/img/$1 [L]

ページ作成者

  • ティックル

^ Tips Indexに戻る

| < WordPressを使って作品を公開 | 複数バージョンのファイル切り替え | ローカルでのプレイ方法(補足) > |