KADOYAN.com

Interface elements for jQuery - About Interface

interface.jsとjQueryを使うと、ページ内リンクのスムーズスクロールが簡単に実現できます。

$(document).ready(function() {
 $("body").ScrollToAnchors(800);
});

()の中の数字はスピードです。
色々試してみると面白い。イージングもしてくれます。

とりあえず、これを書いておけばページ内アンカーのリンクは自動的にスムーズスクロールされるんだけど…MacのSafariでは、上方向のスクロールをしてくれません。普通に飛んじゃいます。
バグですかなぁ。

あと、もしJavaScriptであとからページ内に動的にページ内リンクを付け加えたりする場合は、このスクリプトを実行する前につけておかないと、その部分だけスクロールしてくれなくなりますのでご注意。

打ち合わせのため、東京ミッドタウンに行きました。
オープン直前、国立新美術館に行った帰りに前を通ったっきりだったのですが、はぁやっぱりきれいですねぇ。わりとまとまっている感じがしたので、散漫としたイメージの六本木ヒルズよりは好印象。ヒルズは無駄に歩かされ過ぎな気がします

ガレリアというショップゾーンが、なんと11時からだったので、時間がないこともあり見ずに帰りました。
今度落ち着いている時に見に行こう。買わないけど、超高いチョコレートとか。

写真は、W52SAの「ぱぱっとパノラマ」で撮った写真。
撮るのが結構難しいので、マジな写真は撮れませんが、ホビーとしてはなかなか。

冨カン-青い提案箱

その昔、冨田和音株式会社という会社…ではなく、ラジオ番組がありました。
Wikipediaによると、1989年10月～1994年3月までの4年半にわたり放送されたとのこと。自分がラジオに最もハマっていた高校時代、平日夜のほとんどをこの番組とともに過ごしていました。（しかし、伊集院時代を知らないので、そのあとに聞き始めたらしい…）

一度、冨カンの企画で、今は亡き本田美奈子さん主演のミュージカル「ミスサイゴン」を見に行く旅行に参加しました。
当時買ったオペラグラス、サントラCD、記念冊子、プレゼントで貰った冨カンボールペン、まだ持っています。社長のサインはどこいったかなぁ。

あと、これまた一度、戸井康成本部ではがきを読まれたことがあります。
あれは嬉しかった！
ネタはよく覚えているけど、ここでは書けない…。
ラジオで読まれたのは今までの人生で3回。一度めは戸井康成本部、あと２回は、日本最高のラジオ番組「つボイノリオのきけばきくほど」で。大学生の時に1回、社会人になってから1回。

せいぜいポケベルがあるかないかという当時の中高生は、けっこうラジオ依存が高かったのではないでしょうか。広く同世代の意見をリアルタイムに近い形で聞ける最もお手軽なメディアでした。
一部パソコン通信をしていた人たちはいたと思いますが、もちろん、一般にはネット環境などありません。（そういえば、NAMOSという情報端末がありましたね。見たことはありますが、ついに使うことはありませんでした）

例えば、校則の是非などについて熱い議論があったりしましたね。
さすがに高校生とは接触がないのではっきりとは分かりませんが、最近は学校でも校則の是非について生徒会主導の全校集会とかはないんでしょうね。
中学だったか高校だったか、一度そういう集会があったのを記憶しています。

いまではすっかりマイノリティになってしまったラジオですが、やっぱりラジオの微妙な距離感が大好きです。
それも、地方局のラジオ。東京のラジオはまったく面白くありません（テレビもですが）。
なんででしょうね、東京の放送メディアのつまらなさは。地に足がついていないというか、浮世離れしているというか、ウカレポンチというか。
東京のタレントが名古屋の放送局に来て番組を持っていたりする場合でも、同じようなつまらなさがあります。どんなに弁舌が立っても、地元のタレントにはかなわない。
それはやはり、ラジオの持つ「距離感」のせいなのかもしれません。

