[JavaScript]Pinterestを参考にブックマークレットを作る

ここ数年流行しているPinterest等のキュレーションサイトは、簡単にコンテンツをクリップするために、ブックマークレットを提供していたりするんだけど、自分もPinterestのを参考に作ってみたので、発見したことを書きます。

※最近ではchrome拡張機能とかも提供しているみたいだね。

javascript:void((function(d){
    var e=d.createElement('script');
    e.setAttribute('type','text/javascript');
    e.setAttribute('charset','UTF-8');
    e.setAttribute('src','//assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);
    d.body.appendChild(e)
})(document));

これが、pinterestのブックマークレットです。(見やすいように改行は入れました。)
ここで入手できます。

これを見ると、開いているサイトのＨＴＭＬに、無理矢理自サーバに配置したjavascriptを呼び出すscriptタグを挿入しています。

その呼び出したjavascriptは非常に長いので説明を省略しますが、クリップする画像を選ばせるようなプロンプトを出させたり等、自サイトのjavascriptを書くかのごとく書いています。

ただし、jquery等のライブラリをscriptタグ挿入で呼び出しても、変数、関数の共有ができないので使えない、とのこと。（どこかのサイトに書いてあったのだが、どこかわからなくなってしまった）
なので、生のjavascriptを書く必要があります。

CSSファイルはlinkタグ挿入により、反映することができます。なので、自分のスタイルを反映することができます。

また、このjavascriptから、window.open()等で自サイトのページを開く場合、ポップアップブロックが発生する、という問題がおこります。

この問題への対処はhtmｌにonclick属性を使い、自サイトを開くということです。
このページを参照してください。ポップアップブロック回避策

なので、プロンプトはjavascriptのalertやconfirmを使うのではなく、htmlでモーダルっぽいものを作り、そのOKボタンのタグにonclick属性をつけることになります。

一連の流れは以下のようになります。（自分の場合）

１．ブックマークレット起動。→自サーバのjavascript（Ａ.jsとする。）が呼び出される。
２．A.jsにて、自サーバのcssを呼び出すlinkタグを挿入。
３．A.jsにて、モーダルっぽいHTMLを挿入。自サーバを開くボタン（Bボタン）にはonclick属性でwindow.openを紐づけてある。
４．Ｂボタンを押すと、自サーバの画面が開く。そのリクエストにはそのサイトから抽出したい情報をパラメータとしてつけておく。

ここで一つ注意点、以下のポストでも書いたように、自サーバ側の設定によっては、違うドメインからの遷移により、セッションが切れるようにしている場合がある。（CakePHPではデフォルトで切る。）そうすると、ログインしていたのに、別画面で自サイトを開いたら、再度ログインしなければならなくなってしまう。なので、チェックをはずす設定をする必要があります。
[CakePHP]他のサイトを経由するとセッションが切れてしまう件への対処