MozillaZine.jp フォーラム
https://forums.mozillazine.jp/

YosemiteでFirefoxの外部cssを修正したのち、高速にそのcssを反映させるには？
https://forums.mozillazine.jp/viewtopic.php?f=16&t=16176		 ページ 1 ／ 1
作成者:  mNeji [ 2016年6月17日(金) 16:48 ]
記事の件名:  YosemiteでFirefoxの外部cssを修正したのち、高速にそのcssを反映させるには？
つい最近まで、FirefoxのStylishでcssの作成をして、第一段階を終了しました。現在はそれらを簡単に配布する方法を模索しています。流れとしては、

  1. 特定のヂレクトリ(source)に、Stylishで作成したのをABC_xxx.cssとして、手動コピーし、
  2. スクリプトで、ABC_*.cssをまとめてuserContent.cssとし、それをアクティブ・プロファイル/chrome/に上書き
  3. 手動でFirefox.appを終了、再スタートしています。
ここで、ふとYosemiteではJavaScriptが走るので、ひょっとしてFirefoxに手が出せるのではないかと思い、「Script Editor.app」を見ましたが何もありませんでした。

1,2)についてコマンド・ラインから操れる方法がありましたら、お教えいただけないでしょうか？
作成者:  mNeji [ 2016年6月17日(金) 20:14 ]
記事の件名:  Re: YosemiteでFirefoxの外部cssを修正したのち、高速にそのcssを反映させるには？
そのご、(3)について、スクリプトを試してみたところ、動作中をFirefoxを終了し、再スタートがかかるのですが、エラーとなります；


Firefoxはウインドウとタブを正常に復元できませんでした。多くの場合、正常に復元できない原因は最近開いた Web ページによるものです。

次のいずれかをお試しください:

問題の原因となりそうなタブを除外して起動する
タブを復元せずに新しいブラウザセッションを開始する

•スクリプト(ff-+)；
#!/bin/zsh

# ff-+ : stop and restart Firefox

# Usage: ff-+↩︎

get_PID(){
ps -ax | grep "$1" | head -n 1 | sed "s%^[[:space:]]*%%" | cut -f1 -d' '
#echo "• ${ff}'s PID: '$pid_ff'"
}

ff='firefox'
pid_0=$(get_PID "$ff")
echo "• ${ff}'s PID: '$pid_0'"

kill $pid_0

while true; do
[[ $(get_PID "$ff") -ne $pid_0 ]] && break
done

open -a firefox

なお、上記の問題があった後に手動でFirefoxを終了して、もう一度ターミナルで「open -a firefox」と打てば正常に再スタートします。
作成者:  mNeji [ 2016年6月18日(土) 18:02 ]
記事の件名:  Re: YosemiteでFirefoxの外部cssを修正したのち、高速にそのcssを反映させるには？
自己コメントです。

どうやら私が望んでいる事は「CSSの変更に伴うCSSのリロードをするメカニズムを入手する」らしいです。Add-onsで「css reload」を検索すると「Auto Reload 1.20.1」が適切かと思い入手しましたが、「ルールの設定が」判らず頓挫しました。

で、Mavericksのころからlocalhostの環境を整え方が違ったようで、放置していました。ここら辺から、体制を整えてからreload問題を再開したいです。

しばし、質問を中断させていただきます。
作成者:  偶然的通行人 [ 2016年6月20日(月) 08:25 ]
記事の件名:  Re: YosemiteでFirefoxの外部cssを修正したのち、高速にそのcssを反映させるには？
質問を中断された後に失礼します。

mNeji さんが書きました:
どうやら私が望んでいる事は「CSSの変更に伴うCSSのリロードをするメカニズムを入手する」らしいです。

Stylish をインストールした Firefox で、アクセスしたサイトの背景色などを変更するユーザースタイルをその場で Stylish を使って書いて保存すれば、Firefox の再起動をしなくてもリアルタイムに結果が反映されることはご存知ですよね。Stylish はそのように動作するアドオンですから...。

十分ご承知のことなら余計なお節介になってしまいますが、念のため Firefox のユーザースタイルに関する基本的・一般的な考え方を書きます。参考にでもしていただければと思います。

