jQuery.when() で、複数の非同期処理を扱う ｜ Tips Note by TAM
jQuery で AJAXするのに Deferred が便利ですよねーという話。 今回は jQuery.when() についてです。 複数の非同期処理を扱うとき たとえば、 JSONデータA を AJAX で取得したい 別のデータB も AJAX で取得したい 両方の取得が終わったら、続く処理をしたい こういう処理を Deferred の仕組みを使わないで書くと、こんな感じになりますでしょうか。 var data_a, data_b; $.getJSON('a.json', function (data_a) { $.getJSON('b.json', function (data_b) { // 両方終わった時の処理 console.log(data_a, data_b); }); }); Deferred を使わないと、コールバックの中に次のコールバックを書いて…… といった書き方です
SVGアニメーションでマスクした写真をぷるぷる動かす方法 ｜ Tips Note by TAM
ちょっと凝った動きをつけたいけど、Canvasでガリガリ書くのはちょっと・・ という方に是非お勧めしたいのがSVGアニメーション！ SVGはXMLをベースとした2次元ベクターイメージなので拡大縮小が自由というのも魅力の一つ。 このTipsNoteのロゴで弊社のキャラクターTAMくんが動いているのもSVGアニメーションによるものです。 今回はそんなSVGで、マスクした画像のフチをぷるぷる動かすサンプルを作ってみたいと思います。 完成デモ ＞＞ 素材を作成 まずはIllustratorでぐねぐねした枠(A)を書きます。 続いて(A)を複製し、パスの数は変えずに枠の凹み具合などを変えた(B)を作成します。 これだけでも枠を動かすことは可能ですが、2つだけだと動きが単調になってしまうので 今回は4パターンの異なる枠(A〜D)を用意しました。 用意ができればそれらをSVG形式に保存して準備完了です！
Babel と watchify で ES2016 のビルド環境を作る ｜ Tips Note by TAM
JavaScript の新仕様である、ECMAScript 2016 (以下ES2016) がリリースされました。 ES2015 はもう普通にバリバリ使ってるよという方も多いと思いますが、まだ手を出していない、って人も結構いらっしゃるかと思います。ES2015 などを使ってコードを書きはじめるにあたり、まずはビルド環境を用意するのが最初のハードルかなと思いますので、今回は Babel と browserify, watchify などを使ったビルド方法を紹介します。 ※ なお、今回のサンプルコードは GitHub のこちらにも置いています https://github.com/tam-matsuo/gulp-watchify-es2016 ES2015, ES2016 とは ES2015 は名前のとおり 2015年6月に公開された、JavaScript の言語仕様です。ES5 の次バージョ
YouTube Player APIを使って色々やってみる ｜ Tips Note by TAM
ページに埋め込んだYouTubeをJavaScriptで制御する機会が何度かあったので、 YouTube Player API の使い方をまとめてみます。 今回使用するのは、以下のIFrame API になります。 iframe 組み込みの YouTube Player API リファレンス - YouTube - Google Developers ■目次 基本的な埋め込み JavaScriptでの操作 プレーヤーの状態に応じて処理をする プレーヤーの準備ができてからJavaScriptでの操作を行う パラメータを設定する 基本的な埋め込み まずはYouTubeプレーヤーをページに埋め込んでみます。 1.YouTubeを埋め込む場所を指定 ■HTML <div id="sample"></div> ※id="sample"内にYouTube(iframe)が埋め込まれるのではなく、#sa
Tips Note by TAM ｜ TAM のテクニカルチームがお届けする WEB技術ブログ！
コーディングスタイルに一貫性をもたせことは重要であると広く認識されています。 プロジェクト全体でEnumの使用を禁止する 関数内でのthisを禁止する インデントにはスペースを使う セミコロンは必要でない場合省略する 上…
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
