こんにちは、Habrの親愛なる訪問者。
ほとんどすべてのサイトでブックマークレット手法を使用して使用できる小さなスクリプトを共有したいと思います。 だから...
これは何ですか
タイトルからわかるように、これは「タグ」のゲームです。 このゲームの特徴は、ページの現在の可視画像を使用することです。 開発中、Nicholas von Hertzen（Niklas von Hertzen）のhtml2canvasライブラリを使用しました 。これにより、ユーザー側のブラウザーでスクリーンショットを撮り、結果をキャンバスに配置できます。 「タグ」の競技場のソースとなるのは、この画像（またはその一部）です。
これはなぜですか？
彼らが言うように、ただの楽しみのために。 私のサイトの1つでの変更に関連して、サイトにある種のイースターエッグを埋め込みたいと思いました。 当初は、特定の時間後にサイトが画面から「崩れる」か、特定の場所をクリックするというアイデアでした。 しかし、その後、ユーザーのアクションを必要とする対話性は、いくらか面白くなると思いました。 選択はタグにかかっていました。
どのように機能しますか？
既に述べたように、ゲームはhtml2canvasライブラリを使用して、ユーザーのブラウザーでスクリーンショットを作成します。 ライブラリは純粋なJavaScriptで記述されていますが、使用したjQueryプラグインが含まれています。
ライブラリの基本的な使い方は非常に簡単です。
$(element).html2canvas({
onrendered: function(canvas) {
// ...
}
});
新しく作成されたキャンバスは、パラメータとしてコールバック関数に渡されます。
私が作成したスクリプトは、本質的にjQueryプラグインです。 それを呼び出すことは非常に簡単です：
$('body').puzzle15({
tileCount: 4
});
同時に、bodyはセレクターとしてだけでなく、ほとんどすべての要素として使用できます。 しかし、身体以外のものでの作業はほとんどテストされていません。 バグ報告と建設的な批判に喜んでいます。 念のため、セットの最初の要素のみが使用されることを明確にします。そのため、セレクターに関係なく、画面には1つのスポットしかありません。 この場合、要素の大きさ（または小ささ）に関係なく、要素の目に見える表面全体がプレイフィールドを生成するために使用されます。 元の要素を見落とさないように、追加のdiv基板が使用されます。
ゲームにボディを使用する場合、上記のボディとは異なり、画面に表示される部分のみが競技場に使用されます。 また、ユーザーが上下にねじれるのを防ぐために、スクロールが無効になり、競技場の固定位置が設定されます。 ただし、ウィンドウのサイズを変更する処理はありません。 スクロールをオフにした方法はここでスパイした 。
「タグ」がどのように配置されているかを説明することにはあまり意味がありません。それは既にHabréにあり、主題とはほとんど関係がないからです。 まあ、一般に、コードは非常に単純で、小さなコメントが含まれているため、理解に問題はないはずです。 それでも、私は質問に答え、建設的な議論に参加する準備ができています。
もうプレイしたいです。 どこにプッシュしますか？
このゲームをインストールするには、 ここに行き、リンクhtml2canvas + puzzle 15をブックマークバーに転送する必要があります。 転送後、任意のサイト（たとえば、habrahabr.ru）を開き、ブックマークレットを呼び出します。 表示されるウィンドウで、フィールドディメンションを入力する必要があります。
Operaユーザーにすぐに警告したい ：長いページでは、スクリーンショットを撮るときにOperaがひどく遅くなりますが、それでも正しく動作します。 FF、Chrome、Safari、IE9、Operaでテストしましたが、後者でのみこのような問題がありました。 ライブラリでスクリーンショットの一部しか撮れなければ、フリーズを回避できると思います。 一般的に、その場合は警告します。
ソースコードのダウンロード先
ブックマークレットを含む完全なアーカイブは、 こちらからダウンロードできます 。
html2canvasライブラリのソースはgithubからダウンロードできます。
upd：スクリプトがYandexで動作しないことに気付きました。 このサイトや他のサイトでの問題を回避するために、同じオリジンポリシーに適合しないスクリプト内の画像のプロキシをオフにしました。 事実、プロキシはデフォルトで開発者のhtml2canvas側で処理され、スクリプトがそこでクラッシュすることがあります。
upd2：一部のページが長すぎる場合、エラーが発生する可能性がありますNS_ERROR_OUT_OF_MEMORY：コンポーネントがエラーコードを返しました：0x8007000e（NS_ERROR_OUT_OF_MEMORY）[nsIDOMHTMLCanvasElement.height]。 残念ながら、身体の領域を制限する方法がないため、エラーを回避することはできません。