とまぁ、あれからもう10年以上経ってしまったんだなぁ、早いなぁ、と懐かしんでしまいました。
十数年、あっという間です。ホントに…。

Fireworks。
マスクの下のオブジェクトを選択したいとき、マンドクセと思いながらいちいちグループ解除してマスクを避難させて選択してたんですが…まさか、ダイレクト選択ツールで、SHIFTキーをおしながらであればマスクをかけたままパーツを選択ができるとは！

いや〜、知りませんでした。大発見。

ティーンのNo.1雑誌：セブンティーン/SEVENTEEN/s-woman.net/集英社

セブンティーンを読んでいると、女の子の名前の後ろに「©」がついている。

こいつら揃いも揃って名前にコピーライトとはおめでテェなと思っていたらなんと、「ちゃん」という意味だということを聞きました。
へぇぇぇぇぇ。

ということを忘れないようにメモ。

さすが17。
でも作ってるのはオトナなんだよね。中身はとてもまじめに作られてると思いました。いい雑誌ですよ、コレ。

StrictなHTMLを目指す場合、リンクのtarget指定はあまり使いたくありません。
そこで、異論はあると思いますが、外部リンクの場合はすべて新しいウインドウで開くようにするスクリプトを作ってみました。なんだかちょっと無理矢理な感じがします…もうちょっとスマートなやり方がありそうなもんですが…。
ちなみに、ウチのサイトに実装してみました。チョットしたお試しです。

スクリプトのbaseUrlのところに、サイトルートのURIをいれてください。
（ホントは、baseタグを参照するといいんでしょうけど、ない場合がほとんどなので…）
http://から始まり、かつbaseUrlに入れたURLから始まらないリンクはすべてポップアップするようになります。

ポップアップブロックされてる場合はどうなるんだろう？

追記

またEmotional Webを参考にさせていただいて修正しました。

一つめの"a[@href^=http//]"は、「hrefという属性の値がhttp://からはじまるaタグ」と言う意味になります。
詳しくは、Supported, but differentを参照。

E[@foo^=bar] an E element whose "foo" attribute value begins exactly with the string "bar"

そして、そのあとに続くnot以降は、上記の条件を満たしたaタグの中から更に「href属性が変数baseUrlの中身のテキストからはじまるもの以外」と言う条件に当てはまるものを選び出す書き方です。
詳しくは、not( el )参照。

Removes the specified Element from the set of matched elements. This method is used to remove a single Element from a jQuery object.

つまり、両方合わせて「http://から始まり、なおかつ自分トコのURLではないリンク」という条件を作っているわけです。

スクリプト

$(document).ready(function() {
 var baseUrl = "http://www.kadoyan.com/";
 //
 $("a[@href^=http://]").not("[@href^="+baseUrl+"]").click(function() {
   window.open($(this).attr("href"));
   return false;
 });
});

概要

表を組む時に、見やすさを保つため隔行で色を変えたりすることがあります。
手動でやった場合、作業そのものが時間の無駄だし、ツールを使っても一々メンテナンスが大変です。

そこで、それをjQueryを使って自動化するスクリプトを作ってみました。
色を変えたいテーブルにclass="changeTr"と書けば、その表の行を一個飛ばしで色を変えます（正確にはclass="changeTrBg"をつけていく）。

trの中にあるのがtdであろうがthであろうが、ただ単にclass="changeTrBg"をtrにつけていくだけなので、CSSはちゃんと考えて書かないと予想外の表示になってしまうかもしません。

次のサンプルは、二つめの表以外にclassをつけてあります。

いきなり追記

なんだか無駄なことをやっていた（各々のテーブルに含まれるtrの数を勘定して、偶数番めかどうかをチェックして、偶数ならclassを付与する）みたいで、更に簡単に「奇数」「偶数」番目を指定する方法があることを知りました。

Custom Selectorにある「:odd」「:even」というのがそうです。他にも色々便利そうなのがありますね。
ラクをするためにjQueryを使っているので、徹底的に楽しなきゃ…出来ないと思ってることも、ちゃんとドキュメントを読めばラクにできる方法があるかも？

