かたつむりくんのWWW

2011年、あけましておめでとうございます。

新年、あけましておめでとうございます。

昨年は、Movable Type、jQuery を中心にお勉強した1年でした。今年も引き続き、Movable Type、jQuery のスキルを高め、いろいろなプラグインを公開したり、サイト制作のお手伝いをしたり、自分が身につけた知識をアウトプットしたりしていきたいと思います。

今年はさらに、HTML5、CSS3、iPhone サイトなどについても積極的に勉強していきたいなと思います。また、Perl についてもしっかりと勉強したいと思います。

と、書いていると非常に欲張り度満点ですが(笑)、今年も引き続きがんばりますので、よろしくお願いいたします!

親ウェブサイトのモジュールを使ってブログ一覧のグローバルナビゲーションを作る

「親ウェブサイトのモジュールを利用して、ブログ一覧のグローバルナビゲーションを作るにはどうしたら良いか」という質問をいただきました。実現する方法は色々ありますが、その一例を書いてみます。

続きを読む

flexibleSearch.js で読み込む JSON を Movable Type で出力する

flexibleSearch.js - ページ送りに対応した高速 Ajax 検索が可能な jQuery プラグイン」の検索対象となる JSON を、Movable Type で出力する方法を紹介します。

続きを読む

ページ送りに対応した高速 Ajax 検索が可能な jQuery プラグイン - flexibleSearch.js ver1.00 リリース

flexibleSearch.js とは、柔軟で高速な Ajax 検索を実現する jQuery プラグインです。

