ぶーすけの開発ブログ

JavaScriptを書いてFirefoxあたりで確認して動作したと安心してはいけない。この安心がいつもの落とし穴。
InternetExplorer6という難攻不落の城の攻略がまだである。
InternetExplorer6で動作させてみる。そして、動かない。いつものことである。

こんなことが日々繰り替えされているけど、今回もまたである。

JavaScriptで

var Element1=document.createElement("input");Element1.id = "e1";Element1.type="checkbox";Element1.checked=true;document.createElement("body").appendChild(Element1);

上のような感じで書いたのですけど、なぜかInternetExplorerでチェックされた状態で要素が追加されない。
要素を追加した後の属性の変更を許可するということらしい。
それで上のソースをInternetExplorerで動作させるには

var Element=document.createElement("input");Element.type="checkbox";document.createElement("body").appendChild(Element);Element.checked=true;

とすると動作する。

また、

var Element1=document.createElement("div");Element1.id = "e1";var Element2=document.createElement("input");Element2.id = "e2";Element2.type="checkbox";Element1.appendChild(Element2);Element2.checked=true;document.createElement("body").appendChild(Element1);

親要素もjavascriptで新たに追加する場合、上のようなソースの書き方の場合、InternetExplorer6ではチェックが入らない。InternetExplorer7ではチェックがはいります。

InternetExplorer6でも動作させるには要素を作った時点でDOMに追加するといい感じです。

var Element1=document.createElement("div");Element1.id = "e1";document.createElement("body").appendChild(Element1);var Element2=document.createElement("input");Element2.id = "e2";Element2.type="checkbox";Element1.appendChild(Element2);Element2.checked=true;

これから推測するところはInternetExplorer6はブラウザ上に表示されてからcheckboxのchecked属性は変更できる。
InternetExplorer7はJavaScript内部で要素を作り出せた時点でcheckboxのchecked属性は変更できるということになるのでしょう。ちなみにInternetExplorer8では比較してないのでわからないけど、InternetExplorer7と同じ動作かなと思います。

参考にしたサイト
http://motivation.drivendevelopment.jp/2009-03-16-1.html
http://smil.exblog.jp/5349616/

ちなみに、上のコードは自分で書いたコードからすこし変更を加えて、変更を加えたあとは動作チェックしていませんので、あしからず。

Opera11.00にバージョンアップして、Skbooの動作確認をしていたら、「作業中断」「作業再開」の機能が正常に動作できなかった。

結果としてJavascriptの警告で以下のようなメッセージが出ていました。

JavaScript
User Javascript thread
Your browser does not support scriptStorage or storage quota is not specified.
Set "opera:config#PersistentStorage|UserJSStorageQuota" >= 500 Kb.

これにしたがって、Operaでの設定が必要らしい。このJavascriptの警告はいろいろと検索してみた結果、Opera11.00からUserJSStorageQuotaという設定項目があるみたいです。

Opera11.00をお使いの方は
opera:config#PersistentStorage|UserJSStorageQuota
をクリックすると設定ファイルエディタが開いて「500」と入力すれば、「作業中断」「作業再開」の機能は正常に機能するようになります。

設定ファイルエディタの詳細については
http://ja.opera-wiki.com/設定ファイルエディタ
に詳しく書かれています。

ちなみに、Opera11.00から導入された拡張機能で「NoAds」の拡張機能を導入する上でもopera:config#PersistentStorage|UserJSStorageQuotaの設定が必要だそうです。

そういえば、UserJSStorageQuotaの設定をする前にOperaの拡張機能をためしてみたくなって、「NoAds」をインストールして「NoAds」のpreferencesを開こうとしても開かなかったけど、今はきちんと開くようになってます。  

skbooのペイントツールの修正をしていて起こったJavascriptの動作です。Opera10.63で確認したことでOpera11.00ではどうなのか不明です。

skbooのペイントツールは、javascriptライブラリのscript.aculo.usのdaragbleを使ってキャンバスウィンドウのドラッグアンドドロップで移動ができるようにしています。

Operaでペイントツールのページを開いたときに、なぜかキャンバスウィンドウなどがドラッグアンドドロップで移動できないのです。

きちんとは動作の確認の調査をしてはいませんが、原因はdaragbleに指定した要素の内包した要素に原因がありそうです。内包した要素の中にcssのスタイルでposition:relative;を適用していると、ドラッグアンドドロップできない感じです。

ただし、なぜかページを開いた後にブラウザのリサイズやスクロールなどの操作を行うと、ドラッグアンドドロップできるようになる。かなり不可解なり。ちなみにOpera以外のブラウザではこの現象は見受けられませんでした。

はっきりとした原因は調査しきれていないけど、余計なCssの指定や余計なDOMを減らして対応しました。

今回、SkbooのペイントツールはOperaとそれ以外で機能の違いがあり、ペイントツールに関連しているCssやJavascriptなどのファイルを別々にしていたのを共有化しようと作業をしていました。

別々に開発していることもあって、修正のたびに二度手間になっているところもあり、修正作業を何度もしていることもあって、バグを発生させてしまっているところもあるように思えたからです。

このようなことが起きるとなかなかすべてのブラウザで関連しているファイルを共有化していくのもなかなか骨のいるものになりますので、悩みますね。

2010年5月22,23日と二日間、パックマンの30周年を記念してgoogleのロゴがパックマンになってました。

驚かされたのはロゴがパックマンになっているだけではなく、ゲームとして遊べるのですよね。

かなり公表だったみたいで、24日以降も公開されることになっているようです。アドレスはhttp://www.google.com/pacman/です。

ゲームのスタートの仕方はページを開いてから10秒過ぎると自動でスタートします。または検索ボタンの横に配置した「Insert Coin」を押すと始まります。

「Insert Coin」を2回押すと二人プレイになります。

ゲーム自体はマップが違う以外はかなり忠実に再現してあるみたいですね。

これはほんとにすばらしいな。

Yahoo! ブックマークのブログパーツを設置しました。

Yahoo! ブックマークにURLが登録されているようなので、「Yahoo!ブックマークに登録」ボタンと「ブックマーク人数表示」リンクの両方を設置しました。

ただ、yahooのブログパーツの組み合せ生成ステップでは開いているページをブックマークする仕様になっていて、すべてのページで自分で作っているサービスを紹介してそこに登録ボタンをあわせておくのには向いていません。そこでJavaScriptを少しいじって設置してあります。

下のが「Skboo!!(β)」というタイトルで「http://skboo.net/」のアドレスの登録ボタンとそのURLをどれだけの人数が登録しているかの数の画像ボタンのソースです。

<a href="javascript:void window.open('http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t='+encodeURIComponent('Skboo!!(β)')+'&amp;u='+encodeURIComponent('http://skboo.net/')+'&amp;ei=UTF-8','_blank','width=550,height=480,left=100,top=50,scrollbars=1,resizable=1',0);"><img src="/media/image/ybm16.gif" width="16" height="16" alt="Yahoo!ブックマークに登録" style="border:none;"></a><a href="javascript:void window.open('http://bookmarks.yahoo.co.jp/url?url='+encodeURIComponent('http://skboo.net/'));"><img src="http://num.bookmarks.yahoo.co.jp/ybmimage.php?disptype=small&url=http://skboo.net/" style="border:none;"></img></a>

それで、「Skboo!!(β)」と「http://skboo.net/」の箇所を適当な情報に置き換えれば違うアドレスの登録ボタンを同一ページに並べて設置できるという感じになります。