web-dev-qa-db-ja.com

既存のサイトからHTML + CSS + JSを選択的にコピーするためのツール

ほとんどのWeb開発者と同様に、私はWebサイトのソースを調べて、そのマークアップがどのように構築されているかを確認することがあります。 FirebugやChrome Developer Toolsのようなツールでコードを簡単に調べることができますが、独立したセクションをコピーしてそれをローカルで再生したいのであれば、個々の要素とそれらに関連するCSSをすべてコピーするのは面倒です。そして、おそらくソース全体を保存し、無関係なコードを切り取るのに同じくらいの作業が必要です。

Firebugでノードを右クリックして[このノードにHTML + CSSを保存]オプションを設定できれば素晴らしいでしょう。そのようなツールは存在しますか？この機能を追加するためにFirebugまたはChrome Developer Toolsを拡張することは可能ですか？

htmlcssinternet-explorerfirebuggoogle-chrome-devtools
376
kenwarner

スナッピースニペット

私はやっとこのツールを作成する時間を見つけました。 Chromeウェブストアから SnappySnippet をインストールできます。指定された（最後に検査された）DOMノードから簡単にHTML + CSSを抽出することができます。さらに、コードを直接CodePenまたはJSFiddleに送信できます。楽しい！

SnappySnippet Chrome extension

その他の機能

  • hTMLを整理します（不要な属性を削除し、インデントを修正します）。
  • 読みやすくするためにCSSを最適化します。
  • 完全に設定可能（すべてのフィルタをオフにすることができます）
  • ::beforeおよび::after疑似要素で動作します
  • Bootstrap ＆ Flat-UI projectsに感謝

コード

SnappySnippetはオープンソースです、そしてあなたは コードをGitHub に見つけることができます。

実装

私はこれをしている間かなりたくさん学んだので、私は私が経験した問題のいくつかとそれらに対する私の解決策を共有することに決めました、多分誰かがそれを面白いと思うかもしれません。

最初の試み - getMatchedCSSRules（）

最初に私はオリジナルのCSSルール（ウェブサイト上のCSSファイルから来る）を検索しようとしました。驚くべきことに、これはwindow.getMatchedCSSRules()のおかげで非常に単純ですが、うまくいきませんでした。問題は、文書全体の文脈で一致していたHTMLおよびCSSセレクターのうち、HTMLスニペットの文脈では一致しなくなった部分のみを取っていたことです。セレクタの解析と修正は良い考えのようには思えなかったので、私はこの試みを断念した。

2回目の試行 - getComputedStyle（）

それから、@ CollectiveCognitionが提案したものgetComputedStyle()から始めました。しかし、私は本当にすべてのスタイルをインライン化するのではなく、CSSフォームHTMLを分離したいと思いました。

問題1 - CSSをHTMLから切り離す

ここでの解決策はそれほど美しくはありませんでしたが、非常に簡単でした。選択したサブツリーのすべてのノードにIDを割り当て、そのIDを使用して適切なCSSルールを作成しました。

問題2 - デフォルト値を持つプロパティの削除

ノードにIDを割り当てることはうまくいきました、しかし私は私のCSSルールの各々が〜300全体のプロパティを読むことが不可能にする〜300のプロパティを持っていることを発見しました。
getComputedStyle()は、指定された要素に対して計算されたすべてのCSSプロパティと値を返します。それらのいくつかは空で、いくつかはブラウザのデフォルト値を持っていました。デフォルト値を削除するには、最初にブラウザからそれらを取得しなければなりませんでした（そして各タグは異なるデフォルト値を持ちます）。解決策は、Webサイトから来る要素のスタイルを、空の<iframe>に挿入されている同じ要素と比較することでした。ここでの論理は空の<iframe>にスタイルシートがないということでした、それで私がそこに追加した各要素はデフォルトのブラウザスタイルだけを持っていました。このようにして私は重要ではないプロパティのほとんどを取り除くことができました。

問題3 - 速記されたプロパティのみを保持する

次に気付いたのは、短縮形の同等物を持つプロパティが不必要に印刷されたことです（例：border: solid black 1px、次にborder-color: black;、border-width: 1px itdなど）。
これを解決するために、私は簡単に等価なものを持つプロパティのリストを作成し、結果からそれらを除外しました。

