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

YUI2 にクライアントサイドのストレージ (ブラウザのローカルストレージ) を扱う Storage Utility があるので、それを使って簡単な 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 できない)

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

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

ToDo List application with local storage

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.)

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.

ToDo List application with local storage

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

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

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

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

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

    — Short Term (1-3 Years) … Action —
    Strategy (戦略、どのようにしてたどり着くか)
    Tactics (戦術、何をすべきか)

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

onChange のタイミング

チェックボックスの状態が変わったら任意の処理をするような 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 を使ったサンプルコード。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>checkbox test</title>
    <!-- Combo-handled YUI JS files: -->
    <a href="http://yui.yahooapis.com/combo?2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js">http://yui.yahooapis.com/combo?2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js</a>
</head>
<body>
<ul>
    <li><input type="checkbox" name="check-test-1" id="check-test-1" value="1" /> checkbox 1</li>
    <li><input type="checkbox" name="check-test-2" id="check-test-2" value="1" /> checkbox 2</li>
</ul>
</body>
</html>

Javascript

var onChangeCheckbox = function(oEvent){
    alert("checkbox changed");
};

YAHOO.util.Event.onDOMReady(function(){
    YAHOO.util.Event.addListener("check-test-1", "change", onChangeCheckbox);
    YAHOO.util.Event.addListener("check-test-2", "change", onChangeCheckbox);

    // for IE
    if (YAHOO.env.ua.ie > 0) {
        var oCB2 = document.getElementById("check-test-2");
        YAHOO.util.Event.addListener(oCB2, "click", function(oEvent){
            oCB2.blur();
            oCB2.focus();
        }, oCB2);
    }
});

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

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

onChange のタイミング

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

こんな感じ。

javascript:(function(){function g(el,l){for(var i=0;i<l;i++){var s=el[i].selectionStart;var e=el[i].selectionEnd;if(s!=e){el[i].selectionStart=0;el[i].selectionEnd=0;return el[i].value.substr(s,e-s);}}return '';}var s=window.getSelection().toString();if(s.length<=0){var el=document.getElementsByTagName('textarea');s=el?g(el,el.length):false;if(!s){el=document.getElementsByTagName('input');s=g(el,el.length);}}var r=s.replace(/&#[0-9]+;/g, function(m){return String.fromCharCode(m.replace(/&#|;$/g,''));});var p=prompt(s,r);})();

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

そこで言われている

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

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

(function(){
    function g(el,l){
        for(var i=0; i<l; i++){
            var s = el[i].selectionStart;
            var e = el[i].selectionEnd;
            if(s != e){
                el[i].selectionStart = 0;
                el[i].selectionEnd   = 0;
                return el[i].value.substr(s, e-s);
            }
        }
        return '';
    }
    var s = window.getSelection().toString();
    if(s.length <= 0){
        var el = document.getElementsByTagName('textarea');
        s = el ? g(el, el.length) : false;
        if(!s){
            el = document.getElementsByTagName('input');
            s  = g(el, el.length);
        }
    }
    var r = s.replace(/&#[0-9]+;/g, function(m){
        return String.fromCharCode(m.replace(/&#|;$/g,''));
    });
    var p = prompt(s, r);
})();
数値文字参照を元の文字に変換するブックマークレット

Firefox Add-ons and Scripts for Tumblr

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.

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):

Firefox Add-ons and Scripts for Tumblr