jquery.cookieでcookieをJSで簡単に使う


cookieをJavaScriptから使うのはやや面倒なところもあるんですが、jquery.cookieを使うと簡単にできます。

carhartl/jquery-cookie · GitHub

JSをダウンロードするか、CDNを使うかして、scriptタグに入れる。もちろんjQuery自体も必要です。

<script src="hogehoge/jquery.cookie.js"></script>

CDNを使う場合はcdnjsが便利かもしれません。

cdnjs – the missing cdn

使い方はごく単純でcookieのセットと値取得は以下の様な感じでできました。

$.cookie("クッキー名", "値");//設定
var data = $.cookie("クッキー名");//値取得

一つ迷ったのはパスの指定でした。以下のようにすればできますが、全部に設定するのは面倒です。

$.cookie("クッキー名", "値", {path:"/"});

サイトの方にしっかりと書いてありますが、以下のようにすればデフォルトのパスが設定できます。

$.cookie.defaults.path = "/";

これでいちいち設定することなく、このドメインの中で同じクッキーを参照するようになります。(通常のデフォルトでは同じディレクトリ?)

昔はJSでやるのが面倒でPHPを介したりしたこともあったんですが、その必要も無さそうです。

Google Web FontsでWebフォントを使う


Google Web Fonts

大変かと思ったけれどかなり簡単に使えるので、綺麗に見えるフォントを使いたいという場合はオススメです。英字フォントは容量も軽いので問題なし。日本語フォントは容量重いのでちょっと厳しいかもしれない。

動作サンプル

例として、QuicksandというWebフォントを使いたければ、CSSファイルに以下のような感じで記述すればOKです。

@import url(http://fonts.googleapis.com/css?family=Quicksand);
body{font-family:'Quicksand', sans-serif;}

実に簡単です。

ただ、フォントが小さいと文字が潰れて読めなくなってしまう場合があります。(普通のフォントではあまり見ない気がする。)

意図したフォントを探すには、Searchから検索するか、Filtersで好みの条件を指定するといろいろ出てきます。フォントの読み込みの方法は、各フォントの「Quick-use」というリンクから見ることができます。

webfonts_search

webfonts_use

注意点として、ブラウザの設定でWebページのフォントを優先するような設定になっていないと、ブラウザ自体の設定が優先されて、Webフォントでの表示がされなくなります。Firefoxで動かない!という事態になったのですが、原因はそれでした。

Fire.appをビルドして使う


Fire.appというHamlとかSassをコンパイルするディレクトリを注視してファイルが更新されたら勝手にコンパイルしてくれるアプリケーションがあります。(似たようなアプリにCodeKitがありますが、Mac Lion以上専用です。)

http://fireapp.handlino.com/

Githubでソースが公開されているのでビルドして使うことができます。

続きを読む Fire.appをビルドして使う

JavaScriptでカスタムイベント


JavaScriptでActionScriptのようにカスタムイベントが使えたらいいなぁと思って調べてみました。AS3のようにカスタムイベントクラスを作って~という方法ではないですが、イベントのtypeを自分で独自に設定することができそうだったので、そちらでやってみました。

IEが問題で、IE9以降ではaddEventListenerが使えるようですが、それ以前はattachEventしか使えません。またfireEventはtargetがdocumentの子ノードとして配置していないとエラーになってしまいました。さらに、attachEventするイベントはIEで定められているものしか使えないようです。

これを何とかしてみたのが以下のものです。

使用方法は中にある通りです。

spfdCustomEvent.addListener("登録したいDOMオブジェクト", "イベント名", function(e){alert("呼びたい処理")});
spfdCustomEvent.dispatch("登録したDOMオブジェクト", "イベント名");

という感じで使用できるはずです。

参考:カスタムイベントとイベントの発火 :: 5509

こちらのサイトさんを参考にさせていただきました。detachEventにも対応させたかったので、1度クロージャにしたんですが、リスナにクロージャを登録して削除するところで失敗したので、別のやり方にしています。

他ライブラリを使えば余裕で実現できるかと思いますが、ライブラリに依存しない形で持っておきたかったのです。