« 2011年2月 | トップページ | 2011年4月 »

2011年3月

2011年3月28日 (月曜日)

z-indexを無視してFlashが上に重なってしまうのに対処

 JavaScriptでDOMな感じのプログラミング。z-indexを使ってレイヤーを前面に表示しようとすると、それを無視してFlashが最前面(一番上)に覆いかぶさってしまう。これをなんとかしたい。

 静的なHTMLの場合、というか、自分で作ったHTMLならパラメータの指定でなんとかなるという。Lightboxを使った際の回避方法として以下が見つかる。

Flash コンテンツが z-index を無視して覆い被さってしまう件 :: drk7jphateb - Flash コンテンツが z-index を無視して覆い被さってしまう件 :: drk7jp

Flash に wmode ってパラメータがあります。このパラメータで Flash の背景を透明化または不透明化の設定が可能です。この透明化の機能を利用することで Flash コンテンツが z-index を無視して一番上に表示されてしまう不具合を解消することができます。
 なるほど。

 しかし、今回はこれでは解決できない。ブックマークレットで、どのページでもFlashを最前面にしないようにしたい。z-indexを使ってレイヤーを作るということで参考にしたのがこれ。とてもスタイリッシュなiPhone、iPod touchのブックマークレット。

はてなブックマーク用ブックマークレット for iPhone - sarusaruworld lab - Web Labhateb - はてなブックマーク用ブックマークレット for iPhone - sarusaruworld lab - Web Lab

 上記はiPhone用なのでFlashは関係ないのだけど、参考になるコードがあったのでそれをFlashコンテンツにも応用。

 自分が表示したい覆いかぶさるレイヤー(以下、自前レイヤー)を表示する際に、Flshaコンテンツをいったん消す。で、自前レイヤーを消す際に、Flashコンテンツの表示を元に戻すという手順になる。そのために2つの関数を作成。以下、コード。

続きを読む "z-indexを無視してFlashが上に重なってしまうのに対処"

| | コメント (0) | トラックバック (0)

Safariでtextareaを選択状態にできない

 ツール作成中。利用者の便宜を考えてtexareaをクリックしたらtextarea内の全体を選択状態にしたい場合。

 textareaとかinputをクリックして「Ctrl+A」とか「Cmmand+A」とかすれば全体を選択状態にすることができる。でも、全選択するのが面倒。クリックしたら選択状態になったほうが楽。ということで、以下のようにする。

 <textarea onfocus="this.select()"/>

 しかし、Safariではうまくいかない。

 これはiPhone対応をやったときにもはまったポイントだった。

 のちに調べてみるとiPhoneでは長押しで「すべてをコピーする」みたいなやつがあったので実際には不要だったのだけど。ということで、PC、Macなどで対応できればいいや、ということで調べる。

 前に調べた対処方法では、setTimeoutで10msとかタイミングをずらしてselectの処理をする、というものだった。どこだか失念したので、今回はあらためてメモ。

 ここにあった。

トラックバックURLをコピーしやすく - 万年床生活者の備忘録

解決策として、以下のように変更すればWindows・Macを問わずほぼ全てのブラウザでトラックバックURLの一発選択が可能になるとの事です。

 ということで、こういうやつ。

 <textarea onclick="this.focus(); this.select()" />

 たしかにうまくいく。しかもシンプル! 例によってWindows版のSafariだけでテスト。Mac版はわかんないんだけど、上記エントリーの人が試してOKだったらしいのでこれでいくことに。ありがとうございます。

| | コメント (0) | トラックバック (0)

SafariでブックマークレットでDOMに出力すると文字化け

 ブックマークレット作成中に文字化けではまったのでメモ。「広めたい情報を効率よくリンク(タイトルを部分引用付きでリンク作成するブックマークレット): point of view pointhateb - 広めたい情報を効率よくリンク(タイトルを部分引用付きでリンク作成するブックマークレット): point of view pointでもSafariでテストしてるのだけど、うまくいかなくて2バイト文字の出力をやめていた(最低限にしてごまかした)。

 先のエントリーに続き、Safariのみで発生する現象(Windows版のみテスト、Macはどうなんだろう?)。

 ブックマークレットで外部スクリプトを読み込む方法も試す。これでも同じように文字化けしてしまう。いろいろ調べると、外部スクリプトを読み込む(script要素をappendChildするとか)際に、「charset」をすることでなんとかなることを発見。

 追加するscript要素に「.setAttribute('charset','UTF-8'」)みたいな感じで対処。

 しかし、ブックマークレット単体でやる場合にはこういうことができない気がする。みんなどうしているのだろう?

 ということで、上記ブックマークレットについては2バイト文字を出力しているTwitter用の対処はまだできてない(引用部分を囲む「」が文字化けする)のだけど、新たに外部スクリプトを読み込む方法で作り直している最中。

