最近のJavaScript開発まとめ
こんにちは、中川です。 ここ1・2年ですが、私の担当するプロジェクトでは、 PHPよりもJavaScriptの開発が多い状態が続いております。 JSのプロジェクトを重ねるにつれ、開発環境も段々と整理されてきましたので、 一旦、最近のJS開発で利用しているライブラリやツールなどをまとめてみました。 フレームワーク ●Backbone.js http://backbonejs.org/ JavaScriptのMVCフレームワーク。 何も使わない(もしくは我流)よりは、これを使って欲しいと思えるフレームワークです。 利用者が多く日本語情報も豊富にあるのと、フレームワーク自体が1500行程度と軽量なため、学習コストを低く抑えることができます。 ●AngularJS http://angularjs.org/ データバインディングを備えたフレームワーク。 高機能なテンプレートや、DIの仕組み、ルーテ
jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita
続編も書きました : 結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 jQuery version1.5で導入されたjQuery.Deferredは、無くてもコードを書けるけど、使えば少しコードが綺麗かつ見通しが良くなる、という機能。 無くても書けるという機能がなかなか使われないというのは世の常なので、jQueryクックブック(O'REILLY)の中でも言及されていない、なんとも寂しい状況だ。 ちょっとここらで一肌脱いでやるか、という趣旨で書き始めたら無駄に長くなった。 とりあえず使ってみたい、という人は下の方の「jQuery.Deferred自体の使い方」までジャンプするとよい。 jQuery.Deferredとはどういう場面で使うものなのか コールバックを渡して非同期処理完了時にそれを呼び出してもらうような場面。 具体的には $.get('hoge',
DevTools Snippets
allcolors.js # (view raw) Print out all colors from computed styles used in elements on the page. Uses styled console.log calls to visualize each color. // allcolors.js // https://github.com/bgrins/devtools-snippets // Print out CSS colors used in elements on the page. (function () { // Should include colors from elements that have a border color but have a zero width? var includeBorderColorsWit
googleアナリティクスで簡単にクリックカウント出来るコード - ファンブログハック
アクセス解析って使ってる人は多いと思うんですけど、クリック数の解析ってしてます？ とあるアクセス解析にクリックカウントしてるやつがあって、割と面白いなと思ったんでgoogle Analyticsでクリックカウントする方法を調べて、実装してみました。 調べてすぐ見つかる方法は、リンクにonClickを入れる方法だったんですが、全てのリンクにこれを書く、ってのは面倒過ぎるな～と思って、jQueryで自動で入れてもらおうと考えていたら、もっと簡単にjQueryで実装してるやつを見つけて、それを参考にしました。 一応外部リンクか、内部リンクか、ってのも判別出来るようにしてみました。 その実装したクリックカウントする為のコードを紹介します。14行程のjavascriptのコードを貼りつけて、少しだけ変更するだけなので、結構簡単なはずです。 クリックカウントしてどうすんの？ えっと、、別にどうする？
jQueryで地震分布図を作成しよう
地理情報を含むデータを表現する場合、地図上で表すことで視覚的にその情報を認知しやすくなります。例えば、車のナビや道路標識などでは、単純に方向や座標だけを示すのではなく、地図上に表現することで、見た人が直感的に認知できるようにしています。本稿では、jQuery対応コントロール集である「Ignite UI 2013 Volume 1」のigMapというコントロールを用いて、地震分布図を作成していきます。 対象読者 JavaScriptの経験者、地図アプリに興味のある方。 必要環境 IDEは特に必要がなく、コード編集用のエディタと動作確認用のブラウザがあれば良いです。 今回使用するigMapコントロールは、jQuery UIウィジェットの一つであり、jQueryライブラリとjQuery UIライブラリに依存します。そのため、対応ブラウザについてもjQuery UIに依存します。 プログラム実行時
年表に使える！横軸のタイムラインを簡単に表示できるjQueryプラグイン「jqtimeline」
twitter facebook hatena google pocket 横軸で年表なんかを作ることがあるかもしれません。 そんな時にはjQueryプラグインjqtimelineを使用すると簡単に導入できて良いかもしれません。 sponsors 使用方法 jqtimelineからファイル一式をダウンロード。 <link rel="stylesheet" type="text/css" href="jquery.jqtimeline.css" /> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script src="jquery.jqtimeline.js"></script> <script type="text/javascript"> $(function(){ var ev = [ {id:
Caption Hover Effects - Demo 1
Camera Jacob Cummings Take a look Music Jacob Cummings Take a look Settings Jacob Cummings Take a look Safari Jacob Cummings Take a look Phone Jacob Cummings Take a look Game Center Jacob Cummings Take a look
私的なjQuery他
jQuery 3.4.0, 3.4.1 のリリースノートを読んで、 自分なりにまとめました。 script 要素の追加の際の独自属性のサポートや性能改善、 バグ修正などが含まれています。 箇条書きを含めた簡単なまとめになります。 誤訳による間違いなどもあると思われますので、 その辺はご留意下さい。 続きを読む jQuery 3.3.0, 3.3.1 のリリースノートを読んで、 今さらですけど自分なりにまとめました。 といっても、jQuery 3.3.1 の方はコード自体に変更はありません。 npm や GitHub からインストールする場合には関係ありますが、 CDN から利用している場合は 3.3.0 の方で問題ありません。 class 関係のメソッドで新しい用法が導入された他、 色々な機能が deprecated になりました。 箇条書きを含めた簡単なまとめになります。 誤訳による間違
『JavaScriptの開発効率を高める7つのライブラリ』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。
これからjQueryを始める方へ -入門書の選び方・読み方-
これからjQueryを始める方へ -入門書の選び方・読み方- 先月「Web制作の現場で使うjQueryデザイン入門(以下、ドーナツ本)」の改訂版を出版し、昨年末は「やさしくはじめるWebデザイナーのためのjQueryの学校(以下、jQueryの学校)」の監修をおこなっていたので、ここ半年はずっとjQueryを始める方が、何を求めているか何でつまづいているかを改めて考えなおしておりました。 まず、最初に重要なのはどの入門書を選ぶかということ。 「ドーナツ本」は3万部を売り上げた人気書籍なわけですが、すべてのユーザーにマッチする本ではないと思っています。 この書籍を執筆はじめた当時はjQueryの書籍といえば「jQueryで作る Ajaxアプリケーション」や「実践!Ajaxフレームワーク jQuery」などしかなく、競合書籍として確認しましたが、プログラマー向けの書籍でした。そこで「ドーナツ本
HTML5 × CSS3 × jQueryを真面目に勉強 – #16 レスポンシブWebデザインでテーブルを最適化するベストプラクティス | DevelopersIO
dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。 実際に作ってみた - 下準備 今回は4パターンの表示を紹介します。まずは下準備として簡単なテーブルレイアウトと元となるスタイルを組んでいくとします。 はじめに HTML で適当なテーブルを作ります。 <table class="table table-striped table-responsive"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Ag
jQueryで$(document).readyを複数実行した場合のthisやvarについて - maeharinの日記
はじめに jQueryを使う時は、$(document).ready(handler)やその省略法である$(handler)でdom構築ができてからコードを実行することが多い。（handlerは無名関数などの関数オブジェクト） で、たまに複数のファイルで何度も$(handler)を呼び出すことがあるのだけれど、その際$()の引数に渡しているhandler内のthisやvar宣言について混乱しがちだったので整理しておく。ちなみに検証環境はChrome ver24、jQuery1.9.1。概念はES3を基準にする。 前提 書き方色々 以下の3つは同義（真ん中は推奨されない） $(document).ready(handler) $().ready(handler) //this is not recommended $(handler) http://api.jquery.com/ready/
シンプルで汎用性に優れたレスポンシブ対応のタブコンテンツ -Basic Tabs
jQueryとCSS3アニメーションを使ってシンプルに実装する、レスポンシブ対応のタブコンテンツを紹介します。 BasicTabs - The Simple jQuery/CSS3 Solution Basic Tabsのデモ Basic Tabsの実装 Basic Tabsのデモ タブはレスポンシブ対応で、表示サイズに合わせて最適化されます。 タブの切替はCSS3アニメーションで、左からフェードインで表示されます。このエフェクトの変更は簡単です。 デモページ：幅480pxで表示 Basic Tabsの実装 実装は非常にシンプルなので、カスタマイズも簡単だと思います。 Step 1: HTML HTMLは非常にシンプルで、タブはリスト要素、コンテンツはdiv要素で配置します。 <div id="tabwrap"> <!-- TABS --> <ul id="tabs"> <li class
jQueryを使ったタブメニューの実装サンプルまとめ
**追記** この記事とは直接関係ありませんが、自作のタブプラグインを貼っておきます。 rin316/jquery.tab: jQuery tab plugin. **追記終わり** 仕事でjQueryを使ったタブメニューを作ったので忘れないようにメモ。 それぞれの挙動も比較しやすいように並べてみました。 今日が勉強初投稿の日！ 写真:新川通りで撮った桜。 まずはファイルの用意 下記リンクからダウンロード。 ・jQuery本体…Past Releases内→最新バージョンのMinified ・Download Builder | jQuery UI (このサイトで使っているui.tabs.zip) head内にリンクを張る ダウンロードしたファイルに対して、head内にリンクを張ります。 [html] [/html] さっそく使ってみる 本文にhtmlを追加。 [html] タブ1 タブ2
jQuery 1.9 で変わったところを調べてみる。 | バシャログ。
引越しの準備がままならないminamiです。 jQuery1.9 が正式にリリースされました。すでにベータ版として発表されているjQuery 2.0 はIE6/7/8に対応しないことを謳っているため、これらのブラウザ対応をする場合は1.9 を使っていくことになりますね。 jQuery1.9 で変更があった機能を見ていきたいと思います。 どう変わったの？ jQuery 1.9でアップグレードされた機能は下記ページにまとまっています。 jQuery Core 1.9 Upgrade Guide 主要なところを抜粋してみます。 toggle(function,function,...) の廃止 間違えそうですが、表示/非表示のtoggle()は使えます。 jQuery.browser() の廃止 だいぶ前からなくなるよ、と言われていましたが、とうとう廃止に。jQuery.supportや、Mod
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://mmenu.frebsite.nl/
jqTyping
動作を確認しながらCSS3のkeyframeを使ったアニメーションを作成・「Stylie」 - かちびと.net
flipsnap
http://www.machu.jp/posts/20130211/p01/