DOMNodeInserted DOMNodeRemovedを使って、divとかformとかに子要素が追加されるとか、中身の一部が消されるときにイベントを発火させたい的なお話

とりあえずタイトルが長いけど、何がしたいかっていうとDOMの監視をしたいっていうこと。
divの中にimgが入ったとかpが入ったとか、formの中にinput hiddenが入ったとか消えたとか云々。
そういうときにフォームのサブミットボタンをアクティブにしたいとかっていう感じ。

で、それを実現するにはformだったら各フォームパーツのclickイベントとかの最後に処理を入れてみたりとか、
divだったらsetInterval使ってDOMの中身を監視するとかどうとか。

けどどっちもぶっちゃけ処理が多くなればなるほど面倒なことになってしまう。
特にフォーム関連なんてパーツが増えるたびに書かないといけないとか面倒ではある。

ってことでDOMNodeInsertedやDOMNodeRemovedっていうイベントを使ってその処理を書きましょう的な。

$(window).resize()は使わず、window.matchMediaを使って、jsでのメディアクエリー的な事をしてみよう的なお話

cssだとメディアクエリーを使うことで、デバイス毎にcssを分離出来るから便利だったり。
けどjsにはそんな都合がよいものはないわけで、じゃあどうするかって考えると、
$(window).width()で条件分岐してあげるって考えるけど、
画面サイズが変わった場合って考えると$(window).resize()を使う事になるんだけど、
resizeはwindowサイズが変わるたびにイベント発火するし、
そもそもwindowsサイズが変わらなかったら発火できないからイベントを付与する前に発火を一度しないといけない。

まぁそこら辺考えると面倒だし、そもそも640pxみたいに指定した大きさで発火してほしいんだけど、
それに対応するにはwindow.matchMedia()を使うと対応する事が出来る。
ということで今日はそのwindow.matchMedia()の使い方についてをば。

THE FASHIONHACK IN TOKYOに、エンジニアとして参加してきて賞が取れた的なお話

六本木のGoogle Japanオフィスで行われた「THE FASHIONHACK IN TOKYO」に参加してきた。
FASHIONHACKは海外で2013年から行われていて、日本初上陸みたいな感じ。
ファッションに関するハッカソンが日本で初めてってことで中々注目されていたり。
主催はハースト婦人画報社とiQONを運営しているVASILY。
自分の中で今回は二回目のハッカソンということで、
初めてのハッカソンにあたる「Music Hack Day Tokyo 2014」とはこれまた違った感じで中々面白かった。

ちなみに自分たちのチームが作った「bonjour」はこちらから。

ということで今日はそのお話をば。

jquery.cookie.jsを用いてjsonオブジェクト入れて疑似動的な処理的なお話

何回かブログでも書いたことあるけど、jquery.cookie.jsは中々便利なもの。
cookieを扱うにはサーバーサイドで付加するやり方と、js使って付加するっていう2種類があるけど、
js使って付加する方は何かと面倒な事を書かないといけなかったり。

けどまぁjquery.cookie.jsを使うと楽に出来ますよ的な感じだったりする。
で、その中にjsonとか格納しておくとjsで操作するときにすごく便利で、
動的っぽいような感じのものというか、色んなことが出来る感じ。

ただそこで面倒なことになってくるのがjsonの扱い。
jsonというかJSONを扱えないブラウザっていうのがいくつかあって、
〜Android2.3と〜IE7までは使えない。

ということで今回はJSONが使えないブラウザでもjsonオブジェクト作って、
jquery.cookie.jsに入れて疑似動的な処理的なことを使用という感じのお話をば。 jquery.cookie.js $.cookie("aiueo",JSON.stringify(obj),{expires:expire}); Android2.3とかめんどくさそうなものが多くあるので、json2.js使うとか json2.js

ヘッダーとかでサブメニューみたいなポップアップメニューを出したときに、他の部分をクリックして閉じるようにしたいときのお話

今回はタイトルが長いけどそういう感じのお話。
とりあえずポップアップとか出すっていうのは普通にさくっと実装出来るものだけど、
それを閉じるのは×ボタンや、出すためのリンクを再度クリックするといった場合になってしまうことが多い。