Emotional Webを参考にさせてもらいました。

ただ、短い方だと、下のサンプルのような奇数行のテーブルが列んだ場合、class="changeTr"のついたテーブルをひとまとめにしてtrを勘定するのか、奇数行のテーブルが続くと、色が変わる行がずれていきます（最初のテーブルはthの次の行が色代わり、次のテーブルはthの次の行の色変わらず…の繰り返しになる）。
これを:evenを使ってうまく回避する方法はないものでしょうか。

以下のサンプルは、冗長な方を使っています。

スクリプト

//短い方
$(document).ready(function() {
 $(".changeTr tr:even").addClass("changeTrBg");
});

//長い方
$(document).ready(function() {
 $(".changeTr").each(function() {
  trs = $(this).children();
  $(trs).find("tr:even").addClass("changeTrBg");
 });
});

サンプルCSS

table {
 border-top: 1px solid #ccc;
 border-right: 1px solid #999;
 border-collapse: collapse;
}
td,
th {
 border-left: 1px solid #666;
 border-bottom: 1px solid #333;
 margin: 0;
 padding: 2px 4px;
}
th {
 background-color: #333;
 color: #fff;
 text-align: center;
}
td {
 text-align: right;
}
tr.changeTrBg td {
 background-color: #ddd;
}

Interface elements for jQuery - About Interface

コイツを使うと、ビジュアル的な処理を簡単に実現できます。
＃でも、Safariだと少し不安定なような。大丈夫かな。

エフェクト全部を詰め込むと結構なファイルサイズになるようですが、必要な機能だけを選んでダウンロードもできるようです。

今度はこれで遊んでみよう

概要

前のよりもう少し実用的なサンプルです。

サンプルの構造は次のようになっています。

タブのブロック全体がclass="tab"、タブそのものになるリスト（ul）にはclass="tablist"、デフォルトで選択されているタブ（li）にはclass="tabDefault"をつけています。
tabDefault自体は目印になっているだけなので、実際に選ばれたタブのスタイルを決めているクラスはtabChoosedです。
あとは、タブの内容になるブロックに任意のIDをつけ、対応するタブ（li）内のラベルからページ内リンクさせています。

というわけで、こちらもJavaScriptが使えない場合には、ページ内リンクとして機能するようになっています。まじめなあなたも安心？

スクリプト

$(document).ready(function() {
 //初期化
 $(".tab/div").hide();
 var tabDefault = $(".tabDefault").attr("href").split("#");
 $(".tabDefault").parent().addClass("tabChoosed");
 $("#"+tabDefault[tabDefault.length-1]).show();
 //
 $(".tablist/li/a").click(function() {
  splitID = $(this).attr("href").split("#");
  targetID = "#"+splitID[splitID.length-1];
  $(".tab/div").hide();
  $(".tablist/li").removeClass();
  $(this).parent().addClass("tabChoosed");
  $(targetID).show();
  return false;
 });
});

サンプルCSS

.tablist,
.tablist li {
 margin: 0;
 padding: 1px 0;/*padding-topはWin IEバグ対策*/
}
.tablist li {
 float: left;
 margin-right: 2px;
 padding: 1px 4px;
 list-style: none;
 font-weight: normal;
 background: #eee;
 border: 1px solid #999;
}
.tablist li.tabChoosed {
 font-weight: bold;
 background: #fff;
 border-bottom: 0;
}
.tab #tab1,
.tab #tab2,
.tab #tab3 {
 clear: both;
 padding: 2px 5px;
 background: #fff;
 border: 1px solid #999;
}
/*clearfix*/
.tab:after {
 content: ".";
 display: block;
 height: 0;
 visibility: hidden;
 clear: both;
}
* html .tab:after {
 zoom: 1;
}

2007年6月17日追記：ちゃんとしたのもできました。新しい方をご覧ください。

概要

簡単な、タブ切り替えのテストです。

