1. ホーム
  2. Blog
  3. snsにリンクを貼りつけるためのブックマークレットを作る課程で分かったブラウザの制約

snsにリンクを貼りつけるためのブックマークレットを作る課程で分かったブラウザの制約

山本 有悟

山本 有悟

コラム

image 山本ゆうごです。先にブックマークレットのリンクを貼っときますね

cpuprt ← このリンクをお気に入り(ブックマーク)に入れてください。(02/03(火)11:23 Aタグ中でエスケープしていませんでした!今なおしました!すみません)

snsやブログにリンクを貼りつける際に皆さんはどうしているでしょうか。

要件をまとめると、以下のシナリオになるはずです。

  1. タイトルとURLを取得
  2. それをいい感じに文字列編集してクリップボードにコピー
  3. snsやブログにペースト(これは人手)

 

1に関しては、システムで是非やって欲しいことです。URLはアドレスバーからコピーできます。「ALT+D→CTL+C」のツーアクションです。ところが、タイトルがコピーしづらい。タイトルはタイトルバーにでているものであって、ドキュメント中にでてきてない可能性がある。

2に関しては、システムでやって欲しいことですが、ここ最近は厳しくなってきています。

歴史をたどると、IEの場合はクリップボードオブジェクトというのが、Windowオブジェクト配下にあって、クリップボードに値をセットすることがIE6まではできました。(取り出しはデフォルトのセキュリティではダメ)。ところがIE7になってからはクリップボードオブジェクトの利用そのものがNGになりました。NGと言ってもダイアログがでるだけではありますがやっぱり不便です。セキュリティ設定を甘くすればいいのですが、人に勧めるツールでは無くなってしまいます。

これを回避するためには、Flashを使うという方法があったのですが、やはり時代の流れには逆らえず、Flashでもクリップボードへの値のセットはバージョン10からプログラムからは無理になりました。(必ずユーザのクリックイベントの中でやる必要がある)

ということで、クリップボードは難しい。

どうせ、3でユーザオペレーションが発生するならということで、ブラウザ上でユーザーオペレーションさせようかと、promptの中に編集済みのテキストをセットすればいいやと思ったのですが、ブックマークレットからpromptを出すのはIEの場合はNGになっていました。まぁ厳しい。

ということで、「クリップボード使えない」「prompt使えない」というのがブックマークレットの制約になりつつあります。

じゃぁってことで、ドキュメントの中にテキストエリアをドーントとって、そこに編集済み文字列をセットしたのがこのブックマークレットということになりました。

image 改めて、機能を説明すると、ブックマークレットをクリックすると、タイトルとURLを改行でつなげます。それをドキュメントの先頭にテキストエリアを突っ込んで、文字を全選択してくれるところまでやってくれます。

あとは手作業でコピーしてくださいなということです。コピペならまぁ一瞬かと。

テキストエリアのダブルクリックでテキストエリアは消えますので立つ鳥跡を濁さないということも出来ます。

この例では、sns向けにテキストとしてつないでいますが、ブログ用にaタグを生成するというのもほぼ同じロジックです。

クリップボードやpromptを使わない(使えなかったから)ので、IE、Firefox、Chromeの3ブラウザで動くので、投稿サイトによってブラウザを使い分けている場合にも(例えばココログはIEが便利だったりする)、同じ操作感でリンクを生成できます。

cpurlt テキストリンク生成

cpurlh Aタグ生成

アドオンで実現という選択肢もあるとは思うのですが、IEもFirefoxもアドオンを入れまくるとめちゃくちゃ遅くなるので、個人的にはアドオンは最小限に済ませたいなぁと思っています。

コメント (1)

公開頂いているブックマークレットを使うと出てくるクリップボードは出た後に消せないのですか?(ブラウザはgoogle chrome利用です。)

下記の記事で書きました『title+URL』と言うブックマークレットもシンプルにtitleとURLが取得できます。

-googlechromeを最強にするブックマークレット集②AutoPagerize&LDRize|digital divide(デジタルデバイド)に負けない http://ameblo.jp/digitaldivide/entry-10206049277.html

他にも使ってらっしゃるブックマークレットがあればぜひ情報交換させて頂きたいです。

  • 投稿者: Kinoshita

トップへ戻る