僕が検索に求める2大要素は「速さ」と「精度」です。このブログで公開している「jQuery で実現する高速キーワード検索とタグ検索(Movable Type 版)- jQuery Search Box」という jQuery プラグインは、個人的には、その2大要素をある程度のレベルで満たしていると思っていました(ホントある程度ね(^^ゞ)。

しかし、使っていく上で、色々とやりたいことが沸いてきたり要望があったりしました。

  • 大文字・小文字、スペースを認識した完全一致検索がしたい
  • ページ送りしたい
  • チェックボックスセレクトボックスで条件を選べたりできるようにしたい
  • 検索項目の絞り込みは複数の項目を選びたい、などなど

また、何より jQuery Search Box はスペースの処理がイケてなかったんです。

今回、これらの機能を満たせるように「jQuery Search Box」をかなり書き直したので、flexibleSearch.js と名前を変えてリリースすることにしました。

jQuery Search Box で気に入っていた「タグ検索」は、利用シーンが限られる機能なので、本体からは外しました。これはまた別の形で取り入れようと思います(多分使われてないしw)。

flexibleSearch.js の詳細は以下のページからお願いします。十分テストはしたつもりですが、何かあったら以下のページでコメントいただけると嬉しいです。

マンガでわかるJavaScript - 感想

978-4798027838.jpg

なぜか衝動買いしてしまった JavaScript の入門書『マンガでわかるJavaScript』を読みました。

専門書の場合、マンガが載っていても結局内容は難しいという本はよくありますが、この本は違うと思いました。

説明が分かりやすくて丁寧で、図もイメージしやすくて理解を助けてくれたり、ソースコードにも丁寧にコメントが書かれていたりと、すごく分かり易いです。

また、内容が必要最小限に絞られている点が良いのかもしれません。必要最小限と言っても、この本にある内容だけでもかなり色々な事ができるようになると思います。

JavaScript の入門書をお探しの方、他の入門書で挫折した方はぜひ本屋さんで立ち読みしてみると良いでしょう(*^_^*)

次は、最近話題の書籍『HTML5+CSS3で作る 魅せるiPhoneサイト』を読みます。

エディタでコーディングしているときの素早く前の位置に戻るプチTips

エディタでコーディングしているときなどで、素早く一つ前の位置(行)に戻れるTipsを思いつきました。僕にとっては「閃いた!」って感じでしたw

続きを読む

jQueryで要素に特定のクラス名が設定されていなければ true を返す - .notClasses

jQuery で要素に複数のクラスが指定されているか調べる .hasClasses()」の逆バージョンです。セレクタで指定したクラスがすべて設定されていない場合に true を返し、一つでも設定されていれば false を返します。

jQuery.fn.extend({
    hasClasses: function(selector) {
        if (typeof selector == "string") {
            selector = /^\./.test(selector) 
                ? selector.replace(/^\./,"").split(".")
                : selector.replace(/^ | $/g,"").split(" "); 
        }
        for (var i = -1,j = 0, n = selector.length; ++i < n;) {
            if (this.hasClass(selector[i])) j++;
        }
        return n === j;
    },
    notClasses: function(selector) {
       return !this.hasClasses(selector);
    }
});

このメソッドは、.hasClasses() で調べて、結果を反転して返すだけなので、セレクタの指定方法などは、.hasClasses() の記事を参照してください。

以上です。

jQueryで多数の要素を生成して追加する場合のパフォーマンスについて

jQuery で多数の要素を生成して別の要素に追加する場合、どんな書き方が速いのかなーと思って試してみました。

今回は、3,000回ループを回して既存の要素に追加していくというのを、パッと思いつく感じの6パターンで試してみました。

続きを読む

MTDDC Meetup FUKUSHIMA 2010 に行ってきました #mtddcfks

日付が変わって昨日(11月6日)、ビッグパレットふくしまにて開催された、MTDDC Meetup FUKUSHIMA 2010に行ってきました。

東京からだと往復の交通費と参加費で1万5千円近くしてしまうので最初は迷っていましたが、行ってみて本当に良かったと思います。

簡単ですが、一言ずつ感想を。

続きを読む

jQuery で要素に複数のクラスが指定されているか調べる .hasClasses()

jQuery で、対象要素にクラスが指定されているかを調べるには、.hasClass() というメソッドを使います。

このメソッドは、引数に指定したクラス名が対象要素に指定されている場合は true を返し、指定されていない場合は false を返すメソッドです。

しかし、この .hasClass() は、渡された文字列を検索するだけなので、一つのクラス名についてしか調べることができません(場合によっては複数もできるけど)。そこで、複数のクラスがついているか調べることができる「 .hasClasses() 」というメソッドを書いてみました。すでに書いている人がいたらごめんなさい。

【2010-10-20 追記】
@rewish さん@5509 さんのご意見を取り入れて少し変えました。こういう反応って嬉しいな〜!

続きを読む

「MTDDC Meetup FUKUSHIMA 2010」に申し込みました

mtddc_fukushima_logo.png

11月6日(土)にビッグパレットふくしまで開催される「MTDDC Meetup FUKUSHIMA 2010 特設サイト」に申し込みました。

地方のセミナーに行くのは初めてですが、このメンバーとアジェンダを見たらいかずにはいられませんでしたw

東京都からマイカーで寄り道なしの日帰り弾丸ツアーを敢行予定です!

jQuery での CSS プロパティの表記方法についてのメモ

今『jQueryクックブック』を読んでいるんですけど、この本すごくいいですね。こういう jQuery の本が欲しかったんだよな〜という感じで大満足しながら読んでます。

さて、jQuery で要素のスタイルを確認するとき、.css( propertyName ) メソッドを使って値を取得できますね。

例えば、フォントサイズを取得するとき、propertyName は「font-size」でも「fontSize」でも取得できます。それは経験上なんとなく知っていたのですが、はて、実際はどちらがいいのだろうと思って少し調べてみました。

続きを読む

MT Zen-Coding - 0.0.5 アップデート

当ブログで公開している「MT Zen-Coding」をアップデートしました。今更の対応になって申し訳ないのですが、Movable Type 5.02 に対応しました。

また、お試しブックマークレットも合わせて変更しました。

プラグインの詳細とダウンロードは以下からお願いします。

Mac + MT でログに書き出すデバッグ中に max_allowed_packet なんちゃらとエラー

【2011-04-21 追記】

MAMPの場合を追記しました。

Movable Type のプラグインを作る際に、システムログに書き出して色々チェックしたりするんですけど、その時よく「Got a packet bigger than 'max_allowed_packet' bytes」ってエラーが出ていたんですね。

それでこれを解決する方法が分かったのでメモしておきます。

編集するファイルは my.conf というファイルなんですが、このファイルのある位置が、XAMPP for Mac と MAMP とでは異なります。

続きを読む

jQuery Multi-checkbox 0.03 アップデート - 「ラベル名は日本語、保存される値は英語」を指定可能に

当ブログで公開している「jQuery Multi-checkbox - テキストフィールドを複数選択チェックボックスに変えるjQueryプラグイン」をアップデートしました。

今回のアップデートで、「ラベル名は日本語で、保存される値は英語で」というのが可能になりました。

詳細は以下のページの「label オプションで値を設定する2(ラベルと保存される値を変えたい場合)」をご確認ください。

jQuery Search Box 0.03 アップデート - 検索対象を選択可能に!もちろんカスタムフィールドもOK

昨夜公開したばかりの、かつ今朝アップデートしたばかりの「jQuery で実現する高速キーワード検索とタグ検索(Movable Type 版)- jQuery Search Box」なんですが、またまたアップデートしました。すいません、どうも公開してから再び燃えてくる性分のようで。。。

今回は、検索対象を一つに限定できる機能を追加しました。

続きを読む

jQuery Search Box 0.02 アップデート

昨夜公開したばかりの「jQuery で実現する高速キーワード検索とタグ検索(Movable Type 版)- jQuery Search Box」なんですが、検索用の JSON の読み込みが完了する前にクリックされると何も起こらない状態だんたんですね。

個人的には、まあいいかなーと思ってしまっていたんですが、@BUN さんから次のようなつぶやきを頂きました。

@tinybeans 例えばですけど。searchBtnクリック時にdisable属性をボタンに付加して。onComplete時に、それを除去する・・・みたいにしたら、読み込み終わるまで重複のクリックできないように、なりませんかね???

Twitter / 國分 亨: @tinybeans 例えばですけど。searchB ...

最終的には、

  1. 読み込み前にクリックイベントを bind して、var readed = "0" して、
  2. そこでクリックがあるとreaded++して、
  3. 読み込み前のイベントを unbind して検索イベントを与えて、
  4. readed > 0 だったら検索イベントを実行する

というように、ちょっと違う実装になりましたが、思考的にヒントになりました。ありがとうございました!

ということで、以下の記事も更新しましたので、よろしくお願いいたします。

jQuery で実現する高速キーワード検索とタグ検索(Movable Type 版)- jQuery Search Box

このブログの検索を自作の jQuery プラグイン「jQuery Search Box」に変えてみました。

まだまだイマイチなコードなんですが、とりあえずキーワード検索に加えてタグ検索も出来るようにしたので、記事にしてみます。タグ検索の方は結構お気に入りです。

続きを読む

$.MTAppFieldSort() 利用時のエラーの回避方法と MTAppjQuery 0.11 リリース

MTAppjQuery - Movable Type 5 の管理画面をjQueryでカスタマイズしやすくするプラグイン」を利用しているとき、テンプレートの編集画面で、ちゃんとテンプレート名を入力しているにもかかわらず「テンプレート名を設定してください。」というアラートが出る不具合が発生していました。

MTAppFieldSort-insertID01.png

これは、MTAppjQuery の中の jQuery プラグイン「$.MTAppFieldSort()」が、ブログ記事の作成・編集画面のフィールドを並べ替えることを前提としていたために起こるものでした。

このエラーの対処法と、ブログ記事の作成・編集画面以外でもフィールドを並べ替えるための insertID オプションについて説明します。

続きを読む

$.MTAppDebug() の使い方 - 管理画面のカスタマイズの手助けを

MTAppjQuery - Movable Type 5 の管理画面をjQueryでカスタマイズしやすくするプラグイン」に同梱されている jQuery プラグインのうち、今日は $.MTAppDebug() について説明します。

続きを読む