K1Factory Blog

小１時間ほどでしょうか、川根町の桜のトンネルに到着。桜満開！

鯉のぼりも元気におよいでたり・・・

お見事です。

近所に売ってるあつあつの「ちゃたいやき」
たいやきのかわのお茶の苦みとあんこの絶妙なコラボレーション！

そこでうちにあったCSSレイアウトの本で調べると、それに対する対応策みたいなのが載ってました。

例えば・・・
<div id="button">
<h1>ここはボタン</h1>
</div>

上記が基本形として、<div>タグ部分が画像ボタンにしたい場合、スタイルシートは、
#button {
    width:200px;
    height:50px;
    background-image: url(img/button.gif);
    background-repeat: no-repeat;
}

#button h1{
    text-indent:-5000px;
}

と、やってましたが、

<div id="button">
<h1><span></span>ここはボタン</h1>
</div>

と<span>の空タグ？を追加してやり、スタイルシートでは、

#button {
    width:200px;
    height:50px;
    position:relative;
}
#button h1 span {
   width:100%;
    height:100%;
    position: absolute;
    background-image: url(img/button.gif);
    background-repeat: no-repeat;
}

と、こんな風にやるんです。結局<span>タグの背景画像で文字を覆い隠す感じなんです。
だからMacのブラウザでテキストを拡大すると画像のしたから「こんにちは」状態ですが、Winは文字を固定するとブラウザでもいらえないのでま、い〜か！ということになります。

しかし、この方法にも欠点がありました！
それは・・・
ボタンなので、やっぱりリンクを貼るんですが、

<div id="button">
<h1><a xhref="next.html"><span></span>ここはボタン</a></h1>
</div>

スタイルシートは、

#button {
    width:200px;
    height:50px;
    position:relative;
}
#button h1 a{
    width:200px;
    height:50px;
    display:block;
}
#button h1 span {
   width:100%;
    height:100%;
    position: absolute;
    background-image: url(img/button.gif);
    background-repeat: no-repeat;
}


こうやってリンク貼っても、Mac IE5だけリンクしないんですわ。ブラウザの下のステータスバーにはリンク先だけ表示されるんですが・・・とほほですわ。

そこで、いろいろ調べて遂に発見しましたっ！・・・（次回につづく）

肝心のスタイルシートでは、

#button {
    background-image: url(img/button.gif);
    background-repeat: no-repeat;
    width: 200px;
    height: 50px;
   position: relative;
}
#button h1 {
   text-indent: -5000px;
}
#button h1 a {
   display: block;
    width: 200px;
    height: 50px;
}

と、ここまでだと前回のやりかたじゃねえか。ってことになるんですが、
このあとに・・・

#button span {
    display: none;
}

Mac IE5だけのために<span>タグ（前回でWin IE5.0の為に画像をかぶせるためにつかったやつです。 ）を削除してやります。そしてこの後が、肝心要なところで・・・

/*ELSE MacIE5¥*/
#button span {
    background-image: url(img/button.gif);
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    position: absolute;
}
/*ELSE MacIE5*/

として、Mac IE5以外のブラウザのために「#button span」の内容を上書きしてやるんです。
この「/*ELSE MacIE5¥*/〜/*ELSE MacIE5*/」てのが、Mac IE5だと理解できないようにするおまじないです。

つまり、前回紹介した２つのやり方の合わせ技+おまじない で出来ました！

でも、なんで<span>タグで挟んだら出来ちゃったのか？それはまだ分かってません。 このやり方ってCSS ZENっていうXHTML + CSSでどれだけレイアウトできるか研究しているようなサイトのソースを見てて思いつきました。
分かる人は教えて頂戴。

※「/*ELSE MacIE5¥*/〜/*ELSE MacIE5*/」は、スタイルシートの一番最後に入れてるべし。

これまで、このK1ファクトリーでも何度かポッドキャスティングをやってきましたが、MP3への直リンクで、Macなら画面が代わって、QuickTimeの画面が出て来てそっけない感じだったのがやっぱりイマイチだったんで、前々からFlashでMP3を読み込ませたほうが見栄えもええよなぁと思っとりました。でも、イマイチいいしくみが思いつかなくって、ポッドキャスティングするたびにMP3作るのだけでもちょい面倒なのに、MP3ごとにFlash編集するのはもっと面倒。なんかスマートじゃない。

でも、今回ちょっと思いついたので、やってみたらうまく出来ちゃいました。

考え方としては、ポッドキャスティングでブログのエントリーを作成する際に、Flash（事前にアップしてあるSWFファイル）を表示させ、エントリーの際に一緒にアップする音声データ（MP3ファイル）のファイル名をSWFファイルに送信、SWFファイルにMP3を外部ファイルで読み込み、再生させるというものです。

1. MovableTypeのテンプレートを編集する
   
2. MP3プレーヤーをFlashで作成する

今回は１.の「MovableTypeのテンプレートを編集する」をエントリーです。

このしくみで一番の問題は、MP3ファイル名をどう処理するか。ってことだったんですが、
ブログのエントリータイトル名をMP3ファイル名とすることにしました。（「タイトル」より「概要(MTEntryExcerpt)」にしたほうがいいかも。そうすれば好きなタイトル（日本語とか）つけれそう。）
そして、個別のエントリーアーカイブにFlashを表示させることにしました。

ただ、テンプレートを修正してFlashを表示させるのはいいんですが、ポッドキャスト以外のエントリーの際にはFlashを表示させる意味がないので、エントリーのカテゴリが「podcast」かどうか判別し、カテゴリが「podcast」の時だけFlashを表示させられないかな・・・

