STONEDSOUL

X04HT (Touch Diamond) のカスタマイズ

Tue, 09 Mar 2010 21:20:51 +0900

今になって 705NK から X04HT に機種変更した。もっさりしてるのと電池が持たないのは覚悟の上で、見た目と大きさ、画面の解像度、ホーム画面の見た目で決めた。docomo のやつにしなかったのは、i-mode のメールアドレスが取れないのと、携帯用のサイトが見れないらしいから。ポケットの中でごろごろしないのがいい。

インストールしたソフト

wasabi - 携帯サイト用ブラウザ。設定方法。
TRE - レジストリエディタ
Google Map - X04HT のブラウザでアクセス。
touchkeysip - gesture10key に必要
gesture10key - フリック入力を可能にする。参考。
Diamond TF3D Config Setup - Touch FLO 3D のチューニング
S2U2 - スライドしてロックを解除
Google Sync for your phone - Gmail や Google Calendar などと sync
q2chwm - 2ch ブラウザ
SDKCerts.cab & CameraRc.dll.0411.mui - カメラ消音 (CameraRc.dll.0411.mui を windows フォルダに入れて、SDKCerts.cab をインストール)。
Facebook
REAL Dimond-style Calculator - 計算機のスキン。IPC Black Dialer ENG.cab を本体側にインストール
pocketwit - Microblog client (twitter, identi.ca, etc.)
iris browser - iphone 用のページを表示(Yahoo! とか)。
.NET Compact Framework 3.5 - ToneBox に必要。Macでインストールする方法は下を参照。
Flash 7 Player - ToneBox に必要。
ToneBox - ToneMatrixのようなソフト。ToneBox.exe を直接実行する。

その他の設定

メール着信時バイブの長さ設定 (参考) - HKEY_LOCAL_MACHINE\Software\Arcsoft\ArcSoft MMS UA\Config\UI の Ringtoneplaysec
X04HT パフォーマンス改善法 - の (1) - (3) を実施

.NET Compact Frameworkのインストール

.NET Compact Framework 2.0をMac OS Xを母艦に導入するを参考に、以下の手順でインストールした。

The Unarchiverで msi を解凍する。
その中にある cfflies.cab を The Unarchiver で解凍する。
その中にある F_.wm.armv4i.cab.B9F092F9_68DA_4CEB_BB8B_5BC56F898FEA を NETCFv35.wm.armv4i.cab にリネーム。
X04HT に移して cab を実行。

JavaScript のちょっとした関数 (メモ)

Sun, 28 Feb 2010 18:12:31 +0900

あると便利かなあと思ったやつをネットで検索して自分向けにちょっと変えた。

URL のパラメータを取得(してオブジェクトに格納)

URL をパラメータで渡せるようにした(参照元)。

/**
 * parse query string for given URL or current location
 * @see    http://snipplr.com/view/15638/query-string-parsing-in-javascript/
 * @param  {string} URL
 * @return {object} Parameters (key-value)
 */
var parseQueryString = function(sUrl){
    var oParams = {},
        sQuery  = sUrl ? sUrl.split("?")[1] : window.location.search.substring(1);

    if (sQuery) {
        sQuery.replace(/([^?=&]+)(=([^&]*))?/g,
            function( $0, $1, $2, $3 ){
                oParams[ $1 ] = $3;
            }
        );
    }

    return oParams;
};

マルチバイト文字を 2 byte と数えてカットする SubStr みたいな関数

参照元は String オブジェクトを拡張してたのをただの関数にした。

/**
 * return true if given character is multibyte. if the given argument
 * is more than one character, it uses the first character of the string
 * @see    http://oshiete1.watch.impress.co.jp/qa5076682.html
 * @param  {string}  Char that can be get by String.charAt()
 * @return {boolean} true if it's multibyte
 */
