httpsでホームページにアクセスすると、以下のような警告が出る場合があります。

このページにはセキュリティで保護されている項目と保護されていない項目が含まれます。

保護されていない項目を表示しますか？

これは、呼び出したhtmlの中にhttpのコンテンツが含まれているのが原因です。例えば、htmlはhttpsで呼び出しているのに、htmlの中に含まれる画像がhttpで呼び出されているような場合に起こったりします。

jQueryのライブラリのひとつにthickboxというのがあります。これをhttpsで利用すると、httpのコンテンツを表示しようとしているわけではないのに、IE6で同様の警告が出ます。

いろいろ調べていると、thickbox, https, ie6 and os x firefox compatibility issues | disjoint thoughtsに同じような現象について書かれているのを見つけました。

なるほど！原因がわかりました。thickboxではiframeをsrc属性なしで利用しているからです。IEではSSLの時、iframeのsrc属性がなかったり、値を設定していなかったりするとセキュリティ警告のメッセージが出ることがあるようです。
[PRB] FRAME/IFRAME を含むページを SSL により参照するとセキュリティ警告メッセージが発生する

なので、iframeのsrc属性にブランクのhtmlを設定するようにthickbox.jsを修正します。ん？よく見ると、コメントの方にもっと良いやり方がありました（「UPDATE:」として追記もされています）。
thickbox, https, ie6 and os x firefox compatibility issues | disjoint thoughts
このやり方で直すことにします。

thickbox.jsの場合、38行目の、

$("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");

のiframeの部分を

<iframe id='TB_HideSelect' src='javascript:false'>

に直します。

ただ、私の場合、thickbox-compressed.jsを使っていたので、場所を見つけるのが大変です。

thickbox-compressed.jsでは、jsファイルの容量を抑えるため、スペースやタブ、改行を省いてあったり、変数や関数名を短縮したり、ソースの書き方を変えたり、といった圧縮がされているからです。

何とか見つけました。
1行なので、場所を説明しづらいですが、

|iframe|

という場所があります。|iframe|という文字列を検索すると1箇所しかないので、そこを

|iframe src=\’javascript:false\’|

に修正します。

これで、https環境でthickboxを利用していても、不要なファイル（ブランクのhtml）を用意することなく、警告が出ないよう対応することができました！

flashcastでは、WordPressのテンプレートにオリジナルのthemeを使用しているのですが、プラグインとjQueryのライブラリ併用時に、ある現象が発生していました。

現象

Bloggerを使用していた頃、ソースの表示にはsyntaxhighlighter – Project Hosting on Google Codeを利用していました。

WordPressに移行してからはWordPress › SyntaxHighlighter Evolved « WordPress Pluginsというプラグインを利用しています。

また、以下のような表示をしたいので、

jQueryのライブラリのひとつである、ThickBox 3.1を使っています。

これらを併用しているときに、IE6、IE7で、thickboxのダイアログを閉じた後も背景が非表示にならない、という現象でした。ソース表示を本文に含んでいない記事の場合には、この現象が発生しないので、併用しているときにのみこの現象が発生することがわかりました。

対策

この問題を回避するために、thickbox.jsを一部（tb_remove関数の中）カスタマイズしました。

●変更前

	$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});

●変更後

	$("#TB_window").fadeOut("fast",function()
		{
			$('#TB_window').trigger("unload").unbind().remove();
			$('#TB_overlay').trigger("unload").unbind().remove();
			$('#TB_HideSelect').trigger("unload").unbind().remove();
		}
	);

と、することで回避できました。

いろいろ試しているうちに偶然見つけたので、理由は分かりません。

ナゾです。

変更前と変更後では、関数の実行順が違うのでそのあたりに原因があるのではないかと思います。

前回のflashcast：フリーで働くITエンジニア集団のブログ: javascriptからモゲラのAPIを呼ぶサンプルを作ってみたの続きです。

公開に向けてゲームを作りこんでいきたいと思います。

まずは、なぜかjQueryのバージョンが古かったので、新しくしました。
（純粋に間違えていました・・・。）
jquery-1.3.1 → jquery-1.3.2

