ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」第2回は、JavaScriptの高速化について、まずは前編、後編に渡ってユーザーの体感速度を向上させるための方法を紹介します。JavaScriptの同期・非同期の仕組みやscript要素のasync属性、defer属性について詳しく解説します。 今回から複数回に分けて、JavaScriptの高速化をテーマに解説していきます。まずは、ユーザーの体感速度を高めるためのJavaScriptチューニングということで、単純なJavaScriptの構文によるスピードを比較するようなものではなく、主にユーザー視点からの高速化を主眼に解説します。その中で、同期・非同期といったJavaScriptの仕組みやscript要素のasync属性、defer属性などについても触れていきます。 ユーザーの体感速度を向上させる 一概にJavaScriptの高速化といっ
爆速でわかるjQuery.Deferred超入門
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
[JS]jQueryを使って、超スムーズなCSS3アニメーションを実装する -jQuery Transit
昨日に続いて、jQueryとCSS3アニメーションのコラボです。 今回紹介するのは、jQueryでCSS3アニメーションを超スムーズにするように助けるプラグインです。 jQuery Transit デモページ [ad#ad-2] jQuery Transitの使い方 jQuery Transitのデモ jQuery Transitの対応ブラウザ jQuery Transitの使い方 「jquery.js」の後に当スクリプトを外部ファイルとして記述します。 外部ファイル <script src='jquery.js'></script> <script src='jquery.transit.js'></script> あとはjQueryの「.animate」の代わり、「.transiton」を使用してアニメーションを実装します。 $('...').transition jQuery Tra
データ可視化のためのグラフ描画JavaScriptライブラリ20選 | ゆっくりと…
SixRevisionsでオンラインでグラフを描画する場合に活躍しそうなJavaScriptライブラリの特集がありましたので、紹介します。個人サイトではあまり役に立たないかもしれませんが、観ているだけで楽しくなります。元記事に敬意を表し、なるべく趣旨が異ならずかつ変な日本語にならないよう心がけたつもりですが、訳に間違えがありましたら容赦願います。 2010年1月17日 by Jacob Gube 退屈な数値データを美麗かつインタラクティブに解り易く可視化するためのJavaScriptライブラリは数多くあります。通常はHTMLテーブルで表現するデータを、JavaScriptを使って可視化し美しく見せる事ができればあなたのデータはアクセシビリティーの優れたものとなるでしょう。私は2008年にデータのグラフ化＆チャート化のためのJavaScriptを書き上げましたが、今回再び単なるデータに生命を
[JS]高性能で設置も簡単、ブラウザ枠いっぱいに背景画像を配置するスクリプト -bgStretcher
デモページ：Super Slider スライドのスーパー版で、斜め方向のスライドで画像を切り替えます。 bgStretcherの主な特徴 セットアップはシンプル 全てのモダンブラウザをサポート 画像は一枚だけでなく、複数枚にも対応 対応ブラウザ Internet Explorer 6, 7, 8, 9 Firefox 2, 3, 4 Opera 9+ Safari Chrome bgStretcherの使い方 Step 1: ファイルのダウンロード サイトの「Download」よりファイル一式をダウンロードします。 一式には必要なファイル全て（jqeury.jsも）が含まれています。 Step 2: 外部ファイル 外部ファイルを下記のように<head>～</head>に記述します。 <script type="text/javascript" src="../jquery-1.5.2.mi
[JS]jQueryのプラグイン100選 -2011年総集編
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
[JS]任意のキーを組みあせて、イベントを設定できる超軽量スクリプト -jwerty
コナミコマンド（上上下下左右左右BA）など任意のキー操作を組みあせて、エレメントやイベントを設定できる超軽量(1.5kb)のスクリプトを紹介します。 jwerty [ad#ad-2] jwertyはjQueryなど他のスクリプトに依存しないで動作するスクリプトで、minified版で1.5kbと超軽量です。 ※jQueryと一緒に設置することはできます。 jwertyの使い方 使い方は簡単で、外部ファイルとして当スクリプトを指定し、キー操作ごとにエレメントやイベントを設定します。 キーボードのスタイルがかわいかったので、キャプチャで実装例を紹介します。 jwertyの実装例 [ad#ad-2] jwrtyのサイトでは、下記のショートカットが用意されています。 zipでダウンロード Ctrl+Alt+z tarでダウンロード Ctrl+Alt+Shift+z jwerty -GitHubにア
画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語 English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 Lightbox Lightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。
「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね - かちびと.net
Twitterに流れてきたスライドがとっても 分かりやすかったのでブログでより多く の方に拡散。ノンプログラマー向けの jQueryの基本講座。これからjQuery を使おう、という方は読んでおくと良さ そうですね。 ノンプログラマー向けにjQueryの基礎をスライド化してくれています。 @pocotan001さん作のスライドです。 このスライドを見ながらコーディングする、というより、基礎知識を頭に入れるのに適したスライドだと思いますので気軽にご覧になってみて下さい。ハードルがかなり下がると思います。 また、当ブログでもjQueryプラグイン等の情報を取りあえげていますので合わせてどうぞ。 jQueryのリファレンスサイトと入門書籍 [2011.09.21アップデート] よくアクセスいただくのでハブ的な役割くらいは果たそうと思います。 jquery / jQueryの本家です。 jQuer
Webサイトのレイアウト調整や補助に使えるjQueryプラグインいろいろ - かちびと.net
レイアウトの調整を簡略化したり、通常 は難しいレイアウトを可能にしたり、とい った補助的なjQueryプラグインのまとめ です。最近探す機会が増えたので今後 の為に備忘録的に記事にしておきます。 この手のプラグインは数多にあるので 好みで端折っています。 レイアウトの調整や補助などに使えるjQueryプラグインのまとめ。と、言っても大抵は既出だと思います。順不同。 Supersized 画面に合わせて自動的に背景画像を伸縮してくれるだけでなく、スライドショーにもなってくれます。いつか仕事で使いたい。最近FlickrのAPIにも対応しました。 Supersized jQuery UI.Layout Plug-in ブラウザごとの差異を考えずに自由にレイアウトを組めます。 jQuery UI.Layout Plug-in JQUERY CUSTOM CONTENT SCROLLER スクロール
少しのコードで実装可能な20のjQuery小技集
少しのコードで実装可能な20のjQuery小技集素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ 追記：この記事で紹介されているいくつかの方法が、今では CSS のみで実装可能です！詳しくは「かつては JavaScript を利用していたものの、今では CSS のみで実装できる 10 の小技」をご覧ください。 jQuery の基本的な使い方まずはjQuery 本家から jQuery ファイルをダウンロードします。<head> 内に下記を記述し、jQuery ファイルを読み込みます。 <script type="text/javascript" src
[JS]jQueryのプラグイン100選 -2010年総集編
2010年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年は、アニメーションのエフェクトやレイアウト、後半は背景画像関連のプラグインが特に目立っていたように思います。 [ad#ad-2] コンテンツスライダー・カルーセル関連 ギャラリー・画像拡大関連 ナビゲーション関連 タブ関連 パネル・ボックス関連 ツールチップ関連 レイアウト関連 背景画像関連 その他UI関連 アニメーション関連 スクロール・ドラッグなど操作関連 テーブル・リスト・データ関連 フォーム関連 コンテンツ生成 その他 コンテンツスライダー・カルーセル関連
jQuery Plugin: rotate3Di - Flip HTML content in 3D - zachstronaut
Rotate3Di is a jQuery Effect Plugin that makes it possible to do an isometric 3D flip or 3D rotation of any HTML content. It also enables custom 3D rotation animations. CSS3 Transforms are used to create this visual "3D" isometric effect. Supported browsers are Safari, Chrome, Webkit, Firefox 3.5+, IE9+, and Opera 11+. The plugin's functionality includes: setting or animating HTML content to an ar
コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」:phpspot開発日誌
コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」 2010年10月29日- DivGrow jQuery Plugin ? Easily make your DIV containers expandable & collapsable (with animation) HibboBlog コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」。 ブログの記事の概要なんかを次のように画像の横に表示させるとして、このプラグインを使うことでピッチリと画像の高さをあわせてデザインをスッキリさせることが可能です。 通常こういうことをやろうとすると結構めんどくさいですがjQueryプラグインなので高さを渡してあげるだけで綺麗にそろいます。 で、「Show More」という部分
CSS3とjQueryでフォームを美しく装飾する方法
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける（モダンブラウザ） 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。 テキストボック
IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」:phpspot開発日誌
IMGr :: jQuery Image Rounder IEでも動作する画像を超簡単に角丸化できるjQueryプラグイン「IMGr」 $("imageElement").imgr(); と唱えるだけでクロスブラウザで画像の角を丸くすることが可能です。 $("imageElement").imgr( optoins ); でradiusやサイズ、色のカスタマイズが可能。 赤いボーダーで角丸の例 ボーダーを消した例 四方の角丸の操作も自由自在です。 IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62 のブラウザ上でテストされているそうです。 関連エントリ CSSで角丸テクニック２５ 角丸を使った可愛いカレンダーピッカー実装JavaScript「jsDatePick」 CSS3で影付き角丸グラデーション付きのボタンを作成す
第9回 ページ内リンクをスムーズにスクロールさせるには | gihyo.jp
ease系のJavaScriptプラグインで気持ちいい動きを演出 1ページの中に複数のページ要素を配置し、ページ内リンクで移動するタイプのサイトを目にするようになってきました。たとえば2007年度のグッドデザイン賞 コミュニケーションデザイン部門を受賞した石川県の温泉「多田屋」のサイトは、Flashを使い、1枚の大きな絵の中をスクロールして移動するUIとなっています。 図1 石川県の温泉「多田屋」のサイト 最近では、Flashではなく、JavaScriptを使って静的なページの中を遷移するタイプのサイトも見かけるようになりました。たとえば「Pline Studios of Architecture」はとても美しいUIとなっています。 図2 JavaScriptでページ内を移動する「Pline Studios of Architecture」 実装にはMITライセンスのscrollto.js
[JS]パネルをフェードで切り替えるシンプルな国産のjQueryのプラグイン -ImageNavigation
デモページ：2（テキスト版） 右側のパネルの切り替えは手動と自動に対応しており、スクリプトのオプションで設定が可能です。 スクリプトのオプションでは次のものなどが設定できます。 切り替えの自動と手動 パネルの表示時間 フェードの時間 ラベルの画像とテキスト ラベルに画像を使用した際、ロールオーバー時の変更はスクリプトの機能に含まれているため、ロールオーバー用の画像を用意するだけで実装されます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryを使った、ランダム画像で様々なシャッフル演出効果のあるプラグイン*ホームページを作る人のネタ帳
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。