サイトのコンセプト的にそれでいいやっていう場合もあるし、
そうじゃないしっていうこともあったりすると思う。
ちなみにポップアップだけじゃなくて、スマホの横に配置するメニューなどの場合もそうしたいよね的な。

すごく抽象的でわかりづらいかもだけど、とりあえず今日はその話をば。

jQueryで弄れない要素たち的なお話(:after、:beforeなど)

最近ではIE8もほとんど無くなって来ているし、
そもそも自分が作ったとかコーディングしたサイトではIEのアクセスが少なかったりもするし、
ってことでHTML5的なものをよく使っている。

その際に便利なのがbackground-imageの重ねがけがあったりするけど、
重ねがけした画像の一番上のレイヤーのものだけ弄るとかって面倒だったりするので、
そういったときに:after要素作ってそこに画像を入れるとかって荒技を使ったりする。

ただまぁjQueryでは弄れない要素がいくつかあるので今回はそのお話をば。

Twitterであの人とあの人をフォローしてる人を探せるSqueezeというWebサービスを作った的なお話

タイトル通りSqueezeというあの人とあの人をTwitterでフォローしてる人を探す事が出来るWebサービスを作った。

例えば@parteepeopleと@getstageをフォローしてる人って誰だろう的な。
ちなみにparteeとgetstageのリンクはこちら。

これからわかる事は株式会社g&h(自分たちがやっている会社)のサービスが好きなんだろうなって感じのこと。
じゃあそういう人たちに対してどうアプローチしていくべきか、
はたまた両方ともフォローしていない人にはどうやってフォローしてもらいアプローチしてもらうべきか、
ということを考える事が出来るためのツールみたいな感じ的な。

こういう視点で検索出来るツールはTwitter上にはないし、
Webアプリとしても存在しないので作ってみた。

まぁ使ってみれば何となくわかると思うし、色んな使い方が出来るツールなので、とりあえずこちらからよかったらどうぞ的な。
Squeeze - あの人とその人をフォローしてるというユーザーを探そう！

ということで若干だけれども解説をば。

file_get_contentsやcURLが使えないから、jsonp使ってクロスドメイン対応的なみたいなお話

サーバーによってはfile_get_contentsを禁止してたり、
cURLが入っていないとかっていうことがあったりする。
別にそれ自体は悪い事じゃないんだけど、表示用とデータベースサーバーをどうしても別にしないといけないことがある。
そのときによく使う方法としては、file_get_contents使うとかcURLとかって感じ。
で、使えないからクロスドメインでどうにか対処しようみたいな。

ってことで今回はクロスドメイン対応させるためのAjaxおよびデータ吐き出し側の書き方をば。

Music Hack Day Tokyo 2014で作ったchaos animalsの技術的な解説的なお話

先日アップしたMusic Hack Day Tokyo 2014に、エンジニアとして参加してきて賞が取れた的なお話で、
自分たちが作った「chaos animals」の技術的な解説をしようかと。
Echo NestとSoundCloudを使ったけど、SendGridやSpotifyなども使いたかったなぁーと思った。
ちなみに技術的にはそんな難しい事はしていなかったりもしたり。

ということで解説は以下から。
ちなみにソースはこちらから(githubに上げるのは面倒なので上げてません)。

Ajaxでツイートを検索して、twitter.widget.jsを使って表示させたい

すごく今更だけど、twitterのwidgetを使ってツイートを埋め込む方法的なお話。
ちなみに単純に埋め込むのではなくてAjaxでデータを取得して表示するみたいな。
ということでシンプルに方法でも。

文字をtext-shadowでChoo Choo Train風にする、アホなjQueryプラグインを作った

タイトル通りのアホなjQueryプラグイン作ってみた。
指定したテキストに対して、text-shadowを生成してChoo Choo Train風にしてくれる感じ。
つらつら書くよりかは使い方書いた方が早いので書いてみる。

ダウンロードはこちらから

jquery.upload.jsを使って画像をアップしたらすぐに確認出来るのを作ったけど、IEでなぜかエラーが発生した問題

