regulus8.com

• Mixwit :: media playground
• レトロカセット風Flash MP3プレイヤーでオンラインミックステープが作れる : Mixwit：■ 音楽方丈記 ■

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

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

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

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

忘れそうなので、jQuery Easing Pluginの使い方を書いておく。

• 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のソースを読むと楽しいと思う。

投稿の本文にJavaScriptを埋め込もうとしたら、自動整形されてひどいことになったので、本文の一部分を自動整形しないプラグインを入れてみた。

• 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

渋谷で飲んできた。すげー楽しかったです。

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

友人のウェブサイトのデザイン、テンプレート制作をしました。WordPressを使っています。

http://shihokorovich.com/

Continue reading

script.aculo.usのEffect.Transitionsのサンプルを作ってみた。

scriptaculous_transitiontest.html

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

jQuery Easing Pluginを使って、easingの動きが見られるサンプルを作ってみた。

easingtest.html

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

テーマをwp.Vicuna Ext.に変更。サイドバーのウィジェットに対応してるし使いやすい！

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

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

とりあえずjQueryを使ってみているけど、ほかのも使ってみたい。

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

いっぱいあるなあ。

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