Branberyheag Lab » Tips http://lab.branberyheag.com ActionScript3.0やJavascriptを使っていろんなものを作ってみます。 Fri, 23 Jul 2010 10:00:23 +0000 ja hourly 1 http://wordpress.org/?v=4705 Javascriptのパフォーマンスをあげるポイント http://lab.branberyheag.com/2010/06/17/javascript-2.html http://lab.branberyheag.com/2010/06/17/javascript-2.html#comments Thu, 17 Jun 2010 11:53:01 +0000 isao http://lab.branberyheag.com/?p=787 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 で効率的なレンダリングが行われる

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

]]> http://lab.branberyheag.com/2010/06/17/javascript-2.html/feed 0 背景画像を使用しないCSSスプライト http://lab.branberyheag.com/2010/06/07/css_sprites_overflow.html http://lab.branberyheag.com/2010/06/07/css_sprites_overflow.html#comments Mon, 07 Jun 2010 11:09:40 +0000 isao http://lab.branberyheag.com/?p=775 これ、使えそうなので、メモ。

元ネタは、こちら
CSS Sprites w/out Using Background Images

背景画像を使わずにimg要素で呼び出した画像をCSSスプライトとして呼び出すテクニック。


<div>
<a href="#"><img src="rokkan.gif" alt="" /></a>
<a href="#"><img src="designcubicle.gif" alt="" /></a>
</div>

使用されている画像は、カーソルを合わせなかった時、合わせた時の画像を一枚にしている状態。

背景画像を位置変更ではなくoverflow:hidden;にしている。
コントロールは、margin-topで制御している。


.affiliates a {
width: 204px; height:182px;
overflow: hidden;
float: left;
}
.affiliates img {
border: none;
}
.affiliates a:hover img {
margin-top: -182px;
}

このテクニックを使う条件として、正確な画像の縦、横のサイズが分かることが必要で、hoverには、margin-topを使っている。

この記事でCSS3のtransitionを使ってアニメーション効果を出すテクニックも記載されている。


.affiliates a {
width: 204px; height:182px;
overflow: hidden;
float: left;
}
.affiliates img {
border: none;
margin: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
.affiliates a:hover img {
margin-top: -182px;
}

どこかで使えそうなテクニックだよね。。。関連した記事

]]> http://lab.branberyheag.com/2010/06/07/css_sprites_overflow.html/feed 0 WordPress3.0機能メモ　 featured image アイキャッチ画像 http://lab.branberyheag.com/2010/06/07/featured-image.html http://lab.branberyheag.com/2010/06/07/featured-image.html#comments Sun, 06 Jun 2010 15:34:10 +0000 isao http://lab.branberyheag.com/?p=767 WordPress2.9でもあった機能らしいけど、名称がアイキャッチ機能変わったようだ。

これは、サムネイルを簡単に表示させることのできる機能だ。トップページなどでサムネイルが必要な時に表示させることができる。

テンプレートタグで特定の場所にサムネイルを簡単に出力させることができるので、便利だと思う。

テンプレートにタグを入れないと動かないみたいなので、以下のようなタグを入れる。


<code>the_post_thumbnail();</code>

<code>

テンプレートのfunctions.phpにも以下のコードを入れる。


<code>add_theme_support( 'post-thumbnails' );</code>

[php]

画像のサイズをコントロールする場合は、同じくfunctions.phpに追加する。
引数は、画像サイズ指定（縦、横）と最後の引数では指定のサイズに切り取るかリサイズするかの選択である。

[php]

<code>set_post_thumbnail_size( 100, 50, true/false  );</code>

詳細は、テンプレートタグ/the post thumbnailを参照のこと。関連した記事

]]> http://lab.branberyheag.com/2010/06/07/featured-image.html/feed 1 HTML5についていろいろと調べてみた http://lab.branberyheag.com/2010/05/13/about_html5.html http://lab.branberyheag.com/2010/05/13/about_html5.html#comments Wed, 12 May 2010 15:23:31 +0000 isao http://lab.branberyheag.com/?p=707 なんか作ろうと思ってて、丁度いいのでHTML5を使ってみようと思った。
今までなんも調べていなかったので、いろんなサイトを見ながら作ってみようと思った。

