jQueryのfind()を利用した高速化 最近、jQueryのfind()のちょっとよろしくない使い方をチラホラと見かけるのでfind()の高速化について解説をします。 アンチパターン 最近、見かけたパターンとしては以下の様なものがあります。 $('.foo #bar') このセレクタをfind()を使って高速化する為に以下のように書きなおす。 $('.foo').find('#bar') というもの。これは、ケースによっては高速化が見込めるものの、多くのケースでは低速化されてしまいます。 また、以下の様なパターンも見かけました。 var $ul = $('ul'), $a = $ul.find('.a'), $b = $ul.find('.b'); $a.css('color', 'red'); $b.css('color', 'green').text('Hello'); こちらも、

jQueryプラグインのメソッドパターン このエントリーはjQuery Advent Calendar 2013の 最終目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) 今回はjQueryプラグインのメソッドパターンについて紹介をしたいと思います。 jQueryプラグインのメソッドとはどいうものかというと、まず以下のようなプラグインがあったとします。 $.fn.alert = function(options){ return this.each(function(){ $(this).click(function(){ alert(options.text); return false; }) }); } セレクタで指定した要素でアラートを表示するだけの簡単なプラグインです。(プラグインの作り方は「

レスポンシブWebデザインに対応した「jquery.heightLine.js」 多くの方に方に愛用いただいている要素の高さを揃えるJavaScriptライブラリ「heightLine.js」の新バージョンとして「jquery.heightLine.js」を公開しました。 heightLine.jsとの違いとしては、 jQueryプラグイン化したのでjQueryが必要です 高さを揃えたい要素をclassではなくjQueryのセレクタで指定します レスポンシブWebデザインに対応、特定のウィンドウ幅の場合のみ高さを揃えます destroyとrefreshメソッドを追加、高さ揃えの無効化や再揃えが簡単にできます などがあります。 ダウンロード / サンプル / GitHub 利用方法 まずは、jQueryとjquery.heightLine.jsをページ内で読み込みます。 <script sr

iOSにおけるviewportの指定方法による細かい違い iOSではviewportの指定方法が異なると細かいデバイスの挙動が変わってきます。 検証はiPhone(iOS6.1)のみで行っているのでiPadやiOS7ではちょっと違うかも。 まず、以下のような数値によるviewport指定をPCモードとし、 <meta name="viewport" content="width=960px"> 以下のようなdevice-widthによるviewport指定をSPモードとして解説を進めていきます。 <meta name="viewport" content="width=device-width"> ズーム率 ピンチインピンチアウトで拡大できる上限は、PCモードでは15倍、SPモードでは5倍まで拡大可能です。 ダブルタップの挙動 テキストが記述された要素などをダブルタップすると、PCモード、

Compassで書き出すCSSファイルを軽量化する Compassは便利な半面、書き出されるCSSのサイズが非常に大きくなってしまうことがあります。設定を変更することで書き出されるCSSファイルの容量を削減することが可能です。 Step1.圧縮する コンパイル時に圧縮オプションを指定することで改行や空白を取り除いた形で書き出してくれます。config.rbに以下のコードを追加するだけで圧縮してくれます。 output_style = :compressed Step2.無駄なベンダープリフィックスを取り除く(ブラウザ別) CompassのCSS3ミックスインは便利な反面過剰なベンダープリフィックスをつけます。 Sassファイルの冒頭に以下のようなコードを追加することで「-o-」や「-ms-」、「-moz-」といったベンダープリフィックス付のプロパティが書き出されなくなります。Operaは現

Gruntで始めるWeb制作の自動化 Grunt.jsとはWeb制作の様々なタスクを自動化してくれるツールです。 node.jsで開発されており、Sass/CompassやLessなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 インストール まずはnode.jsをインストールします。公式サイトでインストーラーが配布されていますので簡単にインストールが可能です。 次にMacではターミナルを開いてgrunt-cliをインストールしましょう。cliとはCommon Language Infrastructureの略でコマンドラインからGruntを利用するためのツールです。 sudo npm install -g grunt-cli パスワードが聞かれるので入力してください。成功すればgrunt-cliのイ

ローカルのWebサイトを確認する方法 ローカルのWebサイトを作成している際に確認するTIPSをいくつかご紹介します。 解説はMacのみですが、Windowsでも足りないソフトをインストールすればできると思います。 まずは、 たとえば以下のようなディレクトリで作業していてindex.htmlを確認したいとします。 /Users/nishihata/Desktop/htdocs/index.html 普通にやるとブラウザのアドレスバーに以下のURLを入力するとブラウザでindex.htmlが確認できます。 file:///Users/nishihata/Desktop/htdocs/index.html ただ、このままでは絶対パスでサイトを作成していたりすると確認できません。 ローカルサーバーを起動 そこで、Macでターミナル (Terminal)で以下のコマンドを入力してみましょう。 cd