webサイトを作っていて画像をアップする際に、その場でプレビューしたいとかそういう場合がある。
で、そのためにjquery.upload.jsを使って出来るようにしていたんだが、
なぜかIEでは画像がアップロードできずエラーが出てしまうといった現象が。

そもそもjquery.upload.jsはIEに対応していないのか？
なんて思ったけど全然そんな事は無く他に要因があるのではないかと思って色々と調べてみた。

bootstrapとjquery.masonry.jsを使って、レンガ状(pinterest風)にサムネイルを並べていく

最近流行りのbootstrapを使うとすごく簡単にレスポンシブルなサイトを作る事が出来る。
特に自分みたいなエンジニア系のweb制作者にとってはbootstrap使う事によってデザインを整えられるし、
何よりも最大12カラムのグリッドシステムがすごく便利。

だけどグリッドシステムを使ってサムネイルを並べたときなどにそれぞれの高さが変わってしまうと不格好になってしまう。
なのでこれを解決するためにmasonryを使ってグリッドシステムをさらに綺麗に表示することにしてみた。

ブラウザの閉じるイベント時に何かしたいのでbeforeunloadを使ってみる

例えばフォーム入力中だとか、
ショートカットを押し間違えたとか、
意図しないタイミングでブラウザ閉じてしまうとか色々とあるわけで。
そういうときってあぁ〜って感じでちょっとがっかりしたりする。

でもGmailみたいに本当に閉じますか？みたいな感じでアラート出してくれると助かるわけで。
というわけで今日はその組み方的なお話。

jquery.hashchange.jsを使ってDOMの状態記録？的なことをする

パララックスサイトとか、スライダーを使うようなサイトを作っている場合、
jsだから戻るボタン押したりとかリロードをした場合、最初に戻るという残念な事が多い。
そういうのって地味にうわぁってなったりするしあまり良くないので、
じゃあそういうのってどうしたらいいのっていうのを解決する方法を書いてみる。

で、解決するために使うのはjquery.hashchange.jsというjQueryライブラリ。

ScrollTween.jsでのscrollTo()の調整

ScrollTween.jsではscrollTo()というメソッドがあり、
これを使うと任意の位置に移動する事が出来る。
けどよくあるぐいーんって移動するタイプではなくて、
ぱっと移動するのでちょっと面白みに欠けてしまうような気がする。

ということでぐいーんって移動するようにさせる為に関数を書いてみた。

jQueryにてfadeIn()、fadeOut()をするときにIE8だと黒いのが出てしまう問題

jQueryでアニメーションする際にはfadeIn()やfadeOut()と組み合わせたりする。
ちなみにfadeIn()やfadeOut()はopacityを変化させているんだけど、
IE7やIE8だとpng画像のopacity値を弄ってしまうと透明部分がぼわっと黒っぽくなってしまう。
もちろんこんな状態は気持ち悪いので直す方法を書いてみた。

jQuery1.9以上はbind・live・delegateをonで書きましょう的な話

すごく今更な話ではあるけれども、
jQuery1.9以上になると、live関数が廃止されたりしてソースの書き換えが必要になる。
そこでよく使われるbind(イベントの付与)の書き方を書いていこうと思う。

パララックスを作るのに便利なScrollTween.js

パララックスサイトを最近作る機会があり、
普通にjsでscrollを取って諸々計算する方法でもいいかなと思ってたんだけど、
メンテナンスとかを考えると面倒だと思ってScrollTween.jsというのを使った。

もちろんパララックス系のライブラリはいくつもあったりはするんだけれども、
自由度が低いというかシーンが限られてるというか…みたいな感じであった。
その点ScrollTween.jsは直感的にいける感じのライブラリで中々良い。
ちなみにダウンロードはこちらから。

マウスオーバー時に画像をきれいに見せる方法(jQuery)

デザインの仕事もしていたりすると、マウスオーバー画像を作るのが面倒だったりする事がある。
そういうときに便利なのが、マウスオーバーした際に画像を半透明にする方法。
特に落ち着いたデザインのサイトだと半透明にするだけですごく見やすい。
ということでjQueryでコードを書いてみた。