そんな中で役に立ったTipsや資料をあげてみようと思った。

まず、InternetExpplorer6,7でどうやって対応すれば良いのか調べた。
どうやら、新しいタグに対してスタイリングができないので、JavascriptでHTML5で新しく用意された要素をHTML上に置かないとその要素にスタイルを指定ものに対して、適用されないようだ。


<!--[if lte IE 8]>

<script type="text/javascript">
document.createElement( 'header' );
document.createElement( 'section' );
document.createElement( 'nav' );
document.createElement( 'aside' );
document.createElement( 'footer' );
document.createElement( 'article' );
document.createElement( 'time' );
</script>
<![endif]-->

Firefox2では、HTML5のタグに対してスタイルが適用されないようだ。

html5.jpによると、本来は・・・


<body>

<header><h1>Title</h1></header>

<article><p>...</p></article>

</body>

<code>

となるが、Firefox2では


<body>
<header></header>
<h1>Title</h1>
<article></article>
<p>...</p><code>
</body></code>

というふうにレンダリングされる。
この回避方法あるようだ。

有効なのは .htaccess を使ってGekko XHTMLとして読み込ませる方法良いみたい。HTMLファイルに


<code><html lang="en" xmlns="http://www.w3.org/1999/xhtml"></code>

xmlnsを入れる。

あとは、htaccessを用意する。

<pre><code>RewriteCond %{REQUEST_URI} \.html$
RewriteCond %{HTTP_USER_AGENT} rv:1\.(([1-8]|9pre|9a|9b[0-4])\.[0-9.]+).*Gecko
RewriteRule .* - [T=application/xhtml+xml]

これで、スタイルが適用されるようだ。
一番気になったIE6でもなんとか適用するみたいなので、気兼ねなくマークアップができる。
あとは、API関係とCSS3のブラウザ依存をどうするかを考えないとね。

次はCSS3について調べてみようと思う。

参考サイト
html5.jp
HTML5 を IE や Firefox 2 でも使えるようにする方法関連した記事

]]> http://lab.branberyheag.com/2010/05/13/about_html5.html/feed 0 twitterのつぶやきといっしょに位置情報を送信について http://lab.branberyheag.com/2010/04/21/twitter%e3%81%ae%e3%81%a4%e3%81%b6%e3%82%84%e3%81%8d%e3%81%a8%e3%81%84%e3%81%a3%e3%81%97%e3%82%87%e3%81%ab%e4%bd%8d%e7%bd%ae%e6%83%85%e5%a0%b1%e3%82%92%e9%80%81%e4%bf%a1%e3%81%ab%e3%81%a4%e3%81%84.html http://lab.branberyheag.com/2010/04/21/twitter%e3%81%ae%e3%81%a4%e3%81%b6%e3%82%84%e3%81%8d%e3%81%a8%e3%81%84%e3%81%a3%e3%81%97%e3%82%87%e3%81%ab%e4%bd%8d%e7%bd%ae%e6%83%85%e5%a0%b1%e3%82%92%e9%80%81%e4%bf%a1%e3%81%ab%e3%81%a4%e3%81%84.html#comments Tue, 20 Apr 2010 16:21:38 +0000 isao http://lab.branberyheag.com/?p=670 twitterでの位置情報をどうやって送信するのか分からなかった。

設定を変えてみたりしたけど、何も変わらなかった。どうしてだろうと思っていろいろと調べてみたところ専用クライアントソフトだと位置情報と一緒に送信できるそうだ。

ちなみに、モバツィは、位置情報の取得ができない。さて、どうしたものかと思って調べてみるとはてなココは、位置情報を送信できるようだ。ツィッタークライアントソフトを作ろうかと思ったけど、そこに時間をかけるよりももっと別のところに時間をかけようと思って止めた。