次に、ブロックの数字を文字ではなく、画像にすることにします。
ついでに、読み込み速度を上げるために画像をまとめます。

ブロックの画像を１枚の画像にまとめることで、クライアントとサーバのやり取りを抑えることができます。
結果、読み込みスピードが上がります。

また、最初にまとめて画像を読み込むため、ページ描画後の読み込みによる、ちらつきなどが起こらなくなります。

CSSの定義は、こんな感じになります。

.color1.pattern1 {
 background-image:url(blocks.png);
 background-position:192px 288px;
}
.color1.pattern2 {
 background-image:url(blocks.png);
 background-position:192px 240px;
}

※background-positionで、画像の表示範囲を指定します。

同様に、POWERを表す「※」も画像にしました。

あと、折角なのでハイスコアをcookieに保存するようにしました。

Plugins | jQuery PluginsにあるjQuery cookieを使います。

こんな感じで、簡単にクッキーの読み書きができます。

player.hi = $.cookie(COOKIE_NAME);
if (player.hi === null) {
 player.hi = 0;
}

if(player.hi < player.sc){
 player.hi = player.sc;
 $.cookie(COOKIE_NAME, player.hi, {expires:30, path:"/"});
}

最後に、画面下におねだりボタン（？）を付けて完成です！

完成した内容は
jQuery Block Braker | モゲラ
になります。
※モゲラのサイトにログイン後に、クリックしてください。
※または、「パズル」カテゴリより探してみてください。

みなさんも遊んでみてください！

jQueryを使って簡単にfirefoxを拡張できるという、Jetpackがリリースされました。
もともと、firefoxのアドオン自体はjavascriptを使って作成できるので、いまいち利点がわからないのですが、とりあえず挑戦してみました。

Jetpack本体は、以下のページにあります。

Mozilla Labs Jetpack | Exploring new ways to extend and personalize the Web

アドオンが作れる！といっても、本当にアドオンが作れるわけではないようです。
実際はJetpackアドオンをインストールすると使えるようになる、Featureと呼ばれるスクリプトを簡単に作れるようになるみたいです。

Featureはjavascriptで記述し、jQueryと専用のAPIを使用することができます。
この辺の開発の手軽さが、Jetpackの魅力のようです。

使い方も簡単で、Featureの本体（jsファイル）と、公開（ダウンロード）用のHTMLを用意し、Jetpackインストール済のFirefoxからアクセスすると、画面上部にインストール用の領域が出てきて、そこからインストールできます。

と、いうわけで、昔作成したfirefox用のアドオンを移植してみました！
erina59snap :: Firefox Add-ons
ボタンを押すと表示されているページをjpgにして保存するアドオンです。
これを、Jetpack用のFeatureとして移植してみたいと思います。

まずは、スクリプトを作成します。

ステータスバーにアイコンを表示し、クリックされた時に処理を行うことにします。
ステータスバーへのアイコン表示は、APIを使って簡単に実装できます。

jetpack.statusBar.append({
 html:'<img src="http://www.tonosamart.com/erina59jet/erina59jet_icon.png">',
 width:19,
 onReady:function(doc){
  //click時の処理
 }
});

あとはclick時の処理の場所に、昔作成したjavascriptをほぼそのまんまコピーしました。
これで、スクリプト部分は完成です！

次に、公開用のHTMLを作成します。

<link rel="jetpack" href="erina59jet.js">

こんな感じで、linkタグでスクリプトを指定すると、ページの上部にインストール用の領域が表示されるようになります。
それ以外は普通のホームページと同じ要領でページを作成します。

と、いうわけで完成したのが以下になります！
erina59jet
作り始めるときは若干不安でしたが、移植ということもあり、15分くらいで完成しました。

Jetpackをインストールした状態で、上記リンクを開くと、ページの上部にインストール用の領域が表示されます。

あとは、ページの説明に従って、Featureをインストールしてみてください。

インストールすると、ステータスバーにアイコンが追加されます。
アイコンをクリックすると、開いているページがjpg画像としてデスクトップに保存されます。

ただ、APIの仕様だと思うのですが、アイコンの表示位置が若干（2px）上に表示されるので気持ち悪いですね・・・。
まあ、そのうち直ると思ったのであえて工夫せずにそのままにしておきました。

