• GoogleCode – jquery-sectiontoggler

見出しをクリックしたらそのセクションを閉じたりとかして、cookieに保存されるのでリロードしても表示非表示が保存されてたりします。コードは手で書くだけです。自分はよくこういうのHTMLでとりあえず書いたりするのでとりあえずプロジェクト化してみた。

• Introducing jQuery

jQueryを全く知らん人が、JavaScript入門するためにみたいな内容です。
矢印キー等で進んだりできます。Google Chromeで見ると最も幸せになれます。
VLゴシックとかパソコンに入ってるともっと幸せになれます。

お手製HTMLプレゼンのやつ↓

• $.presentation

• HTML+CSS Templating

HTMLのテンプレってこう組んでおけばいいんじゃね？と言うような内容です。
スライドはGoogle Chromeで見ると最も幸せになれます。
似たようなことを知りたい人はOOCSSのプレゼンを頑張ってみるべし。

• MindNode (iTunes)

まず、これは何なのかって言うと、マインドマップを作るためのソフトです。そんで、そのマインドマップっていうのは何かって言うと、ググってもらうと色々出てくるんですが、アウトラインでテキストを組み立てるのを、ビジュアルで行うようなものなんです。

たとえば自分の場合、本を書くというミッションがあったとして、うーんどうしようかなーこう言う構成であーでこーでっていうのを何でやるかって言うと、人によると思うんですが、自分の場合、vimか秀丸でやってました。インデントつけて階層を表して初めに概観しながらやるんです。それで問題無いといえば無いんですが、スクロールしたり上いったり下いったり、あれをこっちに移してみてインデント変えたりとか、そーいう作業が発生しますよね。そーいうのを直感的にできるのがこのマインドマップってやつなんです。

それでまー、マインドマップって、いくつかPC,Macでもソフトがあるんですが、それらは自分、使ったこと無かったです。でも、このiPadに、このMindNodeは最高にフィットしているアプリだと思いますよ。iPadが「帯に短したすきに長し」となぜ感じるかと言うと、まず、テキスト打つのが苦痛だからです。許せる範囲ではあるが、長文はかけないです自分はiPadで。それならPCでやります。しかし、PCは、直感的ではないです。マインドマップのソフトを他に使ったことは無いですけれども、例えばPhotoshopを使うような、vimでコマンドを覚えるような、中間の翻訳作業が必要になるはずです。

iPhoneなりAndroid携帯持ってて、「Twitterはスマートフォンと相性がいい」と思ってる人は多いんじゃないかと思うんですが、「ブログ投稿はスマートフォンと相性がいい」と思う人は少ないんじゃないでしょうか。そーいうヘビーな作業には向いてないんですそーいうiPhoneとかiPadってきっと。色々出てる音楽ソフトについてもそう思います自分は。いじる楽しさの面ではいけてるけど、それでガッツリ作ろうとは思わない。めんどいし手間がかかる。

iPadでのマインドマップ作成は、「本番の文章＝ブログ」「構成のアウトライン＝Twitter」と置き換えて考えられるほどに相性がいいと感じてます。つまんで動かしたり拡大したり縮小したりするのが、ほんとに直感的なんです。マインドマップではいっぱいテキスト打つ必要無いし。そんで、完成したらPCの横にiPadでマインドマップ表示させながら本番を書くんです。これってすごい良くない？と一人で盛り上がっています。昨日MindNode買ったばっかりなんですけど。

/*
    superHoge widget comes first.
    This constructor is $.zudo.superHoge
*/
$.widget('zudo.superHoge', {
    _create: function(){
        alert('zudoSuperHoge');
    }
});

/*
    $.zudo.hoge extends $.zudo.superHoge.
    Wow how easy isn't this?
*/
$.widget('zudo.hoge', $.zudo.superHoge, {
    myMethod: function(){
        alert('zudoHoge');
    }
});

var superHoge = new $.zudo.superHoge;
superHoge._create(); // zudoSuperHoge

