FirebugでCSSソースをそのまま編集する方法

Firebugでの編集画面の比較

以前、ChromeDeveloperToolsの便利さについて記事を書きました

この記事では、DeveloperToolsはCSSソースをそのまま編集してプレビュー&全選択してコピーできる、つまりそれをそのまま本来のCSSファイルに貼り付ければ編集作業が完了するというメリットを挙げていました。

そしてさらには、Firebugではこれはできないとまで書いていました……が、これは完全な思い違いでした。FirebugでもCSSソースを直接編集することは可能です。
※もちろんサーバー上のファイルを直接編集という意味ではなく、編集しているように見せかけてのプレビューができる、という意味です。

というわけで、せっかくなので今回の気づきをシェアしてみたいと思います。

FirebugでCSSソースをそのまま編

  1. F12キーを押して、Firebugアドオンを呼び出します。
  2. CSSのタブをクリックします。
  3. 編集方法のリストボタンから、「ソース編集」を選びます。
  4. 「ソース編集」という文字部分(ボタン部分)をクリックします。

これでCSSソースを直接編集できるようになります。
ポイントは「ソース編集」を選んだあとに、さらにその文字部分(ボタン部分)を押す必要があることです。
ソース編集ボタンを押す

何ヶ月もこれに気がついていませんでした……。
自分の間抜けさに苦笑してしまいますが、他のFirebugの使い方ブログなどでも意外と解説されていないことが多いような気もします。

この方法を使うことで、通常のCSS編集画面と違い、本来のCSSソースを編集できます。もちろん編集したそばから、すぐにリアルタイムでプレビュー画面にも反映されます。

ひとつのメリットは、CSSに書き込んだコメントなどがそのまま閲覧・編集できること(通常の編集画面だとコメントは見えない)です。
あとは、あのFirebug独特の編集方法(Enterするとプロパティがすぐ下に増えるとか)にいまいにち慣れない方も、いつものエディタ感覚で編集できること。

そしてなにより、編集したCSSをそのまま全選択&コピーして、本来のCSSファイルにそのまま貼り付けることができます。

ただしFirebug全般にいえることですが、画面をリロードしてしまったり、ブラウザがクラッシュしたりすると編集内容は失われてしまいます。

そこで編集途中であっても右クリックから「save as…」を選んでファイルとして保存することも可能です。
Ctrl+Sで上書きとかができないのは残念なところですが、それでも作業中に定期的に保存することで、作業内容すべてが失われることを防いでくれます。

おまけ:ソース編集とライブ編集の違い

編集方法の選択

それと今回は編集方法に「ソース編集」を選びましたが、もうひとつの「ライブ編集」とどう違うのかに気になる方もいると思います。
ググってもいまいち解説が見当たらなかったのですが、色々と使ってみた感じでは以下の違いがあるようです。

ライブ編集

ライブ編集の特長は、FirebugのCSS編集方法と、直接ソースを編集する方法を同時に利用できることです。

Firebugの編集画面(「ライブ編集」のボタンを押していない状態)で「background-color:red;」というCSSをbodyタグに適用させるとプレビューの背景は赤くなります。

そしてそのまま「ライブ編集」ボタンを押すと、ソースをテキストエディタで編集する画面に移行できます。この際bodyタグのCSSは「background-color:red;」が反映されたままになっており、そのまま編集を続けられます。もちろんプレビューもそのままです。

と便利なライブ編集ですが、ひとつ大きな弱点があります。
それが「ライブ編集」ボタンを押したときのソース編集画面が、コメントなどを省かれた状態のものになってしまうことです。

つまり、編集後に全選択&コピーして…、という前述の方法が使えなくなります。
※そのため前述の手順では「ソース編集」を選びました。

ソース編集

これはライブ編集とメリット・デメリットが逆になっています。

まずメリットから見ると、「ソース編集」ボタンを押したあとに表示されるソースは、コメントまで含めた完全なソースが表示されることです。
そのため編集後に全選択&コピー、そしてそのまま別ファイルに貼り付けられます。

一方でデメリットとしては、「ソース編集」ボタンを押していない状態のFirebug編集画面でCSSを変更しても(たとえばbodyをbackground-color:red;にしても)、その後「ソース編集」ボタンを押すと、変更内容は消去されてしまいます。(一応ダイアログが出て、変更内容が失われても大丈夫かは確認してくれます)

個人的にはFirebugの編集方法をあまり使わないのと、やはり全選択&コピーのメリットがあるので「ソース編集」を使っています。

なお実験としてライブ編集とソース編集を切り替えたり色々していたら、ソース編集ボタンを押してもライブ編集verのソース編集画面になったりしたので、あまり触りすぎずに自分が普段使う方法を決めておくのが良いと思います。

FileZillaからFTPの一覧取得ができない場合の解決法(vsftpd)

今回は完全な覚え書きです。
諸事情あってさくらのVPSの再設定をしていたのですが、vsftpをインストール後、FileZillaからディレクトリ一覧が取得できないという現象にはまりました。

具体的には下記のようなメッセージが表示され、LISTコマンドを実行したのに一覧取得に失敗します。

状態:	***.***.***.***:*** に接続しています...
状態:	接続が確立されました, ウェルカム メッセージを待っています...
応答:	220 (vsFTPd 2.2.2)
コマンド:	USER xxx
応答:	331 Please specify the password.
コマンド:	PASS ********************
応答:	230 Login successful.
コマンド:	OPTS UTF8 ON
応答:	200 Always in UTF8 mode.
状態:	接続されました
状態:	ディレクトリーの一覧を読み出しています...
コマンド:	PWD
応答:	257 "/home/xxx"
コマンド:	TYPE I
応答:	200 Switching to Binary mode.
コマンド:	PASV
応答:	227 Entering Passive Mode.
コマンド:	LIST
エラー:	接続タイムアウト
エラー:	ディレクトリー一覧表示の取得に失敗しました。

この解決策ですが、下記の手順で解決しました。

  1. 「ファイル」→「サイトマネージャー」を開き、該当のホストを選択。
  2. 「転送設定」タブで「転送モード」の「アクティブ」にチェックを入れて「OK」

これで正常にファイルが取得できるようになりました。

参照リンク「link.smartscreen.live.com」はメッセンジャーからのアクセス

先日、管理しているサイトのアクセス解析をGoogleAnalyticsで見ていたら、参照サイトの項目に「link.smartscreen.live.com」というものがありました。

見たことのないドメインだったのでためしにアクセスしてみたのですが、下記のように「このリンクに問題があります」と表示されて接続できません。

smartscreen-live-com

それで少し気になったので検索してみたところ、下記のページに答えが書いてありました。

As the link itself tells us, it’s associated with the Smart Screen Filter. The filter is a new initiative from Microsoft Live Messenger which detect phishing and other malicious websites among.
Link.smartscreen.live.com Referral – Let’s Geek

ようするにMicrosoftのLive Messenger内からアクセスがあった際に、この参照リンクが記録されるようです。おそらくメッセの会話中にアドレスが貼られ、そこから飛んできた、のだと思います。

なお、なぜ上記ドメインから参照されたことになるかというと、メッセから飛ぶ際には「SmartScreen フィルター」と呼ばれる、マイクロソフト製のフィッシング詐欺やマルウェア対策のフィルターが間に挟まるためのようです。

なおこのフィルターはどのサイトに対しても適用されるものであり、別に自分のサイトがセキュリティ上とくに問題あるものとして判定されているわけではないので安心してください。