これからは今まで以上に、jQueryが必要なくなるかもしれない
3, 4年前あたりから、jQuery無しでこう記述するとか、jQueryの一部の機能を代替する軽量スクリプトなどが出始めました。 2017年も半年が過ぎ、その状況はさらに変わり始めています。 (Now More Than Ever) You Might Not Need jQuery 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 現在のブラウザ事情 jQueryに替わる、JavaScriptの選択肢 マイクロライブラリの台頭 IE9への対応はポリフィルで NodeListの反復 jQueryは遅いのか？ jQueryについて私が嫌いなもの $なしでは生きていけない？ 現在のブラウザ事情 jQueryが2006年にリリースされてから、DOMとブラウザのAPIは飛躍的に向上しています。2013年に「You Might Not Ne
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
Amebaっピグっぽい物が作れるjQueryプラグイン「pp3Diso」:phpspot開発日誌
Plugin pp3Diso : moteur de jeu web pour l'affichage et la gestion d'une map 3D isomtrique Amebaっピグっぽい物が作れるjQueryプラグイン「pp3Diso」。 マップ上を人が移動するような感じのゲーム風インタフェースが作れるライブラリっぽいです。 フランス語っぽいので翻訳したりコードを読んだりして使う必要がありますが、なかなかおもしろいのでご紹介。 JavaScriptベースということで、スマホで動くAmebaピグを作ってやろう、という方は参考にできるかも。 関連エントリ ２Dゲームが作れそうなアニメーションjQueryプラグイン「Motio」 カスタマイズ可能で動きがよいalertダイアログ実装jQueryプラグイン「alertifyjs」 Instagramの写真をサイトに簡単掲載できるjQ
フルスクリーンでページめくりをするUI実装デモ:phpspot開発日誌
Fullscreen Pageflip Layout with BookBlock フルスクリーンでページめくりをするUI実装デモ。 なかなかいい感じのインタフェースのデモとサンプルのダウンロードが可能。 ページめくり部分はjQuery+CSSで実装されており再利用ができそう ページ全体をめくるというのもなかなかいい、と感じるデモでした。 完成度が高いのでそのままサイトに移植してもよさそうですね 関連エントリ ページめくりを実現するためのjQueryプラグイン集 Flipboardみたくページめくりを実現できるjQueryプラグイン「BookBlock」 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 美しいページめくり効果が作れるjQueryプラグイン「Flippy」
「ノンプログラマーのためのjQuery生成ツール」作りました
ノンプログラマーのためのjQuery生成ツールを作ってみました。よければご活用ください。 ノンプログラマーのためのjQuery生成ツール サンプル表示つき このツールは「7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座」にインスパイアされて作った、初心者向けのお勉強ツールです。 コールバックなど複雑な設定はできませんが、基本的な設定とメソッドチェーンまでできるようにしています。 追記：イベントとAPIをプルダウンメニューで選択できるようにしました。過不足あればご指摘ください。 追記：イベントとAPIのプルダウンメニューでツールチップを表示できるようにしました。ざっくりした内容ですが、これでイベントやAPIの使い方が分かるようになります。 ツールチップを表示 やっつけで作ったので中のコードはかなりひどいです。あしからず。 １．使い方 本エン
コンテナに画像がぴったり収まるように画像のサイズを変更するjQueryプラグイン・imgLiquid
画像を包括したコンテナに その画像がぴったり収まる ようにサイズを調整する、 というjQueryプラグイン。 必要になるか分かりません が、需要はありそう。 コンテナ一杯に画像を表示させる、というもの。 上が使用した状態、下が未使用です。下はコンテナに隙間があるのに対し、上はコンテナに隙間無く画像が収まっています。画像をメインとしたコンテンツでグリッドレイアウトなWebサイトなどにも良さそうです。 コード<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <script src ="imgLiquid-min.js" type="text/javascript"></script>コアとプラグインを読み込みます。 $("
機能全部入りアップローダー実装jQueryプラグイン「Fine Uploader」:phpspot開発日誌
Fine Uploader a.k.a valums file-uploader 機能全部入りアップローダー実装jQueryプラグイン「Fine Uploader」。 プログレスバー付きでアップロード後の即時サムネイル表示、ドラッグ＆ドロップアップロード、複数ファイルアップロード対応など全部入り。 BootStrapのテーマにあわせることもできます。IE7移行も対応しています。 モダンなアップローダーを作るなら１つの選択肢になりそうです 関連エントリ 画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」 HTML5を使ったファイルアップロード用プログラム集
jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法｜BLACKFLAG
Webサイトのトップページで表示するお知らせ情報など、レイアウトの都合上、長い文字列を特定の文字数でカットしたいことはよくあることかと思います。 そんな際にjQueryを使って文字列を任意の文字数でカットして、末尾に「…」などの追記情報（これも任意の文字列）を追加するやり方をシンプルなスクリプトで実装する方法をご紹介してみます。 【テキストのみ】 jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法 まずは実装するHTMLソースが下記のような構成だったとします。 ◆HTML <ul> <li>このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です
jQuery Mobile 1.2正式版が公開。jQuery 1.8対応、ポップアップウィジェット追加など
jQuery Mobileは昨年11月に最初のバージョンとなる1.0の正式版が登場。今年の4月にバージョンアップしたjQuery Mobile 1.1となり、今回の1.2の登場と、おおよそ半年ごとにバージョンアップをしてきたことになります。 ポップアップウィジェットが追加 新機能として挙げられているものの1つが、ポップアップウィジェットの追加です。さまざまなフォーマットのポップアップ画面を出せるようになりました。
Googleカレンダー風操作感を持つ美しいカレンダーを実装できる「FullCalendar」:phpspot開発日誌
FullCalendar - Full-sized Calendar jQuery Plugin Googleカレンダー風操作感を持つ美しいカレンダーを実装できる「FullCalendar」 カレンダー実装のスクリプトは色々とありますが、UIが綺麗に作られているカレンダー実装jQueryプラグインの１つとしてご紹介 ドキュメントが充実しておりカスタマイズ制が高いものとなっています 関連エントリ Google Calendar風に使えるカレンダー実装jQueryプラグイン「jquery-frontier-calendar」 これで自前でGoogleカレンダーを持てる！jQuery＆PHPで実現されたプログラム
2013年予定のjQuery 2.0、IE8以下はサポート廃止の方針
2013年初頭にリリースを予定しているjQuery 2.0では、Internet Explorer 6/7/8のサポートをしないという方針が、jQueryのブログ「jQuery Blog » jQuery Core: Version 1.9 and Beyond」で明らかにされました。 jQueryは現在1.7が最新バージョンで、先週1.8β1が公開されたばかり。ブログによると、この先のロードマップは次のように説明されています。 jQuery 1.9 (early 2013) 1.8で使用されなくなったインターフェイスの多くを削除。そのうちのいくつかはプラグインか代替APIでサポートされる。 jQuery 1.9.x (ongoing in 2013 and beyond) 継続してバグフィクスを行う。 jQuery 2.0 (early 2013, not long after 1.9)
Twitter BootstrapをjQuery Mobileで使ったデザインテーマ集・jQuery-Mobile-Bootstrap-Theme
なかなか良かったので備忘録です。 Twitter Bootstrapのデザインを、 jQuery Mobileのテーマに起用した サンプルソースが公開されていま した。フレームワーク的にも使える かもしれない。 Twitter Bootstrap × jQuery Mobileです。既出ですけど良かったので。 JQMのデザイン変更用リソースです。ThemeRollerでもいいんですけどどうも微妙というか、肌に合わないのです。最初から作った方が早い気がしましたが、こうして変更されたものがあるならこれを元に変えると効率的になりそうです。同じ手法でbootswatchで配布されてるBootstrapテーマを起用しても良さそうですね。 Sample サンプルのQRコードです。↓ 何故かフォームのデザイン変更できなかったけど・・・まぁ自分で作ればいいかなｗ ご利用は以下よりどうぞ。 jQuery-M
レスポンシブなフォームを作成するフレームワーク「jq-idealforms」:phpspot開発日誌
jq-idealforms レスポンシブなフォームを作成するフレームワーク「jq-idealforms」 フォームのデザインが良い感じにデザインされているだけではなく、幅を狭くすることでレイアウトが変更されるレスポンシブなフォームを簡単に実装出来ます。 ポップアップによる入力ヒントの実装も可能。とにかくデザインが良い感じなので非デザイナーさんでもカッコいいフォームが作れるという部分も特徴 スマホの場合、レイアウトが最適化されます jQueryとLESSを使って実装されています 関連エントリ フォームをカッコよくするjQueryプラグイン集１５ 通常のフォームを瞬時にAjax化できるjQueryプラグイン「ALAJAX」 フォーム要素をクールにするためのjQueryプラグイン集
APIと少しのjQueryコードでGoogle Mapの地図の色を変更する
Google MapのデザインをjQueryで変更する為のメモ書き。Google Map APIとjQueryでGoogle Mapの色合いを変更し、オリジナルのマーカーを付けてみます。こうする事で、既存デザインに合わせたGoogle Mapが出来ます。 今後必要になりそうだったので調べ物をしたついでにメモ書きです。デザインを変更、というと語弊がありますけど、好みの色に変えてみます。 ゴール↓ こんな感じのをjQueryでやろう、みたいな内容です。特に目新しい情報では無いですが。 なんかシャドウ変になっちゃった・・色やマーカーだけでもWebサイトで使用している色にあわせれば地図だけ浮いてしまうような事も無くなるんじゃないかなと思います。 ジオコーディングリクエスト<script type='text/javascript' src='http://ajax.googleapis.com/a
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
要素にフローティング効果を手軽に与えられるjQueryプラグイン・jqFloat.js
画像とかをフワフワ動かすやつです。 指定した要素を、指定どおりに継続 的にサイト内で動かします。CPUの 問題とかもあると思うので多用は 出来ないと思いますが、よく見かけ るといえば見かけるので一応メモ。 オブジェクトにフローティング効果を与えます。キャラクターのあるキッズ、ファミリーをメインターゲットとしたWebサイトなんかと相性良さそうですね。 いろいろと画像が動きます。自動で動くものもあれば、マウスホバーで、クリックでアニメーションがスタートする、なども設定可能みたいです。 見た方が早いですかね。公式デモです。 Demo デモでは画像のみになっていますが、ボックス要素を丸ごと動かしていますので、テキストにしても同じ動作をしてくれます。 IEでも動く。 iPhoneでも動く。 コード<script src="http://ajax.googleapis.com/ajax/libs/jq
ベジエ曲線のラインに沿ってテキストを折り返すことができるjQueryプラグイン・Bacon!
ちょっと面白いプラグインだったので 備忘録。曲線に沿ってテキストを折り 返せるようにするjQueryプラグインで す。新聞のようなレイアウトも組めそ うです。用途はあまり無さそうですけ ど、珍しいので覚えておきたい。 Bacon!(ベーコン)です。名前の経緯は分かりませんが、ペジェ曲線にそったテキストの折り返しが可能です。 こんな感じ。結構前に同じようなライブラリありましたね。こちらはペジェ曲線と同じような感覚でラインを作る事が出来ます。 こういうのとか こういうのも作れる。 IEでもなんとか動く。 コード<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="bacon.jquery.js"></script>jQueryとプラグインを読み込む
テキストをランダム表示してから整列していくjQueryプラグインを作ってみました | bl6.jp
テキストをランダムでフェード表示させて、アニメーションで整列させていくっていうのをjQueryで作りたく色々と試しながらなんとかできたのでプラグイン（jquery.random.text.return.js）にしてみました。ぶっちゃけほぼ使い道がなさそうなプラグインですけど。。ということで以下使い方です。 使い方 とりあえずサンプルみた方が早いので以下のページから見れます。 サンプル 使い方はめっちゃ簡単です。以下のページからファイルをダウンロードします。 ダウンロードページ head内にjQuery本体とダウンロードしたプラグインを読み込みます。 <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script> <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryでモーダルダイアログを実現するプラグイン２０:phpspot開発日誌
TECH PROjin