var isMultiByte = function(sChar){
    var sCharCode = sChar.charCodeAt(0);
    // Range of single byte chars
    // Unicode : 0x0 〜 0x80, 0xf8f0, 0xff61 〜 0xff9f, 0xf8f1 〜 0xf8f3
    if ( (sCharCode >= 0x0 && sCharCode <= 0x80)
         || (sCharCode == 0xf8f0) 
         || (sCharCode >= 0xff61 && sCharCode <= 0xff9f) 
         || (sCharCode >= 0xf8f1 && sCharCode <= 0xf8f3) ) {
        return false;
    } else {
        return true;
    }
};

/**
 * custom substr function that counts multi-byte character as 2 bytes.
 * @require  isMultiByte()
 * @see    http://oshiete1.watch.impress.co.jp/qa5076682.html
 * @param  {string} String to be extracted
 * @param  {number} Index where to start the extraction
 * @param  {number} Length (optional) number of characters to extract
 * @return {string} Extracted text
 */
var doubleByteSubStr = function(sString, nIndex, nLength){

    // find start index by byte
    for (var i=0, len=0; len < nIndex; i++) {
        len = isMultiByte(sString.charAt(i)) ? len+2 : len+1;
    }
    var nIndexBytes = i;

    // find length for substr by byte
    len = 0;
    while(nLength > len) {
        len = isMultiByte(sString.charAt(i)) ? len+2 : len+1;
        i++;
    }

    var nLengthBytes = i - nIndexBytes,
        sExtracted   = sString.substr(nIndexBytes, nLengthBytes);

    return sExtracted;
};

ToDo List Update

Sun, 28 Feb 2010 18:11:09 +0900

ToDo List を更新した。

簡単なデータの Import/Export 機能を付けた
データ内のプロパティ名に typo があったので修正した (udpated -> updated)

もし以前に ToDo List にデータを入れていたら、更新日がおかしなプロパティ名で保存されていると思う。これによって変な動きをすることがあるかもしれないので、その場合は一度 Export してデータを修正して、 Import (1つ目のオプションを選択)したら直ると思う。

Import の 1 つ目のオプションは、ブラウザに保存されてるデータを削除してから、データを読み込む。 2 つ目のオプションは、同じ ID の ToDo があった場合は、更新日の新しい方で上書きする。

I updated ToDo List application.

Added simple Import/Export feature
Fix typo (udpated -> updated) in property name of task data

If you already have task data, it must contain wrong property name, it might cause of some strange behaviors. You might want to export your data and correct wrong property “udpated” to “updated”, and then import with the first option - replace data.

The second option (merge) overwrite tasks in the same id by the latest updated date.

The Soft Spot on the Behance Network via Daily Inspiration #422...

Wed, 03 Feb 2010 22:30:58 +0900

The Soft Spot on the Behance Network via Daily Inspiration #422 | Abduzeedo | Graphic Design Inspiration and Photoshop Tutorials

Google Apps のサブドメインに "www" を使う

Sun, 24 Jan 2010 17:25:01 +0900

Google Page Craetor の終了に伴い、下のページに書いたように静的ファイルのホスティングを Google App Engine に移行した。

静的ファイルのホスティングをPage CreatorからApp Engineに移行

移行の際、GAE には “www” というサブドメインを割当て、Page Creator の使用を停止した(無効にした)。それで問題なく動いていたのだが、去年の 12 月に Google が Page Creator のコンテンツを Google Sites に移行させてからおかしくなった。

Page Creator で作ったページが Sites に復活し、GAE で使っているサブドメイン “www” を割当てられたので、コンテンツが移行された後、GAE にホスティングしたファイルにアクセスできなくなった。さらに Sites の web address mapping から “www” を削除して、Page Creator から移行されたページを削除しても、 GAE の方には “www” でアクセスできなくなったままだった。

最近になって、下の Help トピックを見つけて解決できたので、メモしておく。

Google Sites で作成したサイトの URL に、サブドメイン www が割り当てられない

一言で言うと、一度 “www” をスタートページのサブドメインにしてから、別のものにすれば他のアプリケーション (GAE など) で使えるようになる。