【前提】
Firefox は、
（a）自身のユーザーインターフェイス（UI）に対するスタイルと、
（b）コンテンツエリアに表示する Web ページ等に対するスタイルを、
Cascading Style Sheets（CSS）を使い、それぞれユーザーの好みに合わせて調整することができます。
主な方法は２つ。（i）Firefox 本体でおこなう、（ii）アドオンを利用する ―― で、それぞれ一長一短があります。

【Firefox 本体】
通常、プロファイル直下の [chrome] フォルダ内に配置したファイル、
（a）なら userChrome.css
（b）なら userContent.css
に必要なソースを記述します。
Firefox が起動するとき、userChrome.css や userContent.css が読み込まれ、記述済みのスタイル指定が、起動後の表示に反映されます。

ただし、Firefox の稼働中に userChrome.css や userContent.css に追加・変更したスタイルは、次回の Firefox 起動時までは反映されません。

【Stylish アドオン】
ユーザースタイルの管理と適用を効率化するアドオンに Stylish があります。
Stylish は、Firefox の稼働中に Stylish 自身の管理下にあるユーザースタイルの適用／停止を動的（Dynamic）に反映させられるという利点があります。
（注：userChrome.css や userContent.css は、Stylish の管理下にはありません。）

Firefox が起動し、アドオンとしての Stylish が正常に動作しているのであれば、その状態から Stylish で新しく書いたユーザースタイルは、[お試し] ボタンを使ってその場で反映結果を確認できますし、[保存] を実行してもすぐに反映されます。管理画面にリストアップされた個々のスタイルに対し [無効化／有効化] をリアルタイムに反映させられることも、Stylish ユーザーならご存知のとおりでしょう。
この点が、Firefox の再起動を必要とする userChrome.css や userContent.css を用いた静的（Static）な方法とは異なります。

Stylish は、Stylish で作成・登録したユーザースタイル（a）や（b）を独自のファイルで一元管理しています。最近のバージョンでは、プロファイル直下に置かれた stylish.sqlite というデータベース形式のファイルに、個々のユーザースタイルが格納されています。
現在の Stylish には自身が管理するユーザースタイルをエクスポートする機能はありませんが、ユーザースタイルが保管された stylish.sqlite を、同一 PC 内の別プロファイルや別 PC の Firefox プロファイルにコピーするだけで、そのスタイルを移行することは可能です。
半面、Stylish がインストールされていない（導入できない／正常に動作しない）環境では、stylish.sqlite に保存されたユーザースタイルは、まったく再利用できない無用の長物になってしまいます。（userChrome.css や userContent.css のような汎用性は望めないということです。）

以上が、基本的・一般的な話です。

しかしながら、そういう理屈を承知の上で、「Stylishで作成したのをABC_xxx.cssとして」「スクリプトで、ABC_*.cssをまとめてuserContent.cssとし」みたいな変則的手順をふまねばならない特別な理由があるのなら、その背景を含めて説明していただいたほうが、フォーラムを見ているユーザーさんたちに mNeji さんのところのご事情が伝わり、アドバイスが寄せられやすくなると思います。
（最終的に userContent.css を使うことが目的なら、中途半端に Stylish を使わないほうがいいと思いますし...。）

（補足）
Stylish は、公開されているスタイルの取り込みはもちろん、自分で新規に記述する場合でも、比較的簡単にユーザースタイルを扱えるため人気が高いアドオンです。
しかし、アドオンであることの長所と同時に、アドオンであるがゆえの短所もふまえておかないと、思わぬ落とし穴にはまることがあります。
アドオンを動かすということは、それだけ Firefox のリソースを（わずかであっても）消費しますし、アドオン自身に内在するバグなどが影響する可能性もゼロではありません。Firefox のバージョンアップにアドオン側が追従できなければ動作不良が起こることもあります。他のアドオンとのコンフリクトもないとはいえません。userChrome.css や userContent.css とは別に、アドオンの動作としてユーザースタイルを適用させていることにも留意しておく必要があるでしょう。

