Studio TA Subsite の案内とお知らせ

「Stylish」から「Stylus」への環境の移行手順

2018年 07月 06日

移行作業をする前の予備知識


「Stylus」は「Stylish」の商用化前のコードを進化させた拡張機能で、環境移行の機能を備えています。 このページの手順で、「Stylish」で使用していたスタイルや環境を、そのまま「Stylus」へ移行する事が可能です。 起源を同じくする拡張機能ですから、移行による問題はとても少ないでしょう。(ただし、Stylish自体に対するスタイルは Stylusには使えません)

移行作業の要領は以下です。
◎「Stylish」上の全スタイルをバックアップし、バックアップファイルを「Stylus」に「インポート」する。
◎「Stylish」「Stylus」とも、バックアップファイルはWindowsの「ダウンロード」フォルダに置かれます。
◎ 移行作業が終了したら「Stylish」を無効にします。

▪「Stylish」を「Stylus」と同時に働かせるのはトラブルの元です。 また、移行後の環境に問題がない事を確認したら「Stylish」をブラウザから削除する事をお勧めします。
▪「Stylish」で使用していたスタイルを、「userstyles.org」等から「Stylus」に個別にインストールする事も可能です。 このページの手順はそれを纏めて簡単に出来ます。
▪ ユーザー自身が作成したスタイルや、既成スタイルをユーザーがアレンジしたものは、このページの手順を使わないと移行出来ません。
▪ 移行は同じブラウザ内で行うことが推奨です。 これは、ブラウザの互換が確実でないスタイルがあるからです。
▪ 以下の説明はFirefox版を基本としていますが、Chrome版でもほぼ同じです。



「Stylish」から「Stylus」に環境の移行手順



拡張機能の導入


前もって使用中のブラウザに拡張機能「Stylus」を導入します。 導入手順は以下のリンクを参考にしてください。

  ◎Firefox版
  ◎Chrome版



「Stylish」からバックアップ保存


● ブラウザの拡張機能の設定画面を開き、「Stylish」「Stylus」の両方を「有効化」します。
  次に「Stylish」の「設定」 を押します。

a0349576_10445098.png

●「Stylish」の管理画面が開いたら、「インストールされた全スタイルをバックアップする」 を押します。

a0349576_10472005.png

● 下図のダイアログが表示されます。「ファイルを保存する」の印を確認して「OK」 を押します。

a0349576_10581153.png

● バックアップファイルが「ダウンロード」フォルダに保存されます。 以下の手順でそのファイル名を確認します。

  ◎Firefox の場合
   タスクバー上の「ダウンロードアイコン」 を押します。

a0349576_11055389.png

   小さなダイアログが開きます。 表示される「バックアップファイル名」 を確認します。
   Firefoxの場合は「ezED4GWR」といった名前になります。

a0349576_11065120.png

  ◎Chrome の場合
   ブラウザウインドウの下部ステータスバーに表示される「バックアップファイル名」 を確認します。
   Chromeの場合は「stylish-2018_7_6.json,.bin,.dms」といった日付入りの名前になります。

a0349576_11105040.png



「Stylus」にインポート


● タスクバー上の「Stylusアイコン」 を押します。

a0349576_11215109.png

● 下図の様な「Stylus」のダイアログが開きます。「管理」 を押し「Stylus」の管理画面を開きます。

a0349576_11244819.png

●「スタイルをインポート」 を押します。

a0349576_11250949.png

● ファイル選択のウインドウが開きます。
  フォルダーの場所が異なる場合は、「ダウンロード」フォルダに移動します。
 「Stylus」の「ファイルの種類」 は、デフォルトでは「*.json」になります。

a0349576_11263432.png

●「ファイルの種類」 を下の様に「すべてのファイル(*.*)」 に変更します。
  フォルダー内で、先にバックアップ保存した「バックアップファイル名」 のファイルを探します。
 (「ダウンロード」フォルダーには無関係な他のファイルが保存されている場合があります)

a0349576_11341520.png

●「バックアップファイル」 が見つかったら、ファイルの行をクリックします。
  下図の様にファイル名の枠内に が設定された事を確認して「開く」 を押します。

a0349576_11572759.png

● 下の様にインポート確認ダイアログが表示されます。 インポートされた件数を確認して「OK」を押します。

a0349576_11574852.png

● 下図の様に「Stylish」でバックアップした全てのスタイルが、「Stylus」にコピーされているはずです。

a0349576_12072026.png

● 別ウインドウに「Stylish」の管理画面を表示し、スタイルが全て揃っているかを確認します。 確認が終わったらすみやかに「Stylish」を「無効化」に設定します。



「Stylus」の扱い方


「Stylish」を使って来た人には「Stylus」はそう苦もなく使える様になるでしょう。 ただ、もっと使いこなしたいという場合は、以下のリンク先を参考にしてください。

 ◎Firefox拡張機能 「Stylus」の使用法 (詳細)
 ◎Chrome拡張機能「Stylus」の使用方法(1)導入 / アイコン機能メニュー / オプション
 ◎Chrome拡張機能「Stylus」の使用方法(2)管理画面 / 編集画面 / 編集環境




[PR]
# by Ataron2 | 2018-07-06 12:15 | ブログ編集画面のアレンジ | Trackback | Comments(0)