実際にやった手順は以下の通り。

Google Sites の Web Address Mapping から “www” を削除 (Page Creator のコンテンツも削除した)
DNS の設定から、”www” を削除 (これと、4 は必要ないかもしれない)
スタートページのサブドメインに “www” を割り当てる
DNS の設定で “www” の CNAME レコードに “ghs.google.com.” を割り当てる
スタートページのサブドメインを他のものに変更 (“start” など)
GAE の Web Address Setting で “www” を設定 (www.example.com)

Using "www" for subdomain of Google Apps

Sun, 24 Jan 2010 17:23:58 +0900

Due to temination of Google Page Creator, I moved hosting of static files to Google App Engine as I wrote the following article.

Migrating static contents from Page Creator to App Engine

When I moved to App Engine, I set up “www” to the subdomain for GAE. And I disable Page Creator on my Google Apps Account. It has worked as expected… until Google migrate page creator contents to Google Sites last December.

Google revived my Page Creator contens in Google Sites, and assigned “www” as the subdomain of Google Apps, that prevented access to my GAE contents. Moreover, even though I removed “www” from web address mapping of Sites, I couldn’t resolve the problem to access to my GAE contens with subdomain “www’.

Now I could fix the problem lately, according to the following help topic (Japanese) of Google Apps, here is the notes.

Google Sites で作成したサイトの URL に、サブドメイン www が割り当てられない

In short, to use “www” as submain of Google Apps, assign “www” to Start Page, and then change subdomain of Start Page, asign “www” to another Apps.

Here is the exact steps to assign “www” to GAE in my case.

Remove “www” from Google Sites addresss mapping (removed page creator contents from Sites too)
Remove “www” from my DNS settings (You might not need this step and step 4)
Assign “www” to Start Page of my Google Apps
Set up “www” to CNAME record (points to “ghs.google.com.”)
Change subdomain of Start Page (e.g., “start” or something)
Assign “www” to GAE (web address setting)

Interesting To-Do list applications

Mon, 11 Jan 2010 20:05:28 +0900

I saw an article about TeuxDeux which is simple to-do list application on the web.

TeuxDeux (via Nick Finck Blog)

And I saw another article (Japanese) about a scheduler applciation which has similar looking to TeuxDeux.

山積みスケジューラ (via 誠 Biz.ID：仕事の優先度が付けられない人へ――「時刻表示のないスケジューラ」のススメ (1/2))

山積みスケジューラ is one of template for xfy Planner. The schedular doesn’t have time schedule, but it has the estimated time for a task, and you pile the task by date. You can see the screenshot of the tool in the middle of the article. As you can see, each date has total time of all task for the date, each task has estimated time and the task block height is different based on the estimated time.

According to the article, you can devide one large task into some pieces at any time, so you don’t have to consider all of small tasks when you add a large task (schedule.)

I think it a good concept that shows the time estimate of a task visually and allow you to devide it. It’s not only useful for scheduling but reviewing your tasks.

"Deeply understanding their customers is what allows successful companies to think five years ahead..."

Sat, 09 Jan 2010 20:04:08 +0900

“Deeply understanding their customers is what allows successful companies to think five years ahead of the market and develop products and services that revolutionize the way we live our lives.”

- Research Is Communication :: UXmatters via Deeply understanding customers allows companies to develop products that revolutionize the way we live our lives | inspireUX - words to inspire user experience designers

(拙訳) 顧客を深く理解する事こそが、企業を、5年先のマーケットを見据えた、私たちの生活に革命をもたらすようなサービスや製品を開発することへと導く。

ブラウザのローカルストレージを使った ToDo List

Tue, 29 Dec 2009 16:28:45 +0900

YUI2 にクライアントサイドのストレージ (ブラウザのローカルストレージ) を扱う Storage Utility があるので、それを使って簡単な ToDo List を作ってみた。

ToDo List