問題4 - プレフィックスの付いたプロパティの削除

それぞれのルールのプロパティの数は前の操作の後にかなり少なくなりました、しかし私は私がまだ聞いたことのないたくさんの-webkit-接頭辞のプロパティを持っていたことがわかりました（-webkit-app-region？-webkit-text-emphasis-position？）。
これらのプロパティのうちのいくつか（-webkit-transform-Origin、-webkit-perspective-Originなど）が役に立つと思われるため、これらのプロパティのいずれかを保持する必要があるかどうかと思いました。しかし、これを検証する方法を考え出していません。ほとんどの場合、これらのプロパティは単なるゴミであることがわかっていたので、それらをすべて削除することにしました。

問題5 - 同じCSSルールを組み合わせる

私が気づいた次の問題は、同じCSSルールが何度も繰り返されることでした（例えば、まったく同じスタイルの<li>ごとに、作成されたCSS出力に同じルールがありました）。
これは、規則を互いに比較し、まったく同じプロパティと値のセットを持つ規則を組み合わせただけの問題です。その結果、#LI_1{...}, #LI_2{...}の代わりに#LI_1, #LI_2 {...}を取得しました。

問題6 - HTMLのインデントのクリーンアップと修正

結果に満足していたので、HTMLに移行しました。 outerHTMLプロパティによって、サーバーから返されたとおりにフォーマットされているため、混乱していました。
outerHTMLから取得したHTMLコードが必要とした唯一のものは、単純なコードの再フォーマットでした。すべてのIDEで利用可能なものなので、それを実現するJavaScriptライブラリがあることを私は確信していました。そして、 私は正しかった（jquery-clean） であることがわかります。さらに、余分な不要な属性を削除する必要があります（style、data-ng-repeatなど）。

問題7 - CSSを壊すフィルタ

状況によっては、上記のフィルタがスニペット内のCSSを壊す可能性があるので、私はそれらすべてをオプションにしました。無効にするには、設定メニューを使用します。

548
Konrad Dzwinel

Webkitブラウザ（FireBugについてはよく分からない）を使用すると、要素のHTMLを簡単にコピーすることができるので、これは邪魔にならないプロセスの一部です。

ある要素のHTMLをコピーする前に（JavaScriptコンソールで）これを実行すると、与えられたすべての子要素と同様に、与えられた親要素のためのすべての計算されたスタイルはインラインスタイル属性に移動されます。 。

var el = document.querySelector("#someid");
var els = el.getElementsByTagName("*");

for(var i = -1, l = els.length; ++i < l;){

    els[i].setAttribute("style", window.getComputedStyle(els[i]).cssText);

}

それは完全なハックであり、あなたは通過するための「ジャンク」なcss属性をたくさん持っているでしょう。

49
Collective Cognition

私はもともと私がChrome（またはFireFox）ソリューションを探していたときにこの質問をしましたが、Internet Explorer開発者ツールでこの機能に出会いました。私が探しているもののほとんど（JavaScriptを除く）

Element Source with Style

結果：

Element Source with Style result

46
kenwarner

私は何年も前にこのツールを同じ目的で作成しました。
http://www.betterprogramming.com/htmlclipper.html

あなたはそれを使って改善することを歓迎します。

29
Florentin

これは、スクラップブックというFirebugプラグインによって実行できます。

あなたは設定でJavascriptオプションをチェックすることができます

enter image description here

編集：

これ も役に立ちます

Firequarkは、HTMLスクリーンスクレイピングのプロセスを支援するためのFirebugの拡張です。 Firequarkは、Firebug（Firefox用のWeb開発プラグイン）を使用して、Webページから単一または複数のHTMLノードのCSSセレクタを自動的に抽出します。生成されたCSSセレクターは、情報を抽出するためのScrapiのようなHTMLスクリーンスクレーパーへの入力として与えることができます。 Firequarkは、HTMLスクリーンスクレイピングを使用するためのCSSセレクタの能力を最大限に引き出すように構築されています。

24
Jitendra Vyas