var hoge = new $.zudo.hoge;
hoge._create(); // zudoSuperHoge
hoge.myMethod(); // zudoHoge

でも、あーこれ$.zudo.hogeの中で別に_create定義したい場合、それしちゃうと$.zudo.superHogeの_createを上書きしちゃうからどーすればいいんだ。$.zudo.superHogeの_createも呼びたいんだけどーと思ってたらこんな風にしたらできたっぽい。下の例は、newでインスタンス作ったらoptions.template_containerからelementを作るってのをしている。そんで、$.zudo.hogeは、_createを上書きしていて、その中で$.zudo.superHogeの_createを呼んでる。

$.widget('zudo.superHoge', {
    options: {
        template_container: '<ul />',
        template_child: '<li />'
    },
    _create: function(){
        // if widget was created via $(dom).superHoge(),
        // don't make element from template
        if(this.element){ return this; }
        this.element = $(this.options.template_container);
        return this;
    },
    add: function(val){
        $(this.options.template_child)
            .text(val)
            .appendTo(this.element);
        return this;
    }
});

$.widget('zudo.hoge', $.zudo.superHoge, {
    options: {
        _super: $.zudo.superHoge
    },
    _create: function(){
        this.options._super.prototype._create.apply(this, arguments);
        this.element.addClass('childUl');
        return this;
    }
});

$(function(){

    /*
        create superHoge's instance.
        the element would be created in '_create'.
        the src is defined in options.
    */
    var superHogeInstance = (new $.zudo.superHoge)._create();
    superHogeInstance.element.appendTo('body');
    superHogeInstance
        .add('foo')
        .add('bar')
        .add('moge');

    /*
        create hoge's instance.
        hoge extends superHoge and
        hoge has its own '_create' method.
        This method overrides superHoge's '_create',
        so using 'apply' to call superHoge's '_create'.
    */
    var hogeInstance = (new $.zudo.hoge)._create();
    hogeInstance.element.appendTo('body');
    hogeInstance
        .add('foo')
        .add('bar')
        .add('moge');

});

• サンプル

なんかcallとかapplyとかようわからなかったけど最近それがなんだかちょっと分かってきた気がする。あと、なんかうまくもうちょいできる気がする。というより$.widget使わなくて良くない？とか思ってきた。

• 動作が軽い。iPhone3Gだとまじで重いものとかもすいすい。
• Twitterクライアントとかつけっぱで横に置いておいたりするといいかも
• iBooksへぼい。へぼすぎてガッカリする。削除するレベル。
• 青空文庫リーダーみたいなものはよさげだけど僕は読まない。
• Kindle（アプリ）でJavaScript本（洋書）を何冊か買った。でも、洋書でもラインナップは万能ではない。
• 膝に置くとか何かをiPadの背にしてないと手が疲れる。疲れすぎる。
• ブラウザ三国志やりやすくてやばい
• 充電全然切れない。一日中ファミレスでいじってても切れないレベル
• iElectribeおもろい。普通のElectribeもってたけど、遜色ないしむしろ操作性よくなってる風かも
• 産経新聞HDすごい。iPhoneの時もすごいと思いつつ全然使わなかったけど、これならでかい新聞広げるより圧倒的に見やすい気が（でも多分あんま使わない）
• Mirro’s Edgeっていうゲームやった。まぁそこそこおもろい。
• Kamehameha (iTunes)やるとやばい
• キーボードはiPhoneより圧倒的に打ちやすいけど当然ブラインドタッチとかはできない。自分は、「サクサクいけてすごい！キーボードなんてなくていいね！」ってレベルのものじゃないと思った。
• 自分はノートパソコンが生活の中心なので、そこまで自分にインパクトを与えるものじゃないと思った。外付けキーボードを付ける状態でiPad使うならノートパソコンを開きますな。
• iPhoneで使ってたカレンダー、ToDo、RSSリーダー等が、これで使えるとすごくいいと思う。特にRSSリーダーはこれで見たい。でもそために3Gを契約して毎月うんぜんえん払う気にはなれないなぁ。
• でもメモ帳をカバンの中に入れておくといつもぐちゃぐちゃになっているので代わりにiPadを持ちあるこうかと思う。
• 小さいお子さんがいるお父さんお母さん向けに、これはすごいと思う。キラーデバイスだと思う。音がコロコロ鳴ったりとかそういうどうでもいいおもちゃアプリはなんだかすごい。面白い。

