Branberyheag Lab

「すきなばしょ」でtwitter上に表記されている画像を各サービスから取得するためにURLについて調べていた。
多くのサービスが、URLを簡単に作って画像のパスをひろえるようなので、メモ。
※引用元があるのだけど、危険サイトに指定されていたため、リンクの貼るのをやめました。

* Twitpic （ドキュメント）

o ページ: http://twitpic.com/<image-id>
o サムネイル画像: http://twitpic.com/show/<size>/<image-id> More

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 で効率的なレンダリングが行われる

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

これ、使えそうなので、メモ。

元ネタは、こちら
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;
}

どこかで使えそうなテクニックだよね。。。

WordPress2.9でもあった機能らしいけど、名称がアイキャッチ機能変わったようだ。

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

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

なんか作ろうと思ってて、丁度いいのでHTML5を使ってみようと思った。
今までなんも調べていなかったので、いろんなサイトを見ながら作ってみようと思った。

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

まず、InternetExpplorer6,7でどうやって対応すれば良いのか調べた。
どうやら、新しいタグに対してスタイリングができないので、 More

twitterでの位置情報をどうやって送信するのか分からなかった。

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

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

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

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>

何気に困ったので、メモ。

例えば、Google mapの経緯と緯度をデータを親ウィンドウから子ウィンドウへデータを渡した方として、aタグのリンク表記に「map.html?=134.77&75.4」と記述しておいて、別ウィンドウが開くHTMLにデータを解析するスクリプトを仕込んでおく。

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

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

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

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

もう年末に入ってしまいましたね。ずっとプライベートでやっていたプロジェクトがいよいよ大詰め。
でも、本当に使ってくれたり、ユーザ登録してくれたりと結構不安でいっぱいです。まぁ、ブラウザ依存をなるべく少なくするのが、敷居の低くする第一歩かもしれない。というか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://level0.kayac.com/2009/12/wonderfl09_hara.php