データはブラウザのストレージに保存されるので (HTML5 のローカルストレージか、Gears、または Flash のストレージ)、サーバ側には何も送られない。当たり前だが、ブラウザを超えてデータは引き継がれない (Firefox で編集したデータは Safari では見れない)。動作は、Safari 4、Firefox 3.5、IE8、Chrome で確認した。コードはまた来年にでも、もう少しきれいなものに書き直したい。

YUI の Storage Utility を使うと、データを同じメソッドで (上に書いた 3 つの内のいずれかのストレージに) key - value の形で簡単に保存できる。この ToDo List では、ToDo リストの JSON データを YUI の JSON Unility で文字列にして (YAHOO.lang.JSON.stringify(json_data) でできる)、取り出した時は parse して (YAHOO.lang.JSON.parse(json_data) で parse) 使っている。

その他の特徴としては、

ToDoリストのアイテムは Drag & Drop で並べ替え
Delete した直後なら、Undo できる
Completed リスト(完了した項目)はまとめて削除できる(Undo できない)

あと、機能とは関係ないけど、画像を一切使ってない。グラデーションは下のツールで生成したコードを使った。

Gradient CSS Generator

ToDo List application with local storage

Tue, 29 Dec 2009 16:27:33 +0900

I created simple todo list application with Storage Utility of YUI2. The storage utility make you easy to handle client side storage (local storage engine in modern browser.)

ToDo List

The data is stored in storage of browser (i.e. local storage of HTML5, Geas or storage of Flash), your browser won’t send your todo item data. Of course you can’t use a todo item with different browser. For example, todo item A that is save in Firefox won’t be appeared in Safari. I checked the tool on Safari 4, Firefox 3.5, IE8 and Chrome. I would like to rewrite the code to be better one in near future.

The Storage Utility allows you to save key-value data to local storage (either one of three storage engine above) with the same method. The ToDo List saves JSON strings that is converted by YAHOO.lang.JSON.stringify() and the JSON string is parsed by YAHOO.lang.JSON.parse() when they are loaded.

And other features are

ordering list item by drag & drop
able to undo deleted item right after deletion
able to clear completed items (you can’t undo it)

Though this is not a feature, but I don’t use any image file for the UI. Gradation color is generated by the following tool.

Gradient CSS Generator

ブランドを生み出す環境の力

Wed, 23 Dec 2009 20:33:50 +0900

Note & point で見た Ologie, LLC のプレゼン資料 The Power Of Branded Work Environment に書かれていた内容に、その他のことにも当てはまるような事があったので、メモしておく。

35 ページからの How Can We Maximize Success? (きれいな図などもあるのでプレゼンの資料を見た方がわかりやすいか)

目的を明確に定義する
戦略を表す
—- Long Term (5-10 Years) … Inspiration —-
Values (価値、自分たちの信じるもの)
Mission (ミッション、なぜ自分たちが存在するのか)

—- Medium Term (3-5 Years) —-
Vision (ビジョン、進むべき方向)

—- Short Term (1-3 Years) … Action —-
Strategy (戦略、どのようにしてたどり着くか)
Tactics (戦術、何をすべきか)
共同作業的なプロセスを作る (様々なレベル、立場、部署の人を巻き込む)
プロジェクトの特性を定義する (オフィスのデザインをする会社のプレゼンなので、オフィスに関するプロジェクトでの例が p.39 に出ている。どういうタイプのプロジェクトなのか、を明確にすることなのではないか)
戦略を総括的な形で表す(? 原文: Translate the strategy in a holistic way. オフィス環境と製品などは若干異なるかもしれないが、成果物には戦略が反映されている、または成果物から戦略が読み取れるようなものになっているかどうか、と解釈した)
学習し、進化させる (実行 -> 評価 -> 教育 -> 進化、のサイクルを繰り返す)

onChange のタイミング

Sun, 20 Dec 2009 19:56:22 +0900

