jQueryのプラグインの作り方をお勉強してみた。

jQueryのプグラインの作り方が気になる今日この頃です。 って事で調べてみました！

◆調べてみた

とりあえず、グーグル先生に聞いてみました

プラグインのひな形は、こんな感じのようです。

function($){
  //
  $.fn.pluginName = function(opt) {

   var settings = $.extend( {
      'opt1' : 'hoge',
      'opt2' : 'foo'
    }, opt);

  return this;

  };
})(jQuery);

まず、

$.fn.pluginName =

がメソッド名になります。 この例だと$('#id').pluginName();で呼び出し可能です。

$.extend ({ 

の部分は、プラグインのオプションですね。 省略した場合、初期値が入るように設定でき、settings に格納されます。 この例だと$('#id').pluginName([opt1:'aiueo']);と設定可能です。

return this;

これは、$('#id').pluginName().focus();といったように 続けてメソッドを書けるようにする為です。

◆実際に書いてみた

ってのが簡単なプラグインの構成&ざっくりした説明です。 ※間違ってたらご指摘ください。

とここで終わるのも寂しいので、一つ書いてみました。 （※あくまで、練習用って事で。全然実用的じゃないです）

とくにネタもないんですが、少し前に見つけた「Google CGI API for Japanese Input」を使ってお勉強したいと思います。

まずは、上記にある通り

http://www.google.com/transliterate?langpair=ja-Hira|ja&text=%E3%81%B8%E3%82%93%E3%81%8B%E3%82%93

こんな感じでリクエストを送ったらjsonが返ってくるようです。 ただ、googleさん相手なので、クロスドメイン通信可能なjsonpで受け取りたいと思い。 上記サイトガン見しましたけど、そんな記述ない。。。（ここで少し心が折れました。

ググってみたら「Google CGI API for Japanese Input を jQuery で試してみた」って素敵な記事を発見。 これで、なんとかなりそう。

ってさっそく実装。 目標は、テキストに入力したら、google日本語入力の変換候補が出てくること。 せっかくなんで、jQuery UI の autocompleteを使ってそれっぽくしてみました。 ※長くなったので、autocompleteの使い方等は、割愛します。

(function ($) {
　　　　　　　　//メソッド名を定義
        $.fn.googleinput = function(options){
　　　　　　　　//オプションの初期値を定義
                var defaults={
                    display:"#display"
                }
　　　　　　　　//オプションを取得
                settings=$.extend({}, defaults, options);
                //thisを変数へ退避（
　　　　　　　　var el = this;

       　//autocompleteの設定
        el.autocomplete({
            delay: 10,
            minLength: 1,
            source: function (request, response) {
　　　　　　　　//googleにリクエストを送信
                $.ajax({
                    url: 'http://www.google.com/transliterate'
                    ,dataType :'jsonp'
                    ,data : { 'langpair': 'ja-Hira|ja','text': request.term,jsonp: 'callback'}
                    ,jsonpCallback: 'callback'
                    ,success: function (data) {

                        var label = [];
                        for (var x = 0; x < data.length; x++){
                            for (var y = 1; y < data[x].length; y++){
                                for (var z = 0; z < data[x][y].length; z++){
                             label.push (data[x][y][z]);
                             }
                          }
                        }
                        
                        response(label);
                    }

                });
            },
            select: function (event, ui) {
　　　　　　　　//選択した値をオプションで指定した場所に表示
                $(settings.display).val(ui.item.label);
                return false;
            }
        });
       return this;
    }
})(jQuery);

[デモ]

もう少し勉強して次は、実用的なものをつくれるように頑張ります。