構造は、次のソースを参照。

タブになる部分をclass="tab"を囲い、その中にclass="tablist"のulを作ります。
各リストはタブの見出しになります。
その下に、任意のIDでブロックを作ります。これが、タブで切り替えられる表示の中身です。
最初に出しておきたいブロックには、class="tabDefault"をつけておきます。
最後に、見出しのラベルから、表示したいブロックのIDをつかってアンカーリンクを張ってください。

JavaScriptが効かない時は、ページ内リンクになりますので、構造的におかしいことはないと思います。

とりあえずは動きのテスト。実用的なのはまたあとで作ってみよう。

スクリプト

$(document).ready(function() {
  $(".tab > div").hide();
  $(".tabDefault").show();
  //
  var tabIndex = $(".tab > div");
  var tabNum = $(tabIndex).length-1;
  //
  $(".tablist > li > a").click(function() {
    var targetID = $(this).attr("href");
    for (i=0; i<=tabNum; i++) {
      $(tabIndex[i]).hide();
      }
    $(targetID).show();
    return false;
  });
});

サンプルCSS

ul.tablist,
ul.tablist li {
    margin: 0;
    padding: 0;
}
ul.tablist li {
    border: 1px solid #999;
    float: left;
    margin-right: 2px;
    padding: 1px 4px;
    list-style: none;
}
.tab div {
    clear: both;
    border: 1px solid #999;
}
.tab:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
  * html .tab:after {
    zoom: 1;
}

MacProを買いました。

今までG5には、DELL 2407FPというWUXGA液晶ディスプレイと、昔買ったMitsubishiの17インチ液晶をつないでいました。
今回ディスプレイの再編を行って、17インチの液晶には一旦引退していただき、PCにつけていたDELL 2001FPをMacに戻し、DELL 2407WFPとのデュアル環境にしました。

PCの本体は引退です。さようなら、お疲れさまでした。
…正直、ファンがうるさ過ぎて、電源をいれるのが苦痛でした。
Parallelsのおかげで、あの騒音から解放されます！

2407WFPについて、基本的には不満がなかったものの（大きさが最大のメリットだし）、いくつか気になっていた点はありました。元々、いろいろとトラブルのあった機種でもありましたので。

• やっぱり縦方向のグラデーションでマッハバンドが出る
• ちょっとぎらついているような…

というわけで、2001FPと比較してみたのですが、やっぱりギラつきがあったようです。

2407WFPで濃い背景に明るい文字が載っているサイトを見ていると、目を離した時に非常に目がチカチカしていました。
「認めたくないものだな、年齢ゆえの視力低下というものを…。」
などと思ってガッカリしていたんですが、2001FPに戻したら全然そんなことがない。

やっぱり、安いには安いなりの理由があるもんですね。

ひとまず、メインのディスプレイを2001FPにして、作業していくことにしました。
まー1600×1200もあれば十分です。
パレットはざーっと2407WFPに列べておけば、特に不便は感じません。CS3シリーズは、パレットの使い方もうまくなってますしね。
また、Parallelsで複数のOSが動いている時に、それらはやはり広い画面に列べておいて、作業に専念する方が効率的なようにも思います。

マシンパワーも含めて、とても快適になりました。仕事するゾー！

Twitter Podのショートカットキー乗っ取り問題に耐えられなくなったので、Twitterrificに乗り変えました。

ちょっと表示が冗長気味な気もするけど、半透明でフローティングウィンドウなところがMacっぽい。

定期的に更新をとってくる、投稿ができる、という機能さえあればいいわけだから、こっちの方がいいかもしれないな。
ウィンドウも目立たないし。

WiiインターネットチャンネルでYoutubeを見るページを実験的に作ってみました。
他にも色々サービスはあるので今更ですけど…

jQueryでYoutube APIから来たデータを処理して展開しています。

Wiiのインターフェース用JavaScriptもできたみたいなので、いずれは十字キーとかのコントローラで操作できるようにしてみよう。