一方、userChrome.css や userContent.css を駆使する Firefox 標準の方法は、Firefox 本体が持つ素の機能なので動作はシンプルです。記述されたソースに間違いや競合がないのなら、誤動作が起こる可能性はずっと低いでしょう。しかし、利便性では Stylish におよびません。

ユーザーがどのようにユーザースタイルを使いたいのか、その目的と各方法の長所・短所を勘案して、適切な方法を選択してください。
Firefox 標準の方法とアドオンを使う方法を併用することもできますが、両者の区別と管理をきちんとおこなう自信がないのなら、混在させないほうが無難だと思います。
例えば、ユーザースタイルの追加や変更を頻繁におこなうのなら、Stylish だけを使ったほうが断然便利でしょう。逆に、厳選した必要最小限のユーザースタイルを使えればいいのなら、Firefox 標準の方法だけを使ったほうが、拡張機能を常駐させない分、より安定的な動作を期待できると思います。
バリエーションとしては、Firefox の UI に関しては userChrome.css で処理し、Stylish はサイトごとのスタイル管理（つまり userContent.css 相当）にのみ特化して使う、といった考え方もあろうかと思いますが、併用になるので両者の管理はきちんとする必要があるでしょう。

とりあえず以上です。的外れな話になっていたらすみません。
作成者:  mNeji [ 2016年6月20日(月) 20:44 ]
記事の件名:  Re: YosemiteでFirefoxの外部cssを修正したのち、高速にそのcssを反映させるには？
偶然的通行人さん、詳しい解説ありがとうございます。

偶然的通行人 さんが書きました:
Stylish をインストールした Firefox で、アクセスしたサイトの背景色などを変更するユーザースタイルをその場で Stylish を使って書いて保存すれば、Firefox の再起動をしなくてもリアルタイムに結果が反映されることはご存知ですよね。Stylish はそのように動作するアドオンですから...。
はい、これらの背景は理解できているとおもいます。にもかかわらずStylish単独利用だけではなくて、userContent.cssとの併用になった流れは、後ほど【流れの主要点】てご説明します。

引用:
（注：userChrome.css や userContent.css は、Stylish の管理下にはありません。）
当方では、下記6.で示すように、userContent.cssをStylishで運行しまししたが。確かに、長くなると補完がしなくなりましたね。

引用:
現在の Stylish には自身が管理するユーザースタイルをエクスポートする機能はありませんが、ユーザースタイルが保管された stylish.sqlite を、同一 PC 内の別プロファイルや別 PC の Firefox プロファイルにコピーするだけで、そのスタイルを移行することは可能です。
確かにエクスポートが付いていたら...。一度sqlite3でstylish.sqliteを見て、cssを取り出そうとしたのですが、失敗しました。

