ベータ版ですが、ちょっと面白そうなシンプルなフレームワークがリリースされていたので紹介します。肉球に惹かれたわけではないですよ。 Cool Kitten Cool Kitten -GitHub Cool Kittenはデスクトップ・タブレット・スマートフォンなど、レスポンシブ対応のパララックススクロールのエフェクトを備えたフレームワークです。 スクロールすると、肉球がパララックス!
概念/仕組み Deferred/Promisesは非同期処理を簡単にするための取り決め。 callback hellと呼ばれているような、非同期処理によるコールバックのネストを軽減することができて非常に便利。 慣れれば便利だが、一見どう使えばいいのか分かりづらいので、少し解説を書く。 ここではPromises/Aという仕様を実装したQというライブラリを使うが、jQuery.Deferredなどもほぼ同じである。 まず、Deferred/Promisesは、関数のreturn、try/catchの非同期版である。 www.example.comの内容を取得し、正しく取得できたら中身を表示し、取得できなければエラーを表示する、というプログラムは 同期的なコードでは、 function get() { var req = new XMLHttpRequest(); req.open('GET',
クラスメソッドブログ課外授業1日目 クラスメソッドブログ課外授業が無事!開催されました!当日は、大雨の為心配しましたが、無事開催することができました。今回はJavaSctriptをベースにした勉強会で募集3日から満員になり、結果20人の枠に対し、31名の応募いただきました。JavaScriptの人気の高さが伺えますね。簡単ではありますが、勉強会の様子を共有させていただきます。これを読んで面白そう!と思った方は隔週で開催していくので是非とも参加していただければと思います。 はじめに まずは、私から会場の説明、本日のスケジュール、今後の課外授業の予定をお話しさせていただきました。 スライドのリンクは以下になります。 https://dev.classmethod.jp/slide/blog-lesson1/ クラスメソッド開発ブログ課外授業について熱く語りました! 1時限目:jQueryプラグ
サイトにキーボードショートカットを実装する際に便利なjQueryプラグイン「chaves.js」 2012年07月06日- Standard demo サイトにキーボードショートカットを実装する際に便利なjQueryプラグイン「chaves.js」。 jとかkとかnとかpでアイテムを送れたりする便利なショートカットですが、あらかじめ決められたマークアップをベースに $(elem).chaves(options) と唱えるとすぐに実装でき、カスタマイズなんかも比較的容易に出来るjQueryプラグインです。 以下のようなコードで bingingsにjson形式で関数を指定してあげるとキーボードに応じた処理がfireされるという仕組み 不要な機能もついてきそうですが、とりあえずサクッと実装しちゃいたい場合には使えそうですね 関連エントリ selectボックスを超カッコよくするjQueryプラグイ
Resources for Developers, by DevelopersUnited in love //////////// //////////// //////////// //////////// //////////// //////////// //////////// ++++++ ++++++ ++++++ ++++++ ++++++ ++++++ ++++++{{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} ../../ ../../ ../../ ../../ ../../ ../../ ../../<></><></><></><></><></><></><></><></><></><></><><
先日、Adobeからモバイル向けFlashの開発中止というニュースがありました。 リッチコンテンツの領域で独占していたFlashでさえ、HTML5の標準化の波には逆らえなかったんですね。 来年あたりから、HTML5の利用が一気に加速していく予感がします。 筆者も、最近ではサイト構築の際にHTML5を選択する機会が増えてきました。 HTML5+CSS3+jQuery この組み合わせで、ほとんどのWebアプリケーションの機能を実装することができる時代になってきたと思います。 必要なデータは、クラウドに保存してAPI経由で読み書きできれば良いので、その部分だけサーバーサイドに任せる感じのシンプルな構成になればベストです。 JavaScriptの部分は、別にjQueryじゃなくてもよいのかもしれませんが、プラグインや情報が豊富で、jQueryが使える開発者も多いことから、jQueryを選択しておけ
動画以外を暗転させて動画を見やすくしてくれるjQueryプラグイン「Allofthelights.js」 2012年09月26日- Allofthelights.js, jQuery plugin to turn off the light and enjoy your videos 動画以外を暗転させて動画を見やすくしてくれるjQueryプラグイン「Allofthelights.js」 通常Youtubeの動画などはページ内に貼り付けてそのまま見ますが、ページデザインががやがやしていて見づらいという場合があります。 そんな場合にこのプラグインを入れておくと、動画以外を暗くして動画が見やすくなるというもの。 スイッチで電気を消す、的なイメージ。 動画再生と同時に暗くなるようなものだともっとカッコいいかもしれませんね。 関連エントリ 動画ギャラリー用WordPressプラグイン10個 画像や
よく見かけるページングの処理で、下の方にスクロールすると自動的に次ページを読み込ませる処理をかんたんに実現してくれるjQuery.autopagerが便利でした。jQueryプラグインです。 導入がかんたんで分かりやすく、オプションも必要最低限のものがバッチリ揃っています。例えば、スクロールで下部までいったら自動的に次コンテンツを表示させるか、それともボタンをクリックして読み込むか、読み込み後にコールバックで関数を読み込ませるか、などなど。 jQuery.autopagerの導入方法 まず、jQuery本体とダウンロードしたjQuery.autopagerを読み込んでおきます。 そして、スクロールで自動表示させるなら下記だけでOK。 <script type="text/javascript"> $(function() { $.autopager(); }); </script> <
アニメ映画のようなロゴアニメーションを実現するjQueryアニメーションプラグイン「SuperScrollRama」 2012年05月30日- SUPERSCROLLORAMA アニメ映画のようなロゴアニメーションを実現するjQueryアニメーションプラグイン「SuperScrollRama」。 動きについてはサイトを見ていただくとよく分かります。 マークアップは至って普通の文字列なんですが、1個1個切り離してタイムラインアニメーションしちゃうということをやってます かなり細かいところまでアニメーション制御が可能で、そのままぺたりと使うもよし、動きにこだわってもよしな感じです 関連エントリ faviconをアニメーションさせたりテキストを付与できるjQueryプラグイン「jQuery Favicon」 アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyB
チェックボックスやラジオボタン、 セレクトボックスなどのデザイン を変更可能で、バリデーションも できる送信フォームのフレームワ ーク・Ideal Formsのご紹介です。 以前ご紹介したフォームデザインフレームワーク・Ideal Formsのサイトが無くなっていて、探していたらバリデーション機能が加わっていてLESSにも対応して、githubでホスティングされていました。ついでにレスポンシブWebデザインにも対応してるみたいですね。と言うわけでついでに改めてご紹介です。 言葉だけ日本語化してサンプル作りました。 ただし、日本語にしただけで、日本向けのバリデーションをしてくれる、という訳ではありません。名前や誕生日も欧米文化に沿って正規表現でチェックしてるみたいですので日本向けに変更する必要がありそうです。 細かく解説・・と思ったんですけどGithubで結構詳しく書かれているし、ググれば使
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Wookmark コンテンツをレンガ状に配置するだけのシンプルなスクリプト。 jmpress.js スライドをダイナミックなアニメー
1億総スマホが近づいたこの頃に、JavaScriptのMVCフレームワークに何を使うか? node.jsと使ってみたいウェブアプリのフレームワークの候補を14選んでみました。 MVCフレームワークといっても、純粋なMVCだけではなく、MVVM、MVC2、MVPなど広義のMVCフレームワークを含みます。成熟したフレームワーク backbone.jsのように一定の歴史のあるものや、express.jsのようにnode.jsでのデファクト・スタンダードになっているようなものを含め、今すぐプロダクション環境で使用できる成熟度があると思われるフレームワークをまとめます。 Backbone.js http://documentcloud.github.com/backbone/ 古参のフロントエンド向けMVCフレームワーク。 node.jsに限らず、Rails等のフレームワークでもフロントエンド側の
Latest Version: 1.3 Latest Release Date: December 3, 2011 Original Release Date: March 30, 2011 Compressed: 1.47kb Uncompressed: 4.84kb View GitHub Repository About The Plugin jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element. 2016-11-04 Update This project is no longer being
記事内に広告を含む場合があります。記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。 Dash (Docs & Snippets) カテゴリ: 開発ツール 価格: 無料 Xcodeのリファレンスって、動作が遅くてイライラしませんか? 今日は、そんなイライラを解消してくれるアプリ「Dash」を紹介します。 Macでコードスニペットやクラスリファレンスなどを素早く表示できるアプリです。 Dashのインストール Dash (Docs & Snippets) カテゴリ: 開発ツール 価格: 無料 DashはMac App Storeからインストールできます。 Dashのウィンドウの出し方 option + スペースで、Dashのウィンドウを表示することができます。 もう1回option + スペースを押すと、ウィンドウを閉じることができます。 Xcodeでの
いつぞやの飲み会で、 これだけウェブの技術が進化しているのだから、もっとオシャレなエロサイトがあってもいいんでないかい? << という話になりまして。 だけどどうせ作るんならということで、Rails3 と jQuery を使って結構マジメにつくってみました。 (※大人の事情により、リンクはやむなく削除しました) 当初はエロにオシャレは必要ないのかなーと思ったときもありましたが、いざつくってみると、やっぱり選べるならオシャレなやつの方ががいいよね、という結論に落ち着きました。 今回つくったのは試験的なものなので 90日間限定でしか公開しないつもりですが、日本のエロサイトが今後もっとオシャレに発展していくきっかけになってくれたら嬉しいです。 以下、サイトのコンセプトや使っている技術についてまとめてみます。 **Rails3 と jQuery で真面目にオシャレなエロサイトをつくってみました 1
Dependency-free notification library Features Dependency-free UMD Web Push Notifications with Service Worker support Named queue system Has 11 layouts, 5 notification styles, 5+ themes Custom container (inline notifications) Confirm notifications TTL with timeout option Progress bar indicator for timed notifications Supports css animations, animate.css, mojs, bounce.js, velocity and others 2 close
jQuery 1.7が公開されたので、早速1.6.xからの更新内容をまとめてみました。 jQuery: » jQuery 1.7 Released (リリース記事) Version 1.7 – jQuery API (公式ドキュメント、1.7で変更があったもののみ) 1.7 all tickets – jQuery Core – Bug Tracker (1.7の全チケット) リリース記事の翻訳じゃないです。 主な変更点 個人的に気になったものをピックアップしてみますよ。 既存の .bind()や .live()等に置き換わる .on(), .off()を追加 .bind(), .delegate(), .live()が統合されました。(これらも引き続き使用できます。) →詳細後述します。 toggleと.stop()の連携を改善 toggle系と組み合わせた際におかしくなってしまうのが改
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く