hazi.log » javascript

MacOSX Widget は SQLite未対応？！

admin — Sat, 26 Sep 2009 13:56:16 +0000

N2LCheckerが雑誌に掲載されたこともあって、開発を今急いで進めていたのですが、あと３０％でベータをリリース出来る！！というタイミングで大変なことが発覚しました。

SQLite ( Database ) が使えない！？

HTML5からサポートされるDatebase。Safariはもちろんのこと、iPhoneのSafariでもサポートされており、当然Widgetでも対応していると思っていたのですが、どうやらサポートされてない様子。

たとえば、openDatabese関数を実行すると通常データベースオブジェクトが返ってきます。
テストはSafari 4.0.3 (6531.9)のコンソールで行いました。

例：openDatabase('n2lcdb', '1.0', 'Live info data base v1.0')

Safariでの実行結果：

▼Database
　►changeVersion: function changeVersion() {
　►transaction: function transaction() {
　　version: "1.0"

これを Dashcode のコンソール（エバリュエータ）で実行するとnullが・・・
さらに、Widget化して試してみましたが、それでも駄目でした。

最初はドメインの問題かと思ったのですが、完全に制限がかけられている様子。

Googleで関連する情報が無いか探してみた物の無かったので、記事として残すこととしました。

今度発売されるMacFanに掲載される前に、Widgetのアップデートが出来ればと思って他のですが・・・残念。

外部リンクに自動的に新しいウィンドウリンクを付ける

admin — Sat, 25 Jul 2009 21:55:09 +0000

外部へリンクする際良く使用する target=”_blank” はxhtmlでは禁止されているので、どうせなら外部へのリンクは「新しいウィンドウで表示」のアイコンを別途付けてしまおう！

ということで、jQueryを使って新しいウィンドウで表示するアイコンを付ける物を書いてみました。

$(document).ready(function(){

	var checkArea = 'div.post-inner a:not([href^="http://hazisarashi.com"]),';
	var anchorObject = '';
	var className = 'newWin'

	$(checkArea).each(function(){
		var target = this;
		var img = $(target).find("img").length;

		var url = $(target).attr('href');
		if ( url != '' && img == 0 ){
			$(target).after( $(''+anchorObject+'').click(function(){ window.open(url, "_blank", "status=yes,scrollbars=yes,directories=yes,menubar=yes,resizable=yes,toolbar=yes"); return false; }) );
		}

	});

})

これだけです。
頭の変数を修正することで、どこのサイトでも使える用になります。

checkAreaは、適応したいリンクの jQuery Selectors
anchorObjectは、表示させるアイコンのHTML
classNameは、リンクのclass名

必要に応じて、class名を元に外部CSSなどで margin などを記述してください。

WordPress で Facebox を使う

admin — Sat, 25 Jul 2009 21:23:25 +0000

今日は、ブログの調整を色々行っていました。
今回は画像のポップアップをjavascriptで実装する方法に関してです。

今までは prototype.jsベースの lightview.js を使っていたのですが、そろそろ prototype.js を脱しようと思い、jQuery.js ベースの Facebox を使うことにしました。

Facebox の導入はとても簡単でした。
大半のこういったスクリプトはWordPressプログラムとして、提供されているので試してみましたがダメでした。

何がダメかというと、オプション設定が無い為です。
Faceboxはどのリンクをポップアップにするかを簡単に記述出来る様になっているので、オプションが無い＝プラグインソースを修正する必要がある = プラグインの意味がない！という結論に至りました。

なので、手動でファイルをダウンロード。

まずは js と css 内の画像へのリンクを修正する必要があるので、修正しファイルをFTPでアップロード。
あとはヘッダー~~又は、フッター~~に下記のソースを書き加える。

訂正：タグ内でしかタグ使えないのにフッターとか書いてました…。訂正致します。

基本的には以上で終わりです。

5行目の部分が自動でポップアップにするリンクを定義してる部分になります。
ここは、「,」区切りで記述してあり、例えば

div.post-inner a[href$=".jpg"]

などは、CSSの記述と同じで div.post-inner 内の .jpg で終わるアドレスにリンクしているアンカーに対して、ポップアップを有効にすることを意味しています。

詳しくは、jQueryの記述方法をご覧ください。

参考サイト：jQueryでLightviewみたいなFacebox.js