引用:
しかしながら、そういう理屈を承知の上で、「Stylishで作成したのをABC_xxx.cssとして」「スクリプトで、ABC_*.cssをまとめてuserContent.cssとし」みたいな変則的手順をふまねばならない特別な理由があるのなら、その背景を含めて説明していただいたほうが、フォーラムを見ているユーザーさんたちに mNeji さんのところのご事情が伝わり、アドバイスが寄せられやすくなると思います。
検討中のサイトは複雑な構造です。そして最近、極端に醜い設定になりました；
【解決するべき課題】
  • 白い地(#fff)に、淡い灰色(#333)
  • 細い文字太さ(font-weight=200)
  • css構造が高度すぎる(設定が引数つきの関数になっていたり、)

【流れの主要点】
  1. I.06-02; 某サポート・コミュニティで上述の改悪が起こった。これについて投稿。
  2. CSSの得意な方から、文字の太さ、色を変えるcssの見本を、Safari,Firefoxについてお教えいただく。
  3. Firefoxで、chrome/userContent.cssを運用はじめる。WEB-Inspectorが初めから黒い画面で、フォントも太く、見やすいのに驚く。調子に乗って、EditorとInspectorを弄り回す。前提として、Nosquintを動作したままとしていた。
  4. Q.06-11; Firefox47.0に変わったところ、頼みの綱のNoSquintが動かなくなった。色も完全にcrhome/userContent.cssで設定するように方針変更。
  5. chrome/userContent.cssの変更ごとにFirefoxのリスタートするのに耐え切れず、Stylishを入れた。これも最初から黒い画面に感激。今度はStylishとInspectorを弄り回す。
  6. ところが、userContent.cssも長くなって来ると、自動補完が動作しなくなったり、すでに完了した部分を操作ミスで壊すといった問題点が発生。
  7. Q.06-14; userContent.cssをEditorでurl毎に分割してchrome/に入れ、それ等をchrome/userContent.cssから@importして失敗。
  8. 上記の対応を考えている時、個別に分割したcssをStylishに入れて、Stylish中のuserContent.cssから@importしてやはり失敗。
  9. Stylish中のuserContent.cssを引き抜いて、chrome/userContent.cssから@importしてやはり失敗。
  10. その後、操作ミスから分割したcssの一つがアクティブのままだったのが「動作」しました！以後複数のcssをStylishでアクティブにして操作しています。
  11. 後は、HTML5&CSS3の本を買ってとほくそんでたのです。ところ、サポート・コミュニティで「見やすく改良してくれるのは興味があるけど、手順が難しいと手が出ない！」といわれました。
  12. そこで、思いついたのはシェル・スクリプトからuserContent.cssを書き込むようなアプレットを作ることです。スクリプトやStylishの得意でない方々にも利用できないかと思いました。そして外部スクリプトから準動的に「フォントの大きさ、太さ」、「バックグラウンド、文字の色」などを設定できるのおではないかと思いました。
  13. Q.06-18; で、どうせならスクリプトからFirefoxをreloadしたいと思ったわけです。

引用:
バリエーションとしては、Firefox の UI に関しては userChrome.css で処理し、Stylish はサイトごとのスタイル管理（つまり userContent.css 相当）にのみ特化して使う、といった考え方もあろうかと思いますが、併用になるので両者の管理はきちんとする必要があるでしょう。
はい、add-onsを含めてuserChrome.cssの類は入れていない、スッピンのFirefoxです。現在、トライ＆エラーですが、シェル・スクリプトで、「Stylishで書いたcss群」と「crhome/userContent.css」とを無矛盾に生成できるようになりつつあります。

でも、XULなどで内部から操作したほうが建設的かもしれませんね。
作成者:  mNeji [ 2016年6月23日(木) 07:15 ]
記事の件名:  Re: YosemiteでFirefoxの外部cssを修正したのち、高速にそのcssを反映させるには？
その後の状況です。

基本的にStylishを使い複数のcssを安定的に操作できることが確認できました。

ただ、Stylishだけでは使い勝手が悪いのでAdd-onsで検索したところ、Stylish-Customがあったのでインストールしました。マニュアルが良くわからなかったのですが、現在見ているタブに対応しているcssがあると、下図のように「Stylish」の小さなアイコンが着色されるので、それをクリックするとプルダウン情報がでます。

ここに図を挿入したのですがでません。申し訳ありません。


私の場合、「スタイルの管理」から全てのcss(5個)を一括エクスポートしました。ディレクトリの設定画面にWindows風の例が書いてあってギョッとしましたが、そこをクリックするとFinder形式で設定できました。これだけでも、操作ミスを気にしないでStylishで作成したcssを安全に取り出せるので有難いです。


当面、上記の方法で、cssを製作しようと思います。
作成者:  偶然的通行人 [ 2016年6月24日(金) 08:48 ]
記事の件名:  Re: YosemiteでFirefoxの外部cssを修正したのち、高速にそのcssを反映させるには？
どうやら一山越えられたようにお見受けします。

前回の mNeji さんのご投稿を受けて気になった点をいくつか書いていたのですが、全部を投稿する必要はなさそうです。他のユーザーさんが鵜呑みにするとよくないと思われる点を、今後のために書き残しておきます。

mNeji さんが書きました:
当方では、下記6.で示すように、userContent.cssをStylishで運行しまししたが。

最初に申し上げておきますが、以下でいう userContent.css は文字通りの意味で、Firefox 本体の機能でユーザースタイルを適用する際に使われる CSS ファイルの固有名称のことです。Web ペーシにユーザースタイルを適用する機能全般を表わす代名詞として使っているのではありません。

Sytlish で記述・保存を実行したユーザースタイルは、stylish.sqlite に保存されますが、userContent.css には保存されません。
Stylish の管理画面には、userContent.css に記述されたユーザースタイルはリストアップされません。
Stylish が無効化されていても、userContent.css に記述されたユーザースタイルは適用可能です。
これらの事実は、userContent.css は Stylish の管理下にはなく、相互に独立していることを意味します。「userContent.cssをStylishで運行」は、あっさりできるわけがないのです。

「Stylish単独利用だけではなくて、userContent.cssとの併用になった流れ」とのことですし、【流れの主要点】を拝見しても不可解さが残るのですが、もしかしたら、userContent.css の中に書いてあった個々のユーザースタイル をまるごと Stylish にひとつのスタイル名でコピー・保存したことを、「userContent.cssをStylishで運行」と仰っているのでしょうか？

もしそうなら、その言い方は間違いです。
Stylish の管理下に移って運用されているのは、あくまで userContent.css の中に書いてあった個々の ユーザースタイル です。それらユーザースタイルの内容は様ざまであり、追加・削除・変更もありうる可変的なものです。
Firefox の標準機能としてサイトに適用するユーザースタイルを定義した CSS ファイルは、userContent.css という名称の固定されたファイルです。このファイルは相変わらず Stylish とは独立しており、管理下にはありません。Stylish が userContent.css というファイルを直接コントロールしているわけではないのです。

もし、userContent.css に含まれていたユーザースタイル（可変）を、固定されたファイル名 [userContent.css] で一括呼称なさっているのだとしたら、乱暴すぎる表現です。
せめて「userContent.css（のユーザースタイル）をStylish（に移して）運行」ぐらいにすれば、意味が通じると思います。

実際のところ、ｍNeji さんの環境下がどういう状況になっていて、それをどういう意味合いで表現なさっているかはわかりません。上記のぼくの推測は外れているかもしれません。
逆に、もし同様の乱暴というか大雑把というか、そういう表現が随所にあるのだとしたら、mNeji さんの質問や説明自体が、ぼくを含めこのフォーラムを見ている人に正しく伝わっていない可能性もあるのではないでしょうか。

いずれにせよ、このトピックを目にした方々の中から、Stylish を使えば自動的に userChrome.css や userContent.css を管理下に置いてコントロールできる ―― といった間違った期待感を持つ人が出てこないことを祈ります。
作成者:  mNeji [ 2016年6月25日(土) 04:34 ]
記事の件名:  Re: YosemiteでFirefoxの外部cssを修正したのち、高速にそのcssを反映させるには？
偶然的通行人 さんが書きました:
どうやら一山越えられたようにお見受けします。
はい、レベルの低い質問に答えていただき感謝しています。

引用:
「Stylish単独利用だけではなくて、userContent.cssとの併用になった流れ」とのことですし、【流れの主要点】を拝見しても不可解さが残るのですが、もしかしたら、userContent.css の中に書いてあった個々のユーザースタイル をまるごと Stylish にひとつのスタイル名でコピー・保存したことを、「userContent.cssをStylishで運行」と仰っているのでしょうか？
似たような作業をする方の為に現状を書いておきます。
  1. cssの作成・デバッグはStylishで行っています。なるべく対象となるサイトに固有な名称で、サイトの限定には「regexp」を主にしています。
  2. Stylishで全てのパーツが出来上がったら、「Stylish-Custom」で一括エクスポートします。
  3. これらをシェル・スクリプトでuserContent.cssに入れて、それを現在のProfile/chrome/に転送します。
  4. Stylishに戻り、全てのcssを無効に変更してから、 Firefoxをリスタートさせます。これでよければchrome/userContent.cssは正しいと判断します。
  5. そこでuserContent.cssを配布します。
  6. 配布の結果の修正点が判ればStylishにもどります：4.で無効にしたcssで不要になったものは削除し、その他は有効に戻します。新たなcssは新規に書き込み、1.から始めます。
不明な点がありましたらご指摘ください。修正いたします。
ページ 1 ／ 1 All times are UTC + 9 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/