MovableType標準ではそのような機能はないんですが、MovableTypeには様々なフリーのプラグインがネット上にあります。そのうちの「Compare」というのを利用させていただきました。このプラグインはよくあるIF文を実現してくれるプラグイン。A = Bであれば・・・というもの。それでできたのが以下のかんじ。

<MTIfEqual a="[MTCategoryLabel]" b="podcast">
<div id="flash">
  <h4><a xhref="http://www.k1factory.biz/blog/archives/<$MTEntryTitle$>.mp3">
        <$MTEntryTitle$></a></h4>
</div>
<script language="javascript" xsrc="http://www.k1factory.biz/blog/flashobject.js" type="text/javascript"></script>
<script type="text/javascript">
            var fo = new FlashObject("http://www.k1factory.biz/blog/archives/podcast.swf?podname=<$MTEntryTitle$>", "podcasting", "300", "80", "7", "#ffffff");
        fo.write("flash");
</script>
</MTIfEqual>
 

※赤字が「Compare」によって追加されたMTタグ。カテゴリ名が「podcast」であれば・・・ということ。
※<MTIfEqual>タグの中身は、以前のエントリで紹介したFlash表示方法。MP3ファイルの指定に<$MTEntryTitle$>を使用。緑字部分がFlash（SWFファイル）の指定部分。podcast.swfの後ろに?podname=として変数とその値をSWFファイルに送信している。値はMP3ファイル名つまり<$MTEntryTitle$>（エントリータイトル）。

これで、「MovableTypeのテンプレートを編集する」は完了！次回は、「MP3プレーヤーをFlashで作成する」

FlashでMP3プレーヤーって特に目新しいものでもなく、よくFlashの参考書なんかをみると載ってるかと思います。
それをまねて作ればいいんですが、ちょっと前からFlashのコンポーネントって機能が気になってまして、
折角こんな便利らしい？機能があるのだから使ってラクしようと思ったのですが、これがどっこい分かりにくいんです。
本屋の立ち読みとかで調べてもあんまり載ってないし。載ってても上級者用とか書いてあって・・・
Flashのヘルプでなんとか基本的なことは分かったんですが、Action Scriptでちょっと変えたいと思うと途端にややこしい。
でも、結果的には、凄く簡単に出来ましたわ。

まず、Flashを開いて新規作成。サイズは、横x縦：300x80ピクセルです。

「コンポーネントウインドウ」を開いて、「Media Playback」をステージにドラッグ＆ドロップ。

ステージに配置した「Media Playback」（これってムービークリップなんです）にインスタンス名をつけます。
今回は、「podcast」ってつけました。そしたらそのまま「コンポーネントインスペクタウインドウ」を開きます。


図のように設定してやります。URLの欄はあえて空欄にします。普通に決まったMP3だけ再生する際には、ここにMP3ファイルのパスを入れるんです。

レイヤー「text」を追加して、ダイナミックテキストを適当な場所に配置。変数名を「podname」ってします。つまりここにMovableTypeからエントリーされた時に送信されるんです。

そして、レイヤー「script」を追加。その１フレーム目にフレームスクリプトを入力。

this.podcast.setMedia("http://www.k1factory.biz/blog/archives/" + podname + ".mp3","MP3");

ダイナミックテキストに送信されてきたMP3ファイル名を使って、MP3をインスタンス名「podcast」に読み込みます。 

これで終わり。

後は、これを「podcast.swf」という名前で書き出して（Flash7形式にしました。）http://www.k1factory.biz/blog/archives/にアップロード。

出来てしまえば、結構簡単でしょ。 

そんなことから始まって、いろいろネットでの動画についてサイトで調べていくと、改めて動画のファイルっていろいろあるし、全然統一されてないって のを感じます。もちろん音楽ファイルもいろんな形式あるけど、最近ではMP3がなんとなく基準って感じなんで、Podcastingも流行って来てると思 うんですが、動画に関しては、なんやろね？　強いて上げれば、これからはMPEG4とかになるんでしょうか？

また動画の取扱いはまだまだ敷居が高いのでビデオキャスティングが今のブログみたいになるにはもう少しかかるのかなぁ。

で も、iPodやPSPで動画の持ち運びが出来る様になり、ビデオキャスティング関連のポータルサイトや情報サイトも立ち上がってきて、Google Videoなんかも登場して、 DocomoがiPod携帯を検討してたり、あっという間に動画も身近になるかも・・・とそんなこと考えてたりして。

よくよく話していくと、嫁さんは、僕が何をどう思ってそういう行動をとるのかに関心があるらしい。今まで僕は趣味的な要素が含まれることに関しては、あまり嫁さんは僕に対してそんなには関心がないと思い込んでいた。

嫁さんは僕とは趣味というか、その辺の考え方はほとんど一致しない。人はみな価値観が違うので、僕は僕で、嫁さんは嫁さんでと割り切っていたので、特に僕の好きな音楽（洋楽）について嫁さんが興味どころか、全然わからないのは別にそれでいいんじゃないと思い、ハナからそういうことに関しては話さないでいた。っていうか、話しても仕方がないことだと思っていた。しかし、僕がどういうことに関心があって興味を持っているのか、ということについては多いに関心があるみたいなのです。そして、僕自身、実はいろいろ興味あることを共有したがってるということに改めて気づきました。

でも僕は嫁さんが今、どんなことに興味があるかってことに、結構無頓着だったかもしれん・・・