チェックボックスの状態が変わったら任意の処理をするような JavaScript を書いてたら、 IE と他のブラウザで動きが違ったのでネットで解決策を探してみた。Firefox なんかはチェックボックスの状態が変わった瞬間、 IE は状態が変わった後にチェックボックスからフォーカスが外れたら onChange イベントが発生するようだ。

IE の動きは何か直感的じゃないと思ったけれど、別に間違ってないらしい。

http://www.w3.org/TR/html4/interact/scripts.html

The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus.

参考にしたサイト:

いくつかサイトを見てみたけど、IE の時だけチェックボックスをクリックした時に一旦チェックボックスからフォーカスを外し、もう一度フォーカスする、というのが良さそうだった。以下 YUI を使ったサンプルコード。




    
    checkbox test
    
    



     checkbox 1
     checkbox 2

1 つ目のチェックボックスは onChange しかイベントリスナーを登録してないので、 IE と Firefox ではイベントが発生するタイミングが違う。

別に onClick にすればいいじゃん、とも思ったけど、onClick だとクリックしたままポインタをずらしたり (チェックボックスは変更されない)、ラジオボタンの場合は既に選択されている方をクリックしたりしてもイベントが発生するので、意図しない動きになるかもしれない(この点を踏まえてれば問題ないだろうが)。

数値文字参照を元の文字に変換するブックマークレット

Sat, 12 Dec 2009 20:43:06 +0900

こんな感じ。

