jQuery UIとjQuery Mobileがついに開発終了、今後はメンテナンスのみに。jQuery本体は引き続き積極的に開発
jQuery UIとjQuery Mobileがついに開発終了、今後はメンテナンスのみに。jQuery本体は引き続き積極的に開発 JavaScriptのUIフレームワークであるjQuery UIと、モバイルアプリケーション向けフレームワークであるjQuery Mobileは今後新規機能の開発が行われず、jQuery UIについてはメンテナンスへ移行、jQuery MobileについてはDeprecated（利用を推奨せず）になることがOpenJS Foundationから正式に発表されました。 jQuery UIは2007年に登場、jQuery Mobileは2011年に登場しました。一時期はWebサイトなどで広く使われ、関連書籍なども数多く出版された主要なライブラリ群の開発が正式に終わることになります。 ただしjQuery本体の開発は引き続き積極的に行われていくとのことです。 Follo
一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog
一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます（スマホで開くか、PCの場合はUAをスマホに偽装する必要があります） https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか？ どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削
jQuery MobileとjQuery UI、停滞を打破するため開発体制を刷新。以前より簡単にコントリビュート可能に
jQuery MobileとjQuery UI、停滞を打破するため開発体制を刷新。以前より簡単にコントリビュート可能に HTMLやJavaScriptなどのWeb標準技術でモバイルアプリケーション開発を可能にするJavaScriptライブラリ「jQuery Mobile」は、2014年9月に公開されたjQuery Mobile 1.4.4を最後に、3年ものあいだアップデートが止まっています。 また、Webアプリケーションにメニューやボタン、タブ、スライダーといったさまざまなユーザーインターフェイスを提供するウィジェットライブラリ「jQuery UI」も、2016年9月を最後に1年以上アップデートが止まっています。 こうした停滞を打破するために、jQuery MobileとjQuery UIの開発体制が刷新されたことが、2017年12月21日付けでjQuery Mobileのブログに投稿され
jQuery 3での変更点 ～ Promises/A+互換となったDeferred機能を中心に
はじめに 今回は、Ajax、Deferred機能などを中心に紹介しましょう。 また、先日7月7日に、jQuery 3.1.0がリリースされましたので、そちらの変更点も併せてお伝えします。 対象読者 Webアプリケーション開発に興味があり、jQueryを知っている方 Deferred機能 $.Deferredは、jQuery 1.5から導入された非同期処理のための標準モジュールです。ここでは、少し$.Deferredの基本的なところをおさらいしてから、jQuery 3での変更点を解説することにしましょう。 なお、jQuery 3での$.Deferredでは、破壊的な変更が3つあり、そのうち2つには新機能が含まれています。 $.Deferredとは Deferredとは、英語で、遅延、据え置きされた、などの意味 で、$.Deferredは、Promisesという概念を元に設計されたオブジェクト
jQuery登場から10周年。jQuery 3.0ベータ版が公開
2006年1月14日、ニューヨークで開催されたイベント「BarCampNYC」で John Resig氏が「jQuery」と名付けたJavaScriptライブラリを初公開しました。 そこからちょうど10年。jQueryはWebアプリケーション開発において欠かせない存在となっています。John Resig氏は当時を振り返る記事「10th Anniversary of jQuery」を自分のブログに投稿。次のように感謝を伝えています。 I’m most happy that it’s empowered so many people to build things on the web, I’m so glad to have been a part of it all. I can’t wait to see where we’ll be another 10 years from now!
簡単・軽量！画像ズームjQueryプラグイン「Zoom」
ECなど表示スペースは限られているものの商品の細かい部分は見せたいという要望があると思います。 これを簡単・軽量なjQuery image zooming pluginが解決してくれます。 sponsors 使用方法 jQuery image zooming pluginからファイル一式をダウンロード。 <style> .zoomIcon { width:33px; height:33px; position:absolute; top:0; right:0; background:url(icon.png); } .zoom { position:relative; } .zoom img { display: block; } </style> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <scr
グラフを手軽に共有できるツールを作ってみました - TechTalkManiacs
Graphiddleという、Web上のリソースをベースにD3.js + jQueryなグラフを手軽に共有できるサービスを作ってみました。 これは何？ オープンデータやクラウド型のオフィスソフトのデータを手軽にグラフ化して共有すること、そしてグラフを手軽に使いまわすこと、その二つを目標としたWEBアプリです 例えばオープンデータプラットフォームで公開されている福井県鯖江市の男女年齢別の人口統計をベースに五才ごとにまとめたグラフ がこんな感じです。元になったデータはここに公開されていますが、このサイトには他にも同様のデータが公開されているのでフォーク用のページでURLを切り替えれば別の町で同じようなことができます。 データ自体も男女別で2014年から2010年の分まであるので、コードをいじれば動的に切り替えたり人口ピラミッドを作ったりと色々なことができるわけです。 コードの書き方 変数としてグ
JavaScriptを使用する開発者にとって、jQueryを学ぶ価値は現在でもあるのか | スラド デベロッパー
過去10年近くにわたってWeb開発でJavaScriptを使用する際の重要な基盤に成長したjQueryだが、モダンブラウザーはかつてjQueryが補ってきた機能の多くを備えている。それでもjQueryを学ぶ必要はあるのだろうか(Dice Newsの記事、 本家/.)。 jQueryで実現可能なことはjQueryを使用しなくても実現できる。jQueryを使用することでシンプルな記述が可能となるものの、JavaScriptのネイティブ機能を直接呼び出す方が高速に処理を実行可能だ。jQueryでは、古いWebブラウザーだけが必要としていたコードを削り、モダンブラウザーのみをターゲットにしたバージョンの開発も進められている。その結果、モダンjQueryライブラリーは以前のバージョンよりも大幅にコードサイズが減少しているが、jQueryを捨てることが正当化されるようにも感じられるという。 多くの人が
jQuery を高速に使う CSS セレクタの書き方
jQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。 ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。 何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある ※ この記事は jQuery 1.2.6 のソースコードを���に記述しています 1. 何度も同じセレクタを実行しない 改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){alert
jQueryがパッケージ名を変更、2系の後継を「jQuery 3.0」、1系の後継を「jQuery Compat 3.0」としてリリースへ | OSDN Magazine
JavaScriptライブラリ「jQuery」の開発チームは10月29日、jQueryライブラリのバージョン番号付けルールや名称の変更を行うことを発表した。「Internet Explorer（IE） 8」などの古いWebブラウザをサポートする「jQuery 1.11.1」の次期版は互換性（Compatibility）を強調した「jQuery Compat 3.0」となり、新しいWebブラウザのみをサポートする「jQuery 2.11.1」の次期版は「jQuery 3.0」としてリリースするという。 jQueryは2013年より2つのバージョンを平行してリリースしている。主としてIE8以前に対応するかどうかが違いとなり、バージョン8以下のIEなど古いWebブラウザもサポートするバージョンを1系（最新版はバージョン1.11.1）、コード合理化のためにそれらのサポートを廃止したバージョンを2系
都道府県をセレクトするのに便利なjquwry
select要素をプルダウンに拡張するjQuery.selectable.js Check Tweet 配布元：selectボックスをシンプルなプルダウンに拡張するjQuery.selectable.js ライセンス:MITライセンス select要素でセレクトボックスを作成した際に、情報量が多いと非常に選択肢が多く探すのが難しいことがある。都道府県を検索する際に多くの人が経験したことがあるだろう。 jQuery.selectable.jsはセレクトボックスをプルダウンメニューに変更し、簡単に検索できるように変更するJavaScriptライブラリだ。 使い方 jQueryと配布サイトよりダウンロードしたjquery.selectable.js、スキン用のCSSファイルをhead要素などで読み込みます。 <script type="text/javascript" src="../js/jq
jQuery 公式 Blog 「jquery-latest.js を使用するのをやめろ」
jQuery 公式 Blog は、「Don't Use jquery-latest.js」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 jQuery 公式 Blog は、7月 3日付けで投稿された 「Don't Use jquery-latest.js （jquery-latest.js を使うな）」 と題された記事内で、今後、jquery-latest.js のバージョンを 1.11.1 で固定することと、本番環境 （公開している Web サイト） で jquery-latest.js を読み込むのをやめてくれというアナウンスを行っています。 Don't Use jquery-latest.js ： Official jQ
[JS]実装は簡単でスマフォにも対応、縦長ページをスクロールする時にちょうどいい位置にスナップさせるスクリプト -Scrollify
section要素やdiv要素でパネルを垂直に配置した縦長ページをスクロールする時に、各パネルをちょうどいい位置にスナップさせるjQueryのプラグインを紹介します。 デスクトップのホイール操作、スマフォやタブレットなどのタッチ操作にも対応しています。 ちょうどいい位置に自動でスクロール スクロールはイージングやバウンドなど、さまざまなエフェクトが利用できます。 Scrollifyの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsとeasing.jsを</body>の上あたりに記述します。 jQueryは1.6+で、どれでも可です。 <body> ... <script src="script/jquery-1.6.js"></script> <!--<script src="script/jquery-2.1.1.js"></script>--> <!--<scri
[jQuery] $(‘form').change()でフォーム全体の変更を監視する | きほんのき
トップページ jQuery [jQuery] $(‘form’).change()でフォーム全体の変更を監視する [jQuery] $(‘form’).change()でフォーム全体の変更を監視する 公開 2012年8月8日（水） jQueryのchange()メソッドは、フォーム要素の値に変更があった時、それを察知して反応します。inputやtextarea、selectにバインドして使うことがほとんどだと思います。 <form action='#' method='post'> フルネーム<input type='text' name='fullname'> パスワード<input type='password' name='pass'> <input type='submit'> </form> <script> $("input[name=fullname]").change(fu
[jQuery] find()とchildren()の使い分け | きほんのき
jQueryのメソッドfind()とchildren()は、ともに指定した要素が持つ子要素を取得するためのものですが、children()が直下の要素だけを取得するのに対し、find()は全ての子要素を探索するという違いがあります。両者の違いと使い方についてまとめました。 //html example <div> <dl> <dt>カテゴリー</dt> <dd><a href="./foo.html">foo</a></dd> <dd><a href="./bar.html">bar</a></dd> <dd><a href="./hoge.html">hoge</a></dd> </dl> </div> find()は強力な検索機能を持っています。例えば上のhtmlのdivの中から、一番最後のリンク先を取得したい場合、このようなコードで可能になります。 var a = $("div").
jQueryの$elm.data()で取得できる値は暗黙でstringから型変換される
知らなくてコケた .data() – jQuery API 通常，element.datasetから得られるカスタムデータ属性の値はstringですが，jQueryのdataメソッドはこれらを暗黙的に型変換します． 以下コード踏まえたサンプル． <!-- 長いので改行いれてます --> <div id="test" data-str="hogefuga" data-num="01234" data-bool="true" data-ary="[1,2,3]" data-obj='{"foo":"bar"}'> <p>ほげほげほげ</p> </div> たとえば，このようなdata-*がコッテリ付いた要素があったとして，その要素から$elm.data()で値を取得すると･･･ var $elm = $('#test'); // string $elm.data('str'); // 'hog
フォームのlabel要素のテキストをjQueryでプレースホルダーにする
フォームのlavel要素をHTML5の placeholder属性にする、という 方法。jQueryを使用します。 フォームが固定されたCMSのスマ フォサイトを作成するにあたり、 省スペース化したいのでこの方法 を使いました。 フォームのマークアップが固定のCMSのスマフォサイトでフォーム省スペース化に迫られて、label要素をplaceholder属性にする事で落ち着きました。折角なのでメモ。 Sample label要素をplaceholder属性に当ててdisplay:none;しました。 $("input").each(function(){ $(this).attr("placeholder", $('label[for='+ $(this).attr('id') +']').text()); });labelのfor属性とマッチするid名のついたinput要素にplaceho
[JS]実装も簡単、必須入力の有無やメールアドレスのチェックなどフォームのバリデーションをおこなう軽量スクリプト -Validetta
選択しているのが2つかどうか Validettaは、以下の項目がチェックできます。 データが空かどうか。 電子メールのチェック。 数字のチェック。 クレジットカード番号のチェック。 フィールド内の文字数のチェック。 チェックボックスやセレクトボックスの選択数のチェック。 2つのフィールドが同じかどうか。 正規表現を使ったフィールドのチェック。 Validettaの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="validetta/validetta.css" rel="stylesheet" type="text/css" media="screen" > <script type="text/javascript" src="http://code.jquery.com/jquery-late
たった3KBのコードで3DCGモデルが歌って踊ってアングルも操作できる！ jQueryベースのライブラリでMMDデータを活用したWebGLコンテンツを作ろう
はじめに 数あるHTML5の機能の中でも、特にビジュアルでインパクトのあるWebGL。GPUを駆使した高速3DCGレンダリングが可能なことで話題になったものの、今一つ普及しない背景には「実装があまりにも難しい」ことがあるのではないでしょうか。 three.jsの登場により、実装のハードルはだいぶ下がりました。しかし、JavaScriptに精通したプログラマでなければ使いこなすのは容易ではなく、ビジュアル要素の強いWebGLにあってデザイナーさんの参入は難しいのが現状です。 今回紹介する「jThree（ジェイスリー）」は、そんなWebGLをjQueryの記法で扱えるようにするための国産JavaScriptライブラリです。前述のthree.jsをラップしてjQueryで操作できるよう設計されており、jQueryを使ったことのある方なら、手軽にWebGLコンテンツを作ることができます。 本記事で
jQueryを使って、div全体にリンクを貼る方法。_blank対応も。 | SHINGO IRIE
例えばボタンなどdiv全体にリンクを貼りたいことがありますが、その際に便利なTipsのご紹介です。 まずは、見た目のみ準備CSSでボタンを作ります。リンクもdivの中に置いて構いません。CSSでdivの上にマウスがのったときに、カーソルが変わるよう変更しています。 <style> .sbtn{ margin-right:10px; text-align:center; background-color: #28B0FF; padding:10px; color:#fff; text-decoration:none; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; margin-bottom:10px; cursor:pointer; } </style> <div class="sbtn">
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
