jQueryから離れるためのJavaScript代替ライブラリまとめ
jQueryは便利すぎて、ついつい他のフレームワークを使いながらも一緒に組み合わせて使ってしまったりします。その結果として読み込むサイズが肥大化したり、動作が重たくなったりします。特にスマートフォンのようにリソースがデスクトップほど潤沢でない場合は顕著です。 そこでjQueryから離れて代替ライブラリを使ってみましょう。多くのライブラリはjQueryを踏襲して似たような使い方ができるようになっています。 Minified.js jQueryのようにDOM操作、アニメーション、イベント、HTTPリクエストをサポートしています。また、コレクション、日付や数字のフォーマット、テンプレートといった便利ユーティリティも備えています。 サイズは4KB（ミニファイ&Gzip）で、jQuery 2.1.4の29KBに比べて大幅に軽量です。 Minified.js - A Truly Lightweight
JavaScriptのイベントハンドラ一覧｜イベント｜JavaScript/DOM｜PHP & JavaScript Room
イベントハンドラ一覧 onBlur／onFocus〔フォーカスが移動した時に処理を行う〕 onChange〔フォームの入力値、選択が変更されたときに処理を行う〕 onSelect／onSelectStart〔テキストが選択された時に処理を行う〕 onSubmit／onReset〔フォームの送信時、リセット時に処理を行う〕 onAbort／onError〔画像読み込み時に処理を行う〕 onLoad／onUnload〔ページ読み込み時、ページの切り替え時に処理を行う〕 onClick／onDblClick〔クリック、ダブルクリックされた時に処理を行う〕 onKeyPress／onKeyDown／onKeyUp〔キーの状態に応じて処理を行う〕 onMouseOut／onMouseOver／onMouseDown／onMouseUp〔マウスを乗せたり離した時、マウスでクリックした時に処理を行う〕
HTMLテンプレートの基本ファイル一式、Webページを実装するための必要最小限をまとめたHTML
HTMLで、Webページやアプリを作成する時に役立つ、フロントエンド用に必要最小限をまとめたシンプルなHTMLの基本テンプレートのファイル一式を紹介します。 v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。 IE11を含む、すべてのモダンブラウザをサポートしています。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による分析・研究・実験をもとにしています。 ブラウザの見え方を最適化 プログレッシブエンハンス
jQuery Feeds|複数RSSをまとめて1ページに表示するプラグイン | wald-grun
複数のRSSを読み込んで、時系列に並べて変えて表示するjQueryプラグインです。PHPSPOT開発日誌さんで紹介されてて便利そうだったので試してみました。 複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」 ダウンロードや本家デモはこちら。 jQuery Feeds Demo • jQuery Feeds 僕が設置してみたデモはこちら。 デモ 設置 基本は以下の通りです。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/jquery.feeds.min.js"></script> <script> $(function(){ $('.feed').feeds({ feeds
AjaxPostの高速化 - Qiita
この手法を使うと、webアプリでajaxを用いてpostしたときの体感速度がクライアントアプリ並になる。 従来の方法 1.onclick="update(this);"などと設定 2.update(this)で更新クエリを発行 3.callback関数に処理が返ってくるのを待つ 4.更新クエリのcallback関数で更新内容をインターフェイスに反映 →callback関数に処理が返ってくるまでインターフェイスが反映がされず、遅い。 みのるajaxpost高速化 1.onclick="update(this);"などと設定 2.update(this)で更新クエリを発行する前に、インターフェイスを更新 3.callback関数に処理が返ってくるのを待つ 4.更新に失敗していたら、callback関数でインターフェイス上で取り消し処理やエラー処理をする →callback関数に処理が返ってくる
Webアプリ開発者のためのHTML5セキュリティ入門
Enterprise x HTML5 Web Application Conference 2014の発表資料です。Read less
2行追加するだけでWebサイトを高速化するInstantClick.io - atskimura-memo
Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). 引用：InstantClick — JS library to make your website instant リンクにマウスオーバーしてからクリックするまでには200msから300msほど時間がかかるそうです。実際このテストページでクリックしてみるとMacのトラックパッドだとさらに遅く500msくらいかかってました。 InstantClick.ioはその間に裏でリンク先ページをロードして勝手にリンクをpjax化してしまうという高速化ライブラリです。 やってることはRails4のturbolinksと似てます
jQuery.pjaxとjQuery.bottomを使ってSEO対策つきの無限スクロールを実装する
jQuery.pjaxとjQuery.bottomを使ってSEO対策つきの無限スクロールを実装することにより、追加されたコンテンツをインデックスに登録させる方法を紹介します。 １．はじめに 「Googleが推奨するSEOに適した無限スクロールの構成方法」で「無限スクロールのページにpushStateを実装する。（ことを推奨）」とあります。 同じページにサンプルへのリンクが掲載されていますが、自前の実装らしく、汎用的に使えるようなサンプルが紹介されているサイトはひとつもみつかりませんでした。 ということで、配布されているjQueryプラグインを組み合わせて、SEO対策つきの無限スクロールを実装してみたいと思います。 利用するjQueryプラグインはタイトルのとおり、jQuery.pjaxとjQuery.bottomの2つです。 defunkt / jquery-pjax jimyi / jq
setInterval()を使って、JavaScriptでタイマーで設定した一定時間ごとに動作を繰り返す(定期更新/実行する)サンプル - 感謝のプログラミング
今日は正月であまり食事に出る気にもならず、ピザを取ることにした。 ドミノ・ピザはネットで注文ができる。 注文してみたところ、注文完了後、「オーダー状況追跡システム」なるものが。 ドミノ・ピザはこちら↓ http://www.dominos.jp/ 楽しそうだから見てみると、以下の図のように、(ほぼ)リアルタイムで、現在の注文のステータスを表示してくれるものだった。 このリアルタイムのブラウザ更新はどうやってやってるんだろう？ WebSocketでも使ってるのかな？ と、気になってこのドミノ・ピザのオーダー追跡システムどうやって実装してるんだろうと思ってソースを見てみると、一部にこんなソースが書いてあった(当然、丸々抜粋はできないため、興味のある人はドミノ・ピザを注文して覗いてみてほしい) ちなみに、ピザ自体は注文して20分くらいで届いた。 ホクホクとあったかい、とても美味しいピザだった。
AngularJS コードの構造化 | DevelopersIO
複数人で AngularJS を利用した Web アプリケーションを構築するときに必要なルールをまとめてみました。 ( あくまで策定中のルールであり、今後も改変する可能性があります。また、ベストプラクティスを謳うものではありません ) 使用 AngularJS のバージョン angular.js 1.2.5 angular-route.js 1.2.5 参考サイト Dan Wahlin's Blog | Structuring AngularJS Code http://weblogs.asp.net/dwahlin/archive/2013/12/01/structuring-angularjs-code.aspx GitHub | mgechev / angularjs-style-guide / README-ja-jp.md https://github.com/mgechev/a
Json.NET VS ASP.NET Ajax Extensions - coma2n’s diary
以前、Json.NETっていう.NETオブジェクトをJSON形式に変換するライブラリを使ってみたけど、ASP.NET Ajax Extensionsにもこれと同等の機能を実現する「JavaScriptSerializer」というのがあった。 ASP.NET Ajax ExtensionsはMicrosoftが作ったフレームワークで.NET 3.5からは標準搭載される代物なので同等の機能を持つなら、標準である方を使っていくべきだと思うけど、せっかくなんで機能を比較してみた。 シリアル化 使用する環境： Visual Studio 2005 ASP.NET 2.0 Ajax Extensions Json.NET 1.3 まずは以下のエンティティクラスを定義する。 class Person { private string firstName; private string lastName;
［ASP.NET AJAX］Calendarコントロールで日付入力ボックスを定義するには？［2.0のみ、C#、VB］ - ＠IT
「TIPS：［ASP.NET AJAX］PopupControlコントロールで標準コントロールにポップアップ機能を追加するには？」で紹介したように、PopupControlコントロール（PopupControlExtender）を利用することで、テキストボックスに対して入力補助のためのポップアップ・ウィンドウを、ごくシンプルなコードのみで付与することができる。 これはこれで便利なコントロールであるのだが、もしも以下のような日付入力ボックスをASP.NETページ上で実現したいならば、PopupControlコントロールよりもCalendarコントロール（CalendarExtender）を利用した方が簡単に同様のことが実現できる。
[ThinkIT] 第4回：ASP.NET AJAXを実際に使用する手順 (4/4)
ASP.NET 2.0 AJAX Extensions 1.0に含まれているコントロールに、ScriptManagerコントロールとScriptManagerProxyコントロールがあります。 ASP.NET AJAXを使う上ではあまり意識することはないのですが、これらは非常に重要な役割を持つコントロールです。このコントロールが、JavaScriptのライブラリを制御してくれています。 また、ScriptManagerProxyコントロールはASP.NETのマスターページやユーザコントロールでASP.NET AJAXを使う場合に使うコントロールです。 マスターページ側にScriptManagerコントロールを貼り付け、コンテンツページ側にScriptManagerProxyコントロールを貼り付けます（ユーザコントロールの場合には貼り付ける画面にScriptManagerコントロール、ユーザ
jQuery 642 プラグイン：skuare.net
jQueryのプラグインを利用して出来るサンプルです。 jQueryは、John Resig によって開発されたJavaScriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。 ここでは、画像関連、メニュー関連、フォーム関連、テキスト／リンク関連、その他、日本語未解説のjQueryプラグインを分類して紹介しています。 初心者でもすぐにリッチなサイトを作成可能ですので、ぜひjQueryプラグインをご利用ください Image Menu Form Text/Link Other W/O_JP
『JavaScriptの開発効率を高める7つのライブラリ』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。
jQueryでajax的XSLT - 桝原翔市の日記
あまりXSLTって流行ってないけどテンプレートエンジンとしてみたらダントツで速いと思うんですよね。Webアプリケーション用としては。 あまり使われてないので誰も記事を書いてないようですし、ここでjQueryを使ってajax的に取得したXML,XSLをXSLTプロセッサへのせてタグへ出力する例を紹介します。 // XSLT用実行関数(まぁこうやるもんだと思ってください) function xslt(xml, xsl){ // ここで変数xml,xslともに[object XMLDocument]です。 try{ var xsltProc = new XSLTProcessor(); xsltProc.importStylesheet(xsl); $('#target').html(xsltProc.transformToFragment(xml, document)); }catch(e){
Cutting Edge: Programming AJAX with ASP.NET Partial Rendering
This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support. span.sup { vertical-align:text-top; } Cutting Edge Programming AJAX with ASP.NET Partial Rendering Dino Esposito Code download available at:CuttingEdge2008_08.exe(470 KB) Contents Pages with a Menu Navigation URLs Async Postbacks Menu and Partial Renderi
jQueryのDeffered/Promiseを会得した(いまごろ) - ただのにっき(2013-04-17)
■ jQueryのDeffered/Promiseを会得した(いまごろ) なんか最近、やたらと非同期処理の文脈で「promise」というキーワードを見ることが増えて、なんか流行ってんのかなーくらいにしか思ってなかったんだけど、実はjQuery.ajaxを使っているときに恩恵を受けていたことを(いくつか実装してみて)ようやく理解したのであった。Deffered/Promiseが実装されたのは、もう2.0もなろうというjQueryが1.5のころの話である。鈍すぎる……。 というのも、あんまり理解せずにコピペしていたからなんだよな。かつてはこんな感じに書いていたjQuery.ajaxの呼び出しが: jQuery.ajax({ type: 'POST', url: '/', ..., success: function(){...}, error: function(){...} }); 何かのソ
ASP.NET - Microsoft .NET Framework でシンプルな Comet アプリケーションをビルドする
このブラウザーはサポートされなくなりました。 Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。 Microsoft .NET Framework でシンプルな Comet アプリケーションをビルドする Derrick Lau コード サンプルをダウンロードする Comet とは、長時間維持される AJAX 接続を使用し、明示的な要求を行わないで、コンテンツを Web サーバーからブラウザーにプッシュする技術です。これにより、より対話型のユーザー エクスペリエンスになり、使用される帯域幅は、より多くのデータを受信しながらも、ページ ポストバックによってトリガーされる一般的なサーバーのラウンドトリップよりも少なくなります。利用できる Comet 実装はたくさんありますが、そのほとんどが Java ベースです
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery: jQuery プラグイン 実践サンプル