All Articles

HTML-KickStartを軽量化して導入しやすくした

今までこういうのを使って来なかったのですが、導入に際してちょっとカスタマイズしました。

HTML-KickStartって何さ

HTML-KickStartは、幾つかのCSSテンプレートやJavaScriptのツールをデフォルトで同梱したCSSフレームワーク(という呼び方ででいいのでしょうか)です。HTML中に特定のclass属性を付加したりしておくことで、デザインされたパーツが構成できるという、デザインがの苦手な私にはとっても嬉しいツールです。99lime.comで配布されています。

HTML-KickStart

他に有名なもので、Twitter bootstrapがありますね。こちらはちゃんと触った事無いですが、若干重いような印象があります(誤解かもしれませんが)。

Twitter bootstrapを使ってるなーってサイトは一見して分かるので(サイト上部の黒いバーとか…)、なんというか、仕方ないんですkが、パッと見て、軽そう&&必要なものは組み込まれてる感じのHTML-KickStartが僕はいいんじゃないかなーって思います。もっと流行れ( ´ω`)

導入のハードルとライブラリの依存関係

Twitter bootstrapもそうですが、いくつかのJavaScriptファイルが同梱されています。これらはレイアウトFIXやパーツ構成に必要なのですが、これが全てjQueryを利用する前提になってるんですね。HTML-KickStartも同じです。

問題が無いといえば無いのですが、私の周りでは必ずjQueryを使う案件ばかりではないので、他のライブラリ(prototype.jsやmootools、Ext.jsとか)をベースにしている場合、途端に導入しにくくなります。 (まったくの主観ですが、1サイトにライブラリを2つ入れるのって僕は無しだと思ってます)

このCSSフレームワークを使うためだけにjQueryを入れるのはどうにも…と言った感じで、導入には二の足を踏んでました。1.4などの軽量な頃のjQueryならまだしも、ここ最近のはファイルサイズもそれなりになってきてます。でも綺麗なパーツが揃ってて使いたいという葛藤もありで。

じゃあ非依存にすればいいじゃない

また、HTML-KickStartのJavaScriptファイルも除いてましたが、グローバルセレクタ乱立とプラグイン沢山で「ああ、これ重いかもなぁ」という印象が…。なので、余計(といったら失礼ですが)なパーツは間引いて、レイアウトやパーツの機能だけにフォーカスし、なおかつjQueryにも依存しないようにコードをリライトして1ファイルにまとめました。

コードはgithubに上げてますので、手っ取り早くコード見たい方は以下からどうぞ。

KickStart-Lite

以下、カスタムした点などをつらつらと。

残した機能と外した機能

まず、HTML-KickStart内で使っているjQueryプラグインは見たところ以下のようでした:

  • jQuery.localScroll/scrollTo(スムーズにスクロールさせるやつ)
  • jQuery.TipTip(ツールチップ表示)
  • jQuery.placeholder(HTML5のplaceholder属性をサポートするやる)
  • jQuery.calenderWidget(カレンダー生成)
  • jQuery.chosen(フォームのマルチセレクトのUIをかっこ良くするやつ)
  • jQuery.Lightbox,jQuery.Fancybox(画像拡大表示)

結構使ってますね。ちなみに、スライドショー機能もあるんですが、こちらは内部で手書きされてました。 で、リライトに当たってやったことは以下の通りです:

  • jQuery依存をやめて、セレクタエンジンはSizzleをそのまま載せる
  • Lightbox/Fancyboxの画像拡大系処理は削除
  • localScroll/scrollToは削除(暫定)
  • スライドショー機能は削除(暫定)
  • jQuery.chosenは削除
  • placeholderはjQuery非依存に書きなおし
  • jQuery.TipTipもjQuery非依存に書きなおし

基本的にアクション系の機能はバッサリ行ってます。欲しいのはレイアウトパーツの機能だけなので…。 また、内部のコードもjQueryを使わないとキツイという程のものでもなかったので、セレクタエンジンにSizzleそのままを使うようにしました(自分で書いても良かったのですがそこはちょっとだけラクしました><)。それに合わせて、いくつかのプラグインを素のJavaScriptで書き直しました。ちなみに「暫定」とあるのは、そのうち書きなおすかもしれないやつです(単に書くのがめんどくさ(ry

パフォーマンスの改善を目指して

普通に使ってても特に体感するわけじゃないですが、中のコードを見ると、DOM構築後にかなりの処理をやってます。「あーこれ遅くなるだろうなー」と一見してわかったので、そこも全部素で書き直し。だいぶパフォーマンスは良くなったと思います。繰り返しますが、特に体感するわけじゃないです。

そのうちやりたいこと

CSS部分をSassなどに置き換えて、色目の変更とかを手軽にできるようになったら素敵ですね。あとTwitter bootstrapに比べてまだそれほど有名じゃないのかな?なのでもっと使う人が増えるといいと思います。

まとめ

個人的にライブラリ非依存である、こういうツールが欲しかったので作りました。 あーだこーだ言ってますが、jQueryを使う案件での導入であれば本家のを使うのがいいですよ。