自分が買う前、これで何すんだってのは、具体的には、うーん、洋書とか読むか？JSとかの。ってぐらいで、それは試してみたのですが、これは非常によかったです。こういう、本を持たないのに外で本が読めると言うのは素晴らしいと思う。勉強がてらこれは続けたいと思ってます。でも、残念なのはそのラインナップの少なさ。日本語の本で、これ読みたいなーとか思うものがあったとしても、それをこれで読むのはちょっと現時点だといつになるやらって感じですね。裁断機とスキャナ買って取り込むとかは、かったるすぎて自分はやってられないと思います。

そんな感じで、自分はこれ、勉強がてら洋書読む用と、メモ帳代わり、あとはなんか面白そうなゲームでたらやるか、ごく稀にトラック作るときのサンプリングネタ用、寝起き時専用ブラウザ三国志マシンって感じでした。日本語で本屋に売ってるような本が普通にワンクリックで買えて読めたらほんと理想だと思いますねーこれで。未来的にはそれが目指すものなんでしょうけど、現時点ではそれができないので、なんか面白パッドなおもちゃって感じです自分の印象としては。あったらおもしろいけど別に無くても何も困ることは無いって感じです。ノートパソコン持ち歩いてる身としては。

あとはHTML/CSS/JavaScript書く仕事的には、おもしろくて未来が開けそうなモノではあります。
多分なんかしら作ってみたりはすると思う。
今までと違った画面領域でやれることも増えたりはわくわくしますなー

• jquery-presentation (Google Code)
• demo (webkitで見ると素敵)

• jquery-ui-msg-notifier (Google Code)
• demo

テストも書いてみた。

• tests

jQuery UIの$.widgetがマイブーム
呼び方はjGrowlを参考にしています。

• Best Practices in Javascript Library Design (YouTube)
• Building a javascript library (slideshare)

• jQueryはすげー短く書けることにフォーカスしてる
• jQueryはプラグイン設計だ。
• コアな部分は取り込み、
  オプショナルな機能はプラグインとして使えるようになっとる
• jQueryは「何かを探してきて」「そいつになんかする」
• 少なくてしっかりしたAPIを作るのが重要
• たくさんメソッドがある、複雑なメソッドがあるそりゃ最悪
• コードなんてあっという間にめちゃくちゃになる
• 全オブジェクトが同じメソッド持ってるこれって超簡単
• 短いコードはメンテナンス性に優れてるよ
• 共通の、根っこの部分まで簡潔にする
  .eq(0), .gt(3), lt(2) は slice(0,1) .slice(1,4) より簡単
• ネーミングが想像できるようにする
  .click か .onclick か？ .onclick’ だったらonClickにするか悩むっしょ
• 共通のルールにのっとってAPIを設計してるよ

.method(options, arg1, arg2,.... callback);
   optionsはkey valのobject、最後がコールバック。
.method(function(){
   // here, this is always DOMElment
})
大体中身ではthisがDOMElementになるようにしてる

• JSだとなんでも参照だからOOしやすい。
• Functional Programming

(function(){
   // do somehting
   reutrn something;
})();
//とかカプセル化マジ便利

(function(){
   var test = false;
   this.method(function(){
      return test;
   });
}).call(this);
//とかそんな感じででthis変えられる。

