そのコード、本当にjQueryが必要ですか？ネイティブ関数の代替Tips集 | ゆっくりと…
sitepoint から「本当にjQueryが必要ですか？」とタイトルのついた3本の記事を紹介します。 Do You Really Need jQuery? Native JavaScript Equivalents of jQuery Methods: the DOM and Forms Native JavaScript Equivalents of jQuery Methods: Events, Ajax and Utilities 言うまでもなく著者の Craig Buckler さん の趣旨は、「jQueryを使うのは止めよう」ではありません。ネイティブ関数で代替えできるのは、古い IE のサポートが必要なく、ごく簡単なケースに限られます。その代わりに得るものは「速さ」です。そこで、どの程度「速い」のかを所々 jsperf の結果で補ってみたいと思います。 また JavaScri
ウェブページを1秒台で表示させる原理と方法 | Philosophy Guides
可能な限り最新の情報を反映していますが、追いつけていないこともあります。本サイトに採用していても、記事に反映できていない設定もあります。ページのソースを読んでいただくと、参考になる箇所があるかもしれません。 ウェブページの高速化に関するテクニックは、ネットで検索すれば簡単に見つけることができます。優れた情報も数多くありますが、｢CSSとJavaScriptはminify（ミニファイ）しておけばOK！」のような都市伝説も少なくありません。 そこで、ここでは本サイトのデザインリニューアル時に施した対策をもとに、一歩進んだウェブページの高速化の方法と、それを支える原理について、できる限り分かりやすく説明したいと思います。フロントエンジニアやデザイナーの方からすれば「んなもん知っとるわ！」な情報なのかもしれませんが、都市伝説を駆逐すべく、私なりの仕方で解説（≒加勢）したいと思います。 初めに結果を
フロントエンドエンジニアなら押さえておきたい！最近登場した注目のJavaScript＆CSSライブラリ8選
Webデザイナーやフロントエンドエンジニアにとって、日々登場するフレームワークやライブラリをキャッチアップすることはとても大切です。 なぜなら、そうしたフレームワークやライブラリによって業務が効率化すれば、他の作業に時間を割くことができるからです。 しかし、フレームワークやライブラリが続々と登場するあまり、キャッチアップに追いついていないひともいるのではないでしょうか。 今回は、最近登場した注目のJavaScriptとCSSのライブラリを紹介していきます。 中には簡単なコードを挿入するだけで驚くほどの機能を実装できるものもあるので、ぜひ確認してみてください。 最近登場した注目のJavaScript＆CSSフレームワーク 1. AOS https://michalsnik.github.io/aos/ AOS(Animate on Scroll)は、スクロールしながら要素をアニメーションでふ
FeedEk jQuery RSS/ATOM Feed Plugin
Usage Include jQuery and FeedEk plugin scripts into your page. <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="FeedEk.min.js"></script> Add a placeholder for the plugin to your page <div id="divFeed"></div> Call the plugin Basic $('#divFeed').FeedEk({ FeedUrl:'https://jquery-plugins.net/rss' }); Multiple Feed Url $('#divFeed').FeedEk({ FeedUr
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
jquery.diamonds.js - 菱形を並べたデザインをどうぞ MOONGIFT
Webでの表現は基本的に四角が重なった形で表現されます。そのため、デザインする際の効率は良いのですが、そこから逸脱したデザインをしようと思うと途端に大変になります。例えば円形や菱形などです。 今回紹介するjquery.diamonds.jsはそんなデザインが難しい菱形が連なったデザインを実現できるソフトウェアです。 jquery.diamonds.jsの使い方 例です。こんな格好良い表示ができます。 大きさも自由に変えられ、レスポンシブWebデザインに対応しています。 サイズや各ブロック間の隙間は自由に変えられます。 D3.jsのWebサイトでは六角形のデザインが使われています。単純に四角を並べるのに比べると圧倒的にインパクトが強くなります。サイトを選びますが、知っておくと使いどころがありそうです。 jquery.diamonds.jsはjQuery/JavaScript製のオープンソース
Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法
Google Feed APIを使わないで相互RSSを表示する方法 「以前の投稿」で紹介しましたが、アクアリウムWikiではGoogle Feed APIを利用して相互RSSを表示していました。 しかし、Google Feed APIはキャッシュ周りに不具合があるようで、古いものが表示されることがありました。 また、近々廃止される方針らしく、いつ停止してもおかしくありません。 そこで「jQueryだけで相互RSSを表示しよう」という試みです。 jQueryでRSSを取得する方法 フィードを取得して、各アイテムを並べ直すだけなら、jQueryで簡単に実装できます。 $.get(FEED_URL, function (data) { $(data).find("entry").each(function () { // or "item" var el = $(this); console.l
jQpie – javascriptからphpの関数(function)を呼び出すjQueryを使用したライブラリ | maxar quartz
今回、JQueryを用いたjavascriptからphpの関数を呼び出すライブラリ jQpie を試してみたので書いてみます。 比較的用途が限られていますが、表側で見せたくないようなものをphp側で処理してjavascriptへ出力するなどに向いていると思います。 以下の順に記述していきます。 ダウンロードと導入 使用方法 a. JSON形式で値を受け取る b. html形式で値を受け取る c. jQuery APIを用いエフェクト付きで値を受け取る なお PHP5以上で動作 するため、使用する前にPHPのバージョンに注意が必要です。 ※PHP4では jQpie.php 及び jQpie_response.php において static変数 の記述方法が異なるためシンタクス・エラーを返します。 以下のリンクの Downloading jQPie よりダウンロードを行います。 http://
背景にひと手間加えたい時に便利なスクリプト 10+ - NxWorld
ウィンドウいっぱいの背景に画像や動画を配置したり、ランダムなパーティクルやラインを表示させるなど、主に背景周りで使えそうものや「この領域に何かもうひと手間加えたい...」というときに便利そうだと思うスクリプトを幾つかまとめてみました。 jQueryプラグインが多めですが単体で動かすことができるものもあり、実装方法などに関しても容易にできるものが多いと思います。 背景に画像や動画のスライドショーを実装できる「Vegas」 背景にブラウザいっぱいのスライドショーを実装することができるjQueryプラグインで、画像だけでなく動画を埋め込むこともできます。 また、オプションを変更することでスライドの動きにアニメーションを付けたり、用意されているパターンをオーバーレイで表示させたりすることもできます。
【JavaScript】共通部分を外部化してメンテナンス性を高めよう | blog.ks-product.com
近年WordPressやMovableTypeといったCMSツールでサイト構築を行うことが一般的になってきて、メンテナンス性向上…近年WordPressやMovableTypeといったCMSツールでサイト構築を行うことが一般的になってきて、メンテナンス性向上の為にヘッダー、フッター、グローバルナビゲーション等、各ページの共通部分は外部ファイル化してインクルード（読み込み）することが多いと思います。 しかし、WordPressやMovableTypeが使えない、ましてやPHPなどのサーバーサイド言語が使えない案件も多いかと思います。 サーバーサイド言語が使えなくてもJavaScriptがあるじゃない 共通部分の外部化・インクルードはサーバーサイド言語でなくてもJavaScriptで行えます。iPhoneの登場以降JavaScriptの地位はかなり向上してデファクトスタンダード的な存在になりま
JavaScript開発者が一度は読むべきStackOverflow - Qiita
10.How do JavaScript closures work? http://stackoverflow.com/questions/111102/how-do-javascript-closures-work JavaScriptのクロージャーについて 結構とっつきにくい「クロージャー」に苦労されている人も多いかもしれませんが、サンプルコードが多いので英語わからなくても助かります 個人的にはQuestionの「Like the old Albert Einstein said: ... 」というくだりが好きw 9. What does “use strict” do in JavaScript, and what is the reasoning behind it? http://stackoverflow.com/questions/1335851/what-does-use
jQuery TextFX | Chris Cates
Text FX is a jQuery plug-in to make your text feel good, look good and animate good.jQuery TextFX is your all in one plug-in for making your text feel good, look good, and animate good. Getting started is easy, all you need to do is download the plugin then include it in your project! Please install jquery.transit.js as well as TextFX uses CSS Transforms instead of jquery.animate() transitions. <s
スクロールすると左右から画像が集まってくるWebデザインのNizoっぽいやつをjQueryで作る - かちびと.net
以前少し話題になった、Nizoというサイト がああります。このサイトで導入している、 スクロールに応じて要素をアニメーション させるエフェクトがちょっと素敵なんです が、これと同じような効果をjQueryで作る、 というのが今日の記事内容です。 どんなエフェクト？って思われた方はNizoでスクロールしてみてください。このエフェクトをjQueryで作る方法が公開されていたので一応メモです。 Intriguing animate-on-scroll effect スクロールすると左右からいろいろ集まってきます。まぁそれだけなんですが、インパクトはありますね。 IE7でも問題なく動作しました。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquer
jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー
最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを２つくらい（サイト名は忘れてしまいました。。）見かけて、これは流行っているのではないかということで作ってみました。 メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。 <nav id="menu-wrap"> <ul id="menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> 続いてCSSです。 #menu-wrap { position: fixed; z-inde
jQuery プラグイン Masonry の使い方と設定 | Web Design Leaves
jQuery プラグイン Masonry の使い方と設定 CATEGORY: jQuery | TAG: プラグイン, レスポンシブ 2014年12月6日 ブラウザの幅に応じて、配置した要素のレイアウトを整列してくれる jQuery プラグイン Masonry の使い方や設定に関する個人的なメモ。 Lazy Load や Magnific Popup も一緒に使ってみた。 ★ CSS Grid + JavaScript で Masonry レイアウト も御覧ください（こちらの方が新しい情報です）。 この時点でのバージョン：v3.2.1 目次 jQuery プラグイン Masonry のダウンロード Masonry のページの「Download masonry.pkgd.min.js」を右クリックで「名前をつけてリンク先を保存」を選択するか、「Download masonry.pkgd.mi
レスポンシブWEBデザインのサイトを作るときに便利な画像の縦横比を正方形のまま維持するjQuery作りました | 名古屋のホームページ制作なら株式会社SPOT
最近は少しづつ「レスポンシブWEBデザイン」の手法でサイトを制作することが多くなってきました。 レスポンシブWEBデザインの基本は、media queryを使ったgrid layoutとFluid Image（画面のサイズに合わせて画像を拡大縮小してフィットさせる）だと思うのですが、画像をfruidさせるときに、縦横比が結構めんどくさい印象です。 画像の横幅はwidth:100%とかで可変にすれば良いのですが、overflow:hiddenで画像の表示範囲を指定して一部切り取りたい時などは、heightをwidthと合わせなければいけないので、CSSだけでは正直難しい印象です。 そこで、ウィンドウをリサイズしても画像の縦横比を正方形のまま維持するjQueryを作りましたので、ご紹介します。 jQuery(function($){ //.rectの縦横比をレスポンシブに合わせて調整 func
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redirecting
jQuery AniView
showjin.me
Download Builder | jQuery UI