はい。てなところでようやく本題です。 上記みたいなライトなチャット実装を(簡単に)叶えてくれる!かも知れないツール、見つけておきました。 PHPで動く!カンタン実装オープンソースチャットフレームワークArrowChat https://www.arrowchat.com/ というわけでこちらです。 Webであれこれ作ってきた我々にとっては非常に馴染み深い、我らがPHP&jQueryで動いてくれるというオープンソースなチャットフレームワーク『ArrowChat』です。 ライセンスはこんな感じで、もちろん商用可能。初回ダウンロード時に45ドル(大体5,000円くらい)払うとzipでダウンロードでき、その後はもう好きにしてーっという素敵仕様です。 プランは色々あるけど廉価版で全然OK 料金プランはいくつかあるんですが、違いは単に『サポートどれくらいいる?』てだけなので、そもそもコードは読めるけど
jQuery+skrollrでスクロールしてSVGの色を変化させる jQueryとskrollrというプラグインを使用して、スクロール量に応じてSVGの色を変化させてみます。 投稿日2016年06月16日 更新日2019年04月13日 背景色の変更 SVGの前に、一番単純なbodyの色を変化させてみます。 jQueryとskrollrを読み込んで、skrollr.initを実行します。 JavaScript <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js'></
jQuery 3.0 が正式リリース、通常の Web サイト制作で利用するなら軽量版 「Slim build (スリムビルド)」 が便利 jQuery 3.0 の正式版がリリースされました。次バージョンからはバージョン番号を統一して 3.0 にすると発表されてから 1年半後、やっとの正式リリース。Ajax モジュールなどを省いた軽量版 「スリムビルド」 も提供されています。 米国時間の 6月 9日付けで、jQuery 公式サイトにてアナウンスされましたが、jQuery 3.0 の正式版がリリースされました。 jQuery 3.0 Final Released! : Official jQuery Blog 2014年の 10月に jQuery 公式 Blog に投稿された記事 (参考エントリー) で、次期リリースから現状の jQuery 2.x 系の後継を 「jQuery 3.0」、1.x
はじめに jQuery 3.0が正式リリースとなったので、最新のアップグレードガイドをまとめようと思います。 原文から一部わかりやすいように言い換えたり、補足したり、省略したりしています。 注意: 長いです。主要な変更点は前回の記事【翻訳まとめ】jQuery 3.0 alpha リリースノートを参照してください。 jQuery Core 3.0 Upgrade Guide 全体像 APIを綺麗にしてバグを修正しました。 - 一部破壊的な変更があり - 既に非推奨と公表していたAPIを削除 - ドキュメントにない隠しAPIの削除 - 特定の入力値に対する既存APIの振る舞いを修正 サポートブラウザ IE9 以上 Chrome, Edge, Firefox, Safariの最新版とそのひとつ前のバージョン Operaの最新版 iOS 7 以上のモバイルSafari Android 4.0以上
こんにちは、工藤です。 今回は以前まとめたものが古かったので、jQueryを使ったモーダルウィンドウのプラグインを改めてまとめました。 レスポンシブ対応しているもののみに絞っています。 Boxer(Lightbox) DEMO GitHub(Boxer) GitHub(Lightbox) 以前までは『Boxer』というプラグイン単体だったのですが『Formstone』というテーマの1つになり、それに伴い『Lightbox』という名前に変更になったようです。ややこしいです。 ただ比較しても挙動は(見た限りだと)そんなに違わないので好きな方を使ってよいかと思います。 『Boxer』の方が設置は簡単です。 このプラグインのいいところはレスポンシブに対応している、かつスマートフォンで見た場合には最適化して表示してくれるところです。 こんな感じにきれいに表示してくれるので重宝しています。 動画やイン
jQuery plugin to add common checkable menu items checkbox and radio and more features to jQuery.contextMenu. A very useful jQuery plugin jQuery.contextMenu supports text, textarea, checkbox, radio, etc., as item.type. Those allow you to embed form elements in the menu. Those may be useful in special cases, aside from whether users welcome a form that appears via right-click or not. But two types c
2016/05/20にjQuery 3.0のリリース候補版が出てたのでアップグレードガイドを見てみます。 Overview jQuery3.0ではコードのクリーンアップとかバグ修正とかDeprecatedなコードの削除とか色々やってるよ。 Browser Support ・IE 9以降 ・Chrome/Edge/Firefox 最新のひとつ前のバージョンまで ・Opera 最新版のみ ・iOS 7以降 ・Android 4.0以降 jQuery Migrate Plugin 移行プラグインを用意してるから、以下の1行入れとけば1.12、2.2と互換するよ。 <script src="https://code.jquery.com/jquery-3.0.0.js"></script> <script src="https://code.jquery.com/jquery-migrate-3.
Stellar.js とは パララックスの実装に使えるjQueryプラグインです。 それぞれの要素の縦横のスクロール速度をずらすことができます。 デモ それぞれで縦のスクロール速度をずらしています。 DEMO 使ってみる ますダウンロード こちらから 設置する jQueryも忘れずに読み込みましょう。 <script src="js/jquery.stellar.min.js"></script> 対象の要素またはwindowに対して使用します。 $(function(){ $(window).stellar(); }); ソース まず縦横のスクロールを設定します。 horizontalは横、verticalは縦を指します。 $(window).stellar({ horizontalScrolling: true, verticalScrolling: true, }); 要素を動かした
WordPressでjQueryコードが動かない人へ こんにちは。入澤です。 代表曰く「ラーメンブログとなりつつある現況を打破してほしい」ということで、唐突ではありますがWeb(WordPress×jQuery)のお話をしたいと思います。ちなみに私が最近美味しいと思ったカップ麺はマルちゃんのでかまる 濃厚コク塩ワンタン麺です。 さあレッツゴー。 ○が1つ以上の方は読み進めて下さい 1, WordPressテーマファイル「header.php」の「<head>」タグ内にjQueryコードを記述しているが動かない 2, 動かないのはjQueryのバージョンが問題では?と各プラグインコードの直前にjQuery(バージョン違い)を追加している(結果動作したりしなかったり) 3, 「prototype.js」絡みのコードを入れたらjQueryが死んだ 4, 別に今直面している問題はないが、「(Wor
jQueryでシンプルなイベントカレンダー jQueryでつくったすごくシンプルなイベントカレンダーです。 投稿日2016年05月17日 更新日2016年05月17日 ダウンロード GitHubからダウンロードしてください。 jQuery.MiniCalendar HTML jQueryと一緒にふJSファイルを読み込んだら適当にdivかなんかでマークアップします。 HTML <div id="mini-calendar"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> <script src="../jquery.minicalendar.js"></script> JavaScript miniCalendarを呼び出してください。 JavaSc
クリックで画像が拡大されるライブラリはlightboxなど数多くありますが、その中でもデザインの邪魔をせず、実装もかんたんなライブラリ、それがlity.jsです。 使い方公式サイトから一式ダウンロード。 ダウンロードしたファイルの中で使うのはdistフォルダ内のlity.js、lity.cssのみ。 jQueryの後に読み込ませます。 <link href="lity.css" rel="stylesheet"> <script src="jquery.js"></script> <script src="lity.js"></script> あとは、 <a href="http://image.jpg" data-lity>Image</a> のようにdata-lity属性をつけるだけで動きます。かんたんですね。下がlity.jsの表示サンプルです。 WordPressへの組み込みWor
Home - jQuery.smoothState.js ページ遷移をアプリっぽくすることができる「jQuery.smoothState.js」 WEBページというと画面遷移で一旦画面がクリアされて再描画されるため、アプリっぽい体験にすることは通常難しいですが、こちらのプラグインを使って、よりアプリっぽいWEBページ作りが出来ます。 ページ遷移後はURLもa.html→b.htmlのように変わるため、ブックマークやSEO的にも問題のないWEBページ作りに役立てられます 関連エントリ ページ遷移を意識させないアニメーションによるページ切り替え効果実装 モダンでかっこいいページ遷移アニメーションサンプル
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
GitHub - Fivium/jquery-tagger: jQuery plugin to turn a HTML select into an auto-suggesting, tagging widget サジェスト等、多機能なタグ入力UI実装jQueryプラグイン「jquery-tagger」 JSONやAjaxからアイテムをサジェストして表示可能。単一or複数選択等、調整も可能。 関連エントリ タグの修正で簡単にUIを変更できるAudioPlayer実装jQueryプラグイン「snd」 selectタグの機能を大幅に向上させる「selectivity」 タグによってアイテムをフィルタする仕組みを提供するjQueryプラグイン「Tagsort」
以前、この「bxSlider」プラグインについて説明をさせて頂いたのですが、 最近バージョンアップされ、機能もパワーアップされてました。 サイト自体もリニューアルされ、今風になっていました。 それに伴い、今回新しく記事にすることにしました。 以前の記事は以下になります。 コンテンツスライダー、カルーセルスライダーにもなるjQueryプラグイン「bxSlider」 今回のバージョンアップした点は以下になります。 ・レスポンシブに対応 ・スワイプが可能(スマートフォン) ・cssが付いているので、cssの設定が楽になった ・コントロールの画像等も付いている ・カルーセルの設定も変更に(プラグインで設定する) 今回もDEMOを作成しましたが、 レスポンシブになった箇所以外は、あまり以前のと変わってはいません。 DEMO それでは簡単にではありますが、使い方です。 bxSliderの使い方 まずは
※追記 コメントでこの記事よりも断然質の良い記事を教えてもらいました。 @kabochaさんありがとうございます。 You Don't Need jQuery https://github.com/oneuijs/You-Dont-Need-jQuery 追記の追記。 日本語訳のお手伝いをさせていただきました。 github https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README-ja.md [Qiita]もうjQueryは必要ない http://qiita.com/tatesuke/items/b9548dd484b01b139b74 jQueryが使える環境でコーディングした後、jQueryが使えない環境でコーディングしようとすると、「どう書くんだっけ?」となることが多いです。ということで分かる範囲でチートシ
Niklas Knaack Dev Blog: SVG 3D Tag Cloud jQuery Plugin SVGでヌルヌル動く3Dタグクラウド実装jQueryプラグイン Flashで実装したかのごとくヌルヌル動くクールなタグクラウドの実装が可能です。サイト上に動くオブジェとして実装してみるのもオシャレかもしれません。 関連エントリ アニメーション切り替えがカッコイイタブUI実装jQueryプラグイン「tabtab.js」 3Dアニメーションがクールなカルーセル実装jQueryプラグイン「jR3DCarousel」 アニメーションするプログレスバーを実装できるjQueryプラグイン「barIndicator」 文字のタイピングアニメーション実装jQueryプラグイン「TypeIt」
はじめに 今更ですが最近ajaxを少し触るようになりました。 jQueryを使えば簡単にajax通信ができるため、単純なものであればそれほど実装は難しくないかと思います。 ですが少し複雑なことをやろうとしてみると、急にハードルが上がる気がします。 そこで自戒を込めて、ajax初心者の方に対してはじめにこれを知りたかったと思えるんじゃないかというものをまとめてみたいと思います。 ※jQueryを利用したajax通信を想定しています 目次 処理の順番を意識する $.ajax()の省略メソッドを知る イベントを知る デバッグ方法を知る 通信状況を想定する(タイムアウトを設定する) 連続クリックを防止する ← [New!] 連続通信を防止する ← [New!] 処理の順番を意識する ajaxを使用する場合は、非同期通信で処理したいケースがほとんどかと思います しかし単純にそのまま書いただけでは処理
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く