jquery

VelocityとPixiの手抜きアニメーション。こうして花を咲かせましょう

by codechord. 1 Comment

160220

この記事は「[JS/CSS/SVG] Webとアニメーションの様々なありかた」という勉強会用の発表資料です。
アニメーションまわりのプラグインを紹介したものの、すごく駆け足だったので、あらためて、ご紹介します。

なお、ここで紹介するサンプルのデモは、githubにソース置いておきます。
(スライド無いです)

続きを読む »

3つの簡単便利Javascriptテンプレートエンジン。Mustache.js, Handlebars.js, Microtemplating

by codechord. 0 Comments

140bytes @ hhjs

多忙きわまりない2013年初夏でございます。
最近あんまりコードらしいもの書けてなくって、vagrantとかshefとかpjaxとかnodeとか理解するために時間つくりたい、コード書きたい!ってなってます。今回ちょっとajaxまわりのものの実装でjavascriptのテンプレートエンジンに調べる必要あったので、javascriptのテンプレートエンジンに触れてみようかなと。
phpのテンプレートだとsmartyだとか、rubyだとERBとかなんかそういうのですけど、javascriptのテンプレートエンジンについて知らなかったんで。

目次 – Table of Contents

Javascriptのテンプレートエンジンの候補

はじめに申し上げますが、いっぱいあります。ここみるといいです。

癖とかいろいろあって、今回選んだのは3つ(内2つはほとんど似ている)

  1. Microtemplating
    (すごく軽くて、すごく手軽で、すごく早い。作者はjQueryのリードプログラマーだって。はい、すごい。)
  2. Mustache.js
    (Mustacheの書き方を覚えたらたら、いろんな言語でMustache使えますよ。便利ですよっていうやつ。開発者はgithubのcofounder。はい、すごい、すごい。
    ただ、Mustacheだとif文だとかロジックを入れたい場合には非力なため、Mustacheと互換性のあってロジック部分も強化できるhandlebars.jsというものを使う。)

その他候補にあがったのは、

  1. pure.js
    (書き方に癖があるし、雛形となるDOMが生成してある必要があるっぽいので、Ajaxの動的生成には向かないのかな?ということで、今回パス)
  2. underscore.js
    (Ruby使いな人にとってはunderscore.jsでよかったりするのかな。今回は手をだせなかった。)
  3. JsRender
    (簡単そうでjQuery無しで動くけど30kと重い。殆どの場合jQuery導入してるから恩恵がない。ただ、jQueryの本命テンプレートエンジンとして開発されてるっぽいので、jQuery版リリースされたら導入を検討しようかと思ったり。)

(ごく数名の天才エンジニアが提供してくれてるライブラリのおかげで、ほとんどのwebサービスがつくられてるんだなと感じます。)

続きを読む »

photo by: TR4NSLATOR

パララックスでのイベントの考察。scroll / throttle / debounce / touchmove / mousewheel

by codechord. 0 Comments

[追記:2015/05] 2012年12月の投稿なので情報がかなり古いです。iOS7ではスクロールイベントが取りやすくなってます。とはいえ、スマホのパララックスは要注意。

こんにちは。Advent Calendar 2012 軽めのjQuery の17日目を担当します。
http://www.adventar.org/calendars/29

パララックスエフェクトを実装するためのイベントについて少し触れてみたいと思います。

パララックスエフェクトで考えること

パララックスエフェクトのような動きを考える時、いくつかの項目を考慮する必要があるとおもうんですが、例えば

  • イベント発火のタイミング
  • パララックスエフェクトの実装
  • スマホで動作する際の妥協点。
  • 如何に心地よくぬるぬると動かせれるか。

などなど。僕の場合このあたりを考えるんですけど、一番最後の、如何に心地よくぬるぬると動かせれるかが、パララックスのエフェクトを実装するなかでの決め手だと思っています。
実際の所写真などを多用すると、どうしても重くなりますし、いろいろ試行錯誤してみて、ある程度のところで妥協点を見つけるという感じになってしまいますが。

軽めのjQueryということで、イベントの発火のタイミングの一部と、心地よくアニメーションする方法の一部を急いで作ったDemoを見ていただきながら少し考えてみたいと思います。すこし重くなるかもしれません。

ここで使用しているDemoファイルは、githubにも置いておきましたので、ご自由にお使いください。

続きを読む »

WordCamp vancouver 2012へ行ってきた、まとめ

by codechord. 0 Comments

VancouverのBCITで開催されたWordCamp Vancouver 2012に行ってきました。WordCamp東京でもWordCamp大阪でもありませんのであしからず。非力の英語力ながらもレポを残します。

WordCamp Vancouver 2012
http://2012.vancouver.wordcamp.org/

案の定、英語が難しい。
ボイレコ持参し、自宅で聞き直してみても、やっぱり難しい。現地にいるときより難しい。勉強不足だね。

というわけで、まとめます。ボイレコの内容しっかり把握できたら書き直します。
2部屋で行われ、全体の参加者は300人前後ぐらいかなと。

続きを読む »