jQueryを高速に動作させるためのポイント５つ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近東京にこなれてきたどうも僕です。何がこなれてきたって？電子マネーさ！東京ならSuica、Edy、Waon、なんでもタッチで買えちゃうんだぜ！コンビニで清算するとき、「支払いはEdyで」と一言、そして、読み取り機にソフトタッチ。支払いのシャリーンという音とともに僕の白い歯がキラーンとかがやくのさっ！ そんな東京にこなれてきた僕が、今日はjQueryを使う上で気をつけておきたいポイントを何点か紹介しようと思うよ！ jQueryって便利だけど、もとはJavaScriptで、インタプリタ言語で、コンパイル時に最適化なんてされないから、書き方一つで意外とパフォーマンスに差が出てくるんだよね！開発時は高スペックのPCで見てるから気づかないかもしれないけど、あなたのサイト、低スペックマシンとかモバイル端末でみたら、もっさもさかもよ！ っというわけで、jQueryを使う上で気をつけたいポイントを挙げて
プロジェクトの成功に求められるWeb解析のスピード化（CSS Nite参加レポート）
物凄い仰々しいタイトルになっていますが、実は先日行ってきた「CSS Niteビギナーズ：Web解析」の受講レポートになります。すばらしく濃い内容で「ビギナーズ？嘘つけ！」などと思ったりもしましたが、すぐに試したいネタが満載で大変勉強になりました。 色々あって公開が遅くなりましたが、以下にナカムラが大事だと感じたポイントを書き留めて行きたいと思います。 一貫していた「解析と施策のスピード」という考え方 豪華メンバーの揃った今回の講演。皆さんほぼ共通していたのは「Web解析にはもっとスピードが必要だ！」という考え方でした。 解析はPDCAサイクルで言うところの C（チェック）の部分なので、さっさと A（改善）に移ってアレコレ試さなきゃ役に立たないよ！ということですね。 で、沢山の解析効率化ネタが紹介されたんですが、中でも特に僕の気になった物を以下にピックアップしてみます。 イベントトラッキング
Flight by Twitter
A lightweight, component-based JavaScript framework for assigning behavior to DOM nodes.Flight A lightweight, component-based JavaScript framework from Twitter View on GitHub Overview Flight is a lightweight, component-based JavaScript framework that maps behavior to DOM nodes. Twitter uses it for their web applications. By way of example, we've including a simple email client demo (browse the sou
jQuery 2.0ではIE6～8はサポート対象外に | スラド デベロッパー
jQuery 1.9と2.0は同じAPIを提供し、jQuery 1.9はこれまでどおりIE6以降をサポートするが、jQuery 2.0はIE6～8をサポートしないという。jQuery 2.0はIE6～8サポートをなくすことで高速化されているとのこと。 今後IE6～8をサポートしたいサイトは1.9系を、そうでないサイトは2.0系を利用するという使い分けになりそうだ。
jQuery 1.9のリリース候補版が公開。使用されなくなったAPIを整理し、jQuery 2.0と互換へ
使っていないWebサイトの方が少数派となるほど人気のJavaScriptライブラリのjQuery。最新版となるバージョン1.9のリリース候補版「jQuery 1.9 RC1」が公開されました。 jQueryは現バージョンの1.8でモジュール構造を取り入れ、必要な機能のみを取り入れたライブラリを利用者がビルドできる環境を構築。そして今回の1.9では、ほとんど使われなくなった古いAPIを整理。バージョンアップによって肥大化した内部をクリーンな構造へと再構築しようとしています。 これは次のメジャーバージョンアップであるjQuery 2.0に備えた動きといえます。 jQuery 2.0では、jQuery 1.9とAPIの互換性を保つちつつInternet Explorer 6/7/8のサポートを廃止。より小さく速いライブラリとなる予定です。jQuery 2.0登場後も、Internet Explo
いまどきWEBデザイナーはWordPressもjQueryも出来て当たり前なの？
いまどきWEBデザイナーはWordPressもjQueryも出来て当たり前なの？ 2013.01.10 | ディレクター一問一答 | 初心者向け こんばんは。 いつからでしょうか。自分がIT系と呼ばれている事に少し違和感を覚えつつも、まぁ飯の種なんで仕事を頂ければ小躍りして喜んでおります。 夜のノマドワーカー。WP-オレンジです。 と言う訳で結論です。 デザイナーが全部出来る必要はない。 はいもう結論言っちゃったんで、答えだけ求めていた方はここまででダイジョブです。 なんでこんな事書くかって言うと、ちょいちょいそういう「WEBデザイナーもこれくらい覚えよう」意見も耳にするんですね。 つまりタイトルは釣りです。 あくまでワタシ個人の意見ですガネ。 そりゃぁ出来た方がいいですけドネ。 できるに越したことはないですヨネ。 性格がいい女性もいいですが、性格が良くて見た目もいい女性の方が尚いいです。
jQueryの利用率はWebサイト全体の55％。使わないサイトの方が少数との調査結果。W3Techs
Web上で使われているテクノロジーのシェアや種類を調査、報告しているWebサイト、W3Techsによると、2013年1月時点で、jQueryを利用しているWebサイトは全体の54.8％と過半数を示す一方、それ以外のJavaScriptライブラリは2位のMooToolsが4.9％、3位のPrototypeが3.7％と一桁台の利用率であるとのことです。 また、JavaScriptライブラリを利用していないWebサイトの割合は一貫して低下し続け、現時点で39.4％となり、jQueryを利用しているWebサイトよりも少ないことが示されました。グラフを見ると両者のシェアは2012年4月下旬に逆転しており、いまやjQueryを使っている方が「普通のWebサイト」と言えそうです。 Webサイトをクロールして調査 グラフを見る限り、jQueryのみが一貫して利用率を向上させている一方、JavaScript
jQueryオブジェクトとは?
jQueryオブジェクトとは? このエントリーは軽めのjQuery Advent Calendar 2012の20日目のエントリーです。 よくjQueryの解説などを見ていると「jQueryオブジェクト」という単語が出てきますね。今回はjQueryオブジェクトとは何者かを解説をします。読み終える頃には少しだけJavaScriptに詳しくなれるよ。（若干長いです。） そもそもオブジェクトとは? さて、「jQueryオブジェクト」を解説する前にJavaScriptのオブジェクトについて解説します。JavaScriptのオブジェクトは非常に複雑なのですが、基本だけでもわかるとJavaScriptやjQueryの学習効率が全然かわってきます。 まず、ざっくりと解説するとオブジェクトとは「プロパティ」と「メソッド」を持つ構造体のことです。 プロパティとは? ではプロパティとはなんでしょうか?プロパテ
jQueryのDeferredを用いたモダンなAjax処理の書き方
目次 jQuery 1.4以前の書き方jQuery 1.5以上の書き方jQuery 1.8以上の書き方【発展編1】Deferredを用いた書き方 deferredとは何か？【発展編2】$.when() を用いた書き方参考本エントリは軽めのjQuery Advent Calendar 2012の14日目の記事として書きます。軽めといいながら少し重めになってしまった感がありますが、初めてのAdvent Calendar参加ということでご勘弁を。 ※ Twitter API仕様変更によりTwitter APIを使ったコード例は現在動作しなくなっていることにご注意。 jQuery 1.4以前の書き方まずは、少し古めのコード、昔のjQueryの本とかでよく見る書き方。 $.ajax({ url: "ajax.html", success: function(data) { alert('succes
これは使える！画像をレスポンシブに切り取るサンプルコード:phpspot開発日誌
Focal Point: Intelligent Cropping of Responsive Images | Design Shack これは使える！画像をレスポンシブに切り取るサンプルコード。 ブラウザ幅を小さくした際に、画像も小さくしてしまう、のではなく、元の大きな画像の指定した部分を切り抜いて表示する仕組みが紹介されています。 divのclassにどこから表示するのか？を記述しておくだけで、超簡単に場所を指定できるところもいいです。 ニュース等の画像では、重要な部分以外にも背景などが含まれる場合がありますが、スマホなどでは重要なところを大きく表示したいという事があるかと思います。 そういう時に、これを使えば便利そうですね。 関連エントリ レスポンシブで超クールなカレンダーデモとｊQueryプラグイン「Calendario」 レスポンシブなテーブル作りに役立つjQueryプラグイン
jQueryの似ているAPIまとめ | js STUDIO | jQuery 日本語リファレンス
軽めのjQuery Advent Calendar 2012 に参加させていただきました。 この記事は2日目を担当しています。 題名の通り、似ているけど微妙に違う紛らわしいjQueryのAPIをざっとまとめてみました。 項目 比較
[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する
当ブログでも採用しておりますが、ブログなどでもよく見かけるようになった、ある一定量画面をスクロールするとサイドバーなどが固定されるﾔｰﾂ。 手順メモを晒しておきます:) 続きましてheadタグ内ないし外部読み込みスクリプトに以下を記述します。 [js] $(function($) { var tab = $(‘.hoge’), offset = tab.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top) { tab.addClass(‘fixed’); } else { tab.removeClass(‘fixed’); } }); }); [/js] ↑のスクリプトは.hogeがtopの位置に行ったらfixedというclassを追加、それ以外はclass属性を削除する、と言う命令を
![[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する](https://cdn-ak-scissors.b.st-hatena.com/image/square/ac7ae56c20fc639b9d7e08f7f0da2fec804f6625/height=288;version=1;width=512/https%3A%2F%2Fozpa-h4.com%2Fwp-content%2Fuploads%2Fskitched-20121120-005330.jpg)
JavaScript製のショッピングカートシステム・simpleCart(js)
JSだけで作れるショッピングカート システム・simpleCart(js)のご紹介。 作れる、と書いてますけどまだ触って 無いです。便利そうだったので備忘録 的に記事にして見ます。簡単なもの ならこういうライトなもので済ませ たいですね・・ 時間が無くてデモを少し触っただけなのでセキュリティ面での安全性なんかは未確認です。OSSですが利用前にご自身でチェックして下さい。 JS製のショッピングカート。Mootools、jQuery、またはPrototypeに依存するライブラリです。JS+localStorageで作ってるっぽいです。ライトに使えて良さそうですね。※安全なら チェックアウトはPaypalやGoogleチェックアウトに対応しています。ソースをチラッと見たら”JPY”: { code: “JPY”, ～と言った表記があったので日本の通貨の事も一応考慮してくれてるかもしれない。 <s
WordPressで外部のjQueryを読み込むときに注意すべきひとつのポイント
いやー、ちょっとハマっちゃったので備忘録的に書き残しておこうと思います。 久々に管理画面を触っていたら、メディアアップローダーがちゃんと動かない! という状況に陥りまして、その原因がjQueryの読み込みに関係してたんですよねー。。 Photo:Designing a new feature, with jQuery! By Peter Hellberg WordPressを使う上のに切っても切れないのがjQuery。 各種プラグインがさまざまなjavascriptのフレームワークを使うため、そもそもWordPressに包括されるかたちで、jQueryは導入されることになります。 そのため、特にjQueryの公式サイトからダウンロードしてくる必要もありません。 ただ、ちょっと気になるのがそのロード時間。 内蔵されたjQueryを呼び出すこと自体が、ロード時間の増加につながっている可能性もあ
Twitter Bootstrapから派生したWeb制作向けフレームワーク・Plusstrap
派生と言っていいかどうか分かり ませんけど、Plusstrapは、より 迅速にWeb開発を可能にしたフレー ムワークとのことです。アプデ したBootstrapをちゃんと把握 していないので詳細は触れない でおきます。 Twitter Bootstrapを元に、より迅速にWeb開発が可能になる、というフレームワークだそうです。派生の定義が良く分かってないので違っていたらごめんなさい。 正直な話、時間作れてなくてソース殆ど見てません。ナード向けだそうです。自分は一般人なのでギークとの違いが良く分からないですが凄い人向けって事なんじゃないでしょうか。 各種コンポーネントも揃ってます。 カスタマイズも可能。不要なものをチェックから外せば軽く出来ます。 今の仕事が落ち着いたら触りたい。 Plusstrap
幅のカスタマイズも可能なレスポンシブWebデザイン用の表示確認ツール・Responsivator - かちびと.net
レスポンシブWebデザインの表示 確認ツールです。よく見かける タイプのツールですが、OSSで ソースが公開されているので後 で自分のサーバーに入れようと 思ったので備忘録として。 よく見かける、複数のサイズの幅を同時に表示確認出来る、というやつです。幅の数値は設定可能です。 こういうやつ。URL入れてRESPONSIVATE!っていうボタンをクリックすれば表示確認出来ます。 ↑ 幅のサイズは変更できます。 URLも発行されるので他の方に見せるのも楽ですね。OSSとしてソースコードも公開されてます。これは導入してみようと思います。 Responsivator
2012年でのブラウザ対応の選択肢
Windows XPを使っているとIE8へのアップデートをガンガン推奨されるのでIE6ユーザーがIE8にしていることが多いと聞く。 僕のVMWareに収まったXPは、何故、未だにIE6なのでなんでそうならないのかわからないのだけど、まぁそれは置いていてIE8を切るということは、つまりXPユーザーを切り捨てるということだよね？ XPユーザーを切り捨てるってのは、僕の感覚だとPCユーザーを切り捨てるに近い印象があるのだけど、どう思いますか？ IE8切り捨て準備はいいか？jQuery2.0 2013年リリース予定 | DECONCEPTER んーと。僕の感覚では、jQueryとか言う一ライブラリの都合でブラウザを切るというのは本末転倒も良い所で、別にPC WebについてはjQuery以前も良いサイトは存在していたわけなので、捨てるのはjQueryの方じゃないの？と思う。（ちなみに実際は、IEの場
いちばんシンプルなHTML5のベースを用意 | necozine
私は、例えばjavascriptをどう動かしたらいいかと理解する時、テキストエディタを使って最低限のコードでサンプルを試します。 そんな時の、ベースとなるHTMLのコードを紹介します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/html5reset.css" /> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style type="text/css"> <!-- /*css*/ --> </style> <scr
海外のブログで使われている二段階スクロール式のヘッダーライブラリ·scrollable-layer.js MOONGIFT
scrollable-layer.jsはヘッダーとメニュー部が合体するタイプのスクロールをサポートするJavaScriptライブラリです。 最近のWebサイトでよく使われているのがスクロールしてもヘッダーが追従してくるタイプのデザインです。特に個人的にTechCrunch.comのやり方が面白いと思っていたのですが、同様のヘッダー表示を可能にするのがscrollable-layer.jsです。 デモです。高さが低いのでウィンドウを小さくしています。 下にスクロールします。黒い帯が上にあがっていますが、ヘッダー部は残ったままです。 ヘッダー部にかかりました。ロゴはそのまま残っています。 さらにスクロールしました。ロゴはちょっと上に上がってそのまま残っています。ヘッダーはこのまま固定されます。 scrollable-layer.jsは単にヘッダーを固定にするだけでなく、ある程度スクロールすると
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
小野照崎神社