twitter APIのリファレンスにもあまり詳しくは載っていないようだ。大事なことだから、載せてほしいよね。。。関連した記事

]]> http://lab.branberyheag.com/2010/04/21/twitter%e3%81%ae%e3%81%a4%e3%81%b6%e3%82%84%e3%81%8d%e3%81%a8%e3%81%84%e3%81%a3%e3%81%97%e3%82%87%e3%81%ab%e4%bd%8d%e7%bd%ae%e6%83%85%e5%a0%b1%e3%82%92%e9%80%81%e4%bf%a1%e3%81%ab%e3%81%a4%e3%81%84.html/feed 0 simple XMLで名前空間を取得する方法 http://lab.branberyheag.com/2010/04/21/simplexml.html http://lab.branberyheag.com/2010/04/21/simplexml.html#comments Tue, 20 Apr 2010 16:15:37 +0000 isao http://lab.branberyheag.com/?p=668 PHPでXMLパースを使っている時にsimple XMLで文字列やデータを取得していると名前空間のタグ取得できなかった。

調べてみると・・・

属性を取得する場合は・・・


$feed->entry->title->attributes()->type;
//type属性を取得
//<title  type="text">【自民党ネットCM】ラーメン篇</title>

名前空間の場合・・・


$feed->entry->children('yt',true)->recorded;
//名前空間のある要素を取得
//<yt:recorded>2009-08-21</yt:recorded>

何気に困ったので、メモ。関連した記事

]]> http://lab.branberyheag.com/2010/04/21/simplexml.html/feed 0 親ウィンドウから子ウィンドウへのデータ受け渡し方 http://lab.branberyheag.com/2010/01/06/%e8%a6%aa%e3%82%a6%e3%82%a3%e3%83%b3%e3%83%89%e3%82%a6%e3%81%8b%e3%82%89%e5%ad%90%e3%82%a6%e3%82%a3%e3%83%b3%e3%83%89%e3%82%a6%e3%81%b8%e3%81%ae%e3%83%87%e3%83%bc%e3%82%bf%e5%8f%97%e3%81%91%e6%b8%a1.html http://lab.branberyheag.com/2010/01/06/%e8%a6%aa%e3%82%a6%e3%82%a3%e3%83%b3%e3%83%89%e3%82%a6%e3%81%8b%e3%82%89%e5%ad%90%e3%82%a6%e3%82%a3%e3%83%b3%e3%83%89%e3%82%a6%e3%81%b8%e3%81%ae%e3%83%87%e3%83%bc%e3%82%bf%e5%8f%97%e3%81%91%e6%b8%a1.html#comments Tue, 05 Jan 2010 15:03:06 +0000 isao http://lab.branberyheag.com/?p=494 例えば、Google mapの経緯と緯度をデータを親ウィンドウから子ウィンドウへデータを渡した方として、aタグのリンク表記に「map.html?=134.77&75.4」と記述しておいて、別ウィンドウが開くHTMLにデータを解析するスクリプトを仕込んでおく。

あとは、正規表現でURLを取得してデータを取得すれば完了になる。

HTML５になると別ウィンドウへのデータの受け渡しも簡単になるようだ。今のところaタグに仕込んで置き、データを受けるウィンドウにはURLについたデータを解析するスクリプトを組んでおけば問題はなくなる。

簡単なデータを受け渡し方を紹介した。この他に別ウィンドウにデータを渡す方法ってあるのだろうか。

