[B! JQuery] amamakoのブックマーク

jQueryを使わない書き方 ajax, each, trigger, on/off, extend, deferred, animate, css編

昨年くらいから次世代JavaScript（ES2015 & 2016）やReactやAngularJSなどのフレームワークの普及により脱jQueryの動きが見られ始めました。そして2016年はさらに脱jQueryの動きが加速するのではないかと見ています。その最も大きな要因として1月12日に実行されたマイクロソフトによる旧IE（Internet Explorer 8, 9 ,10）のサポート終了が挙げられます。そんな訳でjQueryは便利ですが、特に使う必要もなくなってきているのが現状です。今回紹介するjQueryに頼りがちな処理をJSで書けるようにさえなれば、脱jQueryはすぐにでもできるのではないかと思っています。ぜひ参考にしてください。はじめに脱jQueryに関して以下のような記事が年末に投稿されました。 You-Dont-Need-jQuery – jQueryを使わない書き方教

amamako 2016/03/24

リンク

異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」:phpspot開発日誌

異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 2011年04月07日- Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab 異なる幅・高さの画像も超綺麗に並べられるjQueryプラグイン「Atteeeeention plugin」。 <img>でただ単に画像を並べると、幅、高さの違いから、ページがごちゃごちゃしてしまいますが、このプラグインを使うことでGoogle の画像検索のように綺麗にピッチリ並べられます。普通に並べるとちょっと残念なことに。空白ができちゃいます。プラグインを使うことで、あら綺麗。となります。 Firefox は 2以上、IEは6以上ということで殆どのブラウザに対応。まず、必要な

amamako 2014/01/12

リンク

コールバック……駆逐してやる…この世から…一匹…残らず!! - Qiita

このテキストは JavaScript のコールバック地獄に疲れたひとのためのコールバック駆逐術指南書です。対象読者は JavaScript道初段くらいの人です。このテキストを読むと、以下のそれぞれの手段における非同期処理制御の仕組み、利点および欠点がわかるようになるかもしれません。コールバック地獄 jQuery.Deferred async.js Concurrent.Thread generators co fibers Web Workers (※なぜか『進撃の巨人』の一部ネタバレが含まれるので注意してください) それは『何故人はコールバックするのか』という話でしょうか？非同期処理って面倒ですよね。JavaScriptではいわゆるコールバック地獄というやつにしばしば陥りがちです。たとえば、Ajax でふたつのファイル hoge.txt と piyo.txt を持ってきて、それら

amamako 2014/01/08

リンク

JavaScriptとコールバック地獄 - Yahoo! JAPAN Tech Blog

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。JavaScriptでサンプルコードを書く機会があったので、どんなインターフェースで提供するのが便利なのか考えてみました。よく問題になるコールバックのネスト問題について、一般的な話をまとめてみます。お題突然ですが、次のような処理を行う必要があるとします。「0」を出力する 1秒待つ「1」を出力する 1秒待つ「2」を出力するこれをプログラムで書くとどうなるでしょうか？シェルスクリプトの場合（同期）たとえばシェルスクリプトで素直に書くと、次のようになります。

amamako 2014/01/08

リンク

JSのMVCフレームワークbackbone.jsやってみた

Posted: 2013.08.21 / Category: javascript 最近 JavaScript のMVCフレームワークが増えてきていますが、WordPress にも採用されてちょっと気になっていた backbone.js を使ってみました。ダウンロード Backbone.js を下記URLからダウンロードします。また Backbone.js は Underscore.js, jQuery に依存しますので合わせてダウンロードしましょう。 Backbone.js Underscore.js Backbone.js 1.0.0 Underscore.js 1.5.1 jQuery 1.8.2 を使用します。ダウンロードしたら読み込みます。 html <script src="http://ajax.google apis.com/ajax/libs/jquery/1.8.2

amamako 2013/12/25

リンク

「Backbone.js」と「jQuery Mobile」を組み合わせてネイティブっぽいWebアプリを作ってみよう！～ ①環境構築＆サーバ側の実装編～ - Tech-Sketch

HTML5の普及によりWebアプリは急速に進化しています。しかし、Webアプリを作成する際のデファクトスタンダードは存在していないのが現状です。そこで、比較的導入実績の多いJavaScriptフレームワークである「Backbone.js」と「jQuery Mobile」を用いてネイティブに近いWebアプリを作成してみました。今回から4回に分けて上記手法を用いたWebアプリの作成方法についてご紹介します。本連載ではサーバの実装からクライアントの実装までWebアプリを作成するために必要なことをひととおり解説します。まず、初回である今回は環境構築とサーバ側の実装を見ていきたいと思います。はじめに「スマートフォンやタブレット用のWebアプリを作りたい！！...でも、なにで作ればいいのかわからない。。」こんなこと思ったことありませんか？最近は、HTML5 + JavaScript +

amamako 2013/12/25

リンク

【流れるテロップのような表現ができるjQueryプラグイン「liScroll 」と「JQUERY NEWS TICKER」】｜今村だけがよくわかるブログ

【流れるテロップのような表現ができるjQueryプラグイン「liScroll 」と「JQUERY NEWS TICKER」】テレビの下とかに流れる、テロップのような表現をwebサイトにも設置することができます。「liScroll 」サンプルはこちらタブの「Result」で動作を確認ください配布元はこちらhttp://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html もう１つ知ってるプラグインがありますんで、ご紹介します。「JQUERY NEWS TICKER」サンプルはこちらタブの「Result」で動作を確認ください配布元はこちらhttp://www.jquerynewsticker.com/ どちらもかっこいいですよね～。シーンによって使い分け

amamako 2013/12/23

リンク

PHPとjQueryの組み合わせでajaxなPOSTをMySQLに格納してみた

こんにちはかねしろ@pinkrootです。昨日は久しぶりにPHPでのコーディングを行いました。取り組んだのはPHPとjQueryを組み合わせて、あるボタンが押されたときにajaxなPOSTを飛ばして、その飛んでいったパラメータをMySQLに格納する、という文字での説明が難しい処理です(笑) イメージとしては、ボタンを押しても画面がリロード(更新)されず、処理の裏側でDBへのデータ格納を行なっている、という感じ。備忘録的にやり方をまとめます。 HowTo 自分で作成するファイルは以下の3つ。ユーザが閲覧してボタンを押す画面(index.html) ボタンが押されたら呼び出されるjavascriptファイル(post.js) バックボーンで動作し、MySQLでデータを格納するPHPファイル(post.php) 上記ファイルの他に、ajaxを使うためにjQueryのファイルが必要となり

amamako 2013/12/19

リンク

Headroom.js - UI/UX向上。上にスクロールすると表示されるヘッダーバー MOONGIFT

ヘッダーによって表示領域が狭まってしまうのを嫌う方にお勧めです。最近のWebデザインではヘッダー部分を画面上部に常に表示するのが一般的になってきています。いつでもヘッダーにアクセスできて便利な反面、そのために表示領域が限られてしまうという点においてちょっとした不便さを感じます。そこでiPhoneにおいては最近はヘッダーやフッターを普段は隠しておいて、上にスクロールしようとしたタイミングで表示させるというスタイルを導入しています。同様の仕組みをWebブラウザでも実現するのがHeadroom.jsです。実際に使ってみます。まずはトップを表示した瞬間は以下のように表示されます。表示直後。このままスクロールするとヘッダーは自然と上に流れていきます。そして上にスクロールするとヘッダーがするするっと出てきます。画像だと分かりづらいと思うので動画でご覧ください。使い方は幾つかあり、単独は