Branberyheag Lab

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

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

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

ちょっと、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をつけなくてもいい。

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

• input 要素にも使えるjQueryのロールオーバープラグイン
• jQueryだけで画像のロールオーバーを実装する方法

30 best practices to boost your web application performance – Web User Interface Architect

JavaScriptコーディング等を 書く上でのパフォーマンス確認事項３０。
自分へのインプット＆メモがてらにちょっとまとめてみます。

JavaScript

• DOMの操作は可能な限りやめる
• eval, new Function() は遅いので可能な限り使わない
• withステートメントを使わない（使った事ないですが）
• for-in 文ではなく for 文を使う。
• ループの中で try-catch ではなく、try-catchの中にループを置く
• グローバル変数をなるべく使わない
• aaa+=’AAA’;aaa+=’BBB’; の方が aaa=’AAA’+'BBB’;より速い
• 複数の文字列連結には、Array で文字列を定義しておいてjoinを使うとよいらしい
• Math.min(val1, val2) のような関数を使わずに、val1 < val2 ? val1 : val2; のように三項演算を使うとよい
  また、 array.push(‘new’); は array[array.length] = ‘new’; より遅い
• setTimeout(“kansu()”, 1000) は　setTimeout(kansu, 1000) より遅い
• for(var i=0; i < someArray.length; i++) {…} はfor (var i=0, loopLen=someArray.length; i<loopLen; i++) {…} より遅い
• jQuery(“ul > li”) のように使う。 jQuery(“ul li”) は広義すぎる
• jQueryの element.css({display:none}); の方が element.hide() より速い
• DOM操作が終わったらリファレンスの変数を解放する
• Ajax の GET は POST より速く動作する
• アニメーションの過度な利用は控える
• JSフレームワークの利用を制限する

サーバサイド

• 静的なコンテンツはHTTPヘッダでキャッシュさせよう（サーバサイドスクリプトの話）
• CSS, JS ファイルはgzipしよう。ただし、（CPU使用率とのバランスは重要です）
• JavaScript は　minify して転送量を下げる

CSS、HTML

• CSSは@import より<link> を使う
• CSSスプライトを使う
• CSSを最初におこう
• HTMLでのDOMの構造をシンプルにコーディングしよう
• background-repeatは避けるno-repeatにする
• テーブルを使わない。使う場合は table-layout:fixed で効率的なレンダリングが行われる

知っていることもおおかったかもしれませんが、しらないこともありました。
勿論実際に検証してみるこ とも必要だと思いますが、参考までに。

twitter @anywhereについて前に記事を書いた。

今回は、自分の日記用ブログにこれを導入してみた。案外簡単だったけど、ちょっとだけクセがあるので、メモ程度に書こうかなと思う。

1.APIキーを取得する
Register an @Anywhere Application に必要事項を記入して、APIキーを取得。

2.scriptタグを埋め込む

<script src="http://platform.twitter.com/anywhere.js?id=アナタのAPIキー&v=1" type="text/javascript"></script>

準備完了。次に、スクリプトを記述する。

3.スクリプトを記入して、読み込ませる More

これ、Twitter@Anywhereは、面白いと思う。
この@Anywhereって何かと言うとフォローするのにわざわざTwitterサイトに行っていたものをそのサイトに設置するだけでその場でフォローできたり、できるサービス。
Twitterにログインさえしていれば、RTができたり、自分のアカウント情報照会できたり、つぶやいたり・・・今までサーバサイドプログラムで動かしていた普通のユーザーが敷居が高かった部分を簡単導入できちゃったりする。

試しに使ってみたけどjQueryライクで簡単だし、これを用いてフロントエンドのみでTwitterのサービスをもう少し深く使うことができちゃったりと今までになかったので新鮮だった。案外珍しいと思う。

今、自分のブログに実装中なので、こっちが完成したら、レポートをしてみたい。

実装する上で、参考にしたサイト
Twitter＠Anywhereの使い方

これ、面白いね。

和の雰囲気を出す、サイトなんかにすごい似合うと思う。
やっぱり縦書きの文章を見るとなぜか安心する。

オススメ。

ehan

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

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

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

コミュニティサイト「すきなばしょ」とtwitterのつぶやきを連動してみた。
つぶやきの前に「#sukinabasho だいたいの住所」を入力して、つぶやくと記事にある住所をジオコーディングして、リスト表示する機能を追加した。wordpressの関数にスクリプトを書いて、それをjavascriptで読み取って表示している。PHP側ではカテゴリーの地名を検索して記事の地域とだいたいマッチしているものを表示している。

あとは、google maps apiで表示系は処理している。
今回、初めてPHPを使ったんだけど、面白い！ノリとしてはJavascriptみたいな感じだけど、データベースが絡んだりするとさっぱり手が出せなくなってしまう。SQL文を憶えないといけないし・・・。
結局はデータベースの部分を克服すれば案外PHPもすんなりと覚えられるかもしれない。フロントエンド、バックエンドが扱えるともっと面白いことができると思う。

例：http://www.sukinabasho.com/2010/03/20/210751.html

最近、思うんだけどウェブの世界って、デザインも必要だけど思い描いたサービスやコンテンツを実現するためにはフロントエンド、バックエンドと自分でできたほうが有利のような気がする。
そこで第三者が絡んでくるとやっぱり価値観が違ったりして、面倒だと思うし・・・
WEBクリエイターとしては、絶対に必要なことだと思う。

前から気になっていたIE9がついに披露されたようだ。

IEって、あまり好きじゃないブラウザだけどなんだかんだで、どうしても切っても切り離せない。コンシュマーやビジネスでも影響はとても大きいと思う。
なんと言ってもHTML5、CSS3に対応というのがなんと言っても魅力だと思う。しかも、Javascriptのスピードも格段に上がっているようだ。

リリースされて、２，３年後には確実にHTML5は、広くひろがると予想できるし、もっと面白いコンテンツが出ているだろうと思う。

• MicrosoftがIE9披露　新JavaScriptエンジン搭載でHTML5をサポート
• Internet Explorer 9: Platform Demos

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

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

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