これはハブに関する最初の記事です。サービスのページの美しいスクリーンショットをどのように作成し、どのようにこれに到達したのか、どのレーキを踏んだのかについてお話したいと思います。
このサービスは、更新フィードを表示するために非常に重要です。 そして、より速く、より現実に近い（読み取り-フラッシュサポート）動作するほど、ユーザーにとってより快適になります。
インターネットを探索した後、次のオプションが見つかりました。
- 1.サイト
- BrowserShots-どうやら、名誉あるベテラン。 無料で、多くのブラウザをサポートしています。スクリーンショットは、それがない場合よりも高い優先度でスクリーンショットを撮ることができます。 喜びは、それがオープンソースであり、ソースがPythonであることです。 悲しいことに、ほとんどのブラウザのスクリーンショットは機能せず、フラッシュはサポートされておらず、撮影したスクリーンショットの一部が壊れているようです。 レイアウトデザイナーに焦点を当てています。
- WebShots Pro -Googleの最初のページからも。 既に興味深いAPIがあり、使用コストはボリューム、写真のサイズ、サービスラベルの存在に依存します。 しかし、あなたは信じられないでしょう、少年たち-IEを使ってスクリーンショットを撮ります！ 一般に、それらはすべて明確です。 まあ、実際には彼らはそれを超えて疑わしいように見えます。
- thumbalizrベータ版 -有望な人、利用可能なAPI、有料サービスは透かしを無効にすることにありますが、フラッシュはサポートしていません。
- url2png-ある程度までのすべての以前のサイト、thumbalizrを除く、率直に言って、razdolbayski-do not care。 そして、私には、彼らは同じように働くようです。 url2pngは非常に良い印象を残します-ただし、これもフラッシュを削除せず、残りよりもコストがかかります。
- websnapr-まあ、途中までで、特別なことは何もありません。
- 2.プログラム
- kthml2pngは名誉ある老人です。 ほとんどサポートされていません。 一般的に、私たちはそれを試していません。
- CutyCaptは最新のプログラムです。 しかし-「CutyCaptには多くの既知の癖があります。」 時々彼はただスクリーンを撮ることができません。 フラッシュで友達を作るのは難しいです。
- PhantomJS-私が知る限り、そのようなプロジェクトの中で最もアクティブです。 スクリーンショットだけでなく、多くの機能。 たとえば、ページのコンテキストでJavascriptを実行できます。 ただし、プラグイン（Flashを含む）に関する著者の立場は次のとおりです。機能するはずですが、何も保証したくはありません。 これに関する興味深い問題を以下に説明します:)
一般的に、これを見て理想を見ない中で、最も本格的なスクリーンショットを実現するための最初の試みは、 Xvfbの下でのFirefoxの起動と、30秒のタイムアウトによるスクリーン全体のスクリーンショットでした。
Xvfbは、このような目的に不可欠なユーティリティです。 これは仮想フレームバッファであり、サーバーにフルタイムXを配置せず、解像度を問わず「ディスプレイ」を実行できます。 さて、それらのアプリケーション:)
もちろん、この方法は不完全でした。 最初に、firefoxは頑固であることが判明し、常に自分自身またはプラグインを更新するためのウィンドウをスリップしようとしました。 第二に、時々私はスクリーンショット（単色の写真になった）またはvisを台無しにしました。 第三に、30秒後に厳密にスクリーンショットを撮ることは明らかに最適ではありません。サイトが以前にロードされた場合、待つことは何もありません:)そしてもちろん、彼はメモリを食べました。
次のステップでは、Qtで独自のユーティリティを作成しようとしました -結局、スクリーンショット制作サービスは私たちにとって非常に重要だからです。 Qtは、ほとんどのそのようなプログラムの作成者によって使用される無駄ではありません。最新のエンジンと便利なAPIがあります。 問題はほとんどありませんでしたが、それらは残りました-時々ユーティリティがハングし、時々スクリーンショットが壊れました...そして何らかの理由で、フラッシュを備えたバトルサーバーでは動作しませんでした。
このユーティリティの開発者自身が、ある時点でPhantomJSに切り替えることを提案しました -これを利用しました。 状況は再び改善されましたが、完全ではありません。 また、時々ハングし、常にエラーを引き起こすリンクと散発的な障害の場合があります。 フラッシュも機能せず、黒い長方形が表示されましたが、これは原則としてすでにある程度適しています。
しかし、PhantomJSはページでjsを実行できるため、DOMからページの説明（メタタグまたはテキストから直接の秘密のアルゴリズム）、見出しを取得し、潜在的にあらゆる種類の興味深いことを行うことができます。たとえば、iframeでの表示を禁止するページを定義します。これは私たちにとってかなり重要な機能でもあります。 HTMLは非常に複雑なため、サーバー上でHTMLを操作するのは面倒です。 ブラウザエンジンは、いじめに耐えるために何十年も慣れてきました。
だから私たちは彼と一緒に長い間住んでいましたが、かなりの量のリンクを追加し始めたとき、Phantomは私たちに何か新しいことに満足しました-並行して実行されているプログラムのいくつかのコピーはフラッシュでリンクを処理し、突然それを削除し始めましたが、たとえば、1つのスクリーンショットでビデオは別のリンクから取得され、2番目のスクリーンショットでは、ビデオの代わりに、一度に2つのビデオの組み合わせがありました。 要するに、消化管を解剖した。
Google Chromeには一般にフラッシュプレーヤーが組み込まれていることを考えて覚えていましたが、すべての自作プログラムが信頼性の欠如に苦しんでいたことはすでに明らかでした。 これは、Chromeのせいではありません。さらに、PhantomJSと同様の機能を備えた純粋なjsで拡張機能を記述するのは非常に簡単です。
彼はまた、すべての魔法のコマンドラインスイッチを見つけました。これにより、インターフェイスや迷惑な提案なしで実行できます。 また、彼はSTDERRでの記述方法を知っていて、「シークレットモード」で動作します。このモードでは、スクリーンショットを撮ることで最も再現性の高い結果が得られます。 CSSセレクターの全機能が利用可能になり、フラッシュが有効になりました 。
一般的に、Google Chrome はエロティックな夢をすべて実現しました ;）
実際に、スクリーンショットは、ブラウザが機能する画面全体のスクリーンショットに加えて、特別な魔法のサイト用の特別なケースで撮影されています。
ある意味で、歴史はらせんを作りました-私たちはブラウザから始め、ブラウザで終わりました。 Chromeでこのタスクを実行するだけで、はるかに簡単になりました。 はい、Firefoxで拡張機能を作成することもできます。拡張機能を使用すると、Chromeで実行するのと同じことを実行できる可能性があります。 Firefoxのツールバーを作成した後、保証します:)
そして、彼は記憶を慎重に扱います。 ちなみに、Chromeでは外部ユーティリティなしでスクリーンショットを撮ることもできます-data-uriの形で取得できますが、皮肉なことに、このモードではフラッシュは削除されません:)
したがって、長い試行錯誤を避けて、独自のスクリーンショットサービスを取得する方法に関する小さなチェックリストを次に示します。
- ジョブキューを使用します。 Resqueをお勧めしますが、MQ、Kestrel、リレーショナルデータベースでも可能です。 主なことは、いくつかの並列ハンドラーで正常に動作することです。
- 必要な数のXvfbセッションを異なる「ディスプレイ」で実行します
- DISPLAY =：1 / opt / google-chrome / google / chrome ...などの必要なパラメータを使用してGoogle Chromeを起動するキューハンドラを記述します。 パラメーターのリストは、 http ： //src.chromium.org/svn/trunk/src/chrome/common/chrome_switches.ccにあります。
- ページの読み込みの完了を監視し、外部に信号を送信するGoogle Chrome拡張機能を作成します。 ドキュメント： http : //code.google.com/chrome/extensions/getstarted.html
- ジョブキューに必要な数のハンドラーを設定します。各ハンドラーはDISPLAYを使用します。 DISPLAYが使用可能であることを確認してください。 これは、X11ファミリーのコンソールツールで簡単に行えます。
- 拡張機能からの信号でスクリーンショットを撮るか、 captureVisibleTabメソッドを使用しますが、フラッシュ（およびその他のプラグイン）は削除されません
ステップ「...」と「Profit！」を忘れないでください;）
最終的に、私は私が見たすべての商業的な対応物を超えるソリューションを持っていると思います。