かたつむりくんのWWW

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() について説明します。

続きを読む

MTAppjQuery 0.10 リリース - スライドメニューの不具合を修正

MTAppjQuery - Movable Type 5 の管理画面をjQueryでカスタマイズしやすくするプラグイン」のバージョン 0.10 をリリースしました。

今回はスライドメニューでブログIDがおかしくなっていた不具合を修正しました。すいませんでした。

また、バージョンアップ時に誤って上書きしないようにと、ユーザーが編集するファイルを「 _user.css 」「 _user.js 」としていましたが、フォルダごとアップロードした場合(ほとんどそうしますよね)はまったくの無意味だと気付きまして、mt-static/plugins にアップロードするフォルダ名を「 _MTAppjQuery 」とすることにしました。

アップロード後に注意してリネームするか、user ファイル以外を個別にアップロードしてください。

また、$.MTAppDebug() という jQuery プラグインも、ちょっと便利そうになってきたので後日記事をアップしようと思います。

.@junnama さんのギリギリトーク?! - 第2回広島MT学会inFUKUYAMA開催

先日の MTDDC Tokyo に続き、今度は広島県で「第2回広島MT学会inFUKUYAMA」が開催されます。

その内容は、藤本壱氏と野田純生氏によるセッションと、Pronetパートナーディスカッション、ライトニングトークということで、MT ファンとしてはとても気になります。

藤本さんは、Movable Type 5のテーマ機能についてお話しされるようです(「第8回Creatorz × 第2回広島MT学会」は今週末開催 - The blog of H.Fujimoto)。

野田さんは、自身のブログの記事「「Movable Type on Business」〜地方の小規模組織が勝ち抜くWeb構築ビジネスの戦略と施策〜 - Junnama Online」で話す予定の内容を紹介しています。その中で、

東京では話せない(話せないことはないですが)、「地方の、東京の、MTの本当のところ」を話したいと思います。今回は中継はないんですよね? ギリギリトークで行きたいと思います。

とのこと。非常に気になります。また、「Movable Typeベースの電子書籍編集・出版ソリューション「ePublisher」を発表」についても、どうやらこのイベントで初披露となるようです。

週末、広島でお披露目することにします。RT @aliasmori デモが見たい。> Movable Typeベースの電子書籍編集・出版ソリューション「ePublisher」を8月10日より提供開始 http://bit.ly/bI1p45

僕も時間とお金が許すなら是非とも参加したいイベントです。お近くにお住まいの方、旅費を会社の経費で落とせる方など是非とも参加を検討されるといいと思います。

MTDDC Tokyo テーマ編でライトニングトークしました

2010年 7月31日、マイクロソフト株式会社 新宿本社にて開催された「MTDDC Tokyo テーマ編」に参加してきました。今回の MTDDC は MT5で追加された「テーマ機能」にフォーカスしたものでした。

会社の関係の催しがあり、残念ながら途中からの参加になってしまいましたが、最後の荒木さんのセッションは聞けたので、それだけでも十分に価値があったと思います。

さらに、飛び入りでライトニングトーク(LT)に参加させていただきました。

LT では、Movable Type 5 の管理画面を簡単にカスタマイズできるプラグイン「MTAppjQuery」を紹介させていただきました。

デモがメインだったので、本来 LT の持ち時間は5分であるところを、5分近くもオーバーしてしまったようでした。司会の高橋さんの取り計らいにより最後まで続けさせていただきました。すいません!&ありがとうございました!

続きを読む

$.fn.MTAppInlineEdit() - MTAppjQuery で簡単に Inline Edit にする

MTAppjQuery プラグインに同梱されている jQuery プラグインのうち、今日は「$.fn.MTAppInlineEdit()」について説明します。バージョン 0.09 で追加しました。

MT5 から、自分で追加したフィールドの class 属性に「.mt-edit-field」を付けると、Inline Edit とという状態になります。これは、「編集」ボタンを押すとテキストフィールドが現れ、編集できるようになるやつで、ブログ記事のベースネーム欄の様な感じになります。

mtapp-inlineedit.png

inline-edit-slide.png

MTDDC 2010.2.5 Tokyo - Brand new API

$.fn.MTAppInlineEdit() を利用すると、これとほぼ同様の動作を実現できます。

続きを読む

$.MTAppInCats() の使い方 - MTAppjQuery でカテゴリごとにUIを変える

MTAppjQuery - Movable Type 5 の管理画面をjQueryでカスタマイズしやすくするプラグイン」に $.MTAppInCats() というjQueryプラグインを追加しました。現在のバージョンは 0.09 です。

MTAppInCats-01.png

$.MTAppInCats() を利用することで、ブログ記事作成・編集画面の UI をカテゴリごとにカスタマイズすることができます。きっと、一部の人には待望の機能かと。

続きを読む

$.MTAppFullscreen() - MTAppjQuery でブログ記事も書きやすく

ちょこちょことアップデートを繰り返している「MTAppjQuery - Movable Type 5 の管理画面をjQueryでカスタマイズしやすくするプラグイン」ですが、今日現在でバージョン 0.09 になっています。

ブログを書く時間がなかったので、アナウンスできませんでしたが、バージョン 0.08 では以下の変更を加えました。

  • $.MTAppFullscreen() を追加
  • user.cssからデフォルトのCSSをMTAppjQuery.cssに独立(ご注意ください!)

そして、バージョン 0.09 では以下の変更を加えました。

  • プラグインに入っている user.css と user.js のファイル名を _user.css と _user.js に変更(上書き防止です!)
  • ブログ記事編集画面の UI をカテゴリごとに変更できる $.MTAppInCats() を追加
  • $.fn.mtEditTextFormによる「.mt-edit-field」への対応と、$.MTAppCustomize()にこれと似た機能を追加(editオプション)

この記事では、$.MTAppFullscreen() について説明し、$.MTAppInCats() などその他のアップデートについては別の記事で説明します。

続きを読む