• ローカルスコープでインスタンスにアクセスだ
• カプセル化やばい。漏れない。
• Namespacingしてよい市民 (good citizen) にすんだ
• Object.prototypeを拡張するのはまじであほ
• 例えばgetElementsByClassNameとかをObject.prototypeとかに生やすのはやめろ
• ネイティブコード上書きするよ
• array.forEach, .map, filterとかなんとかも。
• ユーザーのエラーを許容する作り
  .css(Number) →.css(Number + ‘px’)
• コンストラクタいじってみるべ

function jQuery(str, con){
   if(window == this)
      return new jQuery(str,con)
}
new jQuery('#foo')
jQuery('#foo')

• try{…}catch(e){} はだめ。どこでエラー起こったかとか後で見てわからなくなる。
• 拡張性を考慮
• Extensibility

Method:
   jQuery.fn.method = fn;
   $(...).method();
Selectors:
   jQuery.expr[':'].foo = "...";
   $(':foo')

• OOなコードは一つの答えだ（と同時に一つの答えでしか無い）
• Constructor → new → object
• JavaScript2にはClassがある。まじでcool。
• オブジェクト同士がメッセージを受け渡し合うのは複雑になるのでカスタムイベントはいいよ。
• Dojoはカスタムイベント使ってる。まじでcool。
• 構造化されたドキュメント書くのは重要
• scirptDoc
• JSDoc
• とりあえずwikiつけるのおすすめ。
• ドキュメントのコアをXMLとかで公開しておけば、誰でもドキュメントを見るための仕組みを作れる
• 完全に全部の引数とかにドキュメントを付けるのなんて無理。コールバック関数とかもらう場合とか、そう単純に示せないことも多い。
• User-centric API
  Plugin authoring
  Docs on writing docs
  Advanced plugin authoring
  って優先度で作ってる
• テストが無いコードは信頼できない

commentBox without $.widget

• jQuery and OOP – classic

<script>
/**
 * CommentBox
 * @param {jQueryObject} You are my UI
 */
var CommentBox = function(element){
   this.element = element;
   this.input = element.find('input[type=text]');
   this.button = element.find('button');
   this.ul = element.find('ul');
   this.items = [];
   this.button.click($.proxy(this, 'updateHighlight'));
};
CommentBox.prototype = {
   updateHighlight: function(event){
      $.each(this.items, function(i, item){
         item.unHighlight();
      });
      var item = this.find(this.input.val());
      if(!item){ return; }
      item.highlight();
   },
   addItem: function(data){
      if(this.find(data.id)){
         return;
      };
      var item = new Comment(data);
      item.element.appendTo(this.ul);
      this.items.push(item);
   },
   addItems: function(dataArray){
      var that = this;
      $.each(dataArray, function(i,data){
         that.addItem(data);
      });
   },
   find: function(num){
      var res = null;
      $.each(this.items, function(){
         if(this.id==num){ res = this; }
      });
      return res;
   }
};

/**
 * Comment
 * @param {Object} key val data object
 */
var Comment = function(data){
   this.element = $('<li />').text(
      data.id + ' | ' +
      data.content + ' | ' +
      data.author
   );
   $.extend(this,data);
};
Comment.prototype = {
   highlight: function(){
      this.element.addClass('highlight');
   },
   unHighlight: function(){
      this.element.removeClass('highlight');
   }
};

/* declare as global */
var commentBox;

$(function(){

   /* initialize first */
   commentBox = new CommentBox($('#commentBox'));

   var comments = [
      { id:100, content: 'hogehoge fugafuga', author: 'takazudo' },
      { id:101, content: 'foofoo barbar', author: 'hogezudo' },
      { id:102, content: 'moomoo mewmew', author: 'mogezudo' },
      { id:103, content: 'gogogogogogogo', author: 'fugazudo' }
   ];
   commentBox.addItems(comments);

   /* these may be done after pageload */

   $('#addSome1').click(function(){
      var comments = [
         { id:101, content: 'foofoo barbar', author: 'hogezudo' },
         { id:345, content: 'moomoo mewmew', author: 'mogezudo' },
         { id:346, content: 'gogogogogogogo', author: 'fugazudo' }
      ];
      commentBox.addItems(comments);
   });

   $('#addSome2').click(function(){
      var comments = [
         { id:777, content: 'bahbahbah', author: 'mogezudo' },
         { id:888, content: 'momomomo', author: 'fugazudo' }
      ];
      commentBox.addItems(comments);
   });

});
</script>