今作っているサイトはこの概念を使っているページがあるので、その時に改めて紹介する。関連した記事

]]> http://lab.branberyheag.com/2010/01/06/%e8%a6%aa%e3%82%a6%e3%82%a3%e3%83%b3%e3%83%89%e3%82%a6%e3%81%8b%e3%82%89%e5%ad%90%e3%82%a6%e3%82%a3%e3%83%b3%e3%83%89%e3%82%a6%e3%81%b8%e3%81%ae%e3%83%87%e3%83%bc%e3%82%bf%e5%8f%97%e3%81%91%e6%b8%a1.html/feed 0 wordpressでページテンプレートを選択できるようにするには・・・ http://lab.branberyheag.com/2009/12/29/wordpress%e3%81%a7%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88%e3%82%92%e9%81%b8%e6%8a%9e%e3%81%a7%e3%81%8d%e3%82%8b%e3%82%88%e3%81%86%e3%81%ab%e3%81%99%e3%82%8b.html http://lab.branberyheag.com/2009/12/29/wordpress%e3%81%a7%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88%e3%82%92%e9%81%b8%e6%8a%9e%e3%81%a7%e3%81%8d%e3%82%8b%e3%82%88%e3%81%86%e3%81%ab%e3%81%99%e3%82%8b.html#comments Tue, 29 Dec 2009 01:53:09 +0000 isao http://lab.branberyheag.com/?p=486 もう年末に入ってしまいましたね。ずっとプライベートでやっていたプロジェクトがいよいよ大詰め。
でも、本当に使ってくれたり、ユーザ登録してくれたりと結構不安でいっぱいです。まぁ、ブラウザ依存をなるべく少なくするのが、敷居の低くする第一歩かもしれない。というかIE6、IE7が全然駄目だったりと言っていることとやっていることがめちゃくちゃな今日この頃。

さて、本題だけどページテンプレートがあるけど、これを複数テンプレート用意したいときとかある。
wordpressだと簡単にできるようなので、テンプレートを作っただけではダメだった。当たり前だけどね。んで、いろいろと調べていくと新しいページテンプレートには以下のようなものを入れておかないといけないみたいだった。

<?php
/*
Template Name: Snarfer
*/
?>

とテンプレートファイルの一番上に入れるようだ。これをやらないとwordpress側で認識しないみたい。
これでトップページを作るっていうのひとつの手かもしれない。

参考にしたサイト
http://d.hatena.ne.jp/kazuokohchi/20080526/1211794028
code X
http://codex.wordpress.org/Pages#Creating_your_own_Page_Templates関連した記事

]]> http://lab.branberyheag.com/2009/12/29/wordpress%e3%81%a7%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88%e3%82%92%e9%81%b8%e6%8a%9e%e3%81%a7%e3%81%8d%e3%82%8b%e3%82%88%e3%81%86%e3%81%ab%e3%81%99%e3%82%8b.html/feed 0 久々にflashに感動した http://lab.branberyheag.com/2009/12/16/flash_good_job.html http://lab.branberyheag.com/2009/12/16/flash_good_job.html#comments Wed, 16 Dec 2009 08:49:15 +0000 isao http://lab.branberyheag.com/?p=467 Sewing – wonderfl build flash online

これ、なんか新鮮。
http://level0.kayac.com/2009/12/wonderfl09_hara.php関連した記事

]]> http://lab.branberyheag.com/2009/12/16/flash_good_job.html/feed 0 adobe AIRでのBasic認証 http://lab.branberyheag.com/2009/12/16/adobe-air.html http://lab.branberyheag.com/2009/12/16/adobe-air.html#comments Wed, 16 Dec 2009 05:49:18 +0000 isao http://lab.branberyheag.com/?p=465 adobe AIRでのお話だけど、Basic認証スクリプトさえ実装すれば通るみたい。
こりゃ、知らなかった。

しかも一行だけっていうのが、すごい。

URLRequestDefaults.setLoginCredentialsForHost(<span>"twitter.com"</span>, <span>"ユーザー名"</span>, <span>"パスワード"</span>);

何か役立ちそうなので、メモ。

100行以内で作る超簡易板Twitterクライアント
http://d.hatena.ne.jp/matsu4512/20091109/1257749321関連した記事

]]> http://lab.branberyheag.com/2009/12/16/adobe-air.html/feed 0