Branberyheag!! Lab

お仕事用サイト「Branberyheag!!.jp」を公開。

最初は、自分のポートフォリオサイトを作るつもりなかったのですが、段々、システムが出来上がってくると、いい感じの完成度になってしまって、これを単純に公開するのも勿体ないなと思って、自分用のサイトにしてみた。

技術的な話をするとWordPressでできていて、カテゴリー、ページ、記事というようなシンプルな構成でできあがっている。ただ、ページ遷移は、なくてJQueryのload()を使って、HTMLを呼び出している。戻る、進むボタンを有効にするため、ハッシュタグをURLに組み込んで、あとはプラグインでの処理を行っている。

あとは、スライドショーは、Arrayに画像のパス、サイズをつっこんで、ページおくりしたときに呼び出している。DOMを操作して、消えたり出したりするよりは、処理が速いような気がする。

これを作ったときにいろいろとTipsが溜まったので、ネタを公開していきたい。

これ、フェーズ１なんで、もう少し手直しと機能を追加する予定。

以前やった、クライアント案件で、この技術を使えばもっといいものができたとこれを作りながら思った。いつか修正したいけどね。

あるプロジェクトでIE6対応でCSSのbackgroundでPNGを使わないといけなかった時に、いろんな方法があるが、

More

JavaScriptで配列を空にする方法が分からなかったので、メモ

var hoge = [];

hoge.length = 0;

配列の長さを0にすると空になる。これ知らなかった。

参考サイト
Javascript/配列操作

モルダルウィンドウをJavaScriptで作る際に、z-indexはよく使うと思う。

More

Core Serverは、サーバ個別にライブラリをインストールするのはできない。

「go-pear」を使って、管理するのが楽のようだ。とりあえず、メモ。

More

久しぶりにWordPressのメモ。

ポートフォリオのサイトを構築しようと思ってて、カスタム投稿を使って、ポートフォリオを投稿するフィールドと業務上のお知らせを普通の投稿画面と・・・振り分けたかったので、調べていると参考になる記事があったので、メモ。

カスタム投稿を使ってwebサイトを作ってみよう！

これ、サイト構造の設計からWordpressを何をどこに実装するかが書いてあって、細かい部分まで書いてあって親切。
新しい機能がどんどん追加されているので、業務や個人的に作るときにゼロから説明してある記事って本当にいいと思う。

Windowの一番下まですくるロールされたことを取得して、何かをやりたかったので、いろいろと調べてみた。

ググってみてたら、「リトルプログラマーの日記」さんに載っていた。

これを参考にして実装してみた。

More

JavaScriptでHTML上から取得またはHTTP通信で取得したデータを検索、比較したい場面がある。
その場合は、どうやってやるのか、考えてみた。

More

「すきなばしょ」で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 で効率的なレンダリングが行われる

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