<div id="commentBox">
   <input type="text" value="102" /> <button>highlight specified id's comment</button>
   <ul></ul>
</div>

<div class="additional">
   <button id="addSome1">hey add me</button>
   <button id="addSome2">hey add me too!</button>
</div>

これは、コメントの一覧を出すーみたいのをclassっぽく書いたもの。
こんな書き方は、jQueryを使っていると、あんまししない。
jQuery的には、$.fn.hogeでjQueryのメソッドを足し、「ほら$(fuga).hoge();したらできちゃったよ！」という書き方を守り、返されるのはjQueryオブジェクト、プラグインの使い方を知っていればだれでもすぐ使えるってのがフツーの使い方だから。みんな同じメソッドを持っていたらすげー楽じゃないか、使いやすいじゃないかというのがjQueryの基本的な考え方です。

でもでも、じゃあ上みたいな場合ってどうやって書けばいいのかね。CommentBoxクラスを作って、そこにデータのarrayを渡したら追加するようにしたい。別にページロードしたときに出すだけじゃなくて、後でも足される可能性があるから、CommentBoxのインスタンスをグローバルオブジェクトとして置いておいて、addItemsしたいんだよー。jQueryちゃんはjQueryオブジェクトを返してくれないと”chainが切れる”ってゴネるのかもしれないけど、別なインスタンスが欲しいときだってあるんだから！

こーいうふうに、準備しておいて後で必要な時に呼ぶみたいな方法を、”stateful”であると言うみたい。

じゃあじゃあ、なんかめんどくさいことしてるみたいだけど、$.fn.prepareCommentBox() で準備して、$.fn.addComments() で足すとかはどう？これならjQueryルールじゃない？あれ？そのインスタンスってどうするんだっけ？なんだかよくわかんなくなってきた…。気分的には$.fn.commentBox.addItemsなのか？というかもうjQueryがどうとかやめるか。この込み入った状況を解決するには、CommentBoxクラスを用意して、そのメソッドを呼ぶと言うのがスマートではありませんか？もうjQueryルールじゃないところでやるしかないんですってば。

上の例だと、このとき、CommentBoxクラスのインスタンス、commentBoxは、ふわふわした存在になってグローバルに浮いていることになる。これはスマートではない。スマートではないというか、まぁ普通なんですけど、もう完全にjQueryの書き方ではない。どうすればいいか。じゃあ、そのインスタンス、$().dataで持っておけばよくない？と言うことをしてくれるのが$.widget。以下が、$.widgetを使って書き変えてみた例。

commentBox with $.widget

• jQuery and OOP – $.widget

<script>
$.widget('ui.commentBox',{
   /*
      _init is the constructor.
      automatically executed if $().fn.commentBox was called.
      in this scope, 'this' refers the widget instance object.
      created instance can be referred via $().data('commentBox')
   */
   _init: function(){
      this.input = this.element.find('input[type=text]');
      this.button = this.element.find('button');
      this.ul = this.element.find('ul');
      this.items = [];
      this.button.click($.proxy(this, 'updateHighlight'));
   },
   /*
      followings are all protoype methods of $.ui.commentBox
   */
   updateHighlight: function(event){
      $.each(this.items, function(i, item){
         item.unHighlight();
      });
      var item = this.find(this.input.val());
      if(!item){ return; }
      item.highlight();
   },
   addItem: function(data){
      if(this.find(data.id)){
         return;
      };
      var item = new $.ui.comment(data);
      item._init();
      item.element.appendTo(this.ul);
      this.items.push(item);
   },
   addItems: function(dataArray){
      var that = this;
      $.each(dataArray, function(i,data){
         that.addItem(data);
      });
   },
   find: function(num){
      var res = null;
      $.each(this.items, function(i, item){
         if(item.option('id')==num){ res = item; }
      });
      return res;
   }
});

