こちらで紹介されていた、オンラインでカセットテープ風なMP3プレーヤーがつくれるウェブサービスを使ってみた。音は友人とやってるNooopyのサイトから。

Mixwitのサイトで作ったカセットを聞くこともできる。
http://www.mixwit.com/widgets/bb820d0a618dbc1bbb25a9114498c707

カセットとラベルが何種類からか選べるんだけど、アップロードした画像をラベルやカセット本体に貼ったりもできる。曲はMP3検索エンジンで見つけた曲を追加したりもできるらしいけど、今回はウェブ上にあるMP3ファイルのURLを指定して曲を追加。

こういうプレイヤーの方が聴いてみようって気がおこりそう。

• jQuery: The Write Less, Do More, JavaScript Library
• jQuery Easing Plugin

読み込み

jQuery本体を読み込んでから、Easing Pluginを読み込む。

<script type="text/javascript" src="jquery-1.2.3.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>

イージングの指定

slideUpやfadeOutなどのエフェクトで、プラグインで定義されたイージングを使いたい場合、以下の書き方をする。

$(element).slideUp({
                    duration: 1000,
                    easing: method,
                    complete: callback
});

この書き方についての説明も、なんでこれでOKなのかも、jQueryのサイトのドキュメントに書いてない気がする。いい機会なのでソースを読んでみたけど、これでOKっぽい。

animateと一緒に使う場合は、ドキュメントにある通りにeasingに”easeInCubic”とか指定する。

animate( params, [duration], [easing], [callback] )

{duration: 1000, ... complete: callback}の部分で指定できるオプションについては、ドキュメントのanimate( params, options )のページのoptionの部分で説明されている。

デフォルトのイージング

Easing Pluginを読み込むと、デフォルトのイージングが、swingからeaseOutQuadに変更される。jQueryで定義されていた、swingはjswingという名前に変更され、イージングにswingを指定しても、jQuery.easing.defで指定したイージングが呼ばれるように変更されている。
デフォルトで使われるイージングを変更したい場合は、以下のようにして指定する。

jQuery.easing.def = "easeInElastic";

独自のイージング

プラグインと同じ方法でjQueryのオブジェクトを拡張して、かくかく動くイージングを作ってみた。書き方これでいいんだろうか。

<script src="http://www.regulus8.com/blog/wp-content/uploads/2008/02/js/jquery-1.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  jQuery.extend(jQuery.easing,{
    step: function (x, t, b, c, d) {
      return c*((t=Math.round((t+0.5)/200)*200)/d) + b;
    }
  });
  $("#start").click(function(){
    $("#box").slideToggle({duration: 1000, easing: "step"});
  });
});
</script>
<input id="start" value="start" type="button">
<div id="box" style="width:200px;height:200px;color:white;background:red;">#box</div>

jQueryのパスを間違えていたので直しました。

使ってるプラグインの動作を追いつつ、jQueryのソースを読むと楽しいと思う。

• WordPress › Raw HTML « WordPress Plugins

コードエディタ中で、<!--start_raw--> <!--end_raw-->か[RAW] [/RAW]で囲んだ部分が自動整形されなくなる。ビジュアルエディタは使っていないので、どうなるのか試してない。

<!--start_raw--> <!--end_raw-->のテスト

<!--start_raw-->
<script type="text/javascript">
  document.writeln(new Date());
</script>
<!--end_raw-->

上のコードをこの下に挿入してみる。

[RAW] [/RAW]のテスト

[RAW]
<script type="text/javascript">
  document.writeln(new Date());
</script>
[/RAW]

上のコードをこの下に挿入してみる。

• Grid Designer 2

グリッドを使うときは、紙にラフスケッチをしてカラムの割り方を決めて、GridMaker RebootをつかってPhotoshop上にレイアウトのガイドを作って、そこにパーツを作ってました。

ラフを考えるときにGrid Designer 2を使ったら、分割とか視覚的にわかりやすくていいかも。ラフスケッチ、モックアップ段階で気楽に試して検討できることって重要かと思います。CSSフレームワークも試してみるか。

メモついでに、グリッドレイアウトの紹介記事

• Subtraction: Grid Computing… and Design
• Five simple steps to designing grid systems - Part 1 : Journal : Mark Boulton
• A List Apart: Articles: Setting Type on the Web to a Baseline Grid

使ってみたグリッドレイアウト関連のツール

• Grid Layout
• Grid Calculator
• GridMaker Reboot - Article - andrewingram

いろいろ刺激受けました。
皆さんありがとうございました。

http://shihokorovich.com/

全体像はこんな感じ。

テンプレート作るのおもしろい。

コメントフォーム周りを直したり、サイドバーをウィジェットに対応させたりしないと。

scriptaculous_transitiontest.html

当たり前なのだろうけど、使い方が全然違って戸惑う。
jQuery Easing Pluginのようなイージングが無いことには途中で気づいた。

easingtest.html

これを書くだけで、えらい苦労した… やっぱり書いて動かさないと覚えられないな。

テーマを変えるとだいぶ雰囲気が変わるな。

• Vicuna - WordPress テーマ
• ma38su.sourceforge.jp - wp.Vicuna Ext.

• jQuery: The Write Less, Do More, JavaScript Library

いっぱいあるなあ。

• あるＳＥのつぶやき: Ajaxライブラリまとめ
• Ajax (JavaScript) Library List (Ajaxライブラリ一覧)