最初は正直微妙な感じでしたが、実際作ってみるとアドオンを作る場合にくらべ、いちいちxpiにパッケージングしなくてもいいので、非常に簡単でした。
また、今回は使いませんでしたがjQueryの命令が使えるのも楽でいいです。

ただ、セキュリティ的には若干怖さも残ります。クライアントにファイルが作れるのは便利な反面やっぱり怖いです。信用できるスクリプト以外はうかつに実行できないですね・・・。

とはいえこれは、覚えておいて損はないと思います！

あと、この記事を書いている途中に気がついたのですが、firefoxの実験的なアドオンがAMOのユーザ登録をしなくても使えるようになっていますね。

この記事のもとになったアドオンがerina59snap :: Firefox Add-onsにあるので、よかったらこちらも試してみてください！
（レビューがたくさんたまったら、実験的なアドオンじゃなくなるらしいので、よろしくお願いします。）

せっかく、flashcast：フリーで働くITエンジニア集団のブログ: jQueryを使って、htmlとcssを分離するようにjavascriptも分離してみる（javascript編）でゲームを作ってみたので、ほかのサイトにも登録してみることにしました。

登録するサイトは、こちらです。
ゲーム・無料ゲーム | モゲラ

ブラウザで動くタイプのゲームを無料で登録でき、APIを使って「モリタポ」というポイントで課金したりすることができます。

ゲーム自体は、無料で公開してもいいのですが、せっかくなのでAPIを使って課金してみることにしました。

ただ、ここで問題が・・・

モゲラのAPIはモゲラのサーバーにありますが、ゲームのほうは自分のサーバに置かなくてはいけません。
そうすると、別ドメインのため、flashの場合、crossdomain.xmlをサーバにおくことで、アクセスできますが、javascriptの場合はアクセスができません。

これを回避する方法は色々あるのですが、flashとjavascriptを連携するのはflashcast：フリーで働くITエンジニア集団のブログ: flash+javascriptで、クリップボードにコピーするでやったので、今回は、phpを使ってみることにします。
別ドメインにアクセス可能なphpを使ってモゲラのAPIを呼び出し、その結果をjavascriptで取得することにします。

ついでに、javascriptからphpを呼ぶ部分も関数として作成し、ライブラリのような感じにすることにします。
jQueryのajax関数を使ってphpを呼び出して、モゲラAPIの結果を取得します。

と、いうわけで、特に解説するようなテクニックもなく完成！

せっかくなので、サンプルページを作成してみました。（2009/05/07に公開しました。）
このライブラリを使えば、flashを使わなくても、課金できるのでぜひ使ってみてください！

javascriptからモゲラのAPIを呼ぶサンプル | モゲラ
※モゲラのサイトにログイン後に、クリックしてください。
※または、「その他」カテゴリより探してみてください。

実際に使う際には、

var info = tonosamart.getMogeraInfo(SVID);

というような感じで、呼び出します。
※SVIDには、モゲラの設定画面で登録するサービスＩＤを設定します。

そうすると、infoにAPIの結果が入るので

if(info.status === 'OK'){
if(info.credit >= 1){
if(isPlay){
 play = tonosamart.getMogeraPlay(SVID);
 setPlay(TARGET, play);

 if(play.status === 'OK'){
  setMessage(TARGET, MESSAGE_OK_PLAY_GAME);
 }else{
  setMessage(TARGET, MESSAGE_NG);
 }
}else{
 setMessage(TARGET, MESSAGE_OK_PUSH_START);
}
} else {
setMessage(TARGET, MESSAGE_OK_INSERT_COIN);
}
}else{
setMessage(TARGET, MESSAGE_NG);
}

といった感じで、簡単に使うことができます。

サンプルページにも書いてありますが、今回はajaxといいつつも非同期ではないので、読み込み中はブラウザが止まります。
ゲーム用の課金APIということで、あえてこういう仕様にしてみました。

これで、モゲラにゲームを公開する準備は整いました。
あとは、この前作ったゲームを、モゲラ用にカスタマイズしてみたいと思います！