$.widget('ui.comment',{
   _init: function(){
      this.element = $('<li />').text(
         this.options.id + ' | ' +
         this.options.content + ' | ' +
         this.options.author
      );
   },
   highlight: function(){
      this.element.addClass('highlight');
   },
   unHighlight: function(){
      this.element.removeClass('highlight');
   }
});

$(function(){

   var box = $('#commentBox');

   /* attach widget */
   box.commentBox();

   var comments = [
      { id:100, content: 'hogehoge fugafuga', author: 'takazudo' },
      { id:101, content: 'foofoo barbar', author: 'hogezudo' },
      { id:102, content: 'moomoo mewmew', author: 'mogezudo' },
      { id:103, content: 'gogogogogogogo', author: 'fugazudo' }
   ];
   box.commentBox('addItems',comments);

   $('#addSome1').click(function(){
      var comments = [
         { id:101, content: 'foofoo barbar', author: 'hogezudo' },
         { id:345, content: 'moomoo mewmew', author: 'mogezudo' },
         { id:346, content: 'gogogogogogogo', author: 'fugazudo' }
      ];
      box.commentBox('addItems',comments);
   });

   $('#addSome2').click(function(){
      var comments = [
         { id:777, content: 'bahbahbah', author: 'mogezudo' },
         { id:888, content: 'momomomo', author: 'fugazudo' }
      ];
      box.commentBox('addItems',comments);
   });

});
</script>

<div id="commentBox">
   <input type="text" value="102" /> <button>highlight specified id's comment</button>
   <ul></ul>
</div>

<div class="additional">
   <button id="addSome1">hey add me</button>
   <button id="addSome2">hey add me too!</button>
</div>

上で、$.widget(’ui.commentBox…内で起こっている具体的な流れは、以下のようなかんじ。

• コンストラクタ、$.ui.commentBoxができる。
• こいつに、prototypeで_init、updateHighlight、addItem、addItems、findが生える。
• $.fn.commentBoxが生える。

そして…

• $(’#commentBox’).commentBox();をすると、
  var instance = new $.ui.commentBox($(’#commentBox’));
  instance.element = $(’#commentBox’);
  instance._init();
  $(’#commentBox’).data(’commentBox’, instance)される。
• あとでこのインスタンスが欲しければ、以下のようにすれば参照可能。
  $(’#commentBox’).data(’commentBox’);
• 他に色々widget機能が足される。例えば、インスタンスのメソッドは、
  $(’#commentBox’).data(’commentBox’, methodName);
  という具合に呼べたりする。

こうすると、はたからはクラスなんて使っているように見えないけど、実は使っていてそれでしたいことが実現できる。$.fn.の下でクラスが作れるっていうか、名前空間が付いているというか、そんなイメージなのですが、なんとも説明すると超絶にややこしいですね…。全てのjQuery UIの各widgetは、こんな風にできているっぽいです。たとえばダイアログは、$(hoge).dialog({ autoOpen: false }); して準備したあとに $(hoge).dialog(’open’) です。そして、$.widgetは、jQueryルールを守っています。$(hoge).dialog()としても、返ってくるのはjQueryオブジェクトだし、オプションの指定の仕方は$(hoge).dialog({key:val, key:val})推奨です。おそるべし$.widget。

今までOOPするためにjQueryらしからぬ書き方をしていたけど、$.widgetを使うのは一つの方法かもしんない。

参考

• jQuery UI
• jQuery widget Factory (PDF)
• Cyokodog :: Diary – jQuery UI の プラグイン定義関数 $.widget を使ってみる
• Tips for Developing jQuery UI 1.8 Widgets