今日話さないこと JavaScriptの基礎知識、jQueryの導入 気持ちいいUIやUXがうんちゃら CanvasやWebGLを使ったリッチでイケてるゲームの作り方
フロントエンドJavaScriptにおける設計とテスト
今日話さないこと JavaScriptの基礎知識、jQueryの導入 気持ちいいUIやUXがうんちゃら CanvasやWebGLを使ったリッチでイケてるゲームの作り方
[JS]スライド内の複数の要素それぞれに異なるアニメーションを設定できるスライダー -Fraction Slider
スライド内に複数の要素を配置し、それぞれ異なるタイミングで異なるアニメーションを設定できるスライダーを実装するjQueryのプラグインを紹介します。 デモ：Animation Basic それぞれ対角にアニメーションでスライドします。 Fraction Sliderの使い方 実装は非常にシンプルです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="fractionslider.css"> <script src="jquery-1.9.0.min.js" type="text/javascript"></script> <script src="jquery.fractionslider.js" type="text/javascript" ></script>
Twitter製の高速なオートコンプリート用JSライブラリ「typeahead.js」:phpspot開発日誌
typeahead.js Twitter製の高速なオートコンプリート用JSライブラリ「typeahead.js」 ハードコードデータとリモートのデータを両方サジェストできたり、サジェスト部分のテンプレートをいじったりできるみたいです。 オートコンプリート用ライブラリは数あれど、Twitter社製ということで、一度試してみたいものですね Twitterが出すことによって成功したBootstrapですが、こうした高品質な物が使えてしまうのはありがたいことですね 関連エントリ Google風のBootstrapテーマ「GoogleBootstrap」 Bootstrapに270の使えるアイコンを追加できる「Elusive icons」 Bootstrapで矢印を描くのなら「Bootstrap Arrows」 TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wy
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
jQuery Learning Center
Learning Center Chat Twitter GitHub Copyright 2025 OpenJS Foundation and jQuery contributors. All rights reserved. See jQuery License for more information. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trad
Node.js + Express を Heroku で動かすまでの手順まとめ - tacamy--blog
普通の JavaScript も jQuery もまともに書けないけど、はじめての Web アプリを Node.js でつくってみるという奮闘記。 環境つくるだけなのに何も分からなすぎてハマりすぎて、この一連の流れだけで丸 2 日潰れるという大惨事だったので、ちゃんとブログに残しておく。 Node.js のインストール Node.js の INSTALL ボタンから、インストーラを使って入れることもできるけど、Node.js のバージョンを切り替えて使える方が便利だと思うので、前回のエントリを参考に nodebrew を使ってインストールするのがオススメ。 node.js 入れるなら nodebrew が超簡単 - tacamy memo インストールが正しくできているか確認のため、Node.js のバージョンを表示。 $ node -v npm のインストール Node.js にはたくさ
5分でbowerをRailsに導入する - 日々是鍛錬
プロジェクトでjsのライブラリをどうやって管理するかみたいな話を隣の人としてて、 jquery-railsとかgem使う bundle updateで依存地獄なきにしもあらずなので、app/assets/javascript/vendor/とかに置く いやいやそれならvendor/assets/以下でしょ bowerって最近なうい感じがする ということで、bower使うと楽なんじゃないかみたいな結論にいたった。 https://github.com/twitter/bower Twitter社が作っているアセット管理ツールで、Twitter社が作ってるなら安心だろうみたいな感はあるけど、シンプルで使いやすい。 nodeで作られてるのでnpmでinstallする。 $ npm install -g bower bower installすると$HOMEに.bowerが作成されてそこにライブラ
[JS]最近リリースしたjQueryのプラグインのまとめ -2013年1・2月
紹介済みから未紹介のものまで、最近リリースしたjQueryのプラグインをまとめました。 去年までは33+1選としてましたが、今年から新たなフォーマットで。
HTML5 × CSS3 × jQueryを真面目に勉強 – #15 Evernote風タグ登録コンポーネントを作ってみた | DevelopersIO
ちょっとした備忘録といったメモには Evernote を使っています。一時期に比べると使用頻度は少し落ちましたが、それでも使っています。地味なところですが、Evernote のタグ登録 UI が結構好きなのが理由の一つでもあります。 Web メールにおいては基本的に受信がメインで送信といっても殆どが返信で済んでしまっていますが、 Gmail を使っています。Gmail は非常に早いサイクルで機能や UI が刷新されまくっていますが、いつの頃から送信先、Cc、Bcc 入力のUIがまるでタグのような見た目とインタラクションになりました。この両者の UI はとても良く似ており、単純なカンマ区切りの文字列よりも視認性が高くて個人的に気に入っている UI の一つです。 そんな訳で、このタグ登録のUIコンポーネントを作ってみました。前回、jQuery UI Widget の作り方について学んだわけです
HTML5 × CSS3 × jQueryを真面目に勉強 – #14 jQuery UI Widget(プラグイン)の作り方について詳しく | DevelopersIO
そんな訳で、jQuery UI プラグイン(※以下、jQuery UI Widget) の作り方について学んだので、ここに書き記しておくとします。忘れっぽい自分のための備忘録として書いた内容なので、割りと基礎的な部分にフォーカスした入門編のような内容になっています。 ウィジェット作成のための前準備 当然ですが jQuery UI のプラグインなのだから、作成には jQuery エンジンだけでなくjQuery UI ライブラリが必要となります。 手順A | CDN で手軽にロードする 学習目的やちょっとしたテクニカル調査といった場合は、わざわざファイルをダウンロードするのも大げさなので、CDN (コンテンツ・デリバリ・ネットワーク)を利用させてもらうのが妥当です。 jQuery UI オフィシャルページのフッター部分に必要なURLがすべて記載されているので、これらをアナタが作成する HTML
bootstrapを利用して簡単にかっこいいツールバーを作れるjQueryプラグイン「Toolbar.Js」
twitter facebook hatena google pocket システムなどでよく使うことがあるツールバーを、jQueryプラグインを使って簡単に導入しましょう。 Toolbar.js - jQuery plugin to create tooltip style toobarsは、クリックすると表示させられるツールチップタイプのツールバーが作れます。 sponsors 使用方法 Toolbar.js - jQuery plugin to create tooltip style toobarsからファイルをダウンロード。 <link href="jquery.toolbars.css" rel="stylesheet" /> <link href="bootstrap.icons.css" rel="stylesheet" /> <script type="text/java
RequireJSでTwitter Bootstrap（jQuery）を非同期ローディングしてみる | DevelopersIO
こんにちは、すどーです。 RequireJSでjQueryやjQueryプラグインの非同期ローディングを試してみました。 最近は大規模な構成になると、「ちぢめる、まとめる、かためる（minify, combine, compress）」のが主流のようです。 ですが小中規模な構成や、依存関係にあるフレームワークなども多くあるので、簡単な使い方だけでも覚えておくと便利かと思います。 RequireJS： http://requirejs.org/ RequireJS API： http://requirejs.org/docs/api.html RequireJSの主な特徴 モジュール化（AMD APIをサポート） 非同期ローディング OPTIMIZERによる最適化 1. モジュール化（AMD APIをサポート） AMD(Asynchronous Module Definition)はComm
jQuery 1.9 に更新する際に注意すべき変更点の自分なりのまとめ | 私的なjQuery他
jQuery Core 1.9 Upgrade Guide | jQuery の「Changes of Note in jQuery 1.9」を読んで、 自分なりにまとめました。 誤訳して間違ったことをまとめてたり、 最新の情報でないかもしれないので 読まれる際はご注意下さい。 （※ページをそのまま訳したわけではないと、思います） jQuery 1.9 では API の削除や 挙動の変更を行っています。 この記事は、前のバージョンから更新した時、 既存のコードに影響がでそうな変更を 並べたものになります。 変更点を全部網羅しているわけではありません。 箇条書きにすると以下のような感じ： 削除された機能 .toggle(function, function) の用法 jQuery.browser() .live()と.die() jQuery.sub() document 以外の要素での A
node.jsを使ってjQueryチックにWebサイトをクローリングする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも僕です。 今日は、サーバサイドJavaScript（node.js）でjQueryチックにDOMを操作して、Webサイトをクローリングする方法についてまとめようと思うよ！ 要は、既存のWebサイトから必要な情報を収集してきて、データベースに突っ込もうということ。 これができると何がうれしいかって、簡単にまとめサイトが作れるんだよね。 クローリングする方法は数々あれど、なにゆえサーバサイドJavaScriptのnode.jsを使ってこれをするかというと、「クローリング対象の部分をjQueryのセレクタで指定できる」のが大きいわけです。 みんな、好きだよね！jQuery！とっても便利だよね！jQuery！ 好みにもよるかと思うが、JavaScriptのようなふにゃふにゃした言語をあえて使う理由は、クライアントサイドプログラミングを組むか、JQueryの恩恵を受けるためといっても過言ではあ
jQueryのDeferredとPromise - tkawachi Blog
JavaScript(というか CoffeeScript)って90年代にブラウザ上で使われていた頃のイメージが拭えず、どうも気持ち悪くて逃げて回ってたんですが、事情があって最近は渋々書いてます。 JavaScripterの皆様にとっては何を今更だとは思いますが jQuery.Deferredを使って楽しい非同期生活を送る方法 を読んで Deferred 便利だな、と思ったので理解したところをメモしておきます。 利用シーン $.get() ってエラーハンドリングできないのか。使えないなー。と思ったとき 複数の AJAX リクエスト(などの非同期処理)を同時に開始して、全部終わったら何かしたいとき。 Deferred object キーになるのは Deferred object です。 状態 Deferred object は状態を持ちます。状態は３つのうちいずれか。 未解決(unresolv
無効なURLです
無効なURLです。 プログラム設定の反映待ちである可能性があります。 しばらく時間をおいて再度アクセスをお試しください。
パララックス制作などで使えるスクロールして特定の位置でアニメーションなどの処理を実行させることが出来るjQueryプラグイン「jquery-peekaboo」「jQuery Waypoints」｜BLACKFLAG
パララックスサイト制作の際などで活用できる ページ内の特定のスクロール位置でアニメーションなど何か処理を実行させることが出来る jQueryプラグインがいろいろ使い道がありそうだったので 自分用のメモ書きとして紹介してみます。 uniba/jquery-peekaboo・GitHub 使い方はとても簡単で ページをスクロールしてアクションを実行させるポイントになる箇所に対して 下記のような記述で処理を実行させます。 ◆SCRIPT $(function(){ $('.point').on('appear',function(){ $(this).css({opacity:'0'}).stop().animate({opacity:'1'},1000); }); }); この記述の場合は、ページをスクロールして 「.point」とクラス付けされた要素の位置に辿り着いたら その要素に対してフェ
ひと工夫でこんなことも！ユニークなjQueryプラグイン5つ集めてみました - Webデザイン初心者向けのあれこれ
どうもこんにちは、僕です。 皆さんも大分お世話になっていると思われるjQuery。 今日はそのjQueryを使ったユニークなプラグインを紹介してみます。 1.wScratchPad http://www.websanova.com/plugins/scratchpad スクラッチ機能を実装できるプラグインです。 スクラッチ部分の色や画像の指定、更にはカーソルにコインを使うことができます。 また、どれくらい削ったのかをパーセント表示してくれる機能も搭載しています。 2.oriDomi http://oridomi.com/ 要素を折り紙のように折りたたむことが出来るプラグインです。 折り数や向き、折り幅などの指定が出来るようです。 3.Cheat Code http://www.trovster.com/lab/plugins/cheat-code/ キーコマンドを実装できるプラグインです。
WEBサイト制作に使いやすいフォトギャラリーのjQueryプラグインまとめ「15 jQuery Plugins To Create Awesome Photo Galleries」
WEBサイト制作に使いやすいフォトギャラリーのjQueryプラグインまとめ「15 jQuery Plugins To Create Awesome Photo Galleries」 サイト内で画像や動画を公開する方も多く、より高度な動きのあるサイト制作を求められるようになっています。そんな中今回紹介するのが、WEBサイト制作に使いやすいフォトギャラリーのjQueryプラグインをまとめた「15 jQuery Plugins To Create Awesome Photo Galleries」です。 表示のアニメーションをはじめ、さまざまな機能が魅力的なjQueryプラグインが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。 詳しくは以下 ■DIGICRAFTS Thumbnail Gallery 写真のサムネイル表示はもちろん、切り替わりの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryベースの軽量UIライブラリ・w2ui - かちびと.net