| | コメント (0) | トラックバック (0)

Safariのlocation.hrefで文字化け

 JavaScriptでツールを作成中。複数のブラウザで動作テスト。Safariだけおかしな状況になる。

 問題が出るのはlocation.href。

 Just Metal, Just Baroque.: Safari/Chrome Extension を作るときは location.href でなく document.URL

例えば 2 バイト文字が入っている場合、location.href では Safari と Chrome では異なる結果を返してしまう。

 同じWebKitでも2者で異なる結果となる。ということで、上記エントリーで紹介されているのが、

document.URL であれば双方ともエンコードされた値となるので、Safari/Chrome 共に同じソースでいける。
 という方法。なるほど。ありがとうございます。

 はてなブックマークボタンのソース(http://b.st-hatena.com/js/bookmark_button.js)を見ると同様の問題への対処がなされていることを発見。

var url = location.href;
/* Safari は location.href でパス中の URI エスケープを
* デコードしてしまうので、document.URL も調べてみる
*/
if (url.length < document.URL.length)
url = document.URL;
 とある。長さを見て判別、ということをしているわけだ。

 ということで、今後使うことになるのでメモ。

続きを読む "Safariのlocation.hrefで文字化け"

| | コメント (0) | トラックバック (0)

2011年3月18日 (金曜日)

広めたい情報を効率よくリンク(タイトルを部分引用付きでリンク作成するブックマークレット)

(追記)
改良版を作成しました。以下からお試しください。
今見ているページをカンタンに紹介。リンクと引用を手間なくできるブックマークレットはてなブックマーク - 今見ているページをカンタンに紹介。リンクと引用を手間なくできるブックマークレット
(追記終わり)


 Twitterやブログで情報を発信しようとしている人も多いかと思います。そのための一助となれば。

 手っ取り早く言うと、Webで見ている記事/ページを紹介した場合、以下のブックマークレットを利用すれば、Twitter投稿時なら、このような形で一発でコピーできるようになります。

記事タイトル / http://www.example.com/ 「引用したい部分」

 こんな感じ(実際には色はつきません。ここでは、見やすいようつけてあります。以下同じ)。

 また、テキストのみ使えるBBSやSNS用にはより見やすい形での出力が可能です。BBS/SNS用の場合は以下のような形になります。


記事タイトル
http://www.example.com/
--------
引用したい部分
--------

 さらに、HTMLが使えるブログ用のコード出力も可能です。
 ひとまず、Windows版IE 7、Firefox 3.6.3で動作確認のうえ公開(随時情報追加予定)。

●どんな時に使う?

 有用な情報を拡散するために、ニュース記事やブログ記事などをTwitterやブログで紹介する際の手間をなるべく省き、効率よく(すばやく)作業を進めたいものです。通常は、入力欄で以下の手順をとることでしょう。


  1. URLをコピーして投稿欄に貼りつけ

  2. タイトルをコピーして投稿に貼りつけ

  3. 引用したい部分をコピーして投稿に貼りつけ

 このように、なんどもコピー&ペーストを繰り返すことになります。けっこうな手間です。

 これを解消するためのブックマークレットが以下で公開されています。

 snsにリンクを貼りつけるためのブックマークレットを作る課程で分かったブラウザの制約 : Media Technology Labs (MTL) : メディアテクノロジーラボ ブログ

 上記のブックマークレットを使えば、手順の1、2におけるコピーが1回で済みます。ここではさらに、記事内で引用したい部分も同時にコピーできないかと考え、改造版を作成してみました。

続きを読む "広めたい情報を効率よくリンク(タイトルを部分引用付きでリンク作成するブックマークレット)"

| | コメント (0) | トラックバック (0)

« 2011年2月 | トップページ | 2011年4月 »