divclip は、Florentin Sardanの htmlclipper の更新版です。

eS5、HTML5、スコープ付きCSSなど、最新の機能拡張を備えています...

あなたはプログラムで様式化されたdivを抽出することができます：

var html = require("divclip").bySel(".article-body");
console.log(html);

楽しい。

11
ato3787045

必要なプラグインはありません。ワンクリックでInternet Explorer 11のネイティブDeveloper Toolsを使えば非常に簡単に行えます。要素を右クリックしてその要素を調べ、ブロックを右クリックして[要素をスタイルと共にコピー]を選択します。下の画像でそれを見ることができます。

それはのように非常にきれいなCSSコードを提供します。

.menu { 
    margin: 0;
}
.menu li {
    list-style: none;
}
9
GarryOne

最近私は、検査された要素、html、そして関連するcssとメディアクエリだけをページからコピーするためのクロムエクステンション "eXtract Snippet"を作成しました。これにより、実際の関連CSSが得られることに注意してください。

https://chrome.google.com/webstore/detail/extract-snippet/bfcjfegkgdoomgmofhcidoiampnpbdao?hl=ja

5
melwyn pawar

このための単一の解決策を備えたツールは私は知りませんが、あなたは同時にFirebugと Web Developer extension を使うことができます。

Firebugを使用して必要なhtmlセクション（Inspect Element）とWeb Developerをコピーして、どのCSSが要素に関連付けられているかを確認します（Web Developerの「View Style Information」を呼び出す）。マークアップこれは、そのマークアップに関連付けられたCSSを表示します。

それは正確にあなたが望むもの（すべてをワンクリック）ではありませんが、それはかなり近く、そして少なくとも直感的です。

'View Style Information' result from Web Developer Extension

3
GmonC

http://clipboard.com はこれを非常にうまく行います。コピーしたバージョンが元のバージョンとまったく同じであることを期待しているので、実際にプレイすることはできません。

3
Moin Zaman

Firebugでもこの機能が必要です。それまでは、 this オンラインサービスを使用してクラスを削除し、CSSをインラインスタイルに変換するという方法もあります。

3
Acyra

Webページから必要な部分をコピーして、wysiwygエディタに貼り付けるだけです。エディタツールバーの "source"ボタンをクリックしてHTMLソースをチェックしてください。

私がDrupalサイトで作業していたとき、私はこの最も簡単な方法を見つけました。私はwysiwyg CKeditorを使っています。

2
Kevin Siji
jQuery.fn.extend({
getStyles: function() {
    var rulesUsed = [];
    var sheets = document.styleSheets;
    for (var c = 0; c < sheets.length; c++) {
        var rules = sheets[c].rules || sheets[c].cssRules;
        for (var r = 0; r < rules.length; r++) {
            var selectorText = rules[r].selectorText.toLowerCase().replace(":hover","");
            if (this.is(selectorText) || this.find(selectorText).length > 0) {
                rulesUsed.Push(rules[r]);
            }
        }
    }
    var style = rulesUsed.map(function(cssRule) {
        return cssRule.selectorText.toLowerCase() + ' { ' + cssRule.style.cssText.toLowerCase() + ' }';
    }).join("\n");
    return style;
}
});

使用法：$("#login_wrapper").getStyles()

2
geekbytes0xff

ドラッグ可能なブックマークレットとして、 トップ投票の回答 を採用しました。

このページにアクセス して 、[Run jQuery Code]ボタンをブックマークバーにドラッグするだけです。

0
ripper234

私はここで答えとして言及されたすべてのツールを調べました。しかし、彼らはあなたが見つめていた美しい顔で繰り返しの、汚いHTML CSSを与えます。彼らはあなたにJSを与えません。

私がやること：

  1. まず、ページに必要のない広告を絞り込みます
  2. 次に、リンク先のリソースと共にWebページ全体を保存します。
  3. 不要なHTML、CSS、JSを削除する
  4. リソースを1つずつ慎重にリンク解除してください。
0
Amit Kumar Gupta

ページ全体のHTML、CSSなどを保存する Firefoxプラグイン があります。

IE 5.5にはあなたが探していたものがあったことを私は覚えています;）

0
Chris Abrams