WordPress3.0にバージョンアップしたら、テンプレートJavascriptエラーになった

No Comments

WordPress2.9で動いていたテンプレートに実装していたJavascriptがなぜか動かなくなった。どうしてだ??と思ってエラーを調べても原因が分からなかった。とりあえず、スクリプトを全部作り直したかったので、丁度良い機会なのかもしれない。

さてさて、どうしたのかな。。。

原因として考えられるのは、JQueryは、headerCleanというプラグインを使っているんだけど、それのJQuery(つまりライブラリ)がうまく読み込まれてないいないのかもしれない。調べてみようかな。

jQueryでロールオーバー

No Comments

ちょっと、jQueryでロールオーバーが必要になってきたので、調べたらプラグインではなくスクリプトとして記述の仕方が紹介されていたので、メモ。

<pre>jQuery(document).ready(function($) {
	var postfix = '_on';<!--more-->
	$('#gNavi a img').not('[src*="'+ postfix +'."]').each(function() {
		var img = $(this);
		var src = img.attr('src');
		var src_on = src.substr(0, src.lastIndexOf('.'))
		           + postfix
		           + src.substring(src.lastIndexOf('.'));
		$('<img>').attr('src', src_on);
		img.hover(
			function() {
				img.attr('src', src_on);
			},
			function() {
				img.attr('src', src);
			}
		);
	});
});

たったこれだけのソースでロールオーバーが再現できるなら良いかなと思った。何気に便利だと思う。最大のポイントは、img要素にclassタグで指定しなくてもいいということ。これなら、余計なclassをつけなくてもいい。

んで、この作者さんは、プラグインも作っているようなので、こちらもリンク。

jQueryで要素の見つける方法

No Comments

jQueryで要素を見つけてそれがあるのかないのか判断するスクリプトを載せてみた。


要素が存在しない場合は
 jQuery("#id").size() == 0

 要素が存在する場合は
 jQuery("#id").size() > 0

ゲーム用JQuery「GameQuery」

No Comments

gameQueryはJavaScript製/jQueryプラグインのオープンソースだそうだ。
試してみたけど、案外スムーズな動きにビックリした。デモでやってみたほうがいいかもしれない。

gameQueryを使ったオンラインゲームが出てきそうだ。昔、AJAXを使ったオンラインゲームがあったのを思い出した。いろんなゲームジャンルが作れそう。

ストリートファイター系ゲームまで!ゲーム用jQueryプラグイン「gameQuery」CommentsAdd Star
http://www.moongift.jp/2010/03/gamequery/

Plupload、いいかも。

No Comments

HTMLでコミュニティサイトで、いつも躓くのがアップロード機能だと思う。Flashのアップローダーを使うでなんとかしのいでたりとかしている。

そんなときに「Plupload」は、いいかもしれない。
複数ファイルアップロードの他にドラッグアンドドロップなどの気の利いた機能があるようだ。
これだったら、ユーザに負担をかけずに気軽にアップロードできるかもしれない。

Plupload

Plupload v1.1.1

[メモ]JQuery1.4の新機能のまとめその2

No Comments

jQuery1.4の新機能を1.4だけに14個
http://tech.kayac.com/archive/jquery-1.4-new.html

JQuery1.4リリース!!だって

No Comments

JQuery1.4がリリースされたぽい。
気づいていたけど、「すきなばしょ」のサイトリリースやちょっとした修正をしていたせいで、なかなか情報収集ができなかった。

バージョンが上がってさらにスピードがあがったそうだ。

14 Days of jQuery」を見るとパフォーマンスが1.3より早くなっている。メソッド系「.append()」や「.html()」やAttributes系の「.attr()」や「.css()」の処理速度も上がっている。

また、ちゃんと読んでいないけど、新しいメソッドもできている。
※よーく読んでからブログに書いてみようと思う。

とにかくこれだけパフォーマンスが上がると使わないというのは、とても損だと思う。

1.3と1.4でだいぶ仕様が違うみたい。ただ、ある程度は、互換性があるぽい。
この辺は、気をつけないといけない。

Webサイト・WebシステムをIPhone専用UIを実現する「JQTouch」

No Comments