javascript:(function(){function g(el,l){for(var i=0;i



変換したい文字を選択して実行。下のページを参考に、テキストエリアの中の文字列にも対応した。


bookmarkletで選択文字列を取得することを考える - 徒書

そこで言われている


  「最後にフォーカスされたフレーム(またはテキスト入力エリア)」を取得するような方法があったらよいなと思ったのですが、自分ではそれを見つけることができませんでした。


は、テキストエリアの文字列を取得したら selectionStart と selectionEnd を 0 にすることで対処してみた。以下、改行を入れてちょっと見やすくしたもの。

(function(){
    function g(el,l){
        for(var i=0; i



Firefox Add-ons and Scripts for Tumblr
Sat, 12 Dec 2009 20:17:33 +0900
Japanese heavy users of Tumblr seems to use Greasemonkey
and the following Greasemonkey scripts.



AutoPagerize - It loads next page contents when you scroll down to the bottom of the page.

Minibuffer - It gives you command-line operation. (This is required for LDRize and ReblogCommand.)

LDRize - You can scroll to next/previous post with “j”, “k” key.  You can mark a post with “p” key and open all marked posts with “o” key.

ReblogCommand - You can reblog with just pressing “t” key. (Press “Shift” + “t” to reblow with comments.)

Tumblr Dashboard jk disable - Prevent go to page top when you scroll down to the bottom with “j” key by AutoPagerize. (You can install the script from here)

Install follwoing user style sheet for Stylish.



A Smart Dashboard is Mine - This makes your own post collapse and tranclucent in your dashboard.

Dashboard Blockquooooote Brushup - This makes nested blockquote post more readable.

And other Add-on:



tombloo - You can posts many services at once.

Usage:


Press “j” to read forward your dashboard, press “k” to back to previous post
When you want to reblog a post, just press “t”

That’s it.

References (Japanese websites):


革新的な情報収集ツール「tumblr」をやってみるべし(CROSSBREED クロスブリード！)
http://uessai-text.tumblr.com/post/261516911/firefox-tumblr



YUI を使ったアコーディオンメニュー
Sat, 14 Nov 2009 15:25:14 +0900
YUI を使ってアコーディオンメニューを実装するサンプルはいくつかあるけど、どうやってるのか
知りたかったので自分でも作ってみた。

参考までに、最近見つけたものをいくつか。


YUI Widget: Accordion Manager - Examples - JavaScript Bubbling Library - YUI Library Extension for Event-Driven Applications
YUI AccordionView Widget
Notoptimal Dev: A Simple YUI-Powered Accordion Widget

どんなことをするか


ページを読み込んだ時に、アコーディオンのコンテンツを隠す
メニューをクリックした時にアコーディオンのコンテンツを表示する (開いてれば閉じる)

使い方



Yahoo UI Library の YAHOO, Dom, Event, Animation ユーティリティが必要
対象となるコンテンツ全体を ‘accordion’ という class 名のタグで囲む
メニューのラベルは ‘ac-label’ という class 名と、ユニークな id を付ける
アコーディオンのコンテンツは ‘ac-content’ という class 名にし、id はラベルの id プラス ‘-conent’ にする
ac-content には ‘overflow: hidden;’ というスタイルを適用する
対象となるコンテンツの親となるエレメントの id を引数にして、関数を実行する

HTML




    
    Accordion Widget
    



    Accordion 1
    
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
    

    Accordion 2
    
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
    











yui-accordion.js

YAHOO.namespace("myWidget");

/**
 * accordion widget
 * @require yahoo, dom, event, animation, logger (optional)
 * @param  {string} RootNodeId of accordion object
 * @return {object} Accordion object
 */
YAHOO.myWidget.accordion = function(sRootNodeId){
    var Anim  = YAHOO.util.Anim,
        Dom   = YAHOO.util.Dom,
        Event = YAHOO.util.Event;

    var aAccordionEl = Dom.getElementsByClassName("accordion", "div", sRootNodeId);
    YAHOO.log(aAccordionEl.length + " accordion elements found");

    /**
     * toggle accordion menu
     * @param {object} Event (click)
     * @param {string} AccordionId (of the element)
     */
    var toggle = function(oEvent, sAccordionId){
        YAHOO.log("toggle function called for '" + this.firstChild.data + "' with [" + oEvent + ", " + sAccordionId + "]");

        if ( oAccordion[sAccordionId]["state"] === "expanded" ) {
            collapse(sAccordionId);

        } else if ( oAccordion[sAccordionId]["state"] === "collapsed" ) {
            expand(sAccordionId);
        }
    };

    /**
     * expand accordion contents
     " @param {string} AccordionId
     */
    var expand = function(sAccordionId){
        YAHOO.log("expand accordion contents of " + sAccordionId);
        oAccordion[sAccordionId]["expand"].animate();
        oAccordion[sAccordionId]["state"] = "expanded";
    };

    /**
     * collapse accordion contents
     * @param {string} AccordionId
     */
    var collapse = function(sAccordionId){
        YAHOO.log("collapse accordion contents of " + sAccordionId);
        oAccordion[sAccordionId]["collapse"].animate();
        oAccordion[sAccordionId]["state"] = "collapsed";
    };

    var oAccordion = {};
    for (var i=0, l=aAccordionEl.length; i



Accordion menu with YUI
Sat, 14 Nov 2009 15:02:00 +0900
There are some according widget with YUI, but I created very simple accordion menu widget
for myself to know how to implement it with YUI.

For your reference, I list some accordion widgets that I found laterly.


YUI Widget: Accordion Manager - Examples - JavaScript Bubbling Library - YUI Library Extension for Event-Driven Applications
YUI AccordionView Widget
Notoptimal Dev: A Simple YUI-Powered Accordion Widget

What’s the script doing


When a page load, it collapses accordion contents.
When you click a label of accordion, it expands its content (collapse if it’s expanded.)

How to use


It requires YAHOO, Dom, Event and Animation utility of Yahoo UI Library.
You need to wrap target contents with class name ‘accordion’.
Label of accordion must have class name ‘ac-label’ and its own id.
Accordion contents must have class name ‘ac-content’ and the id must be id of ac-label + ‘-content’.
You need to specify css ‘overflow: hidden;’ to ac-content.
Execute the function with root node id. It look for target elements under the specified node.

HTML




    
    Accordion Widget
    



    Accordion 1
    
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
    

    Accordion 2
    
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
    











yui-accordion.js

YAHOO.namespace("myWidget");

/**
 * accordion widget
 * @require yahoo, dom, event, animation, logger (optional)
 * @param  {string} RootNodeId of accordion object
 * @return {object} Accordion object
 */
YAHOO.myWidget.accordion = function(sRootNodeId){
    var Anim  = YAHOO.util.Anim,
        Dom   = YAHOO.util.Dom,
        Event = YAHOO.util.Event;

    var aAccordionEl = Dom.getElementsByClassName("accordion", "div", sRootNodeId);
    YAHOO.log(aAccordionEl.length + " accordion elements found");

    /**
     * toggle accordion menu
     * @param {object} Event (click)
     * @param {string} AccordionId (of the element)
     */
    var toggle = function(oEvent, sAccordionId){
        YAHOO.log("toggle function called for '" + this.firstChild.data + "' with [" + oEvent + ", " + sAccordionId + "]");

        if ( oAccordion[sAccordionId]["state"] === "expanded" ) {
            collapse(sAccordionId);

        } else if ( oAccordion[sAccordionId]["state"] === "collapsed" ) {
            expand(sAccordionId);
        }
    };

    /**
     * expand accordion contents
     " @param {string} AccordionId
     */
    var expand = function(sAccordionId){
        YAHOO.log("expand accordion contents of " + sAccordionId);
        oAccordion[sAccordionId]["expand"].animate();
        oAccordion[sAccordionId]["state"] = "expanded";
    };

    /**
     * collapse accordion contents
     * @param {string} AccordionId
     */
    var collapse = function(sAccordionId){
        YAHOO.log("collapse accordion contents of " + sAccordionId);
        oAccordion[sAccordionId]["collapse"].animate();
        oAccordion[sAccordionId]["state"] = "collapsed";
    };

    var oAccordion = {};
    for (var i=0, l=aAccordionEl.length; i



JavaScript のスピードアップ (Google Tech Talk)
Sun, 18 Oct 2009 16:49:00 +0900
最近 Google Tech Talk の Speed Up Your JavaScript を見たので、 今後のためにメモしておく。

Nicholas C. Zakas さんがプレゼンテーションの中で次の4つの点について説明している。


スコープ管理
データアクセス
ループ
DOM

スコープ管理


ローカル変数を使う (変数などはローカル変数に保存して使う)
“with” ステートメントをさける。また “try-catch” を使う時は注意 (これらはスコープチェインの先頭にオブジェクトを追加する)

#1の例: ローカル変数を使用

function func1(){
    var doc = document;
    var header  = doc.getElementById('header');
    var content = doc.getElementById('content');
    // do something
}


データアクセス


リテラルとローカル変数が一番早い (ローカル変数を使う)
オブジェクトのプロパティの階層が深くなるほど時間がかかる

#1の例:

function process(data){
    var count = data.count;
    var item  = data.item;
    for (var i=0; i


ループ


for-each、 for-in を避ける
一回のイテレーションでの処理を減らす (これには条件式やインクリメントなども含む)
イテレーションの回数を減らす

#2の例:

次のコードは

var len = values.length;
for (var i=len; i--){
    //do something
}


下のコードよりも早い

for (var i=0; i


DOM


DOM は document が変更された時に更新される (オブジェクトにアクセスする度にクエリが実行される)
長さやアイテムをローカル変数に保存する
アイテムに頻繁にアクセスする場合は、ローカルの配列にコピーする
ノードの追加、削除の回数を減らす (例えば document.fragment を使う)
‘style’ プロパティを変更しない (class を定義し、className を変更する)
レイアウト情報へのアクセスを減らす (2回以上アクセスするなら、ローカル変数に保存する)

#1の例: 以下は無限ループ

var divs = document.getElementByTagName('div');
for (var i=0; i


#3の例:

function array(items){
    try {
        return Array.prototype.concat.call(items);
    } catch (ex) {
        var i      = 0,
            len    = items.length,
            result = Array(len);
        while (i


#4の例:

var list = document.getElementById('list');
var fragment = document.createDocumentFlagment();
for (var i=0; i<10; i++){
    var item = document.createElement('li');
    item.innerHTML = 'Option #' + (i+1);
    fragment.appendChild(item);
}
list.appendChild(fragment);


上記は将来的にブラウザのJSエンジンが改善された場合、不要になるかもしれないが、現時点で有効なテクニック。

その他、参考になるページ (Nicholas C. Zakas’s blog:


Speed up your JavaScrpt, Part 1
Speed up your JavaScrpt, Part 2
Speed up your JavaScrpt, Part 3
Speed up your JavaScrpt, Part 4



Speed up your JavaScript (Google Tech Talk)
Sun, 18 Oct 2009 16:48:24 +0900
I watched Google Tech Talk Video - Speed Up Your JavaScript yesterday. I take a note of some points of the technic here for my study.

Nicholas C. Zakas showed 4 points for speed up in the presentation.


Scope Management
Data access
Loops
DOM

Scope Management


Use Local Valiables. (Store a valiable to a local valiable.)
Avoid “with” statement. Be careful “try-catch”. (Both add an object to scope chain)

Example of #1: Using local valiable

function func1(){
    var doc = document;
    var header  = doc.getElementById('header');
    var content = doc.getElementById('content');
    // do something
}


Data access


Literal & Local Valiables are fastest (use local valiables)
Deeper object property is slower

Example of #1:

function process(data){
    var count = data.count;
    var item  = data.item;
    for (var i=0; i


Loops


Avoid for-each, for-in
Less work per iteration (includes condition evaluation and incrementing/decrementing)
Less number of iteration

Example of #2:

The following code is faster

var len = values.length;
for (var i=len; i--){
    //do something
}


than below.

for (var i=0; i


DOM


DOM is updated when document is changed (the query re-runs when the object is accessed)
Store length, items in local valiables
Copy items in local (regular) array if it’s frequently used
Less node add/remove (use document.fragment, for example)
Avoid changing ‘style’ property (define class and change className instead)
Minimize access to layout information (store it in local valiables if it’s accessed more than once)

Example of #1: The following loop is infiite

var divs = document.getElementByTagName('div');
for (var i=0; i


Example of #3:

function array(items){
    try {
        return Array.prototype.concat.call(items);
    } catch (ex) {
        var i      = 0,
            len    = items.length,
            result = Array(len);
        while (i


Example of #4:

var list = document.getElementById('list');
var fragment = document.createDocumentFlagment();
for (var i=0; i<10; i++){
    var item = document.createElement('li');
    item.innerHTML = 'Option #' + (i+1);
    fragment.appendChild(item);
}
list.appendChild(fragment);


These technics may not be effective in future for browsers that have more optimising JS engine, but it’s effective for now.

Other references (on Nicholas C. Zakas’s blog:


Speed up your JavaScrpt, Part 1
Speed up your JavaScrpt, Part 2
Speed up your JavaScrpt, Part 3
Speed up your JavaScrpt, Part 4



via 10/GUI | Blog | Nick Finck | UX/IA Pro, Speaker, and...
Tue, 13 Oct 2009 21:45:33 +0900


via 10/GUI | Blog | Nick Finck | UX/IA Pro, Speaker, and Community Cultivator.


"実現すべきなのは、ひとりが使い始めたら、周りはまったく何もしなくても、当人とその友だち全員の役に立つ仕掛けだ。"
Sun, 04 Oct 2009 00:18:06 +0900
“実現すべきなのは、ひとりが使い始めたら、周りはまったく何もしなくても、当人とその友だち全員の役に立つ仕掛けだ。”

 - jwz: グループウェア、ダメ！ ‐ Groupware Bad

(original sentence)


  The trick you want to accomplish is that when one person is using your software, it suddenly provides value to that person and their entire circle of friends, without the friends having had to do anything at all.