IphoneやIpodTouchのUIをPCサイトのウェブサイトやウェブシステムに適用するのに、丁度いいライブラリだと思う。JQTouchは、JQueryのプライグインとして動作するぽい。Webkitで動くようなので、試す場合は、safariで見た方がいい。

これなら、Iphoneユーザーにとっても慣れているUIなので、使いやすくなるかもしれない。

JQTouch
http://www.jqtouch.com/

コミュニティサイト「すきなばしょ」プレリリース

1 Comment

今日の投稿で100回目を迎えた。マメに投稿すると早いもんですね。

コミュニティサイト「すきなばしょ」をプレリリースした。

制作期間は2ヶ月くらい。まぁ、仕事をしながら進めてきたので時間はかかってしまったけどやっとリリースまでこぎつけた。

サイトコンセプト
「ユーザー同士が好きな場所を共有して、実際に行ってまた共感する。」
言葉的にはおかしいかもしれないけど、あえてこの言葉を使った。好きな場所は、誰にでもあります。それを大切にして、誰かにこの気持ちを共感したいことってあるのかな~と思いました。

あと、教育テレビで私が小さいときに放映していた「たんけん ぼくのまち」という番組があってそのなかでは自分の町を探検して、自分の町ではどんなことことが起きているのかなどを探検して最後は素敵な地図にする番組。
これが私は大好きで去年から自分のすきなばしょを地図に書き込んで共有したいという気持ちがあった。

結局、いろんな思いはあったけど、ブログという形で落ち着いてしまった。

技術的なことについて
バックエンド部分はWordPressを使っています。自分で作ろうと思ったけどゼロから勉強して作るまでに飽きてしまいそうだったこともあって今回は諦めた。

フロントエンドにはJqueryライブラリーを主に使ってGoogle Maps APIをコントロールしている。あとは、親ウィンドウから子ウィンドウへのデータ受け渡しも実現している。記事に書いてある、地図のプリント部分はデータの受け渡しはJavascriptのみで行っている。

あとは、Google Mapsにadsenseを埋め込んで広告表示をしている。これも前回の記事で説明している。

追加機能について
携帯電話やスマートフォンからメール投稿できるようにしようかと考えている。

携帯電話の場合は、GPS搭載携帯だと、簡単にメールに取得できるようなので、メール送信時に経緯と緯度とタイトル、写真をメールで送るだけで投稿できる仕掛けを実装予定。
あと、携帯電話での閲覧とiphoneでの最適化をめざす。
JavaScriptで実装したスクロールバーのwindowサイズを変更したときの挙動がどうもおかしい・・・原因は分かっているけど解決策がない。ブラウザウィンドウとコンテンツの大きさを比べているんだけど、どうやらコンテンツ全体の長さがちゃんと取得できていないらしい。
これも早めに修正したい。

よかったら、コミュニティサイト「すきなばしょ」に気軽に参加してください。
いろんな人の意見を聞きながら運用していきたいと思っています。

正式リリースまでは、もう一息。
IE6のブラウザ対策(最新バージョンへのアップグレードの案内を表示)が残っている。
正式リリースは来週になりそう。。。

すきなばしょ
http://www.sukinabasho.com/

safariでHTML上に画像サイズを取得する際の注意点

No Comments

画像サイズをjavascriptで取得できるのに、safariだけが取得できずにいた。
できないのは、ブラウザの仕様ぽかったので、どうすれば回避できるかいろいろと調べていた。

解決方法を見つけた。(JQueryの場合)

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//![CDATA[
$(function(){
$("#hoge").bind("load", function(){
alert($("#hoge").width());
alert($("#hoge").height());
});
});
//]]
</script>
<img id="hoge" src="1855886406_808c951ac5_b.jpg" />

全部読みこんだらイベントを発動させる方法がいいみたい。
この辺って、なんかActionScriptに似ているよね。

  1. <script type=“text/javascript” src=“jquery.js”></script>
  2. <script type=“text/javascript”>
  3. //![CDATA[
  4. $(function(){
  5. $("#hoge").bind("load", function(){
  6. alert($("#hoge").width());
  7. alert($("#hoge").height());
  8. });
  9. });
  10. //]]
  11. </script>
  12. <img id=“hoge” src=“1855886406_808